// JavaScript Document

var FancySlider = new Class({
		
		options:{
			duration : 500,
			transition : Fx.Transitions.Elastic.easeOut,
			sizeOfEach: 95,
			numberDisplayed: 1,
			styleToModify: 'margin-top',
			elementExtension: 'div.section',
			nextButtonExtension: '.more',
			previousButtonExtension: '.back',
			additionalHeight: 35,
			scrollListHeight: 65
		
		},
		
		initialize: function( el, options){
			this.setOptions(options);
			var els = $$(el + ' ' + this.options.elementExtension);
			this.nextButton = $$(el + ' ' + this.options.nextButtonExtension)[0];
			this.previousButton = $$(el + ' ' + this.options.previousButtonExtension)[0];
			this.currentIndex = 0;
			this.inProgress = false;
			try{
				this.par = els[0].getParent();
			}catch(e){
				$$('.more').setStyle('display', 'none');
				$$('.back').setStyle('display', 'none');
				return;
			}
			this.container = this.par.getParent();
			
			this.totalElements = els.length;
			this.animObject = new Fx.Style( this.par, this.options.styleToModify, { duration: this.options.duration, transition: this.options.transition, onComplete:this.sortOutButtons.bindAsEventListener(this) } );
			
			if(window.ie){
				this.options.sizeOfEach = this.options.sizeOfEach + 20;
			}
		//	this.container.setStyle('height', this.options.sizeOfEach * this.options.numberDisplayed + 'px');
			this.nextButton.addEvent( 'click', this.slideLeft.bindAsEventListener(this) );
			this.previousButton.addEvent( 'click', this.slideRight.bindAsEventListener(this) );
			var scrollbar = $$(el + ' .scrollbar')[0];
			var scrollbutton = $$(el + ' .scroll_button')[0];
			
			var scrollElement = $$(el + ' ul')[0];
			var h = scrollElement.getSize().scrollSize.y;
			var r = h -this.options.scrollListHeight;
			var buttonHeight = ( this.options.scrollListHeight / 100 ) * ( this.options.scrollListHeight / ( h  / 100 ) );
			scrollbutton.setStyle('height', buttonHeight.toInt() + 'px' );
			
			this.slider = new Slider(scrollbar, scrollbutton, { steps:r, mode:'vertical', onChange:function(x){
																								x = x - ( x + x );
																								scrollElement.setStyle('margin-top', x + 'px');
																							 }} );
			if( scrollElement.getChildren().length < 4 ){
				scrollbar.setStyle('display', 'none');
				scrollbutton.setStyle('display', 'none');
			}
			/*this.scroller = new Scroller(this.scrollElement, {area: 30, velocity: 1});
			this.scrollElement.addEvent('mouseover', this.scroller.start.bind(this.scroller));
			this.scrollElement.addEvent('mouseout', this.scroller.stop.bind(this.scroller));*/
			
			this.sortOutButtons();
		},

		
		slideLeft: function(ev){
			if( (this.currentIndex + 1) >= this.totalElements ){ return;}
			//this.scrollElement.setStyle( 'overflow', 'hidden');
			this.nextButton.setStyle( 'display', 'none' );
			this.previousButton.setStyle( 'display', 'none');
			currentMargin = this.par.getStyle(this.options.styleToModify).toInt();
			this.animObject.start( currentMargin, currentMargin - ( (this.options.sizeOfEach * this.options.numberDisplayed) + this.options.additionalHeight) );
			this.currentIndex = this.currentIndex + this.options.numberDisplayed;
			this.InProgress = true;
		},
		
		slideRight: function(ev){
			if( this.currentIndex < this.options.numberDisplayed ){ return;}
			//this.scrollElement.setStyle( 'overflow', 'hidden');
			this.nextButton.setStyle( 'display', 'none' );
			this.previousButton.setStyle( 'display', 'none');
			currentMargin = this.par.getStyle(this.options.styleToModify).toInt();
			this.animObject.start( currentMargin, currentMargin + ( (this.options.sizeOfEach * this.options.numberDisplayed) + this.options.additionalHeight) );
			this.currentIndex = this.currentIndex - this.options.numberDisplayed;
			this.InProgress = true;
		},
		
		sortOutButtons: function(){
			this.InProgress = false;
			
			if( this.options.numberDisplayed >= this.totalElements ){
				this.previousButton.setStyle( 'display', 'none' );
				this.nextButton.setStyle( 'display', 'none' );
			}else{
				if( (this.currentIndex + 1) >= this.totalElements ){
					this.nextButton.setStyle( 'display', 'none' );
					this.previousButton.setStyle( 'display', 'inline');
				//	this.scrollElement.setStyle( 'overflow', 'auto');
				}else if( this.currentIndex <= (this.options.numberDisplayed + 1)  ){
					this.previousButton.setStyle( 'display', 'none' );
					this.nextButton.setStyle( 'display', 'inline');
				}else{
					this.nextButton.setStyle( 'display', 'inline');
					this.previousButton.setStyle( 'display', 'inline');
				}
			}
		}
});
			
FancySlider.implement(new Options);