window.addEvent('domready', initPage);

var currentTab = 1;
var liWidth = 387;
var tabsCount = 5;
var scrollEffect;

function initPage(){
	
	// init slider
	var sliderBox = $('tabs-content-list');
	if(!$defined(sliderBox)) return;
	
	sliderWidth = liWidth * tabsCount;
	sliderBox.setStyles('position:absolute; left:0; top:0; width: ' + sliderWidth + 'px');
	sliderBox.setProperty('currentPosition', '0');
	sliderBox.setProperty('maxLength', sliderWidth);

	var next = $('next');
	var prev = $('prev');
	
	// next button event
	next.addEvent('click', function(e){
		slideTabs( currentTab + 1 );
		setActiveTab( currentTab + 1 );
		(new Event(e)).stop();
	});
	
	// next button event
	prev.addEvent('click', function(e){
		slideTabs( currentTab - 1 );
		setActiveTab( currentTab - 1 );
		(new Event(e)).stop();
	});

	// init tabs
	$('tab-links').getElements('a').forEach( function(item, ind){
		if(item.href.test('#tab')) {
			// tab click event
			item.addEvent('click', function(e){
				var tabNum = parseInt( this.getProperty('rel') );
				slideTabs( tabNum );
				setActiveTab( tabNum );
				(new Event(e)).stop();
			});
		}
	});
}

function slideTabs( tabNum ){
	if( tabNum == currentTab ) return;
	if( tabNum > tabsCount ) tabNum = 1;
	if( tabNum < 1 ) tabNum = tabsCount;

	// stop scroll Effect if it is running
	if(scrollEffect) {
		scrollEffect.stop();
		scrollEffect.set( scrollEffect.endPoint );
	}
	
	var sliderBox = $('tabs-content-list');

	var currentPosition = parseInt( sliderBox.getProperty('currentPosition') );
	var maxLength = parseInt( sliderBox.getProperty('maxLength') );

	var startPos = currentPosition;
	var endPos = (-1) * (tabNum-1) * liWidth;
	
	scrollEffect = new Fx.Style(sliderBox, "left", {
		'onComplete':function(){}
		} // end Fx params
	);
	
	sliderBox.setProperty('currentPosition', endPos);
	
	scrollEffect.endPoint = endPos;
	scrollEffect.start(currentPosition, scrollEffect.endPoint);
}

function setActiveTab( tabNum ) {
	if( tabNum == currentTab ) return;
	if( tabNum > tabsCount ) tabNum = 1;
	if( tabNum < 1 ) tabNum = tabsCount;

	$('tab-links').getElements('a').forEach( function(item, ind){
		if(item.getProperty('rel') && item.getProperty('rel') == tabNum) {
			item.addClass('active');
		}
		else {
			item.removeClass('active');
		}
	});

	currentTab = tabNum;
}