$(document).ready(function(){

	// control hover in/out fade speed
	var hoverSpeedLogo = 400;
	var hoverSpeedMenu = 300;

	// remove link background images since we're re-doing the hover interaction below 
	// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
	$("#primary-nav li").children("a").css({backgroundImage:"none"});
	
	
	// toggle colour bar shift on hover of nav items
	attachNavEvents("about");
	attachNavEvents("services");
	attachNavEvents("portfolio");
	attachNavEvents("contact");

	function attachNavEvents(id) {
		$("#primary-nav ." + id).mouseover(function() {
			// create pseudo-link and fade it in
			$(this).before('<div class="nav-' + id + '"></div>');
			$("div.nav-" + id).css({display:"none"}).fadeIn(hoverSpeedMenu);
		}).mouseout(function() {
			// fade out & destroy pseudo-link
			$("div.nav-" + id).fadeOut(hoverSpeedMenu, function() {
				$(this).remove();
			});
		});
	}


	$("#header h1 a").mouseover(function() {
		// create new logo span for hover and fade it in
		$("#header h1").append('<span></span>');
		$("#header h1 span").css({display:"none"}).fadeIn(hoverSpeedLogo);
	}).mouseout(function() {
		// fade out & destroy span
		$("#header h1 span").fadeOut(hoverSpeedLogo, function() {
			$(this).remove();
		});
	});

	
});