// momentaneamente with luke's comments:

var add_image_handlers = function() {
	
	// **************
	// === FIRST RUN (cargar legalmente la primera variante):
  var first_selected_id = $('.color-variants-select option[selected="selected"]').attr('value');
  if(first_selected_id == null){
	  $("#main-image").data('selectedThumb', $("#main-image img").attr('src'));
  }
	choose_variant(first_selected_id);
	// === END FIRST RUN:
	// *****************
	
	// change event on the select:
	$('.color-variants-select').change(function(){
		var selected_id = $(this).attr('value');
		choose_variant(selected_id);
	});

  // click event on the thumbs:
  $('ul.thumbnails li a').click(function(e) {
		// extract class value:
    var class_id = $(this).parent().attr('class');
		// extract id from class:
		var selected_id = class_id.replace('option-value-id-', '').replace(' selected', '');	
		// si es un numero:
		if(Number(selected_id)){
			// choose variant with id:	
			choose_variant(selected_id);
		} else {
			choose_image($(this).attr('href').replace('mini', 'vertical_small'));
		}
    // do not trigger the click:
    e.preventDefault();

  }).hover(
	  function() {
	    // show this image while hover:
	    //$('#main-image img').attr('src', $(this).attr('href').replace('mini', 'vertical_small'));
			// extract class value:
	    var class_id = $(this).parent().attr('class');
			// extract id from class:
			var selected_id = class_id.replace('option-value-id-', '').replace(' selected', '');	
			// si es un numero:
			if(Number(selected_id)){
				// choose variant with id:	
				choose_variant(selected_id);
			} else {
				choose_image($(this).attr('href').replace('mini', 'vertical_small'));
			}
	    // do not trigger the click:
	    e.preventDefault();
	  },
	  function() {
	    // show the selected thumb image again when mouse-out:
	    //$('#main-image img').attr('src', $("#main-image").data('selectedThumb'));
			// extract class value:
	    var class_id = $(this).parent().attr('class');
			// extract id from class:
			var selected_id = class_id.replace('option-value-id-', '').replace(' selected', '');	
			// si es un numero:
			if(Number(selected_id)){
				// choose variant with id:	
				choose_variant(selected_id);
			} else {
				choose_image($(this).attr('href').replace('mini', 'vertical_small'));
			}
	    // do not trigger the click:
	    e.preventDefault();
	});
};

var choose_image = function (image_url){
  // change product image:
   $('#main-image img').attr('src', image_url);
  // change BIG image:
   $('#main-image a').attr('href', image_url.replace('/vertical_small/', '/original/'));
	// annotate current selected thumb and big picture:
  $("#main-image").data('selectedThumb', $('#main-image img').attr('src'));
  // cambiar el CloudZoom:
  $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
}

var choose_variant = function(option_value_id) {
	if(option_value_id && Number(option_value_id)){
		// convert tu Number:
		option_value_id = Number(option_value_id);
		console.log("cargando la variante con ID: "+option_value_id);
	  // remove selected class from every li:
	  $('ul.thumbnails li').removeClass('selected');
		// select thumbnail:
		var selector1 = '.option-value-id-'+option_value_id;
	  $('ul.thumbnails li').filter(selector1).addClass('selected');
		// show the big picture:
	  $('#main-image img').attr('src', $('ul.thumbnails li.selected a').attr('href').replace('mini', 'vertical_small'));
		// annotate current selected thumb and big picture:
	  $("#main-image").data('selectedThumb', $('#main-image img').attr('src'));
		// remove selected:
		$('.color-variants-select option').removeAttr('selected');
		// change the select selection (valga la redundancia):
		var selector2 = 'option[value~="' + option_value_id+'"]';
	  $('.color-variants-select').children(selector2).attr( 'selected', 'selected' );
	  // cambiar el CloudZoom:
	  $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
	}
}
 
jQuery(document).ready(function() {
  add_image_handlers();
});


/***************************************************/
/* IMPORTANTE: esto que viene a continuacion no esta funcionando porque no hay radio buttons 
dentro del objeto #product-variants (pero no lo voy a quitar por las dudas). */

jQuery(document).ready(function() {
  jQuery('#product-variants input[type=radio]').click(function (event) {
    var vid = this.value;
    var text = $(this).siblings(".variant-description").html();
 
    jQuery("#variant-thumbnails").empty();
    jQuery("#variant-images span").html(text);
 
    if (images[vid].length > 0) {
      $.each(images[vid], function(i, link) {
        jQuery("#variant-thumbnails").append('<li>' + link + '</li>');
      });
 
      jQuery("#variant-images").show();
    } else {
      jQuery("#variant-images").hide();
    }
 
    add_image_handlers();
 
    var link = jQuery("#variant-thumbnails a")[0];
 
    jQuery("#main-image img").attr({src: jQuery(link).attr('href')});
    jQuery('ul.thumbnails li').removeClass('selected');
    jQuery(link).parent('li').addClass('selected');
  });
});