// JavaScript Document
function getHTTPObject() {
  var req = false;
  // branch for native XMLHttpRequest object
  if(window.XMLHttpRequest) {
    try {req = new XMLHttpRequest();}
    catch(e) {req = false;}
    // branch for IE/Windows ActiveX version
  } 
  else if(window.ActiveXObject) {
    try {req = new ActiveXObject("Msxml2.XMLHTTP");} 
    catch(e) {
      try {req = new ActiveXObject("Microsoft.XMLHTTP");} 
      catch(e) {req = false;}
    }
  }
  return req;
}

function fill(sel) {
  oHttp = getHTTPObject();
  if (oHttp.readyState != 0) {oHttp.abort();}
  var make = document.getElementById('make');
  var range = document.getElementById('range');
  var sel_to_fill =  document.getElementById(sel);

  //clear all selects from the one we are filling on
  //make the vars we need for the argument string
  switch(sel){
    case 'make': document.getElementById('make').options.length = 0;
    case 'range': document.getElementById('range').options.length = 0;
  }
  var make = ""
  var range = ""
  if (document.getElementById('make').options.length > 0) make = document.getElementById('make').options[document.getElementById('make').selectedIndex].value;
  if (document.getElementById('range').options.length > 0) range = document.getElementById('range').options[document.getElementById('range').selectedIndex].value;
  var sURL = "ajax_dropdown.php";
  sURL += "?make=" + make + "&range=" + range;
  oHttp.open("get", sURL , true);
  oHttp.onreadystatechange = function () {
	  
// Http.readyState == 4 is the indication that the server has successfully returned a page to the browser.  Other codes include: 
//0: not initialized.
//1: connection etablished.
//2: request received.
//3: answer in process.

	if (oHttp.readyState == 4) {
      // looks like this is where Javascript gets the results from the page that it got.
	  var asterisk_pos;
	  var options = oHttp.responseText.split(",");
	  
	  //var range_id = oHttp.responseText.split("*");
      
	  sel_to_fill.options[0] = new Option("PLEASE SELECT");
      
	  for (var i = 0; i < options.length; i++) {
	  //for (i=0;i<=options.length;i++) {
        
		// DIFFERENT VALUE AND DISPLAY ITEMS FIX
		// Quite Simple Really just follow the instructions:
		// Altered the ajax_dropdown.php script so that it spits out the manufacturer / range names and codes as part of the string with ; seperating the ID code from the name.
		
		// find the position of the semi_colon and then do a substring based on that calculation
		// seems to put out a javascript error for some reason this		
		var position_pt = options[i].search(";")
		
		// put the name into a variable
		var option_name = options[i].substr(position_pt+1)
		
		// put the id into a variable
		var option_id = options[i].substr(0, position_pt)
		
		// write out the new options
		sel_to_fill.options[i] = new Option(option_name, option_id);
		
		
		// semi working one
		//sel_to_fill.options[i] = new Option(options[i-1],options[i-1]);
		
      }
    }
  }
  oHttp.send(null);
}