/*
Script: FilmStrip.js
	An mootools extension which allows you to easily create a slideshow

License:
	MIT-style license.
*/
var Slideshow = new Class({
	Implements: [Options],				   
	options: {
		hasFade: true,
		loop: true,
		showNav: false,
		frameDelay: 5000,
		items: 'li',
		height: 400,
		width: 400,
		duration: 'normal',
		version: '1.2.03'
	},
	initialize: function(containerId, options) {
		this.container = $(containerId);
		this.setOptions(options);
		
		// set containers styles
		this.container.setStyles({
			position: 'relative',
			overflow: 'hidden',
			height: this.options.height,
			width: this.options.width			
		});

		// initialize elements
		this.myElements = this.container.getElements(this.options.items);
		
		// if there is more than 1 elm start slide show, else just show the 1 elm
		if(this.myElements.length > 1 ){
			this.currentIndex = 0;
			this.zIndex = this.myElements.length;
			
			// initialize elements
			this.initElements();			
			this.myElements[this.currentIndex].setStyle('visibility', 'visible');
			// start timer
			this.myTimer = this.goTo.delay(this.options.frameDelay, this, this.myElements[this.currentIndex]);	
		}
	},
	initElements: function(){
		var tmpZ = this.zIndex;
		// initialzie all the items in slide who
		this.myElements.each(function(myElement){
			myElement.setStyles({
				zIndex: tmpZ,
				visibility: 'hidden',
				position: 'absolute',
				top: 0,
				left: 0,				
				height: this.options.height,
				width: this.options.width					
			});	
			tmpZ--;	
		}.bind(this));			
	},
	goTo: function(curElement) {
		// reset for loop
		(this.currentIndex == (this.myElements.length-1) && this.options.loop) ? this.currentIndex = 0 : this.currentIndex++;		
		this.zIndex++;	
	
		var nextElement = this.myElements[this.currentIndex];
		// if there is no next element then the user doesnt want to loop the elms
		if($type(nextElement)){
			// set next elms z-index
			nextElement.setStyle('z-index', this.zIndex);
			
			// if its a fading slideshow, else no fade
			if(this.options.hasFade){
				// prepage next elm for a fade in
				nextElement.setStyle('opacity', 0);


				new Fx.Tween(curElement, {
					duration: this.options.duration
				}).start('opacity', 0);

				// fade in next elm
				new Fx.Tween(nextElement, {
					transition: Fx.Transitions.Sine.easeOut,
					duration: this.options.duration,
					onStart: function(){
						// for extending this class, call a function onTransStart in child class
						if(this.options.showNav && $type(this.onTransStart) == 'function'){
							this.onTransStart();
						}
					}.bind(this),				
					onComplete: function() {
						// recusivly call goTo when fade is complete
						this.myTimer = this.goTo.delay(this.options.frameDelay, this, nextElement);	
					}.bind(this)
				}).start('opacity', 0, 1);		
			} else {	
				// no fade so just show elm
				this.myElements[this.currentIndex].setStyle('visibility', 'visible');
				// for extending this class, call a function onTransStart in child class
				if(this.options.showNav && $type(this.onTransStart) == 'function'){
					this.onTransStart();
				}
				// recusivly call goTo
				this.myTimer = this.goTo.delay(this.options.frameDelay, this, nextElement);
			}
		}
	}
});