var hoverColour = "#FFF";
var initialColour = "#1F8EC1";
var initialColour2 = "#000000";


$(function(){
	$("a.hoverBtn").show(350, function() {
		$(this).wrap("<div class=\"hoverBtn\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn").show(350, 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
			
			//fade in the background
		$(this).parent().children("div")
				.stop()
				.css({"display": "none", "opacity": "1"})
				.fadeIn(350);
			//fade the colour
			$(this).children("span").children(".title").stop()
				.animate({color: hoverColour}, 250);
			$(this).children("span").children(".text2").stop()
				.animate({color: hoverColour}, 250);

		},function(){
			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut(350);
			//fade the colour
			$(this).children("span").children(".title").stop()
				.animate({color: initialColour}, 250);
			$(this).children("span").children(".text2").stop()
				.animate({color: initialColour2}, 250);
		});
	});
});