var gCategoryCache = new Array();

function setSelect(selectObject, options)
{

  if (document.forms['myForm'].debugmode.checked)
    {
    alert("About to set the select box to the list of options for the selected category.");
    }
  
  selectObject.disabled = true;
  selectObject.options.length = 0;
  for (i = 0 ; i < options.length ; i++)
    {
    selectObject.options[i] = options[i];
    }
  selectObject.disabled = false;
}

function handleCompletedRequest(selectObject, categoryName, request)
{
  if (200 == request.status)
    {
    if (document.forms['myForm'].debugmode.checked)
      {
      alert
         (
         "Asynchronous XMLHttpRequest to retrieve options of category '" 
           + categoryName + "' from server has finished."
         );
      }
    nodeList = request.responseXML.getElementsByTagName('option');

    gCategoryCache[categoryName] = new Array();

    for (var i = 0 ; i < nodeList.length ; i++)
      {
      optionNode = nodeList.item(i);
//       alert(optionNode.childNodes[0].firstChild.nodeValue);
//       alert(optionNode.childNodes[1].firstChild.nodeValue);
      gCategoryCache[categoryName][i] = new Option(optionNode.childNodes[0].firstChild.nodeValue, optionNode.childNodes[1].firstChild.nodeValue);
      }

    setSelect(selectObject, gCategoryCache[categoryName]);
    }
  else
    {
    alert("request failed: " + request.status);
    }
}

function getXHRObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest;
	}
	else if (window.ActiveXObject) {
		var req = new ActiveXObject("Microsoft.XMLHTTP");
		if (req) {
			return req;
		}
	}
	return false;
}

function populateSelect(selectObject, categoryName)
{
    if (document.forms['myForm'].debugmode.checked)
      {
      alert
        (
        "Entering function to handle retrieval of options of category '"
          + categoryName + "' from server."
        );
      }
  var categoryOptions = gCategoryCache[categoryName];


  if (undefined == categoryOptions)
    {
    //
    // This category's options was not defined in the cache, so we need to initiate a request to the Server.
    //

    //
    // First disable the GUI element.
    //
    if (document.forms['myForm'].debugmode.checked)
      {
      alert
        (
        "About to disable the dynamic select box and set it to 'loading' "
          + "while we load the options from the server."
        );
      }

    selectObject.disabled = true;
    selectObject.options.length = 0;
    selectObject.options[0] = new Option("Loading...");

    //
    // Setup an XMLHttpRequest
    //
    
    request = getXHRObject();
    request.open("GET", "http://www.proprt.co.uk/cms/thesite/public/resources/scripts/get-town.php?parent=" + categoryName, true);

    //
    // Define a 'closure' as our state change event handler.
    //
    request.onreadystatechange = 
      function() 
        {
        if (document.forms['myForm'].debugmode.checked)
          {
          alert
            (
            "Ready state changed to '"+request.readyState+"', preparing to handle."
            );
          }
        if (request.readyState == 4) 
          { 
          handleCompletedRequest(selectObject, categoryName, request);
          }
        };

    if (document.forms['myForm'].debugmode.checked)
      {
      alert
        (
        "About to initiate asynchronous XMLHttpRequest to retrieve options of category '"
          + categoryName + "' from server."
        );
      }

    //
    // Start the asynchronous request.
    //
    request.send(null);

    }
  else
    {
    //
    // This category's options were in the cache: immediately set the select to the existing options.
    //
    if (document.forms['myForm'].debugmode.checked)
      {
      alert("Retrieved options of category '" + categoryName + "' from local category cache.");
      }
    setSelect(selectObject, categoryOptions);
    }
}