function AjaxRequest(){
	var ajaxRequest;  // The variable that makes Ajax possible!		
	if (window.XMLHttpRequest){
		// If IE7, Mozilla, Safari, etc: Use native object
		ajaxRequest = new XMLHttpRequest();
	}else{
		if (window.ActiveXObject){
			// ...otherwise, use the ActiveX control for IE5.x and IE6
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			alert("Please use a browser with HTTP Request support.");
		}
	}
	return ajaxRequest;
}

//tree functions one for each select box!
function GetOptionsCategories(url){
	//we use the same ajax object for each function
	var xmlReq = new AjaxRequest();
	//url gets passed from the html. in this case from a body on load
	xmlReq.open("POST",url,true);
    xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	xmlReq.setRequestHeader("Connection", "close");

    xmlReq.onreadystatechange = function() {//Call a function when the state changes.
    	//var options = "<option value=''>- Select One</option>";
    	//statuse 200 means everything went ok. now we fill the box
		if(xmlReq.readyState == 4 && xmlReq.status == 200) {
			//alert(xmlReq.responseText);
			var categories = xmlReq.responseText;
			//categroies are received as comma seperated values
			categories = categories.split(",");
			
			var categoryForm = document.getElementById('category');
			//clear out the select box. just so theres no garbage if the user goes back and changes
			//things
			categoryForm.options.length=0;
			//default option
			categoryForm.options[0] = new Option("- Select One","",true,false);
			//we now loop through and add an option for each value we recieved. the text
			//and the value of the option are the same
			for(var i=0;i<categories.length;i++){
			 	var e = i+1;
			 	categoryForm.options[e] = new Option(categories[i],categories[i],false,false);
			 	//options = options + "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
			 }
			//categoryForm.innerHTML = options;
		}
	};	
  
    xmlReq.send('');
	return false;
}


//second function operate exactly the same. only a couple differences 
function GetOptionsCounty(url){
	var categoryForm = document.getElementById('category');
	var category = categoryForm.value;
	//this time we need to append the url to pass a get to the  php page that sends
	//bac the list of counties (countys?)
	url = url + "?category=" + category;

	var xmlReq = new AjaxRequest();
	xmlReq.open("POST",url,true);
    xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	xmlReq.setRequestHeader("Connection", "close");
	
    xmlReq.onreadystatechange = function() {//Call a function when the state changes.
    	//var options = "<option value=''>- Select One </option>";
		if(xmlReq.readyState == 4 && xmlReq.status == 200) {
			var categories = xmlReq.responseText;
			categories = categories.split(",");
			
			var countyForm = document.getElementById('county');
			countyForm.length = 0;
			
			//countyForm.innerHTML = options;
			countyForm.options[0] = new Option("- Select One","",true,false);
			for(var i=0;i<categories.length;i++){
				var e = i+1;
			 	countyForm.options[e] = new Option(categories[i],categories[i],false,false);
			 	//options = options + "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
			}


			//all boxes start out disabled, we need to enable them as user progresses along.
			countyForm.disabled = false;
			//but we still want the city disabled. since this function gets called when they change
			//the first box, we blank the city, and siable it.
			var cityForm = document.getElementById('city');
			cityForm.length =0;
			cityForm.options[0] = new Option("- Select County First","",true,false);
			cityForm.disabled = true;
			//alert(url);
		}
	};	
  
    xmlReq.send('');
	return false;
}

function GetOptionsCity(url){
	var categoryForm = document.getElementById('category');
	var category = categoryForm.value;
	url = url + "?category=" + category;

	var countyForm = document.getElementById('county');
	var county = countyForm.value;
	url = url + "&county=" + county;


	var xmlReq = new AjaxRequest();
	xmlReq.open("POST",url,true);
    xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	xmlReq.setRequestHeader("Connection", "close");
	
    xmlReq.onreadystatechange = function() {//Call a function when the state changes.
    	//var options = "<option value=''>- Select One</option>";
		if(xmlReq.readyState == 4 && xmlReq.status == 200) {
			var cityForm = document.getElementById('city');
			cityForm.options.length = 0;
			
			var categories = xmlReq.responseText;
			categories = categories.split(",");
			cityForm.options[0] = new Option("- Select One","",true,false);

			for(var i=0;i<categories.length;i++){
			 	var e = i+1;
			 	cityForm.options[e] = new Option(categories[i],categories[i],false,false);
			 	//options = options + "<option value='" + categories[i] + "'>" + categories[i] + "</option>";
			 }
			
			//cityForm.innerHTML = options;
			cityForm.disabled = false;
			//alert(url);
		}
	};	
  
    xmlReq.send('');
	return false;
}