$(document).ready(function(){
    
var hoverColour = "white";

$(function(){
	$("a.hoverBtn").show("slow", function() {
		$(this).wrap("<div class=\"hoverBtn\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn").show("slow", 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(){ $(this).append(document.createTextNode("Original - Stylish - Simple - Intuitive"));
			//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("slow");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){  $("a:contains('Original - Stylish - Simple - Intuitive')").empty();
	$(this).append(document.createTextNode(""));
$(this).prepend("<span class=\"larger\">Web Design and Development</span>");
			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250); 
				
		});
	});
});

////////////////////////
var hoverColour = "white";

$(function(){
	$("a.hoverBtn1").show("slow", function() {
		$(this).wrap("<div class=\"hoverBtn1\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn1").show("slow", 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(){ $(this).append(document.createTextNode("Rank Higher On Google - View Your Website Traffic Reports"));
			//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("slow");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){  $("a:contains('Rank Higher On Google - View Your Website Traffic Reports')").empty();
			$(this).append(document.createTextNode(""));
	$(this).prepend("<span class=\"larger\">Search Engine Optimization</span>");

			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250); 
				
		});
	});
});


////////////////////////////////	
var hoverColour = "white";

$(function(){
	$("a.hoverBtn2").show("slow", function() {
		$(this).wrap("<div class=\"hoverBtn2\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn2").show("slow", 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(){ $(this).append(document.createTextNode("Fast - Secure - %100 Up-time - No Restrictions"));
			//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("slow");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){  $("a:contains('Fast - Secure - %100 Up-time - No Restrictions')").empty();
			$(this).append(document.createTextNode(""));
	$(this).prepend("<span class=\"larger\">Dedicated Web Hosting</span>");

			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250); 
				
		});
	});
});


////////////////////////////////	
var hoverColour = "white";

$(function(){
	$("a.hoverBtn3").show("slow", function() {
		$(this).wrap("<div class=\"hoverBtn3\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn3").show("slow", 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(){ $(this).append(document.createTextNode("Customized Proprietary Hardware For Large Databases"));
			//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("slow");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){  $("a:contains('Customized Proprietary Hardware For Large Databases')").empty();
			$(this).append(document.createTextNode(""));
	$(this).prepend("<span class=\"larger\">Google Mini Search Appliance</span>");

			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250); 
				
		});
	});
});


////////////////////////////////	

var hoverColour = "white";

$(function(){
	$("a.hoverBtn4").show("slow", function() {
		$(this).wrap("<div class=\"hoverBtn4\">");
		$(this).attr("class", "");
	});
	
	//display the hover div
	$("div.hoverBtn4").show("slow", 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(){ $(this).append(document.createTextNode("Logos - Business Cards - Letterhead - Advertising"));
			//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("slow");
			//fade the colour
			$(this)	.stop()
				.css({"color": $(this).attr("rel")})
				.animate({"color": hoverColour}, 350);
		},function(){  $("a:contains('Logos - Business Cards - Letterhead - Advertising')").empty();
			$(this).append(document.createTextNode(""));
	$(this).prepend("<span class=\"larger\">Graphic Design</span>");

			//fade out the background
			$(this).parent().children("div")
				.stop()
				.fadeOut("slow");
			//fade the colour
			$(this)	.stop()
				.animate({"color": $(this).attr("rel")}, 250); 
				
		});
	});
});

							 });
////////////////////////////////