var hoverColour = "#FFF";

$(function(){
  $("a.anasayfa, a.pc, a.xbox, a.wii, a.ps3, a.mobil, a.forumlar, a.ara_btn").show("fast", function() {
  $("a.anasayfa").wrap("<div class=\"anasayfa\">");
  $("a.anasayfa").attr("class", "");
  $("a.pc").wrap("<div class=\"pc\">");
  $("a.pc").attr("class", "");
  $("a.xbox").wrap("<div class=\"xbox\">");
  $("a.xbox").attr("class", "");
  $("a.wii").wrap("<div class=\"wii\">");
  $("a.wii").attr("class", "");
  $("a.ps3").wrap("<div class=\"ps3\">");
  $("a.ps3").attr("class", "");
  $("a.mobil").wrap("<div class=\"mobil\">");
  $("a.mobil").attr("class", "");
  $("a.forumlar").wrap("<div class=\"forumlar\">");
  $("a.forumlar").attr("class", "");
  $("a.ara_btn").wrap("<div class=\"ara_btn\">");
  $("a.ara_btn").attr("class", "");
	});
	
	//display the hover div
	$("div.anasayfa,div.pc,div.xbox,div.wii,div.ps3,div.mobil,div.forumlar,div.ara_btn").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"));
			}
			//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);
		});
	});
});