var currentElement;            // currently selected input element
var selectedIndex = -1;        // selected item in menu
var airports;                // list of airport nodes
var resultQuery;            // query used for airports above
var showMenu = false;        // is menu visible?
var DELAY = 000; //2000        // 2 second delay for ajax call
var requestReady = true;     // mark http request as available
var delayedQuery = false;
var browserName=navigator.appName;
 var heightincerment = 20;  

//to store the code type city or airport
   var searchType = new Array(100); 

// function to call ajax object and retrieve xml feed from the link
function showHint(e, val){


   if( filterKeys(e) == true )
       return;
   clearTable();
   var query = val.value;
   currentElement = val;
   if ( query == null || trim(query).length < 3){
       return;
   }
   query = query.toUpperCase();
   if(resultQuery && resultQuery.length > 0){
       if(query.match(resultQuery)){
           filterXML(query);
           parseMessages();
           return;
       }
       resultQuery = null;
   }
   // do not make request if not available
   if(!requestReady){
       delayedQuery = true;
       return;
   }
      req = GetXmlHttpObject();
   if ( req == null ){
       alert ("AJAX not supported");
       return;
   }

   var url=AUTOCOMPLETER_URL + "&city="+query;
   var req = GetXmlHttpObject(url);
   req.onreadystatechange = function() {
       if (req.readyState == 4) {
           if (req.status == 200) {
               resultQuery = query;
               parseMessages(req.responseXML);
           } else if (req.status == 204){
               clearTable();
           }
       }
   };
   req.open("GET",url,true);
   req.send(null);
   requestReady = false;
   setTimeout ( resetRequest, DELAY );
}
// make http request object available again
function resetRequest(){
   requestReady = true;
   if(delayedQuery == true){
       delayedQuery = false;
       showHint(null,currentElement);
   }
}


function filterXML(query){

if(airports){
   for (loop = airports.childNodes.length - 1; loop >= 0; loop--) {
       var airport = airports.childNodes[loop];
       var code = airport.getElementsByTagName("Code")[0].childNodes[0].nodeValue;
       code = code.toUpperCase();
       var city = airport.getElementsByTagName("City")[0].childNodes[0].nodeValue;
       city = city.toUpperCase()
       if( !( code.match(query) || city.match(query) )){
           airports.removeChild(airports.childNodes[loop]);
       }
   }
   resultQuery = query;
}
}
function filterKeys(e){
   if(e == null)
       return false;
   var keycode;
   var type;
   if (window.event) {
       e = window.event;
   }
      
   keycode = e.keyCode;
   type = e.type;

   switch(keycode) {
        case 91: //win
        case 93: //menu
       case 16: //SHIFT
       case 17: // STRG
       case 18: // ALT
       case 20: // CAPS
          case 37: // LEFT
          case 39: // RIGHT
          case 9: // TAB
           return true;
           case 8: //BackSpace
           document.forms[0].hiddenPlaceString.value = null;
           return false;         
            case 73: //Delete
           document.forms[0].hiddenPlaceString.value = null;
           return false;     
          case 27: // ESC
           clearTable();
           return true;
          case 38: // UP
          case 40: // DOWN
              selectNextItem(keycode);
           return true;
       case 13: // ENTER
           selectIt();
           return true;
                  default:
           return false;
   }
}



function parseMessages(responseXML) {
   // if available, new resultset is in
   if(responseXML){
       airports = responseXML.getElementsByTagName("Locations")[0];
      
          
       } 
   
   if(airports){
    var noOfAirports = airports.childNodes.length;
   
   for (loop = 0; loop < airports.childNodes.length; loop++) {
       var airport = airports.childNodes[loop];
       var code = airport.getElementsByTagName("Code")[0].childNodes[0].nodeValue;
       var name = airport.getElementsByTagName("Name")[0].childNodes[0].nodeValue;
       var country = airport.getElementsByTagName("Country")[0].childNodes[0].nodeValue;
       
       searchType[loop] = airport.getElementsByTagName("SearchType")[0].childNodes[0].nodeValue;
       try {
           if(browserName=="Microsoft Internet Explorer"){
              if(airports.childNodes[loop].getElementsByTagName("State")[0].childNodes[0].nodeValue == "null")
                   var state = " ";
               else {
                   var state = airport.getElementsByTagName("State")[0].childNodes[0].nodeValue;
                   state = state.toUpperCase();
                   state = state.replace(/^\s+|\s+$/g, '')
               }
              if(airport.getElementsByTagName("City")[0].childNodes[0].nodeValue == "null")
                   var city = " ";
               else
                   var city = airport.getElementsByTagName("City")[0].childNodes[0].nodeValue;
           } else {//This is working code for other browsers
               var state = airport.getElementsByTagName("State")[0].childNodes[0].nodeValue;
               var city = airport.getElementsByTagName("City")[0].childNodes[0].nodeValue;
           }               } catch (e) {
                      }
                      appendAirport(code, name, city, state, country, loop,noOfAirports);
   }
       showMenu = true;
}
}

function appendAirport( code, name, city, state, country, i,noOfAirports){

   // create link
       
    var link;
       if( name != "null" )
       link = "("+code+") "+name+" - ";
       else
       link = "  ";
       
       if(city != null && city != "undefined" && city != "NULL" && city != "null" && city != " " )
           link += city+", ";
          
            
       if( state != null && state != "null" && state != "NULL" && state != " " && state != "undefined")
           link += state+", ";
       if(country != "null")
       link += country;
   // set position
   
  
       var menu = getMenu();
       var nodeCount = menu.childNodes.length;
       menu.style.top = positionY(currentElement) + "px";
       menu.style.left = positionX(currentElement) + "px";
       menu.style.display = "block";
       
             
         if(noOfAirports > 30 ){
                 menu.style.height = 325 + "px";
                 menu.style.overflow = "auto";
               }else{
              
              menu.style.height = noOfAirports * 12 + 5 + "px";
              menu.style.overflow = "hidden";
              }
                
       

       var result = document.createElement("div");
       
    
       if(nodeCount == 0){
           result.className = "selectedItem";
           selectedIndex = 0;
       } else{
           result.className = "popupItem";
           }
           
       result.setAttribute ("id", "result" + nodeCount);
       //result.setAttribute("onmouseover", "choose("+i+")");
       result.onmouseover = function() {choose(i);}
       
       var imgDiv = document.createElement("div");
           imgDiv.className="leftimage";
       
       
       var imgElement = document.createElement("img");
       
       var imgPath = IMAGEPATH.substring(0, IMAGEPATH.length - 5);
       
       if(name != "null")
      		 var imgsrc = imgPath + 'flight.gif';   
       else
             var imgsrc = imgPath + 'chicago.gif';
                 
		
		
		imgElement.setAttribute('src', imgsrc);
		
		imgDiv.appendChild(imgElement);
		
		 result.appendChild(imgDiv);
		
		
		
		var linkDiv = document.createElement("div");
		
		  if(nodeCount == 0){
          linkDiv.className="selectedLinkDiv";
           } else{
          linkDiv.className="linkDiv";
           }
			
			 linkDiv.setAttribute ("id", "linkDiv" + nodeCount);
		
		var linkElement = document.createElement("a");
			   
	   				
       linkElement.appendChild(document.createTextNode(link));
       linkElement.className = "popupItem";
       linkElement.style.cssText = "color:#FFFFFF";
       linkElement.setAttribute("href","#");
       linkElement.onclick = function() {
            setIt(code);
           
       }
           
       linkDiv.appendChild(linkElement);
             
       result.appendChild(linkDiv);
		
	   var length = country.length;
	   
	 if(length <= 2){
	
		var countryImgDiv = document.createElement("div");
			countryImgDiv.className="rightimage";
      
        var countryImgElement = document.createElement("img");
               
        var source = IMAGEPATH + '/'+country.toLowerCase() + '.gif' ;
            
             
        countryImgElement.setAttribute('src', source );
      
        countryImgDiv.appendChild(countryImgElement);
        
		result.appendChild(countryImgDiv);
		
		 }
		
		var clearDiv = document.createElement("div");
			clearDiv.className="clear";
		
		result.appendChild(clearDiv);
       
       var infoElement = document.createElement("div");
                 
       if(name != "null")
       infoElement.appendChild(document.createTextNode(code));
        else{
        if( state != null && state != "null" && state != "NULL" && state != " " && state != "undefined"){
       infoElement.appendChild(document.createTextNode(city+","+state+","+country));
       }else{
       
       infoElement.appendChild(document.createTextNode(city+","+country));
       }
             
       }
       infoElement.setAttribute ("id", "info" + nodeCount);
       infoElement.style.display = "none";
       result.appendChild(infoElement);
      
       
                  
       // infoElement.style.line-height = "1px";
       
              menu.appendChild(result);
             
            
            
              
}
// fired when focus on the element is lost, copy selected value if menu is shown
function checkSelection(event){

if(browserName=="Microsoft Internet Explorer"){

var xoff = window.event.offsetX;
var yoff = window.event.offsetY;
 
   
   if (event.offsetX > 380 && yoff > 20) {
		//good may close
		//prevent autocomplete close
		event.cancelBubble = true;
		event.srcElement.focus();
		return false;
	}else{
	
	if(showMenu){

     selectIt();
}
	
	}

     
 }else {
 
if(showMenu){

	selectIt();

	}
  }
   
}
function choose(i) {
   var oldIndex = selectedIndex;
   selectedIndex = i;
 
   var linkRef = "linkDiv"+oldIndex;
   var link = document.getElementById(linkRef);
   link.className="linkDiv";
   
   linkRef = "linkDiv"+selectedIndex;
   link = document.getElementById(linkRef);
   link.className="selectedLinkDiv";
      
   var resultRef = "result"+oldIndex;
   var result = document.getElementById(resultRef);
   result.className = "popupItem";
   resultRef = "result"+selectedIndex;
   result = document.getElementById(resultRef);
   result.className = "selectedItem";
   var infoRef = "info" + selectedIndex;
   var info = document.getElementById(infoRef);
   if(info){
       var code = info.innerHTML;
       currentElement.value = code;
   }
   delayedQuery = false;
   resultQuery = null;
}
// moves up and down the autocompleter for up and down arrow events
function selectNextItem(keycode){
   var direction = keycode - 39;
   var selectables = getMenu();
   var elementCount = selectables.childNodes.length;
   var oldIndex = selectedIndex;
   selectedIndex += direction;

   selectedIndex = ( selectedIndex < 0 ) ? 0 : selectedIndex;
   selectedIndex = ( selectedIndex <  elementCount ) ? selectedIndex : ( elementCount - 1 );
    
      var linkRef = "linkDiv"+oldIndex;
   var link = document.getElementById(linkRef);
   link.className="linkDiv";
   
   linkRef = "linkDiv"+selectedIndex;
   link = document.getElementById(linkRef);
   link.className="selectedLinkDiv";
    
    
      var resultRef = "result"+oldIndex;
   var result = document.getElementById(resultRef);
   result.className = "popupItem";
      resultRef = "result"+selectedIndex;
   result = document.getElementById(resultRef);
   result.className = "selectedItem";
   var infoRef = "info" + selectedIndex;
   var info = document.getElementById(infoRef);
   if(info){
       var code = info.innerHTML;
       currentElement.value = code;
   }
   delayedQuery = false;
   resultQuery = null;
}
// function executed if item selected with the mouse
function setIt(code){

   currentElement.value = code;
   clearTable();
   resultQuery = null;
   delayedQuery = false;
   return false;
}
// function executed if tab or enter pressed
function selectIt(){


   if(selectedIndex < 0)
       selectedIndex = 0;
   var infoRef = "info" + selectedIndex;
   
   
 
   var info = document.getElementById(infoRef);
   if(info){
       var code = info.innerHTML;
       currentElement.value = code;
     }
      
   
    var selectedAirport = airports.childNodes[selectedIndex];
    
   if(selectedAirport){
     var code = selectedAirport.getElementsByTagName("Code")[0].childNodes[0].nodeValue;
     
      document.forms[0].hiddenPlaceString.value = code;
      }
      
      if(searchType[selectedIndex] == "Airport")      
      document.forms[0].searchType[1].checked = true;
      else{
       document.forms[0].searchType[0].checked = true;
        }
           
   clearTable();
   delayedQuery = false;
   resultQuery = null;
}
// removes all elements and moves the menu away from the screen
function clearTable() {
   var menu = getMenu();
   for (loop = menu.childNodes.length -1; loop >= 0 ; loop--) {
       menu.removeChild(menu.childNodes[loop]);
   }
   selectedIndex = -1;
   menu.style.left = "-10px";
   menu.style.display = "none";
   showMenu = false;
}
// i have in mind to dynamically create div
// and insert into body of the page, so we
// do not have to create it in html/jsp
function getMenu(){

 //<div class="menutest" id="menu-popup" style="width: 400px; height: 500px; overflow-y: scroll">

 //</div>
 
  var menu = document.getElementById("menu-popup");
   return menu;
 //var menu1 = document.createElement("div");
  
  //menu1.className="menutest"; 
  
   //return menu1;
}
function positionX(obj)
 {
   var curleft = 0;
   if(obj.offsetParent)
       while(1)
       {
         curleft += obj.offsetLeft;
         if(!obj.offsetParent)
           break;
         obj = obj.offsetParent;
       }
   else if(obj.x)
       curleft += obj.x;
          return curleft;
 }

function positionY(element){
   var targetTop = 0;
   if (element.offsetParent) {
       while (element.offsetParent) {
           targetTop += element.offsetTop;
           element = element.offsetParent;
       }
   } else if (element.y) {
       targetTop += element.y;
   }
   targetTop += 25;
   return targetTop;
}
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 clickedOutsideElement(elemId, evt) {
   var theElem = '';
   if(window.event)
       theElem = getEventTarget(window.event);
   else
       theElem = getEventTarget(evt);

   while(theElem != null) {
       if(theElem.id == elemId)
           return false;

       theElem = theElem.offsetParent;
   }

   return true;
}

function getEventTarget(evt) {
   var targ = (evt.target) ? evt.target : evt.srcElement;

   if(targ != null) {
       if(targ.nodeType == 3)
           targ = targ.parentNode;
   }

   return targ;
}

document.onclick = function(evt) {

if(clickedOutsideElement('menu-popup', evt))
   clearTable();
}

function trim(stringToTrim) {
	return stringToTrim.replace(/^\s+|\s+$/g,"");
}