var pane1Sel = 0;
var pane2Sel = 0;
var pane3Sel = 0;

$(function(){
  $("select#pane1").change(function(){
	  var random = Math.random();
	  var type = 1;
      $.getJSON("/select_process.php", {id: $(this).val(), ajax: 'true', type: type, pane: '1', rnd: random}, function(j) {
      var options = '<option value="" disabled="disabled"></option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#pane2").html(options);
      $("select#pane3").html('');
      $("select#pane4").html('');
      $("div#products").html('');
      $("div#cijfer1").html('<img src="/img/selector/1_vink.png" />');
      $("div#cijfer2").html('<img src="/img/selector/2_cijfer.png" />');
      $("div#cijfer3").html('<img src="/img/selector/3_cijfer.png" />');
	  if (pane2Sel) {
		 var e = document.getElementById('pane2');
		 selectByValue(e, pane2Sel);
		 if ($("select#pane2").val() > 0) {
			 $("select#pane2").change();
		}
	  }
    })
  })
  $("select#pane2").change(function(){
	  var random = Math.random();
      var type = 1;
      $.getJSON("/select_process.php", {id: $(this).val(), ajax: 'true', type: type,  pane: '2', rnd: random}, function(j){
      var options = '<option value="" disabled="disabled"></option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#pane3").html(options);
      $("select#pane4").html('');
      $("div#products").html('');
      $("div#cijfer2").html('<img src="/img/selector/2_vink.png" />');
      $("div#cijfer3").html('<img src="/img/selector/3_cijfer.png" />');
	  if (pane3Sel) {
		 var e = document.getElementById('pane3');
		 selectByValue(e, pane3Sel);
		if ($("select#pane3").val() > 0) {
	         $("select#pane3").change();
		}
	  }
    })
  })
/*
  $("select#pane3").change(function(){
	  var random = Math.random();
      var type = $("select#pane1").val();
      $.getJSON("/select_process.php", {id: $(this).val(), ajax: 'true', type: type, pane: '3', rnd: random}, function(j){
      var options = '<option value="" disabled="disabled"></option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#pane4").html(options);
      $("div#products").html('');
      $("div#cijfer3").html('<img src="/img/selector/3_vink.png" />');
      $("div#cijfer4").html('<img src="/img/selector/4_cijfer.png" />');
	  if (pane4Sel) {
		 var e = document.getElementById('pane4');
		 selectByValue(e, pane4Sel);
		if ($("select#pane4").val() > 0) {
	         $("select#pane4").change();
		}
	  }
    })
  })
*/
  $("select#pane3").change(function(){
	  var random = Math.random();
      var type = 1;
      $.getJSON("/select_process.php", {id: $(this).val(), ajax: 'true', type: type, pane: '3', rnd: random}, function(j){
      var options = '';
	  if (j.length > 0 && j[0].optionValue == -1) {
		  $("div#center_column").html("<b>Geen producten gevonden.</b>");
	  } else {
	      for (var i = 0; i < j.length; i++) {
    	     options += j[i].optionDisplay;
   	      }
          $("div#center_content").html('<div id="product_matrix"><table class="product_matrix">'+options+'</table></div>');
          ajaxCart.overrideButtonsInThePage();
	  }
      $("div#cijfer3").html('<img src="/img/selector/3_vink.png" />');
    })
  })
}
)

$(document).ready(function(){
	var random = Math.random();
	$.getJSON("/select_process.php", {act: 'retrievePrev', ajax: 'true', rnd: random}, function (j) {
		pane1Sel = j[0].id;
		pane2Sel = j[1].id;
		//pane3Sel = j[2].id;
		//pane4Sel = j[3].id;
		if (pane1Sel) {
			var p1 = document.getElementById('pane1');
			selectByValue(p1, pane1Sel);
			$("select#pane1").change();
		}
	})
})

function selectByValue(elmt,v) {
	if (elmt) {
		for (var i=0; i<elmt.length; i++) {
			if (elmt.options[i].value == v) {
				elmt.selectedIndex = i;
				return;
			}
		}
	}
}