// from http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/
// with alterations by LTW

$(document).ready(function(){
	//Initialize
	//Set the selector in the first tab
	//$(" .navigation span:first").addClass("selector");
	$(" .navigation span#slide-selected").addClass("selector");

	var count = 0;
	
	//Add click action to tab menu
	$(".navigation span").click(function(){
		//Remove the exist selector
		$(".selector").removeClass("selector");
		//Add the selector class to the sender
		$(this).addClass("selector");
		
		//Find the width of a tab
		var TabWidth = $(".TabContent:first").width();
		if(parseInt($(".TabContent:first").css("margin-left")) > 0)
			TabWidth += parseInt($(".TabContent:first").css("margin-left"));
		if(parseInt($(".TabContent:first").css("margin-right")) >0)
			TabWidth += parseInt($(".TabContent:first").css("margin-right"));
		//But wait, how far we slide to? Let find out
		//If we're not clicking on the first span OR this is the first click
		//(Without this, the first click on the first span rolls the container to an empty spot)
		
		//alert($(".navigation span").index(this));
		 
		if ($(".navigation span").index(this) != 0 || count != 0 ) {
			var newLeft = -1* $(".navigation span").index(this) * TabWidth;
	
			//Ok, now slide, and then count
			$(".AllTabs").animate({	left: + newLeft + "px"},500);
		}
		count++;
	});
});