function changedAreas()
{
	var xml = getXmlHttpObject();
	var areas = document.getElementById('areas');
	var cities = document.getElementById('cities');
	var selectedId = areas.options[areas.selectedIndex].value;
	
	if(areas.selectedIndex != 0)
	{
		clearList(cities);
		cities.disabled=false;
		var url = "./getCities.php?area="+selectedId;
		xml.onreadystatechange=function(){
			if(xml.readyState == 4)
			{
				//retrieve the csv version of the response text
				var csv = xml.responseText;

				//split it up into rows
				var rows = csv.split("\n");
				
				//first add an empty element to it
				try
					{
						cities.add(new Option("-- Select City --", ""), null);
					}catch(ex){
						cities.add(new Option("-- Select City --", "", null));
					}
				
				//and then add it to the list
				for(i=0; i<rows.length; i++)
				{
					try{
						cities.add(new Option(rows[i], rows[i]), null);
					}catch(ex){
						cities.add(new Option(rows[i], rows[i]));
					}
				}
			}
		}
		xml.open("GET",url,true);
		xml.send(null);
	}
	else
	{
		clearList(cities);
		cities.disabled = true;
		alert("Disabled becomes true :(");
	}
}

function getXmlHttpObject()
{
	var xmlHttp=null;
	try
	{
		// Firefox, Opera 8.0+, Safari
  		xmlHttp=new XMLHttpRequest();
  	}
	catch (e)
  	{
  		// Internet Explorer
  		try
    	{
    		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    	}
  		catch (e)
    	{
    		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}
  	}
	return xmlHttp;
}

function clearList(list)
{
	while(list.length > 0)
	{
		list.remove(0);
	}
}