var GalleryDisplay = new Class({

	//implements
	Implements: [Options],

	//origColor: null,
	widthsArray: new Array(),		//to store image widths
	heightsArray: new Array(),		//to store image heights
	itemNum: null,					//holds current item in list
	pic_opener: null,  				//holds the image Fx.tween stuff (for re-use and any possible simple chaining purposes)
	activeThumb: null,

	//options
	options: {
	thumbsArray: new Array(),	//thumbnail elements
	midsArray: new Array(),		//image elements
	transitionTime: 1000, 		//transition time (1 second = 1000) for image change
	imgContainer:null			//outer container of image (to center inside)
	},

	//initialization
	initialize: function(options) {		
		//set options
		this.setOptions(options);	
		
		var self = this; 	
		
		self.options.imgContainer.setStyle('overflow', 'hidden');
	
		self.options.midsArray.each(function(el, k){
			//el = the element
			//k = the index/key
			
			//get both image components
			var thumbImage = self.options.thumbsArray[k];
			var midImage = el;
			
			var imgSize = midImage.getSize();
			var imgW = imgSize.x;
			var imgH = imgSize.y;
			
			//get & insert values into our images/widths/heights arrays
			self.widthsArray.push(imgW);
			self.heightsArray.push(imgH);	
			
			   
			//setup mid images' styles
			midImage.setStyles({
				'position' : 'absolute',
				'top' : 0,
				'left' : 0
				//'opacity': 0
			});
			
			midImage.fade('hide');
		   
			midImage.set('tween', {
				duration: self.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'
			});
			*/
			 
			thumbImage.addEvents({
							
				'click' : function(){
					if(k != self.itemNum){
						self.changeImage(k);
					}
				},
				'mouseenter' : function() {
					if(k != self.itemNum){
						this.setStyle('cursor', 'pointer');
						this.setStyle('opacity', '.6');
					}
				},
				'mouseleave' : function() {
					if(k != self.itemNum){
						this.setStyle('opacity', '.999');
					}
				}
			});
		
		 });
	
	},

	//my post-initialization (startup) function
	start: function() {
		
		var self = this;
		
		var initThumb = self.options.thumbsArray[0];
		initThumb.fireEvent('click');
		
	},


	changeImage: function(passedID) {
		
		var self = this;
		
		if(self.itemNum != null){
			//self.options.thumbsArray[self.itemNum].removeClass('active_thumb');
			self.options.thumbsArray[self.itemNum].set('opacity', '1');
			self.options.midsArray[self.itemNum].fade('.0001');
		}
		
		if(passedID != self.itemNum){
			self.itemNum = passedID;  //now reset current item's id
			
			var newWidth = self.widthsArray[self.itemNum];
			var newHeight = self.heightsArray[self.itemNum];
			
			var containerSize = self.options.imgContainer.getSize();
			var containerW = containerSize.x;
			var containerH = containerSize.y;
			
			//calculate and center image x,y positions
			var newX = (containerW - newWidth)/2;
			var newY = (containerH - newHeight)/2;
			self.options.midsArray[passedID].setStyle('left', newX);
			self.options.midsArray[passedID].setStyle('top', newY);
			
			//self.options.thumbsArray[self.itemNum].addClass('active_thumb');
			self.options.thumbsArray[self.itemNum].set('opacity', '.6');
			self.options.midsArray[self.itemNum].fade('.9999');
		}
	},
	
	//--------------------------------------------------------------------------------------------------------
	//My supplementary functions  (mini-functions/helpers/etc.)
	//--------------------------------------------------------------------------------------------------------
	changeIt: function (theIndex) {
		var self = this; 
		if(self.itemNum != theIndex){
			self.changeImage(theIndex);
		}
	
	}
	
	//------------------------  end supp. functions -----------------------------------------//
	
	

});