window.onload = function()
{
  UpdateRanges();
  UpdateModels();
}

function CreateHttpRequest()
{
  if(window.XMLHttpRequest) { // standard method
    return new XMLHttpRequest();
  }
  else if(ActiveXObject) { // IE
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  else {
    throw new Error("This browser does not support AJAX.");
  }
}

function UpdateRanges(pType)
{
  // get brand id
  var pBrandID = document.getElementById('brandSelect').value;

  // create the AJAX object
  var xmlHttp = CreateHttpRequest();

  // create the action that will be taken when the reponse has been received
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4 && xmlHttp.responseXML) {

      // load and clear the range element
      var rangeElement = document.getElementById('rangeSelect');
      while(rangeElement.options.length > 0) {
        rangeElement.remove(0);
      }

      // load and clear the model element
      var modelElement = document.getElementById('modelSelect');
      while(modelElement.options.length > 0) {
        modelElement.remove(0);
      }
      try {
        // Non-standard HTML4 / HTML5
        modelElement.add(new Option("---", id));
      } catch (e) {
        // Standard HTML4
        modelElement.add(new Option("---", id), null);
      }

      // add the new options to the range element
      var optionElements = xmlHttp.responseXML.getElementsByTagName('option');
      for(var i = 0; i < optionElements.length; i++) {
        var id = optionElements[i].getElementsByTagName('id')[0].firstChild.nodeValue;
        var name = optionElements[i].getElementsByTagName('name')[0].firstChild.nodeValue;
        try {
          // Non-standard HTML4 / HTML5
          rangeElement.add(new Option(name, id));
        } catch (e) {
          // Standard HTML4
          rangeElement.add(new Option(name, id), null);
        }
      }

    }
  }

  // Send the request
  xmlHttp.open("GET", "GetRanges.php?brand="+pBrandID+"&type="+pType, true);
  xmlHttp.send(null);
}

function UpdateModels(pType)
{
  // get brand and range ids
  var pBrandID = document.getElementById('brandSelect').value;
  var pRange = document.getElementById('rangeSelect').value;

  // create the AJAX object
  var xmlHttp = CreateHttpRequest();

  // create the action that will be taken when the reponse has been received
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4 && xmlHttp.responseXML) {

      // load and clear the model element
      var modelElement = document.getElementById('modelSelect');
      while(modelElement.options.length > 0) {
        modelElement.remove(0);
      }

      // add the new options to the model element
      var optionElements = xmlHttp.responseXML.getElementsByTagName('option');
      for(var i = 0; i < optionElements.length; i++) {
        var id = optionElements[i].getElementsByTagName('id')[0].firstChild.nodeValue;
        var name = optionElements[i].getElementsByTagName('name')[0].firstChild.nodeValue;
        try {
          // Non-standard HTML4 / HTML5
          modelElement.add(new Option(name, id));
        } catch (e) {
          // Standard HTML4
          modelElement.add(new Option(name, id), null);
        }
      }

    }
  }

  // Send the request
  xmlHttp.open("GET", "GetModels.php?brand="+pBrandID+"&range="+pRange+"&type="+pType, true);
  xmlHttp.send(null);
}

function UpdateCartridges(pType)
{
  // get brand id
  var pBrandID = document.getElementById('brandSelect2').value;

  // create the AJAX object
  var xmlHttp = CreateHttpRequest();

  // create the action that will be taken when the reponse has been received
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4 && xmlHttp.responseXML) {

      // load and clear the cartridge element
      var cartridgeElement = document.getElementById('cartridgeSelect');
      while(cartridgeElement.options.length > 0) {
        cartridgeElement.remove(0);
      }

      // add the new options to the cartridge element
      var optionElements = xmlHttp.responseXML.getElementsByTagName('option');
      for(var i = 0; i < optionElements.length; i++) {
        var id = optionElements[i].getElementsByTagName('id')[0].firstChild.nodeValue;
        var name = optionElements[i].getElementsByTagName('name')[0].firstChild.nodeValue;
        try {
          // Non-standard HTML4 / HTML5
          cartridgeElement.add(new Option(name, id));
        } catch (e) {
          // Standard HTML4
          cartridgeElement.add(new Option(name, id), null);
        }
      }

    }
  }

  // Send the request
  xmlHttp.open("GET", "GetCartridges.php?brand="+pBrandID+"&type="+pType, true);
  xmlHttp.send(null);
}