var HomeSlider = new Class({

	//implements
	Implements: [Options],
			
	timer: null, 				//re-usable timer object
	prevSlide: null,			//will hold reference to the previous slide, if showSlide has been called once
	srcArray: new Array(),		//array to hold image sources during init
	picsArray: new Array(),		//array to hold elements of dynamically created images
	slidesArray: new Array(),	//array to hold elements of dynamicatlly created slides (triple image sets)
	widthsArray: new Array(),	//array to hold imagewidths, used to setup image positioning in slides
	heightsArray: new Array(),	//array to hold heights, not used currently - but storing it anyhow (maybe to allow for future effects, etc.)
	curPic: 0,  				//holds current pic to init/fade in; left = 0, middle = 1, right = 2
	chainIn: new Chain(),		//chain for bringing a slide in
	chainOut: new Chain(),		//chain for removing a slide
	nextBtn: null,				
	prevBtn: null,
	playBtn: null,
	isPaused: false,
	isSliding: false,
	

	//options
	options: {
	slideTimer: 12000,  			//time between slide (triple image) sets
	picDelay: 400,					//delay between each image fade in on a slide
	fadeTime: 1000, 				//transition time (1 second = 1000)
	transitionType: 'cubic:out', 	//transition type 
	items:  null, 					//array of image (links)
	stageBox: null,					//stage to contain the slider and it's slides
	slidesBox: null,				//container of all slides, created dynamically if doesn't exist
	curSlide: 0						//current 'slide'
	},

	//initialization
	initialize: function(options) {
		
		var self = this;  //assign this to a var. for ease of use in functions
		
		
		//set options
		this.setOptions(options);
		
		self.prevBtn = new Element('a', {'id':'prev'});
		self.nextBtn = new Element('a', {'id':'next'});
		self.playBtn = new Element('a', {'id':'play'});
		var btnArray = new Array(self.prevBtn, self.nextBtn, self.playBtn);
		btnArray.each(function(el, key){
			$('wrapper').grab(el);
			el.set('tween', { 'duration' : 300, 'ease': 'linear' });
			el.fade('hide');
		});
		
		self.playBtn.set('text', 'pause');
		self.playBtn.fade('in');
		
		//hide scrollbars on stage
		this.options.stageBox.setStyle('overflow', 'hidden');
		
		//create slidesBox, if not set
		if(this.options.slidesBox == null){
			this.options.slidesBox = new Element('div', {'id': 'slidesBox'});
			this.options.stageBox.grab(this.options.slidesBox);
		}
	
		//will hold curent X position of image
		var tempX = 0;
		
		
		var tempSlide = null;
		
		self.options.items.each(function(v, k){
			  //v = the element
			  //k = the index		  
			  
			  //get image
			  var tempEl = v.getElement('a');
			  var theHref = tempEl.getProperty('href')
			  var tempImg = new Asset.image(theHref);
			  
			  //get dimensions
			  var imgSize = tempImg.getSize();
			  var imgW = imgSize.x;
			  var imgH = imgSize.y;
			  
			  //dispose of image link, not needed anymore
			  v.dispose();
			  
			  //create a slide if at first pic
			  if(self.curPic == 0){
			  	tempSlide = new Element('div', { 'class': 'slide'});
			  	tempSlide.setStyles({'position':'absolute', 'top':0, 'left':0, 'opacity': 0 });
			  	self.options.slidesBox.grab(tempSlide);
			  	self.slidesArray.push(tempSlide);
			  }
			  
			  
			  //put image into slide
			  tempSlide.grab(tempImg);
			  self.picsArray.push(tempImg);
			  
			  
			  //set image to hidden, and give it an id for shits n' giggles
			  tempImg.set({
			  	'styles': { 'opacity': 0 },		  	
			  	'id': 'img'+k
		  	  });
			 
		  	  
			  self.curPic++;
			  if(self.curPic > 2) self.curPic = 0;
		
		 });
		 
		 
		 self.playBtn.addEvents({
		 	'click': function(){
		 		self.pauseToggle();
		 	}
		 });
		 
		 self.prevBtn.addEvents({
		 	'click' : function(){
		 		if(self.isSliding == false){
		 			var totalSlides = self.slidesArray.length;
		 			if(self.options.curSlide > 0){
						self.options.curSlide--;
					}
					else{
						self.options.curSlide = (totalSlides - 1);
					}
					self.showSlide();
				}
		 	}		 	
		 });
		 
		 self.nextBtn.addEvents({
		 	'click' : function(){
		 		if(self.isSliding == false){
		 			var totalSlides = self.slidesArray.length;
		 			if(self.options.curSlide < (totalSlides-1)){
						self.options.curSlide++;
					}
					else{
						self.options.curSlide = 0;
					}
		 			self.showSlide();
	 			}
		 	}		 	
		 });
	
		
	},

	//a method that does whatever you want
	start: function() {
		var self = this;
		
		self.options.curSlide = 0;
		self.showSlide();
		
		if(self.slidesArray.length > 1){
			self.timer = self.showSlide.periodical(self.options.slideTimer, self, null);
		}
		
	},


	showSlide: function(){
		
		var self = this;
		var totalSlides = self.slidesArray.length;
		
		var slide = self.slidesArray[self.options.curSlide]
		
		
		
		
		
		if(self.prevSlide == null){
			self.prevSlide = slide;
		}
		else{
			self.hideSlide(self.prevSlide);
			self.prevSlide = slide;
		}
		
		self.chainIn.clearChain();
		
		//get pics from slide
		var tmpPics = $$(slide.getElements('img'));
		
		//show this slide
		slide.set('opacity', 1);
		
		
		
		tmpPics.each(
			function(pic, key){
				//set image's tween properties
				pic.set('tween', { 
				  		'duration': self.options.fadeTime, 
				  		'ease': self.options.transitionType,
				  		
				  		onComplete: function(){ self.chainIn.callChain() }
			  		 	}
			  	);
			  	
			  	self.chainIn.chain(
			  		function(){ pic.tween('opacity', 1) }	
		  		);
			}
		);
		
		
		//(function(){self.chainIn.callChain();}).delay(500);
		self.chainIn.callChain();
		
		
		if(self.isPaused == false){
			if(self.options.curSlide < (totalSlides-1)){
				self.options.curSlide++;
			}
			else{
				self.options.curSlide = 0;
			}
		}
		
	},
	
	


	showPic: function(pic){
		pic.tween('opacity', 1);
	},
	
	hidePic: function(pic){
		pic.fade('hide');
	},
	
	
	hideSlide: function(){
		var self = this;
		//get pics from slide and hide them
		var thePrev = self.prevSlide;
		var tmpPics = $$(thePrev.getElements('img')).set('opacity', 0);
		thePrev.set('opacity',0);
		
		//showSlide
		
	},
	
	pauseToggle: function(){
		var self = this;
		
		if(self.isPaused == true){
			self.pauseIt();
			self.playBtn.set('text', 'pause');
			self.prevBtn.fade('out');
			self.nextBtn.fade('out');
		}
		else{
			self.pauseIt();
			self.playBtn.set('text', 'play');
			self.prevBtn.fade('in');
			self.nextBtn.fade('in');
		}
	},


	pauseIt: function () {
		
		var self = this;
		
		if(self.isPaused == false){
			self.isPaused = true;
			$clear(self.timer);
						
		}
		else{
			self.isPaused = false;
			
			var totalSlides = self.slidesArray.length;
 			if(self.options.curSlide < (totalSlides-1)){
				self.options.curSlide++;
			}
			else{
				self.options.curSlide = 0;
			}
			
			self.showSlide();
			self.timer = self.showSlide.periodical(self.options.slideTimer, self, null);
		}
		
	}


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

});