var itemDisplay = new Class({

	//implements
	Implements: [Options],

	//origColor: null,
	thumbsSources: new Array(),	//will use this to store thumbnail sources
	midsSources: new Array(),		//will use this to store image sources
	thumbsArray: new Array(),		//will use this to store thumbnail elements
	midsArray: new Array(),		//will use this to store image elements
	widthsArray: new Array(),		//will use this to store image widths
	heightsArray: new Array(),		//will use this to store image heights
	itemNum: null,					//variable to hold current item in list
	pic_opener: null,  				//I'll be using this to hold the image Fx.tween stuff (for re-use and any possible chaining purposes)
	

	//options
	options: {
	transitionTime: 1000, 	//transition time (1 second = 1000) for slide animation
	thumbsBox:null,			//holder for thumbnails
	imgContainer:null,		//outer container of image (to center inside)
	imgclass: null,			//'mid image' element selector  (i.e. '.toggler' )
	thumbclass: null,		//'thumbnail image' element selector  (i.e. '.post_container' )
	items:  null, 				//Array of grouped 'images' elements (mid images and thumbs, usually in a list (li) setup
	spacer: 5					//number of pixels between each thumb
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		
	
		this.options.items.each(function(v, k){
			//v = the element
			//k = the index
			
			//get both image components
			var thumbImage = v.getElement(this.options.thumbclass);
			var midImage = v.getElement(this.options.imgclass);
			
			var imgSize = midImage.getSize();
			var imgW = imgSize.x;
			var imgH = imgSize.y;
			
			//get & insert values into our images/widths/heights arrays
			this.widthsArray.push(imgW);
			this.heightsArray.push(imgH);
			this.midsSources.push(midImage.getProperty('src'));
			this.thumbsSources.push(thumbImage.getProperty('src'));
			
			//remove thumbnail
			var removedImage = thumbImage.dispose();
			
			//move (inject) thumbnail to 'this.options.thumbsBox' element
			var movedThumb =  removedImage.inject(this.options.thumbsBox);
			movedThumb.setStyle('margin-right', this.options.spacer);
			movedThumb.setStyle('margin-bottom', this.options.spacer);
			
			this.thumbsArray.push(movedThumb);
			this.midsArray.push(midImage);
			   
			//setup mid images' styles
			midImage.setStyles({
				'position' : 'absolute',
				'top' : 0,
				'left' : 0,
				'opacity': 0
			});
		   
			midImage.set('tween', {
				duration: this.options.transitionTime,
				transition: 'cubic:out',
				link: 'chain'
			});
			   
			/*
			//create rollover box
			var tempOver = new Element('span', {
			'class': 'img_over',
			'html': ' '
			});
			e.adopt(tempOver);
			
			tempOver.setStyles({
			'opacity':0,
			'background-color': '#ffffff'
			});
			*/
			 
			movedThumb.addEvents({
				'click' : this.changeIt.bindWithEvent(this, k),
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
					this.setStyle('opacity', '.6');
				},
				'mouseleave' : function() {
					this.setStyle('opacity', '1');
				}
			});
		
		 }, this);
	
	},

	//my post-initialization (startup) function
	start: function() {
		
		this.options.thumbsBox.getElement(this.options.thumbclass).fireEvent('click');
		
	},


	changeImage: function(passedID) {
		
		if(this.itemNum != null){
			//code code code		//remove thumb highlight
			this.thumbsArray[this.itemNum].removeClass('active_thumb');
			this.midsArray[this.itemNum].tween('opacity',0);	//hide prev image
		}
		
		if(passedID != this.itemNum){
			this.itemNum = passedID;  //now reset current item's id
			
			var newWidth = this.widthsArray[this.itemNum];
			var newHeight = this.heightsArray[this.itemNum];
			
			var containerSize = this.options.imgContainer.getSize();
			var containerW = containerSize.x;
			var containerH = containerSize.y;
			
			//calculate and center image x position
			var newX = (containerW - newWidth)/2;
			this.midsArray[passedID].setStyle('left', newX);
			
			//var newY = (containerH - newHeight)/2;
			//this.options.imgHolder.setStyle('top', newY);
			
			this.thumbsArray[this.itemNum].addClass('active_thumb');
			
			//this.midsArray[this.itemNum].fade('in');
			this.midsArray[this.itemNum].tween('opacity',1);
		}
	},
	
	//--------------------------------------------------------------------------------------------------------
	//My supplementary functions  (mini-functions/helpers/etc.)
	//--------------------------------------------------------------------------------------------------------
	changeIt: function (e, theIndex) {
		
		if(this.itemNum != theIndex){
			this.changeImage(theIndex);
		}
	
	},
	
	nextPress: function () {
		this.direction = 0;
		this.slideIt();
		
		if(this.options.prevBtn.getStyle('opacity') == 0){
			this.options.prevBtn.setStyle('opacity', .5);	
		}
		
	},
	
	prevPress: function () {
		this.direction = 1;
		this.slideIt();
		
		if(this.options.nextBtn.getStyle('opacity') == 0){
			this.options.nextBtn.setStyle('opacity', .5);	
		}
	}
	
	//------------------------  end supp. functions -----------------------------------------//
	
	

});