/*
 * 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: {
		scrollPerClick: 5,
		itemContainerClass: '.subject_container',
		scrollerWrapperClass: 'subjects',
		scrollerItemStripId: 'subjects_strip',
		scrollerEnabledClass: 'subjects_strip_js_enabled',
		buttonHideClass: 'invisible'
	},

	initialize: function (el, options)
	{
		this.el = $(el);
		this.setOptions(options);
		this.buildStructure();
	},
	
	buildStructure: function()
	{
		this.measureWidthOfScroller();
		this.setNumberOfScrollElements();
		this.addClassesToScroller();
		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.buildScrollButton('left');
		this.rightScrollButton = this.buildScrollButton('right');
		this.addButtonsToDom();
	},
	
	buildScrollButton: function(type)
	{
		if (!this.isValidScrollButtonType(type)) return null;
		
		var button = this.buildButtonStructure(type);
		this.addEventsToButton(button);
		var buttonImage = new Element('img', {
			'alt': 'Scroll ' + type,
			'src': 'assets/images/pages/home/scroll_' + type + '_button.png',
			'class': 'png'
		});
		buttonImage.inject(button);
		return button;
	},
	
	buildButtonStructure: function(type)
	{
		var button = new Element('div', {
			'id': 'scroll_' + type + '_button',
			'styles': {
				'cursor': 'pointer'
			}
		});
		return button;
	},
	
	addEventsToButton: function(button)
	{
		button.addEvent('click', function(event) {
			var type = event.target.getParent().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);
	}

	
});