/**
 * ShadowSlider - continuous slider
 * @version		1.0.0
 * @MooTools version 1.1
 * @author		Constantin Boiangiu <info [at] constantinb.com>
 * @Copyright Youjoomla LLC
 */

var ShadowSlider = new Class({
	initialize: function(options) {
		this.options = Object.extend({
			slidesContainer:null, /* id of container for sliders */
			slides: null, /* slides selector */
			slidesShadow: null,
			pauseOver: null, /* id for element that when hovered, pauses slider */
			slideWidth: 960, /* one slide width */
			navigation:null, /* id for navigation container */
			navElements:null, /* selector for navigation elements */
			goNext: null, /* id for button for going to next slide */
			goPrev: null, /* id for button to go to prev slide */
			navSelectedCSS: 'selected', /* css class for selected navigator */
			autoRun:null, /* number of milliseconds between slides when autorunning */
			duration: 1000, /* effect duration */
			stopOnClick: true, /* slides should stop when clicked */
			clickDelay: 0 /* slides should resume autoSlide when clicked after xxx milliseconds. autoRun must be set for this to work */
		}, options || {});
		
		if( !this.options.slidesContainer ) return;
		
		this.container = $(this.options.slidesContainer);
		this.slides = this.container.getElements(this.options.slides);
		
		this.navContainer = $(this.options.navigation);
		this.navs = this.navContainer.getElements(this.options.navElements);
		
		this.current = 0;
		this.leftDist =  this.options.slideWidth*-1;
		
		this.fxSlide = new Fx.Styles(this.container, {wait:true, duration:this.options.duration});
		this.is_running = false;
		this.is_over = false;
		this.start();
		
	},
	
	start: function(){
		
		this.slides.getLast().injectTop(this.container);
		this.container.setStyle('left', this.leftDist);		
		this.navs[this.current].addClass(this.options.navSelectedCSS);
		
		/* navigation */
		this.navs.each(function(el, i){								
								
			el.addEvent('click', function(event){				
				new Event(event).stop();
				
				if( i == this.current || this.is_running ) return;
				
				if( this.options.stopOnClick || this.options.clickDelay )
					this.stopAutoRun();
				
				this.navs[this.current].removeClass(this.options.navSelectedCSS);
				if( i > this.current ) this.goNext( i-this.current, i );
				else if( i < this.current ) this.goPrev ( this.current - i, i );				
								
			}.bind(this))
			
		}.bind(this));
		/* next bttn */
		if( this.options.goNext ){
			$(this.options.goNext).addEvent('click', function(event){
				new Event(event).stop();
				if( this.is_running ) return;
				
				if( this.options.stopOnClick || this.options.clickDelay )
					this.stopAutoRun();
				
				this.navs[this.current].removeClass(this.options.navSelectedCSS);
				var nextSlide = this.current+1 < this.slides.length ? this.current+1 : 0;
				this.goNext( 1, nextSlide );
				
			}.bind(this))
		}
		/* prev bttn */
		if( this.options.goPrev ){
			$(this.options.goPrev).addEvent('click', function(event){
				new Event(event).stop();
				if( this.is_running ) return;
				
				if( this.options.stopOnClick || this.options.clickDelay )
					this.stopAutoRun();
				
				this.navs[this.current].removeClass(this.options.navSelectedCSS);
				var prevSlide = this.current-1 >= 0 ? this.current-1 : this.slides.length-1;
				this.goPrev( 1, prevSlide );
				
			}.bind(this))
		}
		/* pause on mouse over */
		$(this.options.pauseOver).addEvent('mouseenter', function(){
			this.is_over = true;													  
			this.stopAutoRun(true);
		}.bind(this));
		/* resume on mouse out */
		$(this.options.pauseOver).addEvent('mouseleave', function(){
			this.is_over = false;
			this.startAutoRun();
		}.bind(this));
		/* start auto run */
		if( this.options.autoRun )
			this.startAutoRun();		
	},
	
	startAutoRun: function(){		
		if( !this.options.autoRun )
			return;		
		this.period = this.autoRun.periodical(this.options.autoRun+this.options.duration, this);
	},
	
	autoRun: function(){		
		var key = this.current+1 < this.navs.length ? this.current+1 : 0;
		this.navs[this.current].removeClass(this.options.navSelectedCSS);
		this.goNext(1, key);
	},
	
	stopAutoRun: function( stopIt ){
		$clear(this.period);
		if( this.options.clickDelay && !stopIt && !this.is_over )
			this.period = this.startAutoRun.delay(this.options.clickDelay, this);
	},
	
	goNext: function( step, key ){
	
		key = key > this.slides.length-1 ? 0 : key;
		
		$(this.options.slidesShadow).empty();
		
		this.is_running = true;
		var leftDist = this.leftDist + ( step*this.options.slideWidth*-1 );
		/* if last element is clicked, clone the first and next element and put them last */
		if( step == this.slides.length-1 ){
			var cloneFirst = this.container.getFirst().clone().injectInside( this.container );	
			var cloneSecond = this.container.getFirst().getNext().clone().injectInside( this.container );	
		}
		
		this.fxSlide.start({'left': leftDist}).chain(function(){
			/* remove the first and last elements cloned above */
			if( $defined(cloneFirst) ){
				cloneFirst.remove();
				cloneSecond.remove();
			}
			
			for( var t = 0; t < step; t++ )
				this.container.getFirst().injectInside(this.container);
			
			this.slides[key].clone().injectInside($(this.options.slidesShadow));
			
			this.container.setStyle('left', this.leftDist);
			this.current = key;
			this.navs[key].addClass(this.options.navSelectedCSS);
			this.is_running = false;
			
		}.bind(this));		
	
	},
	
	goPrev: function( step, key ){
		
		this.is_running = true;
		var leftDist = this.leftDist + step*(this.options.slideWidth*-1);
		
		$(this.options.slidesShadow).empty();
		
		for( t=0; t < step; t++ )			
			this.container.getLast().injectTop( this.container );
		
		this.container.setStyle('left', leftDist);
		
		if( step == this.slides.length-1 ){			
			var cloneFirst = this.container.getFirst().clone();	
			var cloneSecond = this.container.getFirst().getNext().clone();			
			cloneFirst.injectInside(this.container);
			cloneSecond.injectInside(this.container);			
		}		
		
		this.fxSlide.start({'left': [leftDist, this.leftDist]}).chain(function(){			
			/* remove the first and last elements cloned above */
			if( cloneFirst ){
				cloneFirst.remove();
				cloneSecond.remove();
			}
			
			this.slides[key].clone().injectInside($(this.options.slidesShadow));
			
			this.current = key;
			this.navs[key].addClass(this.options.navSelectedCSS);
			this.is_running = false;
			
		}.bind(this))
			
		
	}	
});