$(document).ready(function() {
		valcing.init()
	});
	
	valcing = {
		init : function()  {


			$("#animSection div:eq(0)").css('display','block');
			$("#animSection div a").css('display','none');
			$("#animSection div:eq(0) a:eq(0)").css('display','block');
			$("#animSection .whiteBg").css('opacity',0)

			$("#menuAnim a span").css('opacity',0)		
			$("#menuAnim a:eq(0) span").css('opacity',1)		
			valcing.divPosition = 0
			valcing.callback = true
			valcing.allValcing = $("#menuAnim a").size();

			valcing.nBlocs=new Object();//array qui contiendra le nombre de blocs par lien
			valcing.blocPos=new Object();//array qui contiendra la position actuelle de chaque lien

			//loop dans les liens, check combien de bloc chacun
			for(var i=0;i<valcing.allValcing;i++){
				valcing.nBlocs[i]=$('#animSection div:eq('+i+') a').size();
				valcing.blocPos[i]=1;//initialise la pos originale

				for(var y=0;y<valcing.nBlocs[i];y++){
					if(i!=0 && y!=0) $("#animSection div:eq("+i+") a").eq(y).css("display", "none");//cache tous les blocs sauf le premier
				}

			}

			//console.log(valcing.nBlocs);

			valcing.startAnim = setInterval("valcing.animation(1)", 7000);
			
			$("#menuAnim a").hover(function () {

					clearInterval(valcing.startAnim );//claire l'animation automatique entre les éléments

					$("#menuAnim a span").stop();//arrete les animations en cours
					$("#animSection .whiteBg").stop();

          			$("#animSection div").eq(valcing.divPosition).css("display", "none");//cache l'image hover par dessus le lien inactivé
					$("#menuAnim a span").not($(this).find("span")).animate({opacity:0}, 300);



					//sette la nouvelle position
					valcing.divPosition=$(this).prevAll('a').length;
					valcing.blocPos[valcing.divPosition]=1;

					$("#menuAnim a").eq(valcing.divPosition).find("span").animate({opacity:1}, 300);//met le hover sur le nouveau lien actif

                    $("#animSection .whiteBg").css("display","block");
	                $("#animSection .whiteBg").animate({opacity:1}, 300, function () {
							//console.log(valcing.divPosition);
							$("#animSection div").css("display", "none");
							$("#animSection div").eq(valcing.divPosition).css("display", "block");
                            $("#animSection div:eq("+valcing.divPosition+") a").css("display", "none");//cache tous les blocs de cet item
							$("#animSection div:eq("+valcing.divPosition+") a").eq(0).css("display", "inline");//mais montre l'actif

							$("#animSection .whiteBg").animate({opacity:0}, 300, function() {
								$("#animSection .whiteBg").css("display","none")
								});
							//valcing.divPosition = valcing.divPosition2
						})

                    valcing.startAnim = setInterval("valcing.animation(0)", 7000);//start l'anim à l'intérieur des blocs de cet item






					//console.log(dbg+' remplacé par '+valcing.divPosition);


					//

					/*clearInterval(valcing.startAnim );//claire l'animation automatique entre les éléments
					$("#menuAnim a span").stop();
					$("#animSection .whiteBg").stop();

					$("#menuAnim a span").not($(this).find("span")).animate({opacity:0}, 300);
					valcing.divPosition = $(this).prevAll('a').length;

					//console.log(valcing.divPosition);

					$(this).find("span").animate({opacity:1}, 300);

					$("#animSection .whiteBg").css("display","block");
					$("#animSection .whiteBg").animate({opacity:1}, 300, function () {
						//console.log(valcing.divPosition);
						$("#animSection div").css("display", "none");
						$("#animSection div").eq(valcing.divPosition).css("display", "block")
						$("#animSection .whiteBg").animate({opacity:0}, 300, function() {
							$("#animSection .whiteBg").css("display","none")
							});
						//valcing.divPosition = valcing.divPosition2
					})*/
			}, 
		      function () {
		      	clearInterval(valcing.startAnim );//claire l'animation automatique entre les éléments
		      	valcing.startAnim = setInterval("valcing.animation(1)", 7000);
	      	});
		},
		animation : function(swapItems)  {

		//console.log(swapItems);

			//l'argument swapItems indique si on swap d'item à la fin des blocs d'un item ou si on loop dans les blocs d'un meme item

			var cPos=valcing.divPosition;//item actuellement en cours

			if(valcing.blocPos[cPos]==valcing.nBlocs[cPos] && swapItems){//le bloc qu'on voit pour cet item est le dernier : on switch d'item
				$("#menuAnim a").eq(valcing.divPosition).find("span").animate({opacity:0}, 1000);//cache le actif de la fleche qui l'était

				valcing.changeItem=true;

				valcing.blocPos[cPos]=1;//reinit cet item
			} else {//on montre le prochain bloc

				valcing.changeItem=false;

				valcing.blocPos[cPos]++;//incremente

				if(!swapItems) {//si on doit pas swapper d'item mais qu'il n'y a qu'un seul bloc

					if(valcing.nBlocs[cPos]==1) return ;

					if(valcing.blocPos[cPos]>valcing.nBlocs[cPos]) valcing.blocPos[cPos]=1;
				}

			}
			//console.log(cPos);console.log(valcing.blocPos[cPos]);


			$("#animSection .whiteBg").css("display","block");//met le bloc blanc par dessus l'image
			//anime le bloc blanc en opacité, une fois qu'il a fini call back pour mettre l'image
			$("#animSection .whiteBg").animate({opacity:1}, 1000, function () {

				if(valcing.changeItem==true){//si on change l'item de lien
					$("#animSection div").eq(valcing.divPosition).css("display", "none");//cache l'image hover par dessus le lien inactivé

					valcing.divPosition++;//incremente l'item
					if(valcing.divPosition == valcing.allValcing  ){
						valcing.divPosition = 0
					}

					$("#menuAnim a").eq(valcing.divPosition).find("span").animate({opacity:1}, 1000);//met le hover sur le nouveau lien actif
					$("#animSection div:eq("+valcing.divPosition+")").css('display','block');//montre ce bloc

				}

				posActif=valcing.blocPos[valcing.divPosition]-1;//la position du bloc actif (-1 parce qu'index commence à 0
				//console.log('Montre le bloc '+posActif+' de litem '+valcing.divPosition);
				$("#animSection div:eq("+valcing.divPosition+") a").css("display", "none");//cache tous les blocs de cet item
				$("#animSection div:eq("+valcing.divPosition+") a").eq(posActif).css("display", "inline");//mais montre l'actif



				$("#animSection .whiteBg").animate({opacity:0},1000, function() {	$("#animSection .whiteBg").css("display","none")})
			})	
		}
	}