// JavaScript Document

/*

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

$(document).ready(function(){

	// control hover in/out fade speed
	var hoverSpeed = 400;

	// 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)
	$("#header-nav li").children("a").css({backgroundImage:"none"});
	
	
	// toggle colour bar shift on hover of nav items
	attachNavEvents("liens-header");
	attachNavEvents("a-propos-header");
	attachNavEvents("contact-header");

	function attachNavEvents(id, classId) {
		$("#header-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
			$("#main .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();
			});
		});
	}


	
});