//
// Class Scroller
//
var Scroller = Class.create();
Scroller.prototype = {
	initialize: function (tabContainer, tabContained, tabBtnNext, tabBtnPrevious) {
		this.tabContainer = tabContainer;
		this.tabContained = tabContained;
		this.tabBtnNext = tabBtnNext;
		this.tabBtnPrevious = tabBtnPrevious;
		
		this.update();
	},
	
	update: function () {		
		//Position.relativize($(this.tabContained));
	
		// calcolo la larghezza del singolo tab
		var liElms = $(this.tabContained).getElementsBySelector('li');
		if (liElms.length == 0) {
			return;
		}
		var aElm = liElms[0].getElementsBySelector('a')[0];
		this.liWidth = aElm.offsetLeft + aElm.offsetWidth + 1; // border-right del li
	
		this.initialX = $(this.tabContained).offsetLeft;
		this.containedLiCount = $(this.tabContained).getElementsBySelector('li').length;
		this.containedWidth = this.liWidth * this.containedLiCount;
		this.visibleLiCount = Math.floor($(this.tabContainer).offsetWidth / this.liWidth);
		
		$(this.tabContained).setStyle({
			'width': this.containedWidth + 'px',
			'position': 'relative',
			'float': 'left'
		});
		
		this.finalX = $(this.tabContained).offsetLeft - this.containedWidth +
			$(this.tabContainer).offsetWidth;
		
		// posiziono sul selected
		var selElms = $(this.tabContained).getElementsByClassName('selected');
		if (selElms.length > 0) {
			var selElm = selElms[0];
			var selElmPosition = selElm.previousSiblings().length + 1;
	
			if (selElmPosition > this.visibleLiCount) {
				var newLeft =  -1 * (selElmPosition - this.visibleLiCount) * this.liWidth;
				$(this.tabContained).style.left = newLeft + 'px';
			}
		}
		
		Event.observe(this.tabBtnNext, 'click', this.scroll.bind(this, false));
		Event.observe(this.tabBtnPrevious, 'click', this.scroll.bind(this, true));
	},
	
	scroll: function (left) {
		var offset = Position.positionedOffset($(this.tabContained));
	
		var newX = $(this.tabContained).offsetLeft + (left? 1 : -1) * this.visibleLiCount * this.liWidth;
		if (newX > this.initialX) {
			newX = this.initialX;
		}
		if (newX < this.finalX) {
			newX = this.finalX;
		}
		
		$(this.tabContained).style.left = (newX - this.initialX) + 'px';
	}
};