var largo = 0;
var activa = 0;
var posicion = 0;

//function inicializaGaleria(id_galeria, ancho_total)
function inicializaGaleria(id_galeria)
{
  i = 1;
  $('#' + id_galeria + ' ul li').each(function()
  {
    largo += $('img', this).width();
    $('img', this).attr('rel', largo);

    if (i == 1)
    {
      $('a', this).addClass('activa');
      $('img', this).addClass('activa');
    }
    i += 1;
  });
  largo += 15;
  $('#' + id_galeria + ' ul').css('width', largo);
  
  imagen_ancho = parseInt($('#' + id_galeria + ' ul li:first img').width());
  imagen_izq = parseInt($('#' + id_galeria + ' ul li:first img').attr('rel'));
  galeria_ancho = parseInt($('#' + id_galeria).width());
  posicion = (galeria_ancho - (imagen_izq + imagen_izq - imagen_ancho)) / 2;
  
  $('#' + id_galeria + ' ul').css('left', posicion);
}

function gestionaGaleria(id_galeria)
{
  $('#' + id_galeria + ' ul li a').click(function() {    
    imagen_ancho = parseInt($('img', this).width());
    imagen_izq = parseInt($('img', this).attr('rel'));
    galeria_ancho = parseInt($('#' + id_galeria).width());
    posicion = (galeria_ancho - (imagen_izq + imagen_izq - imagen_ancho)) / 2;
  
    $('#' + id_galeria + ' ul').animate({
      left: posicion
    }, 500);

    $('#' + id_galeria + ' ul li').each(function() {
      $('a', this).removeClass('activa');
      $('img', this).removeClass('activa');
    });
    $(this).addClass('activa');
    $('img', this).addClass('activa');
    
    return false;
  });
/*
  $('#btn_siguiente').click(function() {
    activa = $('a.activa').attr('rel');
    // si al pulsar 'siguiente' no esta activa aun la ultima imagen...
    if (activa < ($('#' + id_galeria + ' ul li').length - 1))
    {
      // se mueve la siguiente imagen a la activa
      imagen_ancho = parseInt($('a[rel="' + (parseInt(activa) + 1) + '"] img').width());
      imagen_izq = parseInt($('a[rel="' + (parseInt(activa) + 1) + '"] img').attr('rel'));
      galeria_ancho = parseInt($('#' + id_galeria).width());
      posicion = (galeria_ancho - (imagen_izq + imagen_izq - imagen_ancho)) / 2;

      $('#' + id_galeria + ' ul').animate({
        left: posicion
      }, 500);

      $('#' + id_galeria + ' ul li').each(function() {
        $('a', this).removeClass('activa');
        $('img', this).removeClass('activa');
      });
      $('a[rel="' + (parseInt(activa) + 1) + '"]').addClass('activa');
      $('a[rel="' + (parseInt(activa) + 1) + '"] img').addClass('activa');
    }

    return false;
  });

  $('#btn_anterior').click(function() {
    activa = $('a.activa').attr('rel');
    // si al pulsar 'siguiente' no esta activa aun la ultima imagen...
    if (activa > 0)
    {
      // se mueve la siguiente imagen a la activa
      imagen_ancho = parseInt($('a[rel="' + (parseInt(activa) - 1) + '"] img').width());
      imagen_izq = parseInt($('a[rel="' + (parseInt(activa) - 1) + '"] img').attr('rel'));
      galeria_ancho = parseInt($('#' + id_galeria).width());
      posicion = (galeria_ancho - (imagen_izq + imagen_izq - imagen_ancho)) / 2;

      $('#' + id_galeria + ' ul').animate({
        left: posicion
      }, 500);

      $('#' + id_galeria + ' ul li').each(function() {
        $('a', this).removeClass('activa');
        $('img', this).removeClass('activa');
      });
      $('a[rel="' + (parseInt(activa) - 1) + '"]').addClass('activa');
      $('a[rel="' + (parseInt(activa) - 1) + '"] img').addClass('activa');
    }

    return false;
  });
  */
}