/**
 * This is the class for all component galleries. It handles all preloading and transition effects.
 * Dependencies: prototype.js, scriptactulous.js
 */
	var ComponentGallery = Class.create({
	
	initialize: function(divId) {
		
		this.divId				= divId;
		this.divClass			= "item";
		this.startButton		= $$("#" + this.divId + " a.startShow")[0];
		this.images				= $$("#" + this.divId + " div div."+this.divClass+"");
		this.nav				= $$("#" + this.divId + " li a");
		this.numOfImages		= this.images.length;
		this.index				= 0;
		this.effectDuration		= 0.2;
		this.intervalDuration	= 4;
		this.intervalPlaying	= false;
		this.playButtonText		= "";
		this.stopButtonText		= "";
		this.nextImage			= this.images[0];
		this.addListeners();
		
	},
	
	toggleAutoPlay: function(){
		if (this.intervalPlaying == false) {
			this.startAutoPlay();
			// IE6 only
			if (!window.XMLHttpRequest) {
				this.startButton.style.backgroundPosition = '-10px -900px';
			}
		}
		else {
			this.stopAutoPlay();
			// IE6 only
			if (!window.XMLHttpRequest) {
				this.startButton.style.backgroundPosition = '-10px -800px';
			}
		}
	},
	
	startAutoPlay: function(){
		this.intervalPlaying = true;
		this.startButton.addClassName('playing');
		this.startButton.update(this.stopButtonText);
		//this.autoPlayNext();
		this.interval = new PeriodicalExecuter(this.autoPlayNext.bind(this), this.intervalDuration);
	}, 
	
	stopAutoPlay: function(){
		this.intervalPlaying = false;
		this.startButton.removeClassName('playing');
		this.startButton.update(this.playButtonText);
		this.interval.stop();
	}, 
	
	autoPlayNext: function(){
		var currImage = $$("#" + this.divId + " div.currentItem")[0];
		if (this.index >= this.numOfImages - 1) {
			this.index = -1;
		}
		this.index++;
		var nextImage = this.images[this.index];
		this.updateNumber();
		this.playFade(currImage, nextImage);
	},

	gotoIndex: function(index) {
	    var currImage = $$("#" + this.divId + " div.currentItem")[0];
	    this.index = index;
	    this.nextImage = this.images[this.index];
	    this.updateNumber();
	    this.nextImage.className = 'currentItem';
	},
	
	playFade: function(imgFrom, imgTo){
		
		this.nextImage = imgTo;
		new Effect.Fade(imgFrom, {
			duration: this.effectDuration, 
			queue: 'end', 
			limit:1, 
			afterFinish: function(){
				this.images.each(function(item){
					item.className = this.divClass;
				}.bind(this))
				//imgFrom.className = '';
				imgTo.className = 'queuedImage';
			}.bind(this)
		});
		new Effect.Appear(imgTo, {
			duration: this.effectDuration, 
			queue: 'end', 
			limit: 1, 
			afterFinish: function(){
				imgTo.className = 'currentItem';
			}.bind(this)
		});
	}, 
	
	updateNumber: function() {
		this.nav.each(function(item){
			item.className = '';
		})
		this.nav[this.index].className = 'selected';
	}, 
	
	addListeners: function(){
		
		// IE6 only
		if (!window.XMLHttpRequest) {
			Event.observe(this.startButton, 'mouseover', function(){
				if (this.startButton.hasClassName('playing')) {
					this.startButton.style.backgroundPosition = '-10px -900px';
				}
				else {
					this.startButton.style.backgroundPosition = '-10px -800px';
				}
			}.bindAsEventListener(this));
			Event.observe(this.startButton, 'mouseout', function(){
				if (this.startButton.hasClassName('playing')) {
					this.startButton.style.backgroundPosition = '-10px -850px';
				}
				else {
					this.startButton.style.backgroundPosition = '-10px -750px';
				}
			}.bindAsEventListener(this));
		}
		
		Event.observe(this.startButton, 'click', this.toggleAutoPlay.bindAsEventListener(this));
		this.nav.each(function(item, index){
			Event.observe(item, 'click', function(event){
				this.index = index;
				var currImage = this.nextImage; //$$("#" + this.divId + " img.currentItem")[0];
				var nextImage = this.images[index];
				if (this.intervalPlaying == true) {
					this.stopAutoPlay();
				}
				if (currImage != nextImage) {
					this.updateNumber();
					this.playFade(currImage, nextImage);
				}
			}.bindAsEventListener(this))
		}.bind(this))
	}
	
})