var xmlhttp;
    var completeDiv;
    var inputField;
    var nameTable;
    var nameTableBody;
    
    //Modify by linli , Add keyboard function
    var currentLine = -1;
    
    //Keyboard Listener 
    document.onkeydown = function() {   
	  switch(event.keyCode)     
	  {   
	    case 38:   
	        currentLine--;   
	        changeItem();   
	        nameTable.focus();
	        break;
	    case   40:   
	        currentLine++;   
	        changeItem();   
	        nameTable.focus();
	        break;   
		case   13:
			populateName(nameTable.rows[currentLine].cells[0]);
			currentLine = -1;
			completeDiv.style.border = "none";
			break;
	  	default :   
	        break;   
      }   
    }   
    
    function clearItem(){
    	for(i=0;i<nameTable.rows.length;i++)     
		  {   
		  	nameTable.rows[i].className = "mouseOut";   
		  }   
    }
    
    function changeItem()   
 	{   
	  clearItem();
	  if(currentLine < 0)   
	  	currentLine = nameTable.rows.length - 1;   
	  if(currentLine == nameTable.rows.length)   
	  	currentLine = 0;   
	  nameTable.rows[currentLine].className = "mouseOver";   
  	}   
    

    function createXMLHttpRequest(){
      if(window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
      }
    }

    function initVars(a,b,c,d){
      inputField = document.getElementById(a);
      nameTable = document.getElementById(b);
      completeDiv = document.getElementById(d);
      nameTableBody = document.getElementById(c);
    }

    function findNames(webPath,a,b,c,d){
      initVars(a,b,c,d);
      if (inputField.value.length > 0){
        createXMLHttpRequest();
        var url = webPath+"/autocompleteServlet?names="+encodeURIComponent(inputField.value)+"&tablename=part_list&filename="+a;
        xmlhttp.open("GET",url,true);
        xmlhttp.onreadystatechange = callback;
        xmlhttp.send(null);
      }else{
        clearNames();
      }
    }

    function callback(){
      if (xmlhttp.readyState == 4 ){
        if (xmlhttp.status == 200){
          setNames(xmlhttp.responseXML.getElementsByTagName("name"));
        }else if (xmlhttp.status == 204){
          clearNames();
        }
      }
    }

    function setNames(the_names){
      clearNames();
      var size = the_names.length;
      setOffsets();

      var row, cell, txtNode;
      for (var i=0; i<size; i++){
        var nextNode = the_names[i].firstChild.data;
        row = document.createElement("tr");
        row.onmouseover = function(){currentLine = this.rowIndex;};
        cell = document.createElement("td");
        cell.onmouseout = function(){this.className='mouseOut';};
        cell.onmouseover = function(){this.className='mouseOver';};
        //cell.onmouseover = function(){changeItem();nameTable.focus();};
        cell.setAttribute("bgcolor","#FFFAFA");
        cell.setAttribute("border","0");
        cell.onclick = function(){populateName(this);};
        txtNode = document.createTextNode(nextNode);
        cell.appendChild(txtNode);
        row.appendChild(cell);
        nameTableBody.appendChild(row);
      }
    }

    function setOffsets(){
      var end = inputField.offsetWidth;
      var left = calculateOffsetLeft(inputField);
      var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

      completeDiv.style.border = "black 1px solid"
      completeDiv.style.left = left + "px";
      completeDiv.style.top = top + "px";
      nameTable.style.width = end + "px";
    }

    function calculateOffsetLeft(field){
      return calculateOffset(field, "offsetLeft");
    }

    function calculateOffsetTop(field){
      return calculateOffset(field, "offsetTop");
    }

    function calculateOffset(field, attr){
      var offset = 0;
      while(field){
        offset += field[attr];
        field = field.offsetParent;
      }
      return offset;
    }

    function populateName(cell){
      inputField.value = cell.firstChild.nodeValue;
      clearNames();
    }

    function clearNames(){
      var ind = nameTableBody.childNodes.length;
      for (var i=ind-1; i>=0; i--){
        nameTableBody.removeChild(nameTableBody.childNodes[i]);
      }
      completeDiv.style.border = "none";
    }