// Ce tableau nous servira à stocker la largeur du lien pour IE6
var aW = Array();

var browser = "";

$(document).ready(function() {

	// Détermine quel est le type de navigateur 
	if ($.browser.msie && $.browser.version.substr(0,1)<7) { browser = "ie6"; }
	else if ($.browser.msie && $.browser.version.substr(0,1)<8) { browser = "ie7"; }
	
	// initialise le menu:
	$("#fancyJM li").each(function(i){
								   
		// crée un attribut "id" avec pour valeur la position de la liste courrante
		$(this).attr("id", i);
		
		// ajoute l'image à gauche du lien
		$(this).prepend("<div class='fancyJM_arrow'></div>");
	});
	
	// attache l'évenement over/out
	$("#fancyJM li").hover(
		function () { onLiOver($(this));}, // => over
		function () { onLiOut($(this)); }  // => out
	);
	
	// attache l'évenement click
	$("#fancyJM li").click( function(){document.location.href = $(this).children("a").attr("href");});
	
	// ----- IE HACK
	if(browser == "ie7"){ $(".fancyJM_arrow").css("margin-top", "0px"); }
	
	// ----- IE HACK
	/* probleme: IE ne sait pas calculer la largeur d'un élément tant 
	   que celui-ci n'est pas totalement affiché dans le browser
	   Il faut donc créer une liste temporaire...
	*/
	if(browser.indexOf("ie") != -1){
		$("body").append("<ul class='fancyJM_temp'></ul>");
		$("#fancyJM li").each(function(i){
			$(".fancyJM_temp").append("<li><p>"+$(this).children("a").attr("title")+"</p></li>");
		});
		
		// pour y stocker les largeurs des liens dans un tableau...
		$(".fancyJM_temp li p").each(function(i){
			aW[i] = $(this).width();				
		});
		
		// ... puis supprimer cette liste
		$(".fancyJM_temp").remove();
	}
	
	
});

// appele cette fonction au survol de la souris
function onLiOver(e){
	// anime la couleur de fond
	e.animate({ backgroundColor: "#1F1E46", queue: true}, 220);
	
	//animate l'image
	e.children(".fancyJM_arrow").css("margin-top", "7px");
	e.children(".fancyJM_arrow").animate( { marginLeft:"24px", queue: true } , 220 );
	
	//cache le lien
	e.children("a").fadeOut(220,function () {
		
		// change la valeur du lien
		changeLinkvalue($(this));
		
		//affiche le lien
		e.children("a").fadeIn(220);
		
		/* si aucune autre animation n'est en cours 
		   (le curseur est donc toujours au dessus du lien), 
		   effectue l'animation pour étirer la liste */
		if(e.children("a").queue("fx").length <= 1){
			if(browser == "ie6"){  		e.css("width", aW[e.attr("id")]);}
			else if(browser == "ie7"){ 	e.css("width", "100%");}
			else{ 						e.animate({ width: "100%"}, 220); }
		}
	});
}

// appele cette fonction lorsque la souris quitte le lien
function onLiOut(e){
	// meme principe, mais à l'envers!
	e.animate({ backgroundColor: "#797890", queue: true}, 190 );	
	e.children(".fancyJM_arrow").animate( { marginLeft:"16px", queue: true } , 190 )
	e.children("a").fadeOut(190,function () {
		changeLinkvalue($(this));
		if(e.children("a").queue("fx").length <= 1){
			e.children("a").fadeIn(190);
			if(browser == "ie6" || browser == "ie7"){	e.css("width", 190); }
			else{ 										e.animate({ width: 190}, 190); }			
		}
	});
}

/* 
remplace la valeur du lien (e) par celle de son attribut title
puis remplace la valeur de l'attribut par celle du lien...
*/
function changeLinkvalue(e){
	s0 = e.html().replace(/ /gi,"&nbsp;"); // html value
	s1 = e.attr("title").replace(/ /gi,"&nbsp;"); // attribute value
	e.html(s1);
	e.attr("title", s0);
}