var storedPoint;

function callbackSugggest() {
  if (req.readyState == 4) {
    if (req.status == 200) {
       getMessageSuggest();
    }
  }
}

function getMessageSuggest() {
  var message = req.responseXML.getElementsByTagName("message")[0];
  setMessageSuggest(message.childNodes[0].nodeValue);
}

function setMessageSuggest(message) {
  htmlElement = document.getElementById("suggest" + storedPoint);
  htmlElement.innerHTML = message;
  showSuggest(storedPoint);
}

function callSuggestAJAX(country, city, state, zip, point) {
  storedPoint = point;
  var url = "/WebApp/PointSuggest/suggest?country=" + country + "&city=" + city + "&state=" + state + "&zip=" + zip + "&point=" + point;
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  req.open("get", url, true);
  req.onreadystatechange = callbackSugggest;
  req.send(null);
}



	var pointValue = '';
	var highlightID = -1;
	var suggestHasFocus = false;
	var suggestPoint = '';
		
	function highlight(id){
		var field;
		for(var x = 0; x < 10; x++){
			field = document.getElementById(x);
			if(field != null){
				field.style.backgroundColor = 'white';
			}
		}	
		document.getElementById(id).style.backgroundColor = '#eeeeee';
		document.getElementById(id).focus();	
		switchSuggestOn(suggestPoint);	
		highlightID = id*1;
	}
	
	function callSuggest(point){
		var country = document.getElementById('country'+point).value;
		var city 	= document.getElementById('city'+point).value;
		var state 	= document.getElementById('state'+point).value;
		var zip 	= document.getElementById('zip'+point).value;		
		if(pointValue != country + city + state + zip){
			pointValue = country + city + state + zip;	
			if(city != '' || state != '' || zip != ''){
				callSuggestAJAX(country, city, state, zip, point);
				highlightID = -1;
			}else{
				hideSuggest(point);
			}	
		}
	}
	
	function hideSuggest(point){
		var element = document.getElementById('suggest'+point);
		if(element != null){
			element.style.display = 'none';
			element.innerHTML = '';
			highlightID = -1;
			pointValue = '';
		}
		var cover = document.getElementById('cover'+point);
		if(cover != null){
			cover.style.display = 'none';
		}
	}
	
	function showSuggest(point){
		document.getElementById('suggest'+point).style.display = 'block';
		var cover = document.getElementById('cover'+point);
		if(cover != null){
			cover.style.display = 'block';
			cover.style.height = document.getElementById('suggest'+point).offsetHeight;
		}
	}
		
	function fillPoint(city, state, zip, point){					
		document.getElementById('city'+point).value				= city;
		document.getElementById('state'+point).value			= state;
		document.getElementById('zip'+point).value				= zip;
		document.getElementById('suggest'+point).style.display 	= 'none';	
		hideSuggest(point);
		pointValue = document.getElementById('country'+point).value + city + state + zip;	
		document.getElementById('zip'+point).focus();
	}
				
	function switchSuggestOn(point){
		suggestHasFocus = true;
		suggestPoint = point;
	}
	
	function switchSuggestOff(point){
		suggestHasFocus = false;
	}
	
	if(window.addEventListener) { // Standard
		document.addEventListener('click', checkFocus, false);
		document.addEventListener('keyup', function(e) {keyup(e, this)}, false);
	} else if(window.attachEvent) { // IE
		document.attachEvent('on' + 'click', checkFocus);
		document.attachEvent('on' + 'keyup', function(e) {keyup(e, this)});
	}

	function keyup(event){		
		if(suggestHasFocus){	
			if(event.keyCode == 38){
				if(highlightID > 0){
					highlightID -= 1;
				}			
				highlight(highlightID);				
			}else if(event.keyCode == 40){
				if(highlightID < 9){
					highlightID += 1;
				}			
				highlight(highlightID);				
			}else if(event.keyCode == 9 && highlightID > -1){
				document.getElementById('city'+suggestPoint).focus();
				hideSuggest(suggestPoint)
			}
		}
		checkFocus();
	}
	
	function checkFocus(){
		if(!suggestHasFocus){
			hideSuggest(suggestPoint);
		}
	}