/*
Slider Control by Fabián Castilla
*/
var Moonosh_Slider = new Class({
	Implements: Options,
	
	options:{
		mode: 'alpha',
		fxOptions: {
			duration:'normal',
			transition: Fx.Transitions.Quart.easeOut
		},
		interval: 5000,
		width: null,
		height: null,
		autoplay: true
	},
	
	initialize: function(mask, container, elements, options){
		this.setOptions(options);
		this.mask = mask;
		this.container = container;
		this.slides = elements;
		this.width = (this.options.width) ? this.options.width : this.mask.getWidth();
		this.height = (this.options.height) ? this.options.height : this.mask.getHeight();
		
		this.start();
	},
	
	start: function(){
		this.setup_elements(); //Apply initial styles
		this.position_elements(); //Set positions depending on fx mode		 
		if(this.options.mode == 'alpha'){
			this.slides[0].fade(1);//Fade-in first element
		}else{
			this.slides.each(function(el, i){
				el.fade(1); //fade in all elements
			});
		}
		this.currentIndex = 0;
		this.walk(this.currentIndex); //begin walking from the first slide
	},
	
	walk: function(elementIndex){
		this.currentIndex = elementIndex;
		this.walkTimer = this.step_forward.periodical(this.options.interval, this);
	},
	
	step_forward: function(){
		this.nextIndex = (this.currentIndex >= this.slides.length - 1) ? 0 : this.currentIndex + 1;
		this.make_transition();
	},
	
	step_back: function(){
		this.nextIndex = (this.currentIndex <= 0) ? this.slides.length : this.currentIndex - 1;
		this.make_transition();
	},
	
	make_transition: function(){
		switch(this.options.mode){
			case 'alpha':
				this.fade_to(this.nextIndex);
				break;
			case 'horizontal':
				this.move_to(this.nextIndex);
				break;
		}
	},
	
	fade_to: function(index){
		currentElement = this.slides[this.currentIndex];
		nextElement = this.slides[index];
		//position elements
		currentElement.setStyle('z-index', 1);
		nextElement.setStyle('z-index', 2);
		//make Fx
		var myFx = new Fx.Tween(nextElement, this.options.fxOptions);
		myFx.addEvent('complete', function(){
			currentElement.setStyle('opacity',0);
		});
		myFx.start('opacity',[0,1]);
		//update currentIndex
		this.currentIndex = index;
	},
	
	move_to: function(index){
		//make Fx
		var myFx = new Fx.Tween(this.container, this.options.fxOptions);
		myFx.start('left',[(this.currentIndex*this.width)*-1,(index*this.width)*-1]);
		//update currentIndex
		this.currentIndex = index;
	},
	
	setup_elements: function(){
		//Apply initial styles to mask
		this.mask.setStyles({
			display: 'block',
			position: 'relative',
			overflow: 'hidden'
		});	
		//Apply initial styles to container		
		this.container.setStyles({
			display: 'block',
			position: 'relative'
		});
		//Apply initial styles to slides
		this.slides.each(function(el, i){
			el.setStyles({
				position: 'absolute',
				display:'block',
				width: this.width,
				height: this.height,
				opacity: 0
				//zindex: 1
			});			
		}, this);
	},
	
	position_elements: function(){
		switch(this.options.mode){
			case 'alpha':
				this.slides.each(function(el, i){
					el.setStyle('top', 0);
					el.setStyle('left', 0);
				}, this);
				break;
			case 'horizontal':
				this.slides.each(function(el, i){
					el.setStyle('top', 0);
					el.setStyle('left',i*this.width);
				}, this);
				break;
		}
	}
	
});