var t;
var test = 'ok';//variable pour arreter ou lancer le défilement

function controle(e) {
	Event.observe($('a_la_une'),'mouseover',affiche_visuel);
	Event.observe($('a_la_une'),'mouseout',li_noir);
	Event.observe($('centre'),'mouseover',testDefilement);
}
//fonction qui test pour remettre ou non le défilement
function testDefilement(e) {	
	if(test=='ko')
		apparition(2);	
	test = 'ok';	
}//testDefilement

function li_noir(e) {
	Event.stop(e);
	var element = Event.element(e);
	//si c'est l'élément <a>
	if(element.nodeName != 'LI')
		element = element.up('<li>');
	if(element.nodeName == 'LI')
		element.down().setStyle({color: '#000'});
}//li_noir

function affiche_visuel(e){	
	Event.stop(e);
	var element = Event.element(e);
	
	apparition(0);

	//si c'est l'élément <a>
	if(element.nodeName != 'LI')
		element = element.up('<li>');

	if(element.nodeName == 'LI' || element.nodeName == 'SPAN')
	{
		element.down('a').setStyle({color: '#fff'});
		var even = element.down('a').id;
		var id_image = 'img'+even;
		
		var i=0;
		while ($('image_une').down(i).getStyle('display') == 'none' )
		{
			i = i +1;
		}
		
		if(id_image!=$('image_une').down(i).identify())
		{
			//new Effect.Fade($('image_une').down(i),{duration: 0.12, from: 1, to: 0});
			//$('image_une').down(i).setStyle({display:'none'});
			//new Effect.Appear($(id_image),{duration: 0.12, from: 0, to: 1, delay: 1});
			//$(id_image).setStyle({display:'block'});	
			

//			new Effect.Fade($('image_une').down(i),{queue: 'front', duration: 0.3});
//			new Effect.Appear($(id_image),{queue: 'end', duration: 0.3});
			$('image_une').down(i).setStyle({display:'none'});
			$(id_image).setStyle({display:'block'});				
		}
		/*
		//test car quand on est sur le li l'image change, on va sur le a du li cela ne bouge pas
		//mais quand on sort du a on va obligatoirement sur le li donc l'image change 
		//pour éviter ca on test si l'image à afficher ne l'est pas déjà
		if($('image_une').down('img').identify()!='img_'+even)
		{
			//new Effect.Opacity($('image_une'),{duration: 0.3, from: 1, to: 0});
			//test.delay(0,even);
			var id_image = 'img_'+even;
			var i=0;
				alert($('image_une').down(i).inspect());
			while ($('image_une').down(i).inspect() == '<img>' )
			{
				$('image_une').down(i).setStyle({display:'none'});
				alert($('image_une').down(i).inspect());
			}
			$(id_image).setStyle({display:'block'});
		}*/
	}	
}
//fonction lancée au chargement de la page
function play(e){	
	//on met le 1er li en hover et on lance le défilement que si il y a plusieurs une
	var tabLongueur = ($A($('a_la_une').getElementsBySelector('img'))).length;
	if(tabLongueur>1)
	{
		var id = $('image_une').down().identify().substring(3);
		$(id).up().removeClassName('onglet');
		$(id).up().addClassName('defil_auto');
		$(id).setStyle({color:'#fff'});
		setTimeout("apparition(2)",2000);
	}
}//play

function apparition(code){

	var tabLongueur = ($A($('a_la_une').getElementsBySelector('img'))).length;
	
	if(tabLongueur>1)
	{
		if(code == 2)
		{
			var i=0;
			while ($('image_une').down(i).getStyle('display') == 'none' )
			{
				i = i +1;
			}
			var img = $('image_une').down(i);
			
			//test si il y a une image après celle en court
			if(img.next())
				var imgSuivante = img.next();			
			else
				var imgSuivante = $('image_une').down(0);
			
			//on cache l'élément
			var id = img.identify().substring(3);
			$(img).setStyle({display:'none'});
			$(id).up().removeClassName('defil_auto');
			$(id).up().addClassName('onglet');
			$(id).setStyle({color:'#000'});
			//on affiche le nouveau
			var idnext = imgSuivante.identify().substring(3);
			imgSuivante.setStyle({display:'block'});
			$(idnext).up().removeClassName('onglet');
			$(idnext).up().addClassName('defil_auto');
			$(idnext).setStyle({color:'#fff'});			
			
			t = setTimeout("apparition(2)",4000);	
		}
		else
		{
			//on arrete le défilement
			clearTimeout(t);
			test = 'ko';
			//on remet les class
			var li_defil_auto = $$('.defil_auto').first();
			
			if(li_defil_auto)
			{
				li_defil_auto.removeClassName('defil_auto');
				li_defil_auto.addClassName('onglet');
				li_defil_auto.down().setStyle({color:'#000'});
			}		
		}
	}
}

Event.observe(window, 'load', play);
Event.observe(window, 'load', controle);