window.addEvent('domready', function() {
	
	// bordure gauche des sous menus
	$$('#wrapSousMenu li:first-child a:first-child').setStyle('border-left','3px dotted #fff');
	
	// elements concernés
	var tab = $$('#onglets li');
	var tab2 = $$('#wrapSousMenu div');
	
	
	// calcul nombre d'element
	var n = tab.length;	
	
	// boucle pour ajout d'id 
	for(i=0;i<n;i++){
		tab[i].set('id','menu'+i+'');
		tab2[i].set('id','sousMenu'+i+'');
		$$('#sousMenu'+i+' li a').set('class',''+i+'');
	}
	
	
	// defilement & gestion des evenements sur le menu à onglets

	//initialisation : 
	$('menu0').addClass('active');
	$$('#wrapSousMenu div').setStyle('display','none');
	$('sousMenu0').setStyle('display','block');
	
	// fn de defilement
	function defil(actif){		
			for (i=0; i<=6; i++){
				var onglet = $$('#menu'+i+'');	
				var contenuOnglet = $$('#sousMenu'+i+'');
			
				if (i==actif) {				
					onglet.addClass('active');
					contenuOnglet.setStyle('display','block');
				} else {
					onglet.removeClass('active');
					contenuOnglet.setStyle('display','none');
				}
			}
	};
	
	// fn compteur
	var timerFunction = function(){
		defil(this.counter);
		this.counter++;
		if(this.counter>6){this.counter=0}
		
	};
	
	//lancement du defilement
	var currentCounter = new Hash({counter: 1});
	var timer = timerFunction.periodical(4000, currentCounter);
	
	// pour arreter le defilement: ( a retirer en prod ) 
	//$clear(timer); 

	// Gestion des evenements :
	$$('#wrapSousMenu div').addEvent( 'mouseenter', function(){
		$clear(timer); 		
		var ongletActif = $$('#onglets li.active').getProperty('id');
	});
	
	$$('#onglets li').addEvent( 'mouseenter', function(){
		$clear(timer); 		
		var ongletActif = $$('#onglets li.active').getProperty('id');
	});
	
	 
	$$('#wrapSousMenu div').addEvent( 'mouseleave', function(){
		timer = timerFunction.periodical(4000, currentCounter);
	});	
		
	for (i=0; i<=6; i++){
		$('menu'+i+'').addEvent( 'mouseenter', function(){	
			$clear(timer); 		
			currentCounter = this.getProperty('id').substring(this.getProperty('id').length-1, this.getProperty('id').length);
			defil(currentCounter);	
		});		
	}
	$$('#onglets').addEvent( 'mouseleave', function(){
		if (currentCounter>=6) {
			currentCounter = new Hash({counter:1});
		} else {
			currentCounter++;
			currentCounter = new Hash({counter:currentCounter});
		}
		timer = timerFunction.periodical(4000, currentCounter);
	});
	
	
	
	
});