// JavaScript Document

window.onload = init;
var xhr = false;
var citiesArray = new Array();
var keydown = true;

function init() {
	
	document.getElementById("citiesField").onkeyup = searchSuggest;
	
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	
	else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { }
		}
	}
	
	if (xhr) {
		xhr.onreadystatechange = setCitiesArray;
		xhr.open("GET", "../cities.xml", true);
		xhr.send(null);
	}
	
	else {
		alert("Sorry but I couldn't create an XMLHttpRequest");
	}	
		

	
}

function setCitiesArray() {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			var outMsg = xhr.responseText;
		}
		else {
			var outMsg = "There was a problem with the request " + xhr.status;
		}
		
		if (xhr.responseXML) {
			var allCities = xhr.responseXML.getElementsByTagName("item");
			for(var i=0; i < allCities.length; i++) {
				citiesArray[i] = allCities[i].getElementsByTagName("label")[0].firstChild;
			}
		}


	else {
		alert("There was a problem with the request " + xhr.status);
	}
}

}

function searchSuggest() {
	var str = document.getElementById("citiesField").value;
	
	document.getElementById("citiesField").className ="";
	if (str != "") {
		document.getElementById("popups").innerHTML = "";
	
		if (keydown == false) {
			for (var i=0; i < citiesArray.length; i++) {
				var thisCity = citiesArray[i].nodeValue;
				
				//alert(thisCity.toLowerCase().indexOf(str.toLowerCase()))
				if (thisCity.toLowerCase().indexOf(str.toLowerCase())==0) {
					var tempDiv = document.createElement("div");
					tempDiv.innerHTML = thisCity;
					tempDiv.onClick = makeChoice;
					tempDiv.className = "suggestions";
					document.getElementById("popups").appendChild(tempDiv);
				
				}
			}
		
		}
	}
	var foundCt = document.getElementById("popups").childNodes.length;
	
	//alert(foundCt);
	if(foundCt == 0) {
	   document.getElementById("citiesField").className="error";
	}
	   
	if (foundCt == 1) {
		 document.getElementById("citiesField").value = document.getElementById("popups").firstChild.innerHTML;
		 //document.getElementById("popups").innerHTML = "";
	}
	
	
	
	
			
}

function makeChoice(evt) {
	var thisDiv = (evt) ? evt.target : window.event.srcElement;
	document.getElementById("citiesField").value = thisDiv.innerHTML;
	document.getElementById("popups").innerHTML = "";
	city.value = thisDiv.innerHTML;
	
}

document.onkeydown = checkKeycode;

function checkKeycode(e) {

	var keycode;

	if (window.event) {
		
		keycode = window.event.keyCode;
		
		if (keycode == 46) {
			keydown = true;
		
		}
		else {
			keydown = false;
		}
	}
	
}