$(document).ready(function() {
	//Initialize
	var selectedTab = 0;
	var totalTabs = 3;
	var autoSlideInterval="";
	
	//Add hover effects
	$(".crossbarLeft").mouseover(function(){
		$(this).addClass("crossbarLeftHover");
	});
	$(".crossbarLeft").mouseout(function(){
		$(this).removeClass("crossbarLeftHover");
	});		
	$(".crossbarRight").mouseover(function(){
		$(this).addClass("crossbarRightHover");
	});
	$(".crossbarRight").mouseout(function(){
		$(this).removeClass("crossbarRightHover");
	});	
	
	//Add automatic tab sliding
	autoSlideInterval = setInterval ( nextTab, 8000 );

	//Add click action to tab menu arrows
	$(".crossbarLeft").click(function(){
		clearInterval( autoSlideInterval );
		autoSlideInterval = setInterval ( nextTab, 8000 );
		prevTab();
	});
	$(".crossbarRight").click(function(){
		clearInterval( autoSlideInterval );
		autoSlideInterval = setInterval ( nextTab, 8000 );
		nextTab();
	});
	
	function prevTab()
	{
		selectedTab -= 1;
		if (selectedTab < 0)
			selectedTab = totalTabs - 1;
		updateTab( 800 );
	}
	function nextTab()
	{
		selectedTab += 1;
		if (selectedTab > totalTabs - 1)
			selectedTab = 0;
		updateTab( 800 );
	}
	function updateTab( speed )
	{
		//Find the width of a tab
		var TabWidth = $(".crossbarTab:first").width();
		if(parseInt($(".crossbarTab:first").css("margin-left")) > 0)
			TabWidth += parseInt($(".crossbarTab:first").css("margin-left"));
		if(parseInt($(".crossbarTab:first").css("margin-right")) >0)
			TabWidth += parseInt($(".crossbarTab:first").css("margin-right"));
		//But wait, how far do we slide?
		var newLeft = -1* selectedTab * TabWidth;
		//Ok, now slide
		$(".crossbarAllTabs").animate({
			left: + newLeft + "px"
		}, speed);
	}
});