var ThumbSlider = new Class({

	//implements
	Implements: [Options],
	
	positionsArray: new Array(),	 //array to hold item positions (x), for storing slide-to coordinates
	prevBtn: null,
	nextBtn: null,
	innerBox: null,
	sliderWidth: 0,
	maxX: 0,
	minX: 0,
	curX: 0,
	curPic: null,
	curPos: 0,

	//options
	options: {
	transitionType: 'cubic:out', 	//transition type 
	items:  null, 					//array of items (thumbs)
	stageBox: null,					//stage to contain the slider and thumbs
	spacing: 10,						//spacing between thumbs (on right) (px)
	contentBox: null				//main content box
	},

	//initialization
	initialize: function(options) {
		
		var self = this;  //assign this to a var. for ease of use in functions
		
		
		//set options
		self.setOptions(options);
		
		//hide scrollbars on stage
		self.options.stageBox.setStyle('overflow', 'visible');
		self.options.stageBox.set('tween', {
			duration: 500, 
			transition: 'cubic:out',
			link: 'chain'
		})
		
		//create prev/next buttons
		self.prevBtn = new Element('div', {'id': 'prevBtn'});
		self.nextBtn = new Element('div', {'id': 'nextBtn'});
		
		//default value for initial thumb index position
		self.curPos = 0;
		
		var outerBox = self.options.stageBox.getParent();
		
		var contentBox = outerBox.getParent();
		contentBox.grab(self.prevBtn);
		contentBox.grab(self.nextBtn);
		//self.options.contentBox.grab(self.prevBtn);  //don't know why these aren't working... grrr
		//self.options.contentBox.grab(self.nextBtn);
		
		self.innerBox = new Element('div', {'id': 'innerBox'});
		var innerWidth = self.options.stageBox.getSize().x;
		var innerHeight = self.options.stageBox.getSize().y;
		self.innerBox.setStyles({'width' : innerWidth, 'height' : innerHeight, 'overflow': 'hidden'});
		self.innerBox.grab(self.options.stageBox);
		self.innerBox.inject(outerBox);
		self.maskWidth = innerWidth;
	
		//will hold curent X position of thumb
		var tempX = 0;
		
		var itemCount = self.options.items.length;
		
		self.options.items.each(function(el, key){
			  
			  self.positionsArray.push(-1 * tempX);
			  
			  //get dimensions
			  var elSize = el.getSize();
			  var elWidth = elSize.x;
			  
			  //hide h4 for now
			  var theTitle = el.getElement('h4');
			  theTitle.setStyle('opacity', .0001);
			  
			  el.set({
				    'tween': {
					    'ease': 'cubic:out',
					    'duration' : 300
					}
			  });
			  
			  el.setStyles({
						'position':'absolute', 
						'top':0, 
						'left':tempX,
						'opacity': .6
			  });
			  
			  if(el.getElement('a').hasClass('active')) { 
					self.curPic = key;
					el.setStyle('opacity', 1);
			  }
		  	  
			  //finally, setup the next element's X position
			 tempX += elWidth + self.options.spacing;
			 
			 
			 self.sliderWidth = tempX;
			 
			 el.addEvents({
			  	'mouseenter': function(){
					if(self.curPic != key){
						this.tween('opacity', .999);
					}
				},
				
				'mouseleave': function(){
					if(self.curPic != key){
						this.tween('opacity', .6);
					}
				}
			 });
		 });
		
		self.sliderWidth -= self.options.spacing;
		self.maxX = -1 * (self.sliderWidth - innerWidth);
		self.minX = 0;
		
		
		self.prevBtn.set('opacity', 0);
		if(self.sliderWidth > innerWidth){
			self.nextBtn.set('opacity', 1);	
		} else {
			self.nextBtn.set('opacity', 0);	
		}
	
		self.nextBtn.addEvents({ 
			'click':  function() {
				self.slideNext();
			}
		});
		
		self.prevBtn.addEvents({ 
			'click':  function() {
				self.slidePrev();
			}
		});
		
		self.start();
	},

	//a method that does whatever you want
	start: function() {
		var self = this;
		
		//self.options.curSlide = 0;
		if(self.curPic != null){
			self.gotoSlide(self.curPic);
		} else {
			//self.gotoSlide(0);
		}
		
	},


	slideNext: function(){
		var self = this;
		
		if(self.curX > self.maxX){
			self.prevBtn.set('opacity', 1);
			self.curPos++;
			self.curX = self.positionsArray[self.curPos];
			self.options.stageBox.tween('left', self.curX);
			
		}
		
		if(self.curX <= self.maxX)
		{
			self.nextBtn.set('opacity', 0);
		}
	},
	
	
	slidePrev: function(){
		var self = this;
		
		if(self.curX < self.minX){
			self.nextBtn.set('opacity', 1);
			self.curPos--;
			self.curX =  self.positionsArray[self.curPos];
			self.options.stageBox.tween('left', self.curX);
			
		}
		
		if(self.curX >= self.minX)
		{
			self.prevBtn.set('opacity', 0);
		}
	},
	
	
	gotoSlide: function(id) {
		var self = this;
		
		self.options.stageBox.set('opacity', .0001);
		
		
		if(id > 0) { 
			self.prevBtn.set('opacity', 1); 
		}
		
		self.curX = self.positionsArray[id];
		if(self.curX < self.maxX) { 
			self.curX = self.maxX; 
			self.nextBtn.set('opacity', 0);
		}
		self.curPos = id;
		
		self.options.stageBox.tween('left', self.curX);
		self.options.stageBox.tween('opacity', 1);
	}



	//------------------------  end supp. functions -----------------------------------------//
	
	

});