var YouStorageSlider = new Class({
	
	initialize: function(options) {
		this.options = Object.extend({
			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
		}, 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]['defaultDist'] = this.images[i].getStyle('margin-top').toInt();
			
			if( i !== this.currentSlide ){
				slide.setStyle('display', 'none');
			}			
			
			var textFx = new Fx.Styles(this.texts[i], {wait:false, duration:this.options.txtFxDuration, transition:this.options.txtFx});
			this.texts[i]['textFx'] = textFx;
			
			var imageFx = new Fx.Styles(this.images[i], {wait:false, duration:this.options.imgFxDuration,transition: this.options.imgFx});
			this.images[i]['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]['textFx'].start({'margin-top':[0,-this.options.txtOutDist]});		
		this.images[current]['imageFx'].start({'margin-top':[ this.images[current]['defaultDist'] , this.options.imgOutDist]}).chain(function(){
			this.slides[current].setStyle('display', 'none');	
			
			var imgFx = this.images[next]['imageFx'];
			var txtFx = this.texts[next]['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]['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));		
	}	
});