$(document).ready(function(){
    	var currentPosition = 0;
      var slideWidth = 230;
      var slides = $('.slide');
      var numberOfSlides = slides.length;
    
      // Elimina el scrollbar en JS
      $('#slidesContainer-home').css('overflow', 'hidden');
    
      // Envuelve todos los .slides en el div #slideInner
      slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left para visualizar horizontalmente, reajusta la anchura de  .slides
      .css({
          'float' : 'left',
          'width' : slideWidth
        });
    
      // Ponemos la anchura de #slideInner igual a la anchura total de todos los slide
      $('#slideInner').css('width', slideWidth * numberOfSlides);
    
      // Inserta los controles en el DOM
      $('#slideshow-home')
        .prepend('<span class="control centrarTexto" id="leftControl"><img src="img/panel-boton-anterior.jpg" width="33" height="54" alt="Anterior" /></span>')
        .append('<span class="control centrarTexto" id="rightControl"><img src="img/panel-boton-siguiente.jpg" width="33" height="54" alt="Siguiente" /></span>');
    
      // Oculta el control de la flecha izquierda en la primera carga
      manageControls(currentPosition);
    
      // Crea los eventos listeners para los clicks de la clase .controls
      $('.control')
        .bind('click', function(){
        // Determina la nueva posicion
      	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
        
      // Oculta / muestra los controles
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : (slideWidth +30)*(-currentPosition)
        });
      });
    
      // manageControls: Oculta o muestra los controles dependiendo de 'currentPosition'
      function manageControls(position){
        // Oculta la flecha izquierda si la posicion es la primera diapo
      	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
     	 // Oculta la flecha derecha si la posicion es la ultima diapo
        if(position==numberOfSlides-3){ $('#rightControl').hide() } else{ $('#rightControl').show() }
      }	
    });