var animando = false;
var animacionTimer;
var tiempoAnimacion = 10000;


$(document).ready(function() 
{
  iniciarSlider();
});

function iniciarSlider()
{
  // Para poder ir pasando indefinidamente clonamos el primero y el último
  // y los colocamos en los extremos del slider
  var $primero = $('#container li:eq(0)');
  var $primeroCloned = $('#container li:eq(0)').clone();
  var $ultimo = $('#container li:last');
  var $ultimoCloned = $('#container li:last').clone();
  
  $ultimoCloned.insertBefore($primero);
  $primeroCloned.insertAfter($ultimo);
  
  var tamSpotlight = $('#spotlight').width();
  var $elementos = $('#container li');
  var tamContainer = $elementos.length * tamSpotlight;
  var $container = $('#container');
  $container.css('width', tamContainer);
  $container.css('left',-tamSpotlight);
  
  control();
  
  animacionTimer = window.setTimeout(autoAnimation, tiempoAnimacion);
}

function autoAnimation()
{
  window.clearTimeout(animacionTimer);
  if (animando) { animacionTimer = window.setTimeout(autoAnimation, tiempoAnimacion); return false; }
  var $derecha = $('#spotlightRight');
  $derecha.click();  
  animacionTimer = window.setTimeout(autoAnimation, tiempoAnimacion);
}

function control()
{
  var $izquierda = $('#spotlightLeft');
  var $derecha = $('#spotlightRight');
  $izquierda.bind('click', {direction: 'izquierda'} , mueveSlider);
  $derecha.bind('click', {direction: 'derecha'} , mueveSlider);
}

function mueveSlider(e)
{
  e.preventDefault(); 
  window.clearTimeout(animacionTimer);
  if (animando) { return false; }
  animando = true;
  
  var tamSpotlight = $('#spotlight').width();
  var tamContainer = $('#container').width();
  var elementos = $('#container li').length;
  var posActual = parseInt($('#container').css('left'));
  
  var numFicha = Math.round(posActual * elementos / tamContainer);
  numFicha = -numFicha;
  
  var distancia = parseInt($('#container').css('left'));
  var direction = e.data.direction;
  
  if (direction == "izquierda")
  {
    distancia = distancia + 920;
    $('#container').animate({ left: distancia}, 1000, function()
    { 
       reposition(numFicha, elementos, tamSpotlight, tamContainer, direction);
       animacionTimer = window.setTimeout(autoAnimation, tiempoAnimacion);
    });
  }
  else if (direction == "derecha")
  {
    distancia = distancia - 920;
    $('#container').animate({ left: distancia}, 1000, function()
    { 
       reposition(numFicha, elementos, tamSpotlight, tamContainer, direction); 
       animacionTimer = window.setTimeout(autoAnimation, tiempoAnimacion);
    });
  }
  
  return false;
  
}

function reposition(numFicha, elementos, tamSpotlight, tamContainer, direction)
{
  var $container = $('#container');
  //alert(numFicha + " " + elementos + " " + tamSpotlight + " " + tamContainer + " " + direction);
  var posLeft = -tamContainer+tamSpotlight*2;
  var posRight = -tamSpotlight;
  //alert('posLeft: ' + posLeft + ' posRight: ' + posRight);
  if ((numFicha == 1)&&(direction == "izquierda")) { $container.css('left',posLeft); }
  else if ((numFicha == elementos-2)&&(direction == "derecha")) { $container.css('left', posRight); }
  animando = false;
}