/*
 * horizontal scroller with left right buttons
 *
 * Assumes structure:
 * <div class="scrollerWrapperClass">
 *   <ol class="scrollerItemStripId">
 *     <li class="itemContainer">...
 *   </ol>
 * </div>
 */


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

	el: null,
	leftScrollButton: null,
	rightScrollButton: null,
	index: 0,
	itemsTotalNumber: 0,
	scrollerWidth: 0,

	options: {
		leftControl: 'leftScroll', 
		rightControl: 'rightScroll',
		scrollPerClick: 5,
		itemContainerClass: '.item',
		scrollerWrapperClass: 'itemContainer',
		scrollerItemStripId: 'itemStrip',
		buttonHideClass: 'invisible'
	},

	initialize: function (el, options)
	{
		this.el = $(el);
		this.setOptions(options);
		this.buildStructure();
	},
	
	buildStructure: function()
	{
		this.measureWidthOfScroller();
		this.setNumberOfScrollElements();
		this.initializeScrollButtons();
		this.displayScrollButtons();
	},
	
	measureWidthOfScroller: function()
	{
		this.scrollerWidth = $(this.options.scrollerWrapperClass).getSize().x;
	},
	
	setNumberOfScrollElements: function()
	{
		this.itemsTotalNumber = this.el.getElements(this.options.itemContainerClass).length;
	},
	
	addClassesToScroller: function()
	{
		this.el.addClass(this.options.scrollerEnabledClass);
		$(this.options.scrollerItemStripId).addClass(this.options.scrollerEnabledClass);
	},

	initializeScrollButtons: function()
	{
		this.leftScrollButton  = $(this.options.leftControl);
		this.rightScrollButton = $(this.options.rightControl);
		
		// set up button events
		this.addEventsToButton(this.leftScrollButton);
		this.addEventsToButton(this.rightScrollButton);
	},
		
	addEventsToButton: function(button)
	{
		button.addEvent('click', function(event) {
			var type = event.target.get('id');
						
			if (type.test('left')) {				
				if (this.showLeftScrollButton()) this.index--;
			}
			else {				
				if (this.showRightScrollButton()) this.index++;
			}
			
			this.el.getElementById(this.options.scrollerItemStripId).tween('margin-left', (this.index * this.scrollerWidth * -1));
			this.displayScrollButtons();
		}.bind(this));
	},
	
	isValidScrollButtonType: function(type)
	{
		return (type == 'left' || type == 'right');
	},
	
	displayScrollButtons: function()
	{		
		if (this.showLeftScrollButton()) {
			this.displayScrollButton(this.leftScrollButton, true);
		}
		else {
			this.displayScrollButton(this.leftScrollButton, false);
		}
		
		if (this.showRightScrollButton()) {
			this.displayScrollButton(this.rightScrollButton, true);
		}
		else {
			this.displayScrollButton(this.rightScrollButton, false);
		}
	},
	
	showLeftScrollButton: function()
	{
		return (this.index > 0);
	},
	
	showRightScrollButton: function()
	{
		return (((this.index + 1) * this.options.scrollPerClick) < this.itemsTotalNumber);
	},
	
	displayScrollButton: function(button, display)
	{
		if (display) {
			button.removeClass(this.options.buttonHideClass);
		} else {
			button.addClass(this.options.buttonHideClass);
		}
	},
	
	addButtonsToDom: function()
	{
		this.leftScrollButton.inject(this.el);
		this.rightScrollButton.inject(this.el);
	}

	
});