//wait for document to be ready (the page to finish loading)
$(document).ready(function() {

//Variable to hold ID of the tab to display
var TabSrc;

//*** Sliding Window ***
  $("#TabsList a").mouseenter(function(){
    //Get the id of which tab to slide to from the a's rel attribute
	TabSrc = $(this).attr("rel");
	
	//remove hovered tab's class
	$("#TabsList a").removeClass("Tab-a-hover");
	
	//add class to hovered tab
	$(this).addClass("Tab-a-hover");
	
	//call the fadeTab function
	fadeTab();
	
  });

//*** Main Tab fading function
	function fadeTab(){
	
		//Calculate where to move Tabs container to (assuming each div is 450px)
		var SlideTo = ((TabSrc * -448) + "px");
		
		//fade out current tab, move content div to display the correct tab, fade back in
		$("#TabsContentContainer").stop().fadeTo("fast", 0, function(){
			$(this).css("left", SlideTo);
		}).fadeTo("fast", 1);
	}

//End of document ready function
});