// JavaScript Document
window.addEvent('domready', function(){ 
	  var totIncrement = 0;
	  var i = 0;
	  
	  // Habilito las flechas y el overflow del carrusel
	  var izq = document.getElementById('previous');
  	  var dere = document.getElementById('next');
	  var carrusel = document.getElementById('slider-stage');
  	  dere.style.display = "block";
	  carrusel.style.overflow = "hidden";
	  
	  var ancho = document.getElementById('primera').attributes['width'].value;
	  var numero = document.getElementById('slider-list').getElementsByTagName('li').length;
	  var total = numero-4;
	  
	  var increment	= parseInt(ancho)+8+4;
	  var maxRightIncrement	= increment*(-total);
	  
	  var fx = new Fx.Style('slider-list', 'margin-left', {
				duration: 1000,
				transition: Fx.Transitions.Back.easeInOut,
				wait: true
	   });
	  
	  //-------------------------------------
	  // EVENTS for the button "previous"
	  $('previous').addEvents({ 
          'click' : function(event){
		  if(i<=total) {
			  dere.style.display = "block";
		  }
		  if(totIncrement<0){
					totIncrement = totIncrement+increment;
					i=i-1;
					if(i==0) {
						izq.style.display = "none";
					}
					fx.stop()
					fx.start(totIncrement);
				}
			}			  	  
      }); 
	 
      //-------------------------------------
	  // EVENTS for the button "next"
  	  $('next').addEvents({ 
          'click' : function(event){ 
		  if(i>=0) {
			  izq.style.display = "block";
		  }
		  if(totIncrement>maxRightIncrement){
				totIncrement = totIncrement-increment;
				i=i+1;
				if(i==total) {
					dere.style.display = "none";
				}
		    	fx.stop()
				fx.start(totIncrement);
			}
          }		  		  
      })
});