var _highlightSuggestionIndex = -2;

var _highlightDiv = null;
var _selectedIndex = -1; 
var _divObject = null;
var SIZE=0;
function DisplayWord() 
{
  if(_selectedIndex > -1) 
  { 
  var selectedWord = document.getElementById("suggestions").childNodes[_selectedIndex].nodeValue; 
  document.getElementById("cityofinterest").value = selectedWord; 
  }
  else 
  {    
    document.getElementById("cityofinterest").value = ""; 
  }  
  
  // Hide the DIV Element 
  document.getElementById("suggestions").style.visibility = "hidden"; 
  
  
}

function SearchWord(element,event) 
{ 
    var charCode = event.keyCode;
    var inputField=element;
   
   	// Send to the Server Side Method to get the string 
    if( inputField.value.length > 2 && (charCode >=65 && charCode <=90 || charCode >= 97 && charCode <=122) ) {
    	var url="/servlet/validate?id=" + encodeURIComponent(inputField.value);
    	if (typeof XMLHttpRequest != "undefined") {
       		req = new XMLHttpRequest();	//FOR MOZILLA FIREFOX
   		} else if (window.ActiveXObject) {
       		req = new ActiveXObject("Microsoft.XMLHTTP"); //FOR IE
   		}
   		req.open("GET", url, true);
   		req.onreadystatechange = callback;
   		req.send(null);
   		
    }
    // if the backspace key (8) is pressed and 48 is for the delete button
    else if(charCode == 8 || charCode == 48) 
    {
        // Reset the count
        _highlightSuggestionIndex = -2; 
        if ( inputField.value.length == 0) {
        //	document.getElementById("suggestions").style.visibility = "hidden"; 
        	document.getElementById("suggestions").innerHTML = ""; 
			document.getElementById("suggestions").style.height = "0px"; 
			document.getElementById("suggestions").style.width = "0px"; 
			
		}        	
        if( inputField.value.length > 2  ) {
    		var url = "/servlet/validate?id=" + encodeURIComponent(inputField.value);
   	   		if (typeof XMLHttpRequest != "undefined") {
       			req = new XMLHttpRequest();
   			} else if (window.ActiveXObject) {
       			req = new ActiveXObject("Microsoft.XMLHTTP");
   			}
   			req.open("GET", url, true);
	   		req.onreadystatechange = callback;
   			req.send(null);  
    	}
    }
    
    // when the down arrow key is pressed 
    else if(charCode == 40) 
    {   
    	if(_highlightSuggestionIndex==-2  ){
    		_highlightSuggestionIndex+=2;
    		select(document.getElementById("city"+_highlightSuggestionIndex));          
   
    	}else if(_highlightSuggestionIndex>=0 && _highlightSuggestionIndex <= SIZE){
        	deselect(document.getElementById("city"+_highlightSuggestionIndex));
        	_highlightSuggestionIndex+=2;
        	select(document.getElementById("city"+_highlightSuggestionIndex));
        }
    }
    // When the up arrow key is pressed
    else if(charCode == 38) 
    {
    	//alert( "INDEX: "+_highlightSuggestionIndex+" SIZE: "+SIZE);
        if(_highlightSuggestionIndex >= SIZE){
        //	alert("city"+SIZE);
        	deselect(document.getElementById("city"+SIZE));
        	_highlightSuggestionIndex=SIZE-2;
       		select(document.getElementById("city"+_highlightSuggestionIndex));
        }else if( _highlightSuggestionIndex > 0){
        	deselect(document.getElementById("city"+_highlightSuggestionIndex));
        	_highlightSuggestionIndex-=2;
        	select(document.getElementById("city"+_highlightSuggestionIndex));
        }
        else if( _highlightSuggestionIndex==0){
        	deselect(document.getElementById("city"+_highlightSuggestionIndex));
        	_highlightSuggestionIndex=0;       	
			select(document.getElementById("city"+_highlightSuggestionIndex));
		}
    }
    //WHEN ENTER IS PRESSED 
    else if (charCode==13){
    	defaultFill();
    }    
}

function callback(response) 
{
    if (req.readyState == 4) {
    	 
        if (req.status == 200) {
            // update the HTML DOM based on whether or not message is valid
           
            parseMessage();
        }
        else if (req.status == 404 ){
        //	alert("URL DOES NOT EXISTS");
        	
        }else{
        //	alert("STATUS IS : "+req.status);
        }
    }

 
}
function parseMessage(){
	var response=req.responseText;
	setMessage(response);
}
function setMessage(message){
	var mdiv = document.getElementById("suggestions");
	if ( message == ""){
		mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
	}else{
		mdiv.style.visibility="visible";
		document.getElementById("suggestions").style.height = "100%"; 
		document.getElementById("suggestions").style.width = "100%"; 
		mdiv.innerHTML=message;
	}
	SIZE=2*document.getElementById("citylist").getElementsByTagName("li").length-2;
}

// BEHAVIOUR FUNCTIONS FUNCTIONS 


function select( element){
	element.style.backgroundColor="white";
	tempfill(document.getElementById('cityofinterest'),element);
}

function deselect(element){
	element.style.backgroundColor="#d1e2f4";
}

function fill( inputElement, element){
	var filldata=element.firstChild.data;
	inputElement.value=filldata;
	document.getElementById('suggestions').innerHTML="";
	document.getElementById("suggestions").style.height = "0px"; 
	document.getElementById("suggestions").style.width = "0px"; 
	document.getElementById("suggestions").visibility="hidden";
}
function tempfill ( inputElement, element){
	var filldata=element.firstChild.data;
	inputElement.value=filldata;
}
function defaultFill(){
	
	if (_highlightSuggestionIndex >= 0)
		document.getElementById("cityofinterest").value=document.getElementById("city"+_highlightSuggestionIndex).firstChild.data;
	else if (document.getElementById("cityofinterest").value != "")
		document.getElementById("cityofinterest").value="";
	document.getElementById("suggestions").innerHTML = ""; 	
	document.getElementById("suggestions").style.visibility = "hidden"; 
	document.getElementById("suggestions").style.height = "0px"; 
	document.getElementById("suggestions").style.width = "0px"; 
}