var visonneuse = Class.create(Effect, {
	  initialize: function(sensDeDeplacement)
		{
	    //this.flechesHtml = '<div id="scroll"><a href="#" class="fleche" id="haut"><img alt="monter" src="/images/accueil/fleche_haut.gif" /></a><a id="bas" href="#" class="fleche"><img alt="descendre" src="/images/accueil/fleche_bas.gif" /></a></div>';
	    this.sensDeDeplacement 	= sensDeDeplacement;
	  //  this.liHeight 					= 40;
	    this.liHeight 					= 45;
	    this.lis 								= $$('#liste_en_bref li');
	  },
	  init_nav: function()
		{
		  $('conteneur').insert({before: this.flechesHtml}); 
			// Gestion des boutons
			// this.hautEvent = Event.observe('haut', 'click', this.clickUp.bind(this));
			// 			this.basEvent = Event.observe('bas', 'click', this.clickDown.bind(this));
	  },
	  init: function() 
		{
			this.init_nav();
			$('visio').setStyle({overflow:"hidden", height: this.liHeight + 'px'});
			
			this.lis.each(this.set_li_height, this);
			this.lis.each(this.set_li_id, this);
			this.id_li_en_cours = 0;
      this.lis[0].show();
			$('liste_en_bref').setStyle({padding: 0});
	  },
	  set_li_height: function(n)
		{
		  n.setStyle({display:"block", height: this.liHeight + 'px', float: 'left'});
      n.hide();
	  },
	  set_visible: function(n)
		{
		  n.setStyle({display:"block", height: this.liHeight + 'px', float: 'left'});
      
	  },
		set_li_id: function(n, index)
		{
			n.id = index;
		},
		get_id_li_suivant: function(id)
		{
			var nextId = id + 1;

			return (nextId > this.lis.length - 1) ? 0 : nextId;
		},
		get_id_li_precedent: function(id)
		{
			var nextId = id - 1;
			
			return (nextId < 0) ? this.lis.length - 1 : nextId;
		},
	  affiche: function(li_a_afficher)
		{
			if(this.sensDeDeplacement == "haut") 
				this.up();
			else 
				this.down();
	  },
		monFade: function()
		{
      this.lis[this.id_li_en_cours].fade({ duration: 0.5 });
			//new this.Opacity(this.lis[this.id_li_en_cours], { from: 1, to: 0, duration: 0.5 });

      this.monUpdate();
		},
		monUpdate: function()
		{
       
			//this.lis[this.li_a_afficher].hide();
			//$('liste_en_bref').update(this.lis[this.li_a_afficher]);
			
      //new this.Opacity(this.lis[this.li_a_afficher], { from: 0, to: 1, duration: 0.5 });
      this.lis[this.li_a_afficher].appear({duration: 0.5 });
		},
		up: function()
		{
			this.li_a_afficher = this.get_id_li_suivant(this.id_li_en_cours);
			this.monFade();
			this.id_li_en_cours = this.li_a_afficher;
		},
		down: function()
		{
			this.li_a_afficher = this.get_id_li_precedent(this.id_li_en_cours);
			this.monFade();
			this.id_li_en_cours = this.li_a_afficher;
		},
		clickUp: function()
		{
			this.stopAnim();
			this.up();
			return false;
		},
		clickDown: function()
		{
			this.stopAnim();
			this.down();
			return false;
		},
		// Demarre l'animation automatisee
	  startAnim: function()
		{
			this.intervalle = new PeriodicalExecuter(this.affiche.bind(this), 4);	
	  },
		// Stoppe l'automatisation, pour laisser l'action à l'utilisateur
	  stopAnim: function()
		{
		  this.intervalle.stop();
	  }
});

Event.observe(window, 'load', function() {
	var en_bref = new visonneuse('haut');
	en_bref.init();
	en_bref.startAnim();
});