// JavaScript Document

$(function(){
	var $el, leftPos, newWidth,
		$nav = $("#nav");

	$nav.prepend("<li id='hoverbg'></li>");

	var $hoverbg = $("#hoverbg");

	if ($(".active a").size()) {
		var tempPos = $(".active a").position().left;
	} else {
		var tempPos = 0;
	}

	$hoverbg
		.width($(".active").width())
		.height(20)
		.css("left", tempPos)
		.data("origLeft", tempPos)
		.data("origWidth", $hoverbg.width());
//		.data("origColor", $(".active a").attr("rel"));

	$("#nav li").find("a").hover(function() {
		$el = $(this);
		leftPos = $el.position().left;
		newWidth = $el.parent().width();
		$hoverbg.stop().animate({
			left: leftPos
			,width: newWidth
//			,backgroundColor: $el.attr("rel")
		},"slow")
	}, function() {
		$hoverbg.stop().animate({
			left: $hoverbg.data("origLeft")
			,width: $hoverbg.data("origWidth")
//			,backgroundColor: $hoverbg.data("origColor")
		},"slow");    
	});
});