/*
	Class:			GallerySlider
	Author:			Tom Kentell
	Version:		0.2
	Dependencies:	Core: Fx.Morph
					More: Element.Measure
	Date:			06/01/2010
*/

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

	options: {
		gallerySlider: '.gallery_slider',
		previousButton: '.gallery_previous',
		nextButton: '.gallery_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.options.itemSize = $$(this.options.gallerySlider+' li')[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.options.gallerySlider+' li').length <= this.options.itemsShown) {
			$$(this.options.gallerySlider).addClass('noscroll');
			$$(this.options.gallerySlider +' '+ this.options.previousButton).addClass('disabled').addEvent('click', function(e) { e.stop(); });
			$$(this.options.gallerySlider +' '+ this.options.nextButton).addClass('disabled').addEvent('click', function(e) { e.stop(); });
		} else {
			// work out width of container based on all children
			$$(this.options.gallerySlider+' li').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.gallerySlider+' ul').setStyle('width',this.options.containerTotalWidth);

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

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

			this.options.myMorphLeft = new Fx.Morph($($$(this.options.gallerySlider+' ul')[0].getProperty('id')),{onComplete:function() {this.options.currentItem = this.options.currentItem - this.options.scrollBy;}.bind(this)});
			this.options.myMorphRight = new Fx.Morph($($$(this.options.gallerySlider+' ul')[0].getProperty('id')),{onComplete:function() {this.options.currentItem = this.options.currentItem + this.options.scrollBy;}.bind(this)});
		}
	},

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

			// button states
			$$(gs +' '+ this.options.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
				$$(gs +' '+ this.options.previousButton).addClass('disabled');
			}
		}
	},

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

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

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