var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
var flag=false;
var ij=0;

function createXMLHttpRequest() {
 if (window.ActiveXObject) {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
     xmlHttp = new XMLHttpRequest();                
   }
}
        
function setflag(){flag = true;}
        
function unselect()
{
   if(flag==false)
   document.getElementById("showkey").style.display="none";
   ij=0;
}

function initVars() {
 inputField = document.getElementById("frmchangshang");            
 nameTable = document.getElementById("name_table");
 completeDiv = document.getElementById("showkey");
 nameTableBody = document.getElementById("name_table_body");
 document.getElementById("showkey").style.display="block";
 ij=0;
}
function callback() {
   if (xmlHttp.readyState == 4){
      if (xmlHttp.status == 200)
       {
     	try
           {
              var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
            }
         catch(e)
            {
               document.getElementById("showkey").style.display="none";
               clearNames();
             }
          setNames(xmlHttp.responseXML.getElementsByTagName("content"));
         } 
        else if (xmlHttp.status == 204)
         {
            clearNames();
          }
   }
}

function findnames(evt){

  var k=window.event?evt.keyCode:evt.which;
 if(k==38)
  {  if (ij>0)
	  {ij--;
	  var fid=document.getElementById("ff" +ij);
	  var tj=xmlHttp.responseXML.getElementsByTagName("content").length;
	  for(var jj=0;jj<tj;jj++){document.getElementById("ff" +jj).className="cell1";}
	  fid.className="cell2";
	  inputField.value=document.getElementById('name_table').rows[ij].cells[0].innerHTML;  
	  }
   }
  else if(k==40)
  {  if(ij<10)
	  {
	  var fid=document.getElementById("ff" +ij);
	  var tj=xmlHttp.responseXML.getElementsByTagName("content").length;
	  for(var jj=0;jj<tj;jj++){document.getElementById("ff" +jj).className="cell1";}
	  fid.className="cell2";
	  inputField.value=document.getElementById('name_table').rows[ij].cells[0].innerHTML;
	  ij++;
	  }
   }
  else
  {
	  initVars();
	 
	if (inputField.value.length>0)
    { createXMLHttpRequest();
	
      var url = "search.asp?names=" + inputField.value;
	
	   xmlHttp.open("GET", url, true);
      xmlHttp.onreadystatechange = callback;
      xmlHttp.send(null);

    }
    else
    {clearNames();}
  }
}
function setNames(the_names) {            
   clearNames();
   var size = the_names.length;
   setOffsets();
   var row,cell,spans;
   for (var i = 0; i < size; i++) {
    var e = the_names[i];
    var nextNode=e.getElementsByTagName("name")[0].firstChild.data;
      row  =document.createElement("tr");
	  row.id="ff" +i;
      cell =document.createElement("td");
      cell.onmouseout = function() {flag=false;this.className='cell1'};
      cell.onmouseover = function() { flag=true;this.className='cell2'};
      cell.onclick = function() { populateName(this); };
    var txtName = document.createTextNode(nextNode);
    cell.appendChild(txtName);
    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 = "#333 6px solid";
    completeDiv.style.left = left + "px";
    completeDiv.style.top = top + "px";
    nameTable.style.width="260px";
}
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();
	document.fSearch.submit();
}

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