/**
 * YouStorage Slider - mootools 1.1 slider
 * @version		1.0.0
 * @MooTools version 1.2.4
 * @author		Constantin Boiangiu <info [at] constantinb.com>
 * @Copyright Youjoomla LLC
 */
var YouStorageSlider = new Class({
	Implements: [Options],
	options: {
		container:null,
		slides:{
			selector:null,
			texts:null,
			images:null
		},
		navs:{
			prev:null,
			next:null
		},
		txtDelay:10,
		imgOutDist:300,
		txtOutDist:300,
		autoslide:null,
		txtFx: Fx.Transitions.Pow.easeInOut,
		imgFx: Fx.Transitions.Cubic.easeOut,
		txtFxDuration:800,
		imgFxDuration:800
	},

	initialize: function(options) {
		this.setOptions(options);		
		if(!this.options.container) return;		
		this.start();
	},
	
	start: function(){
		
		this.currentSlide = 0;
		this.running = false;
		this.slides = $(this.options.container).getElements(this.options.slides.selector);
		this.texts = $(this.options.container).getElements(this.options.slides.texts);
		this.images = $(this.options.container).getElements(this.options.slides.images);
		
		this.slides.each(function(slide, i){
			
			this.images[i].store('defaultDist', this.images[i].getStyle('margin-top').toInt());
			
			if( i !== this.currentSlide ){
				slide.setStyle('display', 'none');
			}			
			
			var textFx = new Fx.Morph(this.texts[i], {wait:false, duration:this.options.txtFxDuration, transition:this.options.txtFx});
			this.texts[i].store('textFx', textFx);
			
			var imageFx = new Fx.Morph(this.images[i], {wait:false, duration:this.options.imgFxDuration,transition: this.options.imgFx});
			this.images[i].store('imageFx', imageFx);
			
			slide.addEvent('mouseover', function(){
				this.stopAuto();	
			}.bind(this));
			
			slide.addEvent('mouseout', function(){
				this.startAuto();
			}.bind(this));
			
			
		}.bind(this));
		
		$(this.options.navs.prev).addEvent('click', function(event){
			new Event(event).stop();
			this.gotoSlide(-1);
			this.running = true;
			this.resumeAuto();
		}.bind(this));
		
		$(this.options.navs.next).addEvent('click', function(event){
			new Event(event).stop();
			this.gotoSlide(1);
			this.running = true;
			this.resumeAuto();
		}.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.gotoSlide(1);
		this.running = true;
	},
	
	gotoSlide: function(direction){
		if( this.running ) return;
		var s = this.currentSlide + direction;
		if( s < 0 ) s = this.slides.length-1;
		if( s >= this.slides.length ) s = 0;
		
		this.changeSlide( this.currentSlide, s );		
		this.currentSlide = s;		
	},
	
	changeSlide: function( current, next ){
		
		this.texts[current].retrieve('textFx').start({'margin-top':[0,-this.options.txtOutDist]});		
		this.images[current].retrieve('imageFx').start({'margin-top':[ this.images[current].retrieve('defaultDist') , this.options.imgOutDist]}).chain(function(){
			this.slides[current].setStyle('display', 'none');	
			
			var imgFx = this.images[next].retrieve('imageFx');
			var txtFx = this.texts[next].retrieve('textFx');
			
			imgFx.set({'margin-top':this.options.imgOutDist});
			txtFx.set({'margin-top':-this.options.txtOutDist});
			
			this.slides[next].setStyle('display', 'block');		
			imgFx.start({'margin-top':[this.options.imgOutDist, this.images[next].retrieve('defaultDist') ]});
			
			var t = function(){
				txtFx.start({'margin-top':[this.options.txtOutDist,0]}).chain(function(){
					this.running = false;
				}.bind(this))
			};
			t.delay(this.options.txtDelay, this);
			
		}.bind(this));		
	}	
});