$(document).ready(function(){
		
			var currentLeft;
			var timerID = 0;
		
			$("ul.nav li a").mouseover(function(){
				  
			      $("span#highlight").stop(clearQueue=true);
				  var position = $(this).position();
				  var width = $(this).css("width").replace("px","");
				  
				  if (width > 56)	{
					var left = (width / 2) - 28;
					left = position.left + left;
				  }
				  else	{
					left = position.left;
				  }
				  currentLeft = left;
				 
				  $("span#highlight").animate( { left:left+"px" }, 100, "swing");
			 });
			
			
			function resetHighlight()	{
			
				$("span#highlight").stop(clearQueue=true);
			
				// get the current page
				var currentPage = $("body").attr("id");
				var cpWidth = $("ul li."+currentPage+" a").css("width").replace("px","");
				var cpLeft = $("ul li."+currentPage+" a").position();
				
				if (cpWidth > 56)	{
					var left = (cpWidth / 2) - 28;
					left = cpLeft.left + left;
				  }
				else	{
					left = cpLeft.left;
				}

				$("span#highlight").animate( { left:left+"px" }, 150, "swing");
				
			}
			
			// remove link background images since we're re-doing the hover interaction below 
			// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
			// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
			$(".nav").children("li").each(function() {
				var current = "nav current-" + ($(this).attr("class"));
				var parentClass = $(".nav").attr("class");
				if (parentClass != current) {
					$(this).children("a").css({backgroundImage:"none"});
				}
			});	
			
			// create events for each nav item
			attachNavEvents(".nav", "home");
			attachNavEvents(".nav", "comp");
			attachNavEvents(".nav", "laptop");
			attachNavEvents(".nav", "dvd");
			attachNavEvents(".nav", "tv");
			attachNavEvents(".nav", "lapjacks");
			attachNavEvents(".nav", "downloads");
		
			// Google chrome does not work with transparent fade
			function attachNavEvents(parent, myClass) {
				$(parent + " ." + myClass).mouseover(function() {
					$(this).append('<div class="nav-' + myClass + '"></div>');
					//$("div.nav-" + myClass).css({display:"none"}).fadeIn(300);
					 clearTimeout(timerID);
				}).mouseout(function() {
					$("div.nav-" + myClass).remove();
					timerID = setTimeout(resetHighlight,500);
				}).mousedown(function() {
					$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
				}).mouseup(function() {
					$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
				});
			}
			
		});