var hoverColour = "#e8eaeb";

$(function(){
	
	$("a.hoverAction").show("fast", function() {
		var clase = $(this).attr('class');
		$(this).wrap("<div class=\""+clase+"\"> ");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$(".hoverAction").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(){
			//store initial link colour
			if ($(this).attr("rel") == "") {
				$(this).attr("rel", $(this).css("color"));
			}

			var tmp = $(this).parent().children("div");
			//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);
		});
	});
});