var colorstack  = new Array();
var color_boxes = new Array();

function setSearchColor(color) {
  $('color_search').value=color;
  var color_image = color.replace(/#/,"");
  $('color_choosed').src="/images/colorpicker/hearts/heart_gr_"+color_image+".gif";
  
  $('color_name').update(translations[color_image]);
}
function resetSearchColor() {
  $('color_search').value="";
  $('color_choosed').src="/images/colorpicker/hearts/heart_gr_0f0f0f.gif";
}

function hoverBorder(element, active) {
  if(active == 1) {
    $(element).addClassName("hovered");
  } else {
    $(element).removeClassName("hovered");          
  }
}


function hover(element, active) {
  if(active == 1) {
    $(element).style.backgroundColor='#c0c0c0';
  } else {
    $(element).style.backgroundColor='#ffffff';          
  }
}

function toggleActive(product_id) {
  $$("#heart_picker_"+product_id+" .active").each(function(element){
    element.removeClassName("active");
  });
  
  var size =  colorstack[product_id].length
  for (var i = 1; i < 3; ++i) {
    var color = (colorstack[product_id][size-i]).replace(/#/,""); 
    $("heart_" + product_id + "_" + color).addClassName("active");
  }
}

function replaceProductColor(product_id, color) {
  colorstack[product_id].push(color);
  var color_image = color.replace(/#/,"");
  
  if(colorstack[product_id].length % 2) {
    color_boxes[product_id][0].value = color;
    $("color_heart_" + product_id + "_0").style.backgroundImage="url(/images/colorpicker/hearts/heart_gr_" + color_image + ".gif)";
  } else {
    color_boxes[product_id][1].value = color;
    $("color_heart_" + product_id + "_1").style.backgroundImage="url(/images/colorpicker/hearts/heart_gr_" + color_image + ".gif)";
  }
  
  toggleActive(product_id);
  $('color_name_' + product_id).update(translations[color_image]);
}