$(document).ready(function() {
		
	var banners = $("#banners div");
	var links = $("#menuAnim a");
	
	var intervalle=7000;
	var fadeTime = 500;

	var def = {};
	
	var i=0;
	links.each(function(){
		var self=$(this);
		var name=self.attr('id');
		var thisbanners = $('#banners_'+name);
		def[name] = {};
		def[name].nbanners = thisbanners.children().length;
		def[name].curbanner = 1;
		def[name].container = thisbanners;
		def[name].banners = thisbanners.children();
		def[name].hovering = $('<span/>').css('background-image', self.css('background-image')).appendTo(self);
		//console.log(self.css('background-image'));
		//console.log(name, self.data('nbanners'));
		if(i==0){
			def[name].hovering.css('opacity',1).show();
		} else {
			def[name].hovering.css('opacity',0).hide();
		}
		i++;
	});
	
	banners.eq(0).show();
	banners.find("a").hide();
	banners.eq(0).find("a:eq(0)").show();/**/
	var bgBlanc = $("#whiteBg").css('opacity',0);
	
	var curLink=0;
	var changeLink;
	
	
	//console.log(nbanners);
	var animation  = function(swapItems) {
		//console.log('set int');
		return function(){
			//l'argument swapItems indique si on swap d'item à la fin des banners d'un item ou si on loop dans les banners d'un meme item
			var identifier = links.eq(curLink).attr('id');
			
			//le pannel qu'on voit pour cet item est le dernier : on switch d'item
			if( def[identifier].curbanner >= def[identifier].nbanners && swapItems){
				
				def[identifier].hovering.animate({opacity:0}, fadeTime, function(){def[identifier].hovering.hide();});//cache le actif de la fleche qui l'était
				changeLink=true;
				def[identifier].curbanner = 1;//reinit cet item
				
			} else {//on montre le prochain pannel

				changeLink=false;
				def[identifier].curbanner++;//incremente

				if(!swapItems) {//si on doit pas swapper d'item mais qu'il n'y a qu'un seul bloc
					if(def[identifier].nbanners==1) return ;
					if(def[identifier].curbanner > def[identifier].nbanners) def[identifier].curbanner=1;
				}

			}

			bgBlanc.show();//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
			bgBlanc.animate({opacity:1}, fadeTime, function () {

				if(changeLink==true){//si on change l'item de lien

					banners.hide();//cache les banners

					curLink++;//incremente l'item
					
					if(curLink >= links.length){
						curLink = 0;
					}
					
					identifier = links.eq(curLink).attr('id');
					
					def[identifier].hovering.show().animate({opacity:1}, fadeTime);//met le hover sur le nouveau lien actif
					def[identifier].container.show();//montre ce bloc

				}

				//console.log('Montre le bloc '+def[identifier].curbanner+' de litem '+curLink+' ' +identifier+' swap:'+swapItems);
				
				//var banners = $('#banners_'+name).children();
				def[identifier].banners.hide();//cache tous les banners de cet item
				def[identifier].banners.eq(def[identifier].curbanner-1).show();//mais montre l'actif
				
				links.eq(curLink).attr('href', def[identifier].banners.eq(def[identifier].curbanner-1).attr('href'));

				bgBlanc.animate({opacity:0},fadeTime, function(){ bgBlanc.hide()})
				
			});
		};
	};
	
	
	var startAnim = setInterval(animation(1), intervalle);
	
	
	links.hover(
	function(){

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

		
		bgBlanc.stop();

		var identifier = links.eq(curLink).attr('id');
		def[identifier].hovering.stop().hide();//
		def[identifier].container.hide();//cache l'image hover par dessus le lien inactivé
		
		
		//sette la nouvelle position
		curLink=$(this).prevAll('a').length;
		identifier = links.eq(curLink).attr('id');
		
		def[identifier].curbanner=1;
		def[identifier].hovering.show().animate({opacity:1}, fadeTime);//
		
		$(this).attr('href', def[identifier].banners.eq(0).attr('href'));
		
		bgBlanc.show();
		bgBlanc.animate({opacity:1}, fadeTime,function () {
			//console.log(curLink);
			banners.hide();
			
			def[identifier].container.show();
			def[identifier].banners.hide();//cache tous les banners de cet item
			def[identifier].banners.eq(def[identifier].curbanner-1).show();//mais montre l'actif

			bgBlanc.animate({opacity:0}, fadeTime, function() {
				bgBlanc.hide();
			});
				//curLink = curLink2
		});

		startAnim = setInterval(animation(0), intervalle);//start l'anim à l'intérieur des banners de cet item


	}, 
	function(){
		clearInterval(startAnim );//claire l'animation automatique entre les éléments
		startAnim = setInterval(animation(1), intervalle);
	});
	

});