var hoverColor = "#fff";
var fadeInSpeed = 400;
var fadeOutSpeed = 600;

$(function(){
	$("nav a").show("fast", function() {
		$(this).wrap("<div class=\"hoverBtn\">");
	});
	
	//display the hover div
	$("div.hoverBtn").show("fast", function() {
		//append the background div
		$(this).append("<div></div>");
		
		//get link's size
		var wid = $(this).children("a").width();
		var hei = $(this).children("a").height();
		
		//set div's size
		$(this).width(wid);
		$(this).height(hei);
		$(this).children("div").width(wid);
		$(this).children("div").height(hei);
		
		//on link hover
		$(this).children("a").hover(function(){
		    //no effect if link is selected
		    if (!$(this).hasClass("selected")) {
			    //store initial link color
			    if ($(this).attr("rel") == "") {
				    $(this).attr("rel", $(this).css("color"));
			    }
			    //fade in the background
			    $(this).parent().children("div")
				    .stop()
				    .css({"display": "none", "opacity": "1"})
				    .fadeIn(fadeInSpeed);
			    //fade the color
			    $(this)	.stop()
				    .css({"color": $(this).attr("rel")})
				    .animate({ "color": hoverColor }, fadeInSpeed);
			}
		},function(){
		    //no effect if link is selected
		    if (!$(this).hasClass("selected")) {
			    //fade out the background
			    $(this).parent().children("div")
				    .stop()
				    .fadeOut(fadeOutSpeed);
			    //fade the color
			    $(this)	
                    .stop()
				    .animate({ "color": $(this).attr("rel") }, fadeOutSpeed);
			}
		});
	});
	
	//on mouse click
	$("nav a").click(function() {
	    //remove the selected class on all links
	    $("nav a").removeClass("selected");
	    
	    //remove the style attribute on all links (avoid overriding of the main CSS, typically colors added dynamically by the jQuery menu)
	    $("nav a").removeAttr("style");
	    
	    //hide the div (right sibling of the link) which is used for the hover effects
		$(this).parent().children("div").css("display", "none");
	    
		//add class to the selected link
		$(this).addClass("selected");
	});
});