/**************************************
 *	Create ListSliders
 **************************************/
window.addEvent('domready', function(){
	$$('div#slider').each(function(slider){
		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.Back.easeOut,
		duration:		500
	},
	
	inTransition:	false,
	slideList:		false,
	sliderWidth:	false,
	itemWidth:		false,
	itemCount:		false,
	slideEffect:	false,
	currentItem:	0,
	
	
	/**
	 *	Initialize
	 */
	initialize: function(options){
		// Fetch options
		this.setOptions(options);
		
		this.slideList		= this.options.slider.getElement('ul');
		if (this.slideList)
		{
			this.sliderWidth	= this.options.slider.getSize().size.x;

			listItem 			= this.slideList.getElement('li');
			this.itemWidth		= listItem.getSize().size.x + parseInt(listItem.getStyle('margin-left')) + parseInt(listItem.getStyle('margin-right'));
			this.itemCount		= this.slideList.getElements('li').length;

			// Create slide effect
			this.slideEffect	= new Fx.Styles(this.slideList, {duration: this.options.duration, wait: false, 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(this.itemWidth);
		}
	},
	
	slideNext: function(e){
		if(!this.options.nextButton.disabled){
			this.slide(0 - this.itemWidth);
		}
	},
	
	/**
	 *	Perform slide
	 */
	slide: function(direction){
		// Perform slide
		if(!this.inTransition){
			newMargin = parseInt(this.slideList.getStyle('margin-left')) + direction;
			this.inTransition = true;
			this.slideEffect.start({'margin-left': newMargin});
			
			// Determine current item (on left side)
			this.currentItem += (direction > 0)? -1 : 1;
			
			// Enabled or disable buttons
			this.disableUnusable();		
		}
	},
	
	/**
	 *	Disable buttons that are not usable
	 */ 
	disableUnusable: function(){
		visibleItems = parseInt(this.sliderWidth / this.itemWidth);
		maxItem = this.itemCount - visibleItems;

		if((this.currentItem == maxItem) || (this.itemCount <= visibleItems)){
			this.options.nextButton.addClass('disabled');
			this.options.nextButton.disabled = true;
		}else{
			this.options.nextButton.removeClass('disabled');
			this.options.nextButton.disabled = false;
		}
		
		if(this.currentItem == 0){
			this.options.previousButton.addClass('disabled');
			this.options.previousButton.disabled = true;
		}else{
			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);