var listID=0;		//The id of the menu item you're currently over. Used to choose which sub-menu to show.
$(document).ready(function()
{
	var leftShift = $("#headerSection").offset().left;
	$("#navigation li").hover(
		//On mouse over.
		function()
		{
			//Get information about the menu item you're currently over to decide which sub-menu to show and where to show it.
			var pos = $(this).offset();  
			var height = $(this).height();
			listID = this.id.substring(4);
			//If the current menu item is on the right half of the site, the subnav needs to spill left instead of right.
			if(pos.left > (480+leftShift))
			{
				var width = $(this).width();
				$("#dropdown"+listID).css({"left":-10000+"px", "top":-10000+"px"});		//Show the sub menu off screen to get its width.
				$("#dropdown"+listID).show();
				$("#dropdown"+listID).css({"left":(pos.left+width-$("#dropdown"+listID).width())+"px", "top":(pos.top + height)+"px", "backgroundPosition": ($("#dropdown"+listID).width()-20)+"px top"});
			}
			else
			{
				$("#dropdown"+listID).css({"left":pos.left+"px", "top":(pos.top + height)+"px"});
				$("#dropdown"+listID).show();
			}
		},
		//On mouse out. 
		function()
		{
			$("#dropdown"+listID).hide();
		}
	);
	$(".subnav").hover(
		function()
		{
			listID = this.id.substring(8);
			$("#main"+listID+" a").addClass('over');
			$(this).show();
		}, 
		function()
		{
			$("#main"+listID+" a").removeClass('over');
			$(this).hide();
		}
	);
});