var ProductSlideShow = new Class({
	/**
	 * Initializes the class.
	 * @param {Array} elements		array with div ids
	 */
	initialize: function(elements, delay) {
		
		// set element names and delay into class context
		this.elements = elements;
		this.delay = delay;
		
		// element index
		this.element = -1;
		
		// hide the elements displayed for later fade in		
		this.hideElements();
		
		this.timer = 0;
		this.stopped = true;
		this.started = true;
		
		// start slide show
		this.play();
	},
	
	/**
	 * Hides the elements that hold the product slides.
	 */
	hideElements: function() {
		this.elements.each(function(item, index) {
			$(item).setStyle('display', 'none');
			$(item).setStyle('width', '0');
		});
	},
	
	/**
	 * Do the animation:
	 * Fade out previous element and fade in next element.
	 */
	animate: function(){
		$clear(this.timer);
		// create new Chain to chain animation steps
		var myChain = new Chain();	
		myChain.chain(
			function() {this.fadeout(myChain).start(1,0);}.bind(this),
			function() {this.hide(); myChain.callChain();}.bind(this),
			function() {this.fadein(myChain).start(0,500);}.bind(this)
		);
		
		// do animation
		myChain.callChain();
		
		// next slide
		this.next(true);
	},
	
	/**
	 * Create Fx.Tween object to fade out previous element.
	 * @param {Chain} chain		animation chain.
	 */
	fadeout: function(chain) {
		if(this.element < this.elements.length-1 && this.element >= 0){
			var fadeoutFx = new Fx.Tween($(this.elements[this.element]), {
		        property: 'opacity',
		        duration: 1000, 
		        transition: Fx.Transitions.Quart.easeInOut,
		        onComplete: function() {chain.callChain()}
			});
			return fadeoutFx;
		}
		else {
			var fadeoutFx = new Fx.Tween($(this.elements[this.elements.length -1]), {
		        property: 'opacity',
		        duration: 1000, 
		        transition: Fx.Transitions.Quart.easeInOut,
		        onComplete: function() {chain.callChain()}
			});
			return fadeoutFx;
		}
	},
	
	/**
	 * Set visibility of previous slide to none and set width to 0.
	 * Set visibility of next element to block and set opacity to 1.
	 */
	hide: function() {
		if(this.element < this.elements.length-1 && this.element >= 0){
			$(this.elements[this.element]).setStyle('display','none');
			$(this.elements[this.element]).setStyle('width','0');
		}
		else {
			$(this.elements[this.elements.length -1]).setStyle('display','none');
			$(this.elements[this.elements.length -1]).setStyle('width','0');
		}
		this.element++;
		$(this.elements[this.element]).setStyle('opacity','1');
		$(this.elements[this.element]).setStyle('display','block');
	},
	
	/**
	 * Create Fx.Tween object to fade in next element.
	 * @param {Chain} chain		animation chain.
	 */
	fadein: function(chain) {
		var fadeinFx = new Fx.Tween($(this.elements[this.element]), {
	        property: 'width',
	        duration: 2000, 
	        transition: Fx.Transitions.Quart.easeInOut,
	        onComplete: function() {chain.callChain()}
		});
		return fadeinFx;
	},
	
	/**
	 * Start animation after a delay.
	 */
	wait: function(){
		this.timer = this.animate.delay(10000,this);
	},
	
	/**
	 * start product slide show.
	 */
	play: function(num){
		if(this.stopped){
			this.stopped = false;
			if(this.started){
				this.next(false);
			}
			this.started = true;
		}
	},
	
	/**
	 * stop product slide show.
	 */
	stop: function(){
		$clear(this.timer);
		this.stopped = true;
	},
	
	/**
	 * Call next element.
	 * @param {boolean} wait		
	 */
	next: function(wait){
		var doNext = true;
		if(this.stopped){
			doNext = false;
		}
		if(doNext){
			$clear(this.timer);
			if(this.element < this.elements.length-1){
				if(wait) {
					this.wait();
				}
				else {
					this.animate();
				}
			}else{
				this.element = -1;
				if(wait) {
					this.wait();
				}
				else {
					this.animate();
				}
			}
		}
	}
});