(function () {

$("#anime img").hide();
$("#anime p, #anime ul, #menu1 li a,#menu3 li").css("display","none");

$("#menu3 li").each(function () {$(this).hover(function () { $(this).addClass("hover"); }, function () {$(this).removeClass("hover");});});

$("#menu3 li").hover(function () {
		$(this).animate({"marginLeft":10},80);
		$("a > img", $(this)).hide();
		$("span img", $(this)).show();
}, function () {
		$(this).animate({"marginLeft":0},80);
		$("a > img", $(this)).show();
		$("span img", $(this)).hide();
});

$("#menu1 li").each(function () {
	var t = $(this);
	
	t.mouseover(function () {
			t.addClass("hover");
		}).mouseenter(function () {
			t.addClass("hover");
		}).mouseleave(function () {
			t.removeClass("hover");
		});
	});
	
	
})();


function startAnimation () {
	
	$("#chargement").remove();
	$("#anime").css("display","block");
	
	var animation = function () {

		// bandeau blanc qui glisse
		$("#bann").show('slide',null,300, function () {
		
			// bienvenue qui apparaît
			$("#bienvenue").fadeIn(800);
			// affiche le batiment avec l'opacité
			$("#batiment").show('drop',null,200, function () {
			
				// "déplie" le logo
				$("#logo").show('blind',null,600, function () {
				
					// fait glisser la légende du menu en haut
					$("#legende").show('drop',null,400);
					// truc qui marche pas.
					$("#deco1bis").show('drop',null,400);
					// affiche les bidules oranges et rond en dessous du batiment.
					$("#deco1").fadeIn(200);
					
					//affiche le menu du haut
					$("#menu1").fadeIn(100);
					
					var i = 0;
					// boucle sur tous les <li> pour les faire apparaitre progressivement.
					$("#menu1 li").each(function () {
						var that = $(this).css("display","block");
						
						setTimeout(function () {
							$("a > img", that).show('scale',{percent:100},200);
						},200*i);
						
						$("a", that).css("display","block");
						
						$("span img", that).css("display","block");
						
						i++;
					});
					
					// affiche les image_typo
					$("#menu1 span img, #menu3 a > img").css("display","block");
					
					// le croissant jaune apparaît
					$("#deco2").fadeIn(100, function () {
					
						// la grosse fleche jaune d'aveugle débarque
						$("#deco2_fleche").show('drop', null, 500);
						// déplie le menu
						$("#menu3").show('blind', null, 500, function () {

							var n = 0;
							// fait apparaître les <li> avec un effet sympa
							$("#menu3 li").each(function () {
								var that = $(this);
								
								setTimeout(function () {
									that.show('drop',null,300, function () {
										that.animate({marginLeft:0,paddingLeft:112,backgroundPosition:'55px 0'},80);
									}).css({"display":"block","margin-left":0,"padding-left":0});
								},100*n);
								
								n++;
									
							});
							
						});
					
						
					});
				
				});
				// 400ms et deco2 apparaît
				
			});
		
		});
	
	};
	
	
	// commence l'animation gros truc rond qui grandit
	$("#cercle").show('scale',{percent:100},670, animation);
	
	
}



window.onload = startAnimation;