var hoverColour = "#000066";

$(function()
{
	$("a.hoverBtn").show("fast", function() 
	{
		$(this).wrap("<div class=\"hoverBtn\">").attr("class", "");
	});
	
	//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(),
			hei = $(this).children("a").height();
		
		//set div's size
		$(this).width(wid).height(hei).children("div").width(wid).height(hei);
		
		//on link hover
		$(this).children("a").hover(function()
		{
			//store initial link colour
			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("fast");
			
			//fade the colour
			$(this).stop().css({ color : $(this).attr("rel") }).animate({ color : hoverColour }, 350);
		}, function()
		{
			//fade out the background
			$(this).parent().children("div").stop().fadeOut("slow");
			
			//fade the colour
			$(this).stop().animate({ color : $(this).attr("rel") }, 250);
		});
	});
});