/*
	Class:			Slider
	Author:			Tom Kentell
	Version:		0.3 Done some cleanup and optimising, renamed class
	Dependencies:	Core: Fx.Morph
					More: Element.Measure
	Date:			06/01/2010
*/

var Slider = new Class({
	Implements: [Options],

	options: {
		theSlider: $$('.slider')[0],
		previousButton: '.slider_previous',
		nextButton: '.slider_next',
		itemSize: 0,
		itemsShown: 3,
		containerTotalWidth: 0,
		currentItem: 0,
		scrollBy: 1 //how many items to scroll when clicking left/right
	},

	initialize: function(options) {
		this.setOptions(options);
		this.slideElements = this.options.theSlider.getElements('li');
		this.previousButton = this.options.theSlider.getElement(this.options.previousButton);
		this.nextButton = this.options.theSlider.getElement(this.options.nextButton);

		this.options.itemSize = this.slideElements[0].getComputedSize({styles:['margin','padding','border']}).totalWidth;

		// if not enough items shown to scroll then add a class of no scroll to container and disable nav buttons
		if(this.slideElements.length <= this.options.itemsShown) {
			this.options.theSlider.addClass('noscroll');
			this.previousButton.addClass('disabled').addEvent('click', function(e) { e.stop(); });
			this.nextButton.addClass('disabled').addEvent('click', function(e) { e.stop(); });
		} else {
			// work out width of container based on all children
			this.slideElements.each(function(e) {
				this.options.containerTotalWidth += e.getComputedSize({styles:['margin','padding','border']}).totalWidth;
			}.bind(this));

			// set ul to size of all items combined to give smooth scrolling effect, needs overflow hidden to work
			this.options.theSlider.getElement('ul').setStyle('width',this.options.containerTotalWidth);

			// bind scrollLeft function to left handle and add a class of disabled to left button
			this.previousButton.addClass('disabled').addEvent('click', function(e) {
				this.scrollLeft();
				e.stop();
			}.bind(this));

			// bind scrollRight function to right handle
			this.nextButton.addEvent('click', function(e) {
				this.scrollRight();
				e.stop();
			}.bind(this));

			this.options.myMorphLeft = new Fx.Morph($(this.options.theSlider.getElement('ul')),{onComplete:function() {this.options.currentItem = this.options.currentItem - this.options.scrollBy;}.bind(this)});
			this.options.myMorphRight = new Fx.Morph($(this.options.theSlider.getElement('ul')),{onComplete:function() {this.options.currentItem = this.options.currentItem + this.options.scrollBy;}.bind(this)});
		}
	},

	scrollLeft: function() {
		var theSlider = this.options.theSlider;
		if(this.options.currentItem != 0 ) {
			// move items right by morphing to margin-left, current position + itemSize
			this.options.myMorphLeft.start({'margin-left':parseInt(theSlider.getElement('ul').getStyle('margin-left')) + (this.options.itemSize*this.options.scrollBy)});

			// button states
			this.nextButton.removeClass('disabled'); // remove it incase it's disabled and we go left
			if(this.options.currentItem == 1) { // if on the last item then disable button
				this.previousButton.addClass('disabled');
			}
		}
	},

	scrollRight: function() {
		var theSlider = this.options.theSlider;
		if((this.options.currentItem + this.options.itemsShown) != (this.slideElements.length) ) {
			// move items left by morphing to margin-left, current position - itemSize
			this.options.myMorphRight.start({'margin-left':parseInt(theSlider.getElement('ul').getStyle('margin-left')) - (this.options.itemSize*this.options.scrollBy)});

			// button states
			this.previousButton.removeClass('disabled'); // remove it incase it's disabled and we go right

			if(((this.options.currentItem + this.options.itemsShown) + 1) == this.slideElements.length) { // if on the last item then disable button
				this.nextButton.addClass('disabled');
			}
		}
	}
});