/*

	FADING NAV MENU FOR SITEHQ MENU BAR (requires jQuery 1.3+)
	Matt McNamee, New Business Media, 2012

	Gets the menu bar, wraps the top level in a span,
	adds a fading background span to the end of the
	a tag, then fades in on mouse over and out
	on mouse out

	Uses the CSS class "hoverFade" for the background.

*/

$(document).ready(function() {
	
	// APPEND HTML TO THE MENU BAR
	$("ul#mainNav li a").wrapInner("<span></span>");
	$("ul#mainNav li a").not("ul#mainNav li ul li a").append('<span class="hoverFade"></span>');

	// MAKE THE NEW HTML FADE
	$('ul#mainNav li a').hover(function () {
		$(this).children('.hoverFade').fadeIn(200);
	}, function () {
		$(this).children('.hoverFade').fadeOut(400);
	});
	
});