$(document).ready(function() {
		
	// set opacity to nill on page load
	$("#mainMenu a .hover").css("opacity","0");
	// Set the span to visible as we have JS
	$("#mainMenu a .hover").css("display","block");		
	
	// on mouse over
	// set active page to 100% opacity
	$("#mainMenu a span.sticky").css("opacity", 1);
	// set active page to 100% opacity reguardless of mouse over events
	$("#nav li span.sticky").hover("opacity", 1);
	
	// Select not active nav span elements for hover effects	
	$("#mainMenu a .hover").not(".sticky").hover(function () {
		// animate opacity to full
			$(this).stop().animate({
				opacity: 1
			}, 'fast');
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, 'medium');
		});
});