/**
This script will connect to the ajax/ajax_states.php page to get a listing 
of state names and IDs corresponding to the selected country 2-digit abbreviation. 
It will then clear all of the values out of the state select box and repopulate it 
with the states that are returned from the ajax_states.php page. If no states are 
associated with the select country, then the states box will remain empty and a message 
will be displayed in the SPAN next to the state select box indicating that there are 
no states associated with that country. 

Useage:  To use this script, add the following code to your page:
	<script language="Javascript" src="js/get_states.js"></script>
	
	Then, make sure you have a states select box with BOTH a name and ID that are the same.
	And make sure you have a country select box with an ID.
	You'll also need a SPAN next to the state select box in order to display the messages 
	that are generated from this script:  &nbsp;<span id="state_span" class="message"></span>
	
	Finally, on the Country select box, add something similar to the following:
	onchange="StateRequest(document.getElementById('country').value, 'state', 'state_span')"
	where 'state' is the ID that you gave the state select box and 'state_span' is the ID that 
	you gave the SPAN next to the state select box.
	
	You can use this for multiple country select boxes on one page, just make sure they have different 
	ID and NAME values and then add on the "onchange" line to each country select box.
	
Issues:  when calling the handleResponse function, be sure NOT to include parenthesis next to it 
	(ie. handResponse()) as this will cause the function to not work properly.

Browsers:  This has been tested in Internet Explorer 7.0, FireFox 2.0.0.8 and Safari 3.0.3.
	

Browser HACK: The browser type needs to be added to the query so that the extra "encoding" 
string for Internet Explorer can be added to the XML that is sent back. We don't need it for 
FireFox/Mozilla as adding it breaks the script in those browsers.

**/

var state_select_id = "";
var state_span_id = "";
var country_select_id = "";
var the_browser = "";

// Need to make an object of XMLHttpRequest Type to handle the call to the PHP page.
function createRequestObject() 
{
    var ro;
    if (navigator.appName == "Microsoft Internet Explorer") {
        ro = new ActiveXObject("Microsoft.XMLHTTP");
        the_browser = "IE";
    } else {
        ro = new XMLHttpRequest();
        the_browser = "MOZILLA";
    }
    return ro;
}
var http = createRequestObject();

// Function that calls the PHP script to retrieve listing of states:
function StateRequest(country_iso_code_2, state_id, span_id) 
{
	state_select_id = state_id;
	state_span_id = span_id;
	country_select_id = country_iso_code_2;
	
    http.open('get', '/_theme/ajax/ajax_states.php?country=' + encodeURIComponent(country_iso_code_2) + "&browser=" + the_browser);
    http.onreadystatechange = handleResponse;	//be sure NOT to use parenthesis next to handleResponse. It will break if you do.
    http.send(null);
}

// Function handles the response from the PHP script.
function handleResponse() 
{
	    
    //alert("content type = " + http.getResponseHeader("Content-Type")); 

	// If everything's okay:
	// NOTE:  readyState is CASE SENSITIVE in FireFox! It will NOT work if spelled readystate.
    if(http.readyState == 4)
    {
    	if(http.status == 200 || http.status == 304){

    		//wipe out current state option values
			var selectElement = document.getElementById(state_select_id);
			selectElement.options.length = 0;

			if(http.responseText == "<states></states>")
			{	document.getElementById(state_span_id).innerHTML = "there are no states for this country (" + country_select_id + ")";	}
			else
			{
	    		//alert("response text = " + http.responseText);
	    		
				// Loop through XML and add in the state options based on country.		
				var xml_data = http.responseXML;
	    		var state_names = xml_data.getElementsByTagName("state_name");
	    		var state_abbreviations = xml_data.getElementsByTagName("state_abbr");
	    		var state_ids = xml_data.getElementsByTagName("state_id");
	    		
	    		var the_length = state_ids.length;
	   			var states = "";
	    			
	   			//alert("the length = " + the_length);
	   				   			
	  			//insert an empty option
	   			var opt = new Option('','');
				selectElement.options[0] = opt;
	
				if(the_length > 0)
	    		{
		    		for (i = 0; i < the_length; i++)
		    		{
		    			var state_name = state_names[i].firstChild.nodeValue;
		    			var state_abbr = state_abbreviations[i].firstChild.nodeValue;
		    			var state_id = state_ids[i].firstChild.nodeValue;
		    			
						var opt = new Option(state_name,state_id);
						selectElement.options[i+1] = opt;
		    		}
		    		document.getElementById(state_span_id).innerHTML = "<br>the states list has been refreshed";
	    		}
	    		else
	    		{	document.getElementById(state_span_id).innerHTML = "<br>there are no states for this country (" + country_select_id + ")";	}   
			}
    	} 
    	else
    	{	alert("Oops! There was a problem retrieving the listing of states for the country you've selected. Please try again.");		}
    }
}