/*
*	Description : This is the main JavaScript functionality to the browser slideshows on the site
*	Author: Fuse Developments, Inc. Giancarlo Gomez
*/

var SlideShow = Class.create({
	
	initialize: function(options){
		this.options = Object.extend({
			// animation properties
			delay:5,
			fadeDuration:2,
			paused:false,
			// default classes
			slideHolder:'slideshow',
			buttonsHolder:'slideshowButtons'
			
		}, options || {});
		
		// image array
		this.imageArray = [];
		
		// timeout holder
		this.slideshowTimeout = null;
		
		// setup current image and slide trackers
		this.currentImage 	= 0;
		this.nextImage 		= 1;
		this.currentSlide	= 0;
		this.isPlaying 		= null;
		this.paused 		= this.options.paused;
		
		// setup slides and buttons		
		this.slides 		= $$('#'+  this.options.slideHolder +' img');
		this.buttons 		= $$('#'+  this.options.buttonsHolder +' a');
		
		// setup buttons
		this.buttons.each(function(i,e){
			if(e == 0){
				i.observe('click',this.toggleSlideShow.bind(this));
			}else{
				i.observe('click',this.jumpToSlide.bind(this,e));				
			}
		},this);
		
	},
	
	loadNext: function(){
		// image loader
		var imgPreloader = new Image();
		// once image is preloaded, we can go ahead and continue to call the next slide
		imgPreloader.onload = function(){
			// do not set a timeout if we are paused
			if (!this.paused){
				this.slideShowTimeout = this.nextSlide.bind(this).delay(this.options.delay);
			}
		}.bind(this);
		// set image source
		imgPreloader.src = this.imageArray[this.nextImage][0];
	},
	
	start: function(){
		if(this.slides.length == 0){
			this.setup();	
		}else if(this.imageArray.length > 1){
			this.loadNext();
		}
	},
	
	setup: function(){
		if(this.imageArray.length == 0){
			$(this.options.slideHolder).hide();	
		}else{
			$(this.options.slideHolder).insert('<img id="image1" src="' + this.imageArray[0][0] + '" alt="' + this.imageArray[0][1] + '" border="0" class="slide current" />');
			$(this.options.slideHolder).insert('<img id="image2" src="' + this.imageArray[1][0] + '" alt="' + this.imageArray[1][1] + '" border="0" class="slide next" />');
			this.slides = $$('#'+  this.options.slideHolder +' img');	
			this.start();	
		}
	},
	
	nextSlide: function(){
		
		// set the slides and src of the slides
		if (this.currentSlide == 0){
			a = this.slides[0];
			b = this.slides[1];	
			this.currentSlide = 1;
		}else{
			a = this.slides[1];	
			b = this.slides[0];
			this.currentSlide = 0;	
		}
		
		// set the next slide
		b.src = this.imageArray[this.nextImage][0];
		b.alt = this.imageArray[this.nextImage][2];
		b.setOpacity(1);
		
		// fade the current image
		this.isPlaying = new Effect.Opacity(a,{
				queue: {position: 'end',scope:'slideshow_'+Math.floor(Math.random()*51),limit: 1},
				from:1,
				to:0,
				duration:this.options.fadeDuration,
				afterFinish:function(){
				// toggle the holders
				a.toggleClassName('current').toggleClassName('next');
				b.toggleClassName('current').toggleClassName('next');
			}		
		});
		
		// track the current image
		this.currentImage = this.nextImage;	
		
		// track the next image
		if (this.nextImage >= this.imageArray.length-1){
			this.nextImage = 0;	
		}else{
			this.nextImage++;	
		}		
		
		// here we manage the button settings
		if (this.buttons.length > 0){
			// iterate thru each link
			this.buttons.each(function(s,index){
				// first we skip the first one as it is the toggle button
				if (index>0){
					if (index-1 == this.currentImage){
						s.addClassName('active');	
					}else{
						s.removeClassName('active');
					}
				}
			},this);
		}
				
		this.loadNext();
		
	},
	
	addImage: function(image,alt){
		this.imageArray[this.imageArray.length] = new Array(image,alt);
	},
	
	toggleSlideShow: function(){
	
		// cancel out any text selections (focus rectangles)
		document.body.focus();
		
		if (this.paused){
			// restart animation
			this.paused = false;
			// start the timer to go to the next slide after X seconds
			this.slideShowTimeout = this.nextSlide.bind(this).defer();
		}else{
			// cancel any pending transition
			if (this.slideShowTimeout != null) window.clearTimeout(this.slideShowTimeout);
			this.slideShowTimeout = null;
			// pause animation
			this.paused=true;	
		}
		
		if (this.buttons.length > 0){
			this.buttons[0].toggleClassName('paused');
		}
	},
	
	jumpToSlide: function(index){
		
		
		if (this.isPlaying.state == 'running') return;
		if (this.currentImage == index-1) return;
	
		// cancel any pending transition
		if (this.slideShowTimeout != null) window.clearTimeout(this.slideShowTimeout);
		this.slideShowTimeout = null;
		
		this.nextImage = index-1;
		
		// image loader
		var imgPreloader = new Image();
		
		// set image source
		imgPreloader.src = this.imageArray[this.nextImage][0];
		
		// once image is preloaded, we can go ahead and continue to call the next slide
		imgPreloader.onload = function(){
			this.nextSlide();
		}.bind(this);		
		
	}
	
});