// declare a global  XMLHTTP Request object
var XmlHttpObj;

// create an instance of XMLHTTPRequest Object, varies with browser type, try for IE first then Mozilla
function CreateXmlHttpObj()
{
	// 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");
	}
	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();
	}
}

// called from onChange or onClick event of the continent dropdown list
function productTypeOnChange() 
{
    var productType = document.getElementById("productType");
    
    // get selected continent from dropdown list
    var selectedContinent = productType.options[productType.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/xml_data_provider.php" + "?filter=" + encodeURIComponent(selectedContinent);

	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);		
	}
}

function productStyleOnChange() 
{
    var productType = document.getElementById("productType");
    var productStyle = document.getElementById("provinceList");
    
    var type_id = productType.options[productType.selectedIndex].value;
    var style_id = productStyle.options[productStyle.selectedIndex].value;
   
    var requestUrl;
    requestUrl = "/scripts/xml_data_provider2.php" + "?type_id=" + encodeURIComponent(type_id) + '&style_id=' + encodeURIComponent(style_id);

	CreateXmlHttpObj();

	if(XmlHttpObj)
	{
		XmlHttpObj.onreadystatechange = StateChangeHandler2;
		XmlHttpObj.open("GET", requestUrl,  true);
		XmlHttpObj.send(null);		
	}
}

function productStyleOnChange2() 
{
    var productType = document.getElementById("productType");
    var productStyle = document.getElementById("provinceList");
    
    var type_id = productType.options[productType.selectedIndex].value;
    var style_id = productStyle.options[productStyle.selectedIndex].value;
   
    var requestUrl;
    requestUrl = "/scripts/xml_data_provider3.php" + "?type_id=" + encodeURIComponent(type_id) + '&style_id=' + encodeURIComponent(style_id);
    
	CreateXmlHttpObj();

	if(XmlHttpObj)
	{
		XmlHttpObj.onreadystatechange = StateChangeHandler3;
		XmlHttpObj.open("GET", requestUrl,  true);
		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)
		{			
			PopulateProvinceList(XmlHttpObj.responseXML.documentElement);
		}
		else
		{
			alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
		}
	}
}

function StateChangeHandler2()
{
	if(XmlHttpObj.readyState == 4)
	{
		if(XmlHttpObj.status == 200)
		{			
			PopulateProvinceList2(XmlHttpObj.responseXML.documentElement);
		}
		else
		{
			alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
		}
	}
}

function StateChangeHandler3()
{
	if(XmlHttpObj.readyState == 4)
	{
		if(XmlHttpObj.status == 200)
		{			
			PopulateProvinceList3(XmlHttpObj.responseXML.documentElement);
		}
		else
		{
			alert("problem retrieving data from the server, status code: "  + XmlHttpObj.status);
		}
	}
}

// populate the contents of the province dropdown list
function PopulateProvinceList(provinceNode)
{
    var provinceList = document.getElementById("provinceList");
	// clear the province list 
    provinceList.options.length = 0;

	var provinceNodes = provinceNode.getElementsByTagName('province');
	var idValue;
	var textValue; 
	var optionItem;

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

// populate the contents of the province dropdown list
function PopulateProvinceList2(provinceNode)
{
    var provinceList = document.getElementById("productBrand");
    provinceList.options.length = 0;

	var provinceNodes = provinceNode.getElementsByTagName('province');
	var idValue;
	var textValue; 
	var optionItem;

	for (var count = 0; count < provinceNodes.length; count++)
	{
   		textValue = GetInnerText(provinceNodes[count]);
		idValue = provinceNodes[count].getAttribute("id");
		optionItem = new Option( textValue, idValue,  false, false );
		provinceList.options[provinceList.length] = optionItem;
	}
}

function PopulateProvinceList3(provinceNode)
{
    var provinceList = document.getElementById("productModel");
    provinceList.options.length = 0;

	var provinceNodes = provinceNode.getElementsByTagName('province');
	var idValue;
	var textValue; 
	var optionItem;

	for (var count = 0; count < provinceNodes.length; count++)
	{
   		textValue = GetInnerText(provinceNodes[count]);
		idValue = provinceNodes[count].getAttribute("id");
		optionItem = new Option( textValue, idValue,  false, false );
		provinceList.options[provinceList.length] = optionItem;
	}
}

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