$(document).ready(function() {
	//navigation secondaire de la zone bottom
	// sur l'évènement click de l'élément a ayant pour id #bootomNav1 
	$("a#bottomNav1").click(function () { 
	    // on masque (hide) et on affiche les éléments définis par leur id 
	    
		$("#bottomBloc2").hide();
	    $("#bottomBloc3").hide();
	    $("#bottomBloc4").hide();
	    $("#bottomBloc5").hide();
	    $("#bottomBloc1").show();
	     
	    $("#accroche2").hide();
	    $("#accroche3").hide();
	    $("#accroche4").hide();
	    $("#accroche5").hide();
	    $("#accroche1").show();
	     
	     // on retire la classe CSS bgBottom2 de l'élément div ayant pour id bloc_infos
	     $("div#bloc_infos").removeClass("bgBottom2");
	     $("div#bloc_infos").removeClass("bgBottom3");
	     $("div#bloc_infos").removeClass("bgBottom4");
	     $("div#bloc_infos").removeClass("bgBottom5");
	     // on ajoute la classe CSS bgBottom1 de l'élément div ayant pour id bloc_infos
	     $("div#bloc_infos").addClass("bgBottom1");
	     
	     // idem mais pour les li
	     $("ul#nav1 > li.active2").addClass("border").removeClass("active2");
	     $("ul#nav1 > li.active3").addClass("border").removeClass("active3");
	     $("ul#nav1 > li.active4").addClass("border").removeClass("active4");
	     $("ul#nav1 > li.active5").removeClass("active5");
	     $(this).parents("li").addClass("active1 noborder");
	     
	     // on définit un nouveau margin pour la liste en fonction des templates
	     $("ul.nav2").css({ margin: "25px 0px 0px 10px"});
	     
	     createCookie("LastBottomNav", "1");
	 });
	 
	//-------------------------
	 $("a#bottomNav2").click(function () {
	     $("#bottomBloc1").hide();
	     $("#bottomBloc3").hide();
	     $("#bottomBloc4").hide();
	     $("#bottomBloc5").hide();
	     $("#bottomBloc2").show();
	     
	     $("#accroche1").hide();
	     $("#accroche3").hide();
	     $("#accroche4").hide();
	     $("#accroche5").hide();
	     $("#accroche2").show();
	     
	     $("div#bloc_infos").removeClass("bgBottom1");
	     $("div#bloc_infos").removeClass("bgBottom3");
	     $("div#bloc_infos").removeClass("bgBottom4");
	     $("div#bloc_infos").removeClass("bgBottom5");
	     $("div#bloc_infos").addClass("bgBottom2");
	     
	     $("ul#nav1 > li.active1").addClass("border").removeClass("active1");
	     $("ul#nav1 > li.active3").addClass("border").removeClass("active3");
	     $("ul#nav1 > li.active4").addClass("border").removeClass("active4");
	     $("ul#nav1 > li.active5").removeClass("active5");
	     $(this).parents("li").addClass("active2 noborder");
	     
	     $("ul.nav2").css({ margin: "50px 0px 0px 10px"});
	     
	     createCookie("LastBottomNav", "2");
	 });
	//-------------------------
	 $("a#bottomNav3").click(function () {
	     $("#bottomBloc1").hide();
	     $("#bottomBloc2").hide();
	     $("#bottomBloc4").hide();
	     $("#bottomBloc5").hide();
	     $("#bottomBloc3").show();
	     
	     $("#accroche2").hide();
	     $("#accroche1").hide();
	     $("#accroche4").hide();
	     $("#accroche5").hide();
	     $("#accroche3").show();
	     
	     $("div#bloc_infos").removeClass("bgBottom1");
	     $("div#bloc_infos").removeClass("bgBottom2");
	     $("div#bloc_infos").removeClass("bgBottom5");
	     $("div#bloc_infos").removeClass("bgBottom4");
	     $("div#bloc_infos").addClass("bgBottom3");
	     
	     $("ul#nav1 > li.active1").addClass("border").removeClass("active1");
	     $("ul#nav1 > li.active2").addClass("border").removeClass("active2");
	     $("ul#nav1 > li.active4").addClass("border").removeClass("active4");
	     $("ul#nav1 > li.active5").removeClass("active5");
	     $(this).parents("li").addClass("active3 noborder");
	     
	     $("ul.nav2").css({ margin: "25px 0px 0px 10px"});
	     
	     createCookie("LastBottomNav", "3");
	 });
	//-------------------------
	 $("a#bottomNav4").click(function () {
	     $("#bottomBloc1").hide();
	     $("#bottomBloc2").hide();
	     $("#bottomBloc3").hide();
	     $("#bottomBloc5").hide();
	     $("#bottomBloc4").show();
	     
	     $("#accroche1").hide();
	     $("#accroche2").hide();
	     $("#accroche3").hide();
	     $("#accroche5").hide();
	     $("#accroche4").show();
	     
	     $("div#bloc_infos").removeClass("bgBottom1");
	     $("div#bloc_infos").removeClass("bgBottom2");
	     $("div#bloc_infos").removeClass("bgBottom3");
	     $("div#bloc_infos").removeClass("bgBottom5");
	     $("div#bloc_infos").addClass("bgBottom4");
	     
	     $("ul#nav1 > li.active1").addClass("border").removeClass("active1");
	     $("ul#nav1 > li.active2").addClass("border").removeClass("active2");
	     $("ul#nav1 > li.active3").addClass("border").removeClass("active3");
	     $("ul#nav1 > li.active5").removeClass("active5");
	     $(this).parents("li").addClass("active4 noborder");
	     
	     $("ul.nav2").css({ margin: "55px 0px 0px 10px"});
	     
	     createCookie("LastBottomNav", "4");
	 });
	//-------------------------
		$("a#bottomNav5").click(function () {
			$("#bottomBloc1").hide();
			$("#bottomBloc2").hide();
			$("#bottomBloc3").hide();
			$("#bottomBloc4").hide();
			$("#bottomBloc5").show();

			$("#accroche1").hide();
			$("#accroche2").hide();
			$("#accroche3").hide();
			$("#accroche4").hide();
			$("#accroche5").show();

			$("div#bloc_infos").removeClass("bgBottom1");
			$("div#bloc_infos").removeClass("bgBottom2");
			$("div#bloc_infos").removeClass("bgBottom3");
			$("div#bloc_infos").removeClass("bgBottom4");
			$("div#bloc_infos").addClass("bgBottom5");

			$("ul#nav1 > li.active1").addClass("border").removeClass("active1");
			$("ul#nav1 > li.active2").addClass("border").removeClass("active2");
			$("ul#nav1 > li.active3").addClass("border").removeClass("active3");
			$("ul#nav1 > li.active4").addClass("border").removeClass("active4");
			$(this).parents("li").addClass("active5 noborder");

			$("ul.nav2").css({ margin: "60px 0px 0px 10px"});

			createCookie("LastBottomNav", "5");
		});
		
		var lastSelectedBottomId = readCookie("LastBottomNav");
		
		if (lastSelectedBottomId != null)
		{
			$("a#bottomNav" + lastSelectedBottomId).click();
		}
});