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

var YouRoller = new Class({
	initialize: function(options) {
		this.options = Object.extend({
			container: null,
			slideClass: 'slide',
			nextBtnContainer: 'buttons',
			nextBtnClass: 'next', 
			nextBtnText: 'forward',
			bounceDist: 30,
			bounceTime: 500,
			outside:2000, // how far outside is the slider going; it's good for different screen widths
			autoslide: null
		}, options || {});
		
		if(!$(this.options.container)) return;
		
		this.container = $(this.options.container);
		this.currentSlide = 0;
		this.childrenFX = new Array();
		this.start();		
	},
	
	start: function(){
		this.slides = this.container.getElements('.'+this.options.slideClass);		
		this.nextLink = new Element('a').set({'class':this.options.nextBtnClass,'href':'#'}).setHTML(this.options.nextBtnText);
		/* add event on click next */
		this.nextLink.addEvent('click', this.nextSlide.bind(this));
		
		this.slides.each(function(slide, i){
			slide.setStyle('position','absolute');
			
			slide.addEvent('mouseover', function(){
				this.stopAuto();
			}.bind(this));
			
			slide.addEvent('mouseout', function(){
				this.startAuto();
			}.bind(this));
			
			this.slides[i]['fx'] = new Fx.Styles(slide, {duration:400, wait:false, transition:Fx.Transitions.Sine.easeInOut});
			if( i !== this.currentSlide ){
				slide.setStyle('left',this.options.outside);
			}
			/* get all the elements inside the slide */
			var children = slide.getChildren();
			/* set fx on kids */
			var fx = new Array();
			children.each(function(kid, current){
				var elem = new Hash();
				elem.fx = new Fx.Styles(kid, {duration:this.options.bounceTime, wait:false, transition:Fx.Transitions.Sine.easeInOut});
				elem.left = kid.getStyle('left').toInt();
				elem.toLeft = elem.left + this.options.bounceDist*( current + (current == children.length-1 ? 2 : 0.5) );
				fx[current] = elem;				
			}.bind(this));
			
			this.childrenFX[i] = fx;
			this.slides[i]['kids'] = children;
			/* inject next link into current slide */
			this.injectNext();
		}.bind(this));
		
		this.startAuto();
		
	},
	
	startAuto: function(){
		if( !this.options.autoslide ) return;
		this.period = this.gotoNext.periodical(this.options.autoslide, this);
	},
	
	stopAuto: function(){
		$clear(this.period);
	},
	
	resumeAuto: function(){
		if( !this.options.autoslide ) return;
		$clear(this.period);
		this.period = this.gotoNext.periodical(this.options.autoslide, this);
	},
	
	gotoNext: function(){		
		this.nextLink.fireEvent('click');		
	},
	
	injectNext: function(){
		this.nextLink.injectInside(this.slides[this.currentSlide].getElement('.'+this.options.nextBtnContainer));	
	},
	
	nextSlide: function(event){
		if(event)
			new Event(event).stop();		
		this.childrenFX[this.currentSlide].each(function(eff, i){
			eff.fx.start({'left':[eff.left, eff.toLeft]});
		}.bind(this));
		this.moveSlide.bind(this).delay(this.options.bounceTime);
	},
	
	moveSlide: function(){
		this.slides[this.currentSlide]['fx'].start({'left':-this.options.outside}).chain(this.resetSlide.bind(this));		
	},
	
	resetSlide: function(){
		this.slides[this.currentSlide].setStyle('left',this.options.outside);
		
		this.slides[this.currentSlide].kids.each(function(el, i){
			el.setStyle('left', this.childrenFX[this.currentSlide][i].left);													  
		}.bind(this));
		
		this.currentSlide = this.currentSlide < this.slides.length-1 ?  this.currentSlide+1 : 0;
		this.injectNext();
		this.bringSlide();
		this.resumeAuto();
	},
	
	bringSlide: function(){
		this.slides[this.currentSlide]['fx'].start({'left':0});
	}
});