// declare a global  XMLHTTP Request object
var XmlHttpObj;
var is_IE = false;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
    XmlHttpObj = null;

    // try creating for IE (note: we don't know the user's browser type here, just attempting IE first.)
    try
    {
        XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
        is_IE = true;
    }
    catch(e)
    {
        try
        {
            XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch(oc)
        {
            XmlHttpObj = null;
        }
    }
    // if unable to create using IE specific code then try creating for Mozilla (FireFox) 
    if(!XmlHttpObj && typeof XMLHttpRequest != "undefined") 
    {
        XmlHttpObj = new XMLHttpRequest();
    }

    return XmlHttpObj;
}



// called from onChange or onClick event of the continent dropdown list

function ContinentListOnChange() 
{
    var continentList = document.getElementById("continentList");
    var stateList = document.getElementById("stateList");

    // get selected continent from dropdown list
    var selectedContinent = continentList.options[continentList.selectedIndex].value;

    // url of page that will send xml data back to client browser
    var requestUrl;
    // use the following line if using php
    requestUrl = "/scripts/get_states.php" + "?id=" + encodeURIComponent(selectedContinent);

    stateList.options[0] = new Option( 'Please Wait...', '',  false, false);

    CreateXmlHttpObj();

    // verify XmlHttpObj variable was successfully initialized
    if(XmlHttpObj)
    {
        // assign the StateChangeHandler function ( defined below in this file)
        // to be called when the state of the XmlHttpObj changes
        // receiving data back from the server is one such change
        XmlHttpObj.onreadystatechange = StateChangeHandler;
        
        // define the iteraction with the server -- true for as asynchronous.
        XmlHttpObj.open("GET", requestUrl,  true);
        
        // send request to server, null arg  when using "GET"
        XmlHttpObj.send(null);      
    }
}

// called from onChange or onClick event of the state dropdown list
function StateListOnChange()
{
    var stateList = document.getElementById("stateList");
    var cityList = document.getElementById("cityList");

    // get selected state from dropdown list
    var selectedState = stateList.options[stateList.selectedIndex].value;

    cityList.options[0] = new Option( 'Please Wait...', '',  false, false);

    // url of page that will send xml data back to client browser
    var requestUrl;
    // use the following line if using php
    requestUrl = "/scripts/get_cities.php" + "?id=" + encodeURIComponent(selectedState);

    CreateXmlHttpObj();

    // verify XmlHttpObj variable was successfully initialized
    if(XmlHttpObj)
    {
        if (is_IE)
        {
            XmlHttpObj.onreadystatechange = function(event) {
                if(XmlHttpObj.readyState == 4)
                {
                    if(XmlHttpObj.status == 200)
                    {
                        populateCityList(XmlHttpObj.responseXML.documentElement);
                    }
                    else
                    {
                        alert("problem retrieving data; status code: "  + XmlHttpObj.status);
                    }
                }
            }
        }
        else
        {
            XmlHttpObj.onload = function(event) {
                if(XmlHttpObj.readyState == 4)
                {
                    if(XmlHttpObj.status == 200)
                    {
                        populateCityList(XmlHttpObj.responseXML.documentElement);
                    }
                    else
                    {
                        alert("problem retrieving data; status code: "  + XmlHttpObj.status);
                    }
                }
            }
        }

        // define the iteraction with the server -- true for as asynchronous.
        XmlHttpObj.open("GET", requestUrl,  true);

        // send request to server, null arg  when using "GET"
        XmlHttpObj.send(null);
    }
}

// this function called when state of  XmlHttpObj changes
// we're interested in the state that indicates data has been
// received from the server
function StateChangeHandler()
{
    // state ==4 indicates receiving response data from server is completed
    if(XmlHttpObj.readyState == 4)
    {
        // To make sure valid response is received from the server, 200 means response received is OK
        if(XmlHttpObj.status == 200)
        {           
            populateStateList(XmlHttpObj.responseXML.documentElement);
        }
        else
        {
            alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
        }
    }
}


// populate the contents of the state dropdown list
function populateStateList(countryNode)
{
    var stateList = document.getElementById("stateList");
    // clear the state list 
    for (var count = stateList.options.length-1; count >-1; count--)
    {
        stateList.options[count] = null;
    }
    stateList.options[0] = new Option( 'State', '',  false, false);

    var cityList = document.getElementById("cityList");
    // clear the state list
    if (cityList)
    {
        for (var count = stateList.options.length-1; count >-1; count--)
        {
            cityList.options[count] = null;
        }
        cityList.options[0] = new Option( 'City', '',  false, false);
    }

    var stateNodes = countryNode.getElementsByTagName('state');
    var idValue;
    var textValue; 
    var optionItem;

    // populate the dropdown list with data from the xml doc
    for (var count = 0; count < stateNodes.length; count++)
    {
        textValue = GetInnerText(stateNodes[count]);
        idValue = stateNodes[count].getAttribute("id");
        optionItem = new Option( textValue, idValue,  false, false);
        stateList.options[stateList.length] = optionItem;
    }
}

// populate the contents of the city dropdown list
function populateCityList(stateNode)
{
    var cityList = document.getElementById("cityList");
    var stateList = document.getElementById("stateList");
    // clear the state list
    for (var count = stateList.options.length-1; count >-1; count--)
    {
        cityList.options[count] = null;
    }
    cityList.options[0] = new Option( 'City', '',  false, false);

    var cityNodes = stateNode.getElementsByTagName('city');
    var idValue;
    var textValue;
    var optionItem;

    // populate the dropdown list with data from the xml doc
    for (var count = 0; count < cityNodes.length; count++)
    {
        textValue = GetInnerText(cityNodes[count]);
        idValue = cityNodes[count].getAttribute("id");

        optionItem = new Option( textValue, idValue,  false, false);
        cityList.options[cityList.length] = optionItem;
    }
}

// returns the node text value 
function GetInnerText (node)
{
     return (node.firstChild.nodeValue || node.textContent || node.innerText || node.text) ;
}