/*

	-- -- -- -- -- -- --
	naramata house
	nav.css
	functions for navigation manipulation
	-- -- -- -- -- -- --
	
*/

$(document).ready(function(){

	// control hover in/out fade speed
	var hoverSpeed = 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("rooms", "deco1");
	attachNavEvents("amenities", "deco2");
	attachNavEvents("food", "deco3");
	attachNavEvents("rates", "deco4");
	attachNavEvents("packages", "deco5");
	attachNavEvents("naramata", "deco6");
	attachNavEvents("availability", "deco7");
	attachNavEvents("contact", "deco8");

	function attachNavEvents(id, classId) {
		$("#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(hoverSpeed);
			// create colourbars and fade them in
			$("#container .wrap").prepend('<i class="' + classId + '"></i>');
			$("." + classId).css({display:"none"}).fadeIn(hoverSpeed);
		}).mouseout(function() {
			// fade out & destroy pseudo-link
			$("div.nav-" + id).fadeOut(hoverSpeed, function() {
				$(this).remove();
			});
			// fade out & destroy colourbars
			$("i." + classId).fadeOut(hoverSpeed, 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(hoverSpeed);
	}).mouseout(function() {
		// fade out & destroy span
		$("#header h1 span").fadeOut(hoverSpeed, function() {
			$(this).remove();
		});
	});

	
});