function generateAvail(num,pcode) {
  clearAvail(pcode);
  var obj = document.getElementById("avail");
  for(var i=0; i <= num; i++) {
    obj.options[i] = new Option(i+1,i+1);
	if (i==50){
		break;
	}
  }
}
function generateColors() {
  
  var obj = document.getElementById("color");
  var colors = getColors();
  for(var i=0; i < colors.length; i++) {
    obj.options[i] = new Option(colors[i].color_name,colors[i].color_code);
  }
  document.getElementById("size").selectedIndex=0;
  clearAvail('qty');
}
function generateSizes(color_name) {
  clearSize();
  var obj = document.getElementById("size");
  var sizes = getSizes(color_name);
  for(var i=0; i < sizes.length; i++) {
    obj.options[i+1] = new Option(sizes[i].size_name,sizes[i].size_code);
  }  
  clearAvail('qty');
}
function clearSize() {
  document.getElementById("size_wrapper").innerHTML = '<select name="size" id="size" onChange=getAvailability(document.getElementById("color").value,this.value)><option value="">select size</option></select>';
  var obj = document.getElementById("size_wrapper").getElementsByTagName("select")[0];
}
function clearAvail(pcode) {
  document.getElementById("avail_wrapper").innerHTML = '<select name="'+pcode+'" id="avail"><option value="0">0</option></select>';
  var obj = document.getElementById("avail_wrapper").getElementsByTagName("select")[0];
}
function selectColor(color) {
  var obj = document.getElementById("color");
  for(var i=0; i < obj.length; i++) {
    if(obj[i].value == color) {
      obj.selectedIndex=i;
    }
  }
  generateSizes(color);
  
}