/**************************************
 *	Create ListSliders
 **************************************/

window.addEvent('load', function(){
	if(slider = $('timeline')){
		new ListSlider({
			slider:			slider,
			previousButton:	slider.getElement('a.previous'),
			nextButton:		slider.getElement('a.next')
		});	
	}
});


/**************************************
 *	ListSlider
 **************************************/
ListSlider = new Class({
	
	options:	{
		slider:			false,
		previousButton:	false,
		nextButton:		false,
		transition:		Fx.Transitions.Bounce.easeOut,
		duration:		500
	},
	
	inTransition:			false,
	slideList:				false,
	sliderContainerWidth:	false,
	sliderWidth:			false,
	slideEffect:			false,
	leftPosition:			false,
	
	/**
	 *	Initialize
	 */
	initialize: function(options){
		
		// Fetch options
		this.setOptions(options);
		
		this.slideList		= this.options.slider.getElement('ul');
		if (this.slideList)
		{
			this.sliderContainerWidth = parseInt($$('div.slider').getStyle('width'));
			
			listItem 	= this.slideList.getElement('li');
			listItems	= this.slideList.getElements('li');
			
			var ulWidth = 0;
			listItems.each(function(el){
				var width = el.getStyle('width');
				var margin = el.getStyle('margin-right');
				var borders = parseInt(el.getStyle('border-left-width')) + parseInt(el.getStyle('border-right-width'));
				ulWidth += parseInt(width) + parseInt(margin) + parseInt(borders);
			});
			
			this.sliderWidth = ulWidth;
			
			// Set list width
			this.slideList.setStyle('width', ulWidth + 100);
			
			// Calculate position of slider when on left side
			this.leftPosition = 0 - ulWidth + this.sliderContainerWidth;
			
			// Create slide effect
			this.slideEffect	= new Fx.Tween(this.slideList, {duration: this.options.duration, transition: this.options.transition});

			// Add handlers
			this.addHandlers();

			// Disable unusable buttons
			this.disableUnusable();
		}
		else
			this.disableAll();
	},
	
	/**
	 *	Add eventhandlers
	 */
	addHandlers: function(){
		
		// Disable following of link
		this.options.previousButton.onclick = function(){ return false; }
		this.options.nextButton.onclick = function(){ return false; }
		
		// Slide events
		this.options.previousButton.addEvent('click', this.slidePrevious.bind(this));
		this.options.nextButton.addEvent('click', this.slideNext.bind(this));
		this.slideEffect.addEvent('onComplete', function(){
			this.inTransition = false;												 
		}.bind(this));
	},
	
	/**
	 *	Slide to previous item
	 */
	slidePrevious: function(e){
		if(!this.options.previousButton.disabled){
			this.slide(-300);
		}
	},
	
	slideNext: function(e){
		if(!this.options.nextButton.disabled){
			this.slide(300);
		}
	},
	
	/**
	 *	Perform slide
	 */
	slide: function(direction){
		// Perform slide
		if(!this.inTransition){
			
			newMargin = parseInt(this.slideList.getStyle('right')) + direction;	
			if(direction > 0){
				if(parseInt(this.slideList.getStyle('right')) + direction > 0){
					newMargin = 0
				}
			}else{
				if(parseInt(this.slideList.getStyle('right')) + direction < this.leftPosition){
					newMargin = this.leftPosition;
				}
			}
						
			this.inTransition = true;
			this.slideEffect.start('right', newMargin);
			
			// Enabled or disable buttons
			this.disableUnusable(direction);	
		}
	},
	
	/**
	 *	Disable buttons that are not usable
	 */ 
	disableUnusable: function(direction){
		if(direction < 0){
			if( parseInt(this.slideList.getStyle('right')) + direction <= this.leftPosition ){
				this.options.previousButton.addClass('disabled');
				this.options.previousButton.disabled = true;
			}
			this.options.nextButton.removeClass('disabled');
			this.options.nextButton.disabled = false;
		}else{		
			if( !direction || parseInt(this.slideList.getStyle('right')) + direction >= 0 ){
				this.options.nextButton.addClass('disabled');
				this.options.nextButton.disabled = true;
			}
			this.options.previousButton.removeClass('disabled');
			this.options.previousButton.disabled = false;
		}
		
	},

	disableAll: function() {
		this.options.nextButton.addClass('disabled');
		this.options.nextButton.disabled = true;

		this.options.previousButton.addClass('disabled');
		this.options.previousButton.disabled = true;
	}
});
ListSlider.implement(new Options);