var selFam = null;
var selProd = null;
var selCat = null;
var selCol = null;

function refreshEntries(element)
{
  selFam = document.getElementById('selFam').value;
  selProd = document.getElementById('selProd').value;
  selCat = document.getElementById('selCat').value;
  selCol = document.getElementById('selCol').value;

  if(element){
    switch(element.id){
      case 'family'	: selFam = element.value; document.getElementById('selFam').value = selFam; break;
      case 'product'	: selProd = element.value; document.getElementById('selProd').value = selProd; break;
      case 'category'	: selCat = element.value; document.getElementById('selCat').value = selCat; break;
      case 'color'	: selCol = element.value; document.getElementById('selCol').value = selCol; break;
    }
  }

  document.getElementById('ajaxLoader').style.display='inline';

  $.getJSON(
    "main_page/ref_search",
    {
      family	 : document.getElementById('family').value,
      product	 : document.getElementById('product').value,
      category : document.getElementById('category').value,
      color	   : document.getElementById('color').value
    },
    renderResult
  );
}

function renderResult(data)
{
  document.getElementById('ajaxLoader').style.display='none';

  // remove children
  $("#family").empty();
  $("#product").empty();
  $("#category").empty();
  $("#color").empty();

  $("#family").append('<option value="">'+document.getElementById('showAllLabel').value+'</option>');
  $("#product").append('<option value="">'+document.getElementById('showAllLabel').value+'</option>');
  $("#category").append('<option value="">'+document.getElementById('showAllLabel').value+'</option>');
  $("#color").append('<option value="">'+document.getElementById('showAllLabel').value+'</option>');

  // add new children
  jQuery.each(data.famOpt, function(i, val) {
    var html = '<option value="'+i+'">'+val+'</option>';
    $("#family").append(html);
  });
  $("#family").val(selFam);

  jQuery.each(data.prodOpt, function(i, val) {
      var html = '<option value="'+i+'">'+val+'</option>';
    $("#product").append(html);
  });
  $("#product").val(selProd);

  jQuery.each(data.catOpt, function(i, val) {
    var html = '<option value="'+i+'">'+val+'</option>';
    $("#category").append(html);
  });
  $("#category").val(selCat);

  jQuery.each(data.colOpt, function(i, val) {
      var html = '<option value="'+i+'">'+val+'</option>';
    $("#color").append(html);
  });
  $("#color").val(selCol);
}