var bgOrigColor, borderOrigColor, selectedPic = 0;



$(document).ready(function () {
	var primera, titulo = '';

  //Al inicio, muestra la primera foto
  primera = $('.thumbs-gallery img:first');
  
  $('#big-foto').attr({src: primera.attr('src')});
  bgOrigColor = primera.css('background-color');
  borderOrigColor = primera.css('border-color');
  primera.css({
      backgroundColor: '#fff',
      borderColor: '#ccc'
    })
  
  //Prepara el pie de foto para mostrarlo encima de la imagen
  $('#big-foto').after('<div class="big-foto-title"><p></p></div>');
  titulo = primera.attr('title');
  if ((titulo!='')&&(titulo!=undefined)) $('.big-foto-title').html('<p>'+primera.attr('title')+'</p>');

  //Marca la primera foto como la activa
  selectedPic = primera;

  $('.thumbs-gallery img').click(function () {
    if (selectedPic.attr('src') == $(this).attr('src')) return;
    
    selectedPic.css({
      backgroundColor: bgOrigColor,
      borderColor: borderOrigColor
    })
    
    $('#big-foto').attr({
      src: $(this).attr('src')
    })
    $('.big-foto-title').html('<p>'+$(this).attr('title')+'</p>');

    selectedPic = $(this);
  })
  
  $('.thumbs-gallery img').mouseover(function () {
    if (selectedPic.attr('src') == $(this).attr('src')) return;
    
    $(this).css({
      backgroundColor: '#fff',
      borderColor: '#ccc'
    })

  })
  
  $('.thumbs-gallery img').mouseout(function () {
    if (selectedPic.attr('src') == $(this).attr('src')) return;
    
    $(this).css({
      backgroundColor: bgOrigColor,
      borderColor: borderOrigColor
    })
  })

});