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

function createXMLHttpRequest() { //´´½¨xmlHttpRequest¶ÔÏó
   if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
   else if (window.XMLHttpRequest) {
         xmlHttp = new XMLHttpRequest();                
   }
}

function setflag(){  
   flag = true;
}
        
function DisSelect()
{
   if(flag==false)
      document.getElementById("popup").style.display="none";
}

function initVars() {
inputField = document.getElementById("searcha"); //ÊäÈë¿òkeyword      
nameTable = document.getElementById("name_table");     //table²ã
completeDiv = document.getElementById("popup");          //div²ã
nameTableBody = document.getElementById("name_table_body");//tbody²ã
document.getElementById("popup").style.display="block";   //ÏÔʾdiv²ã
}

function findNames() {  

    initVars();    
    if (inputField.value.length > 0) 
    {
      createXMLHttpRequest();
      var url = "search?keyword="+encodeURI(encodeURI(inputField.value)); 
      xmlHttp.open("GET", url, true);
      xmlHttp.onreadystatechange = callback;
      xmlHttp.send(null);
    }else{                 
      clearNames();       
    } 
}

function callback() {
if (xmlHttp.readyState == 4) 
{
    if (xmlHttp.status == 200)
    {
       try
          {
             var name = xmlHttp.responseXML.getElementsByTagName("tag")[0].firstChild.data;

                                }catch(e){
             document.getElementById("popup").style.display="none";
             clearNames();
          }
       setNames(xmlHttp.responseXML.getElementsByTagName("content"));
     } 
else if (xmlHttp.status == 204)
         {
           clearNames(); 
          }
}
}
        
function setNames(the_names) {         
    clearNames();
    var size = the_names.length;    
    setOffsets();
    var row,cell,spans,hrefs;
    for (var i = 0; i < size; i++) {
      
      var e = the_names[i];
      
      var nextNode=e.getElementsByTagName("tag")[0].firstChild.data;
      var nextDuty=e.getElementsByTagName("usetimes")[0].firstChild.data;
      //´´½¨tr£¬td£¬spanÔªËØ
      row =document.createElement("tr");
      cell =document.createElement("td");
      hrefs=document.createElement("a");
      //spans=document.createElement("span");
      //ÉèÖÃcellÊôÐÔ
      cell.onmouseout = function() {this.className='mouseOut'; flag=false;};
      cell.onmouseover = function() {this.className='mouseOver'; flag=true;};
      cell.setAttribute("bgcolor","#FFFAFA");
      cell.setAttribute("border","0");
      cell.setAttribute("height","20");
          //cell.setAttribute("onmouseover","setflag()");
           //cell.onclick = function() { populateName(this); };
      hrefs.onclick = function() { populateName(this); };
      hrefs.setAttribute("href","javascript:;");
         //½«nextNodeÌí¼Óµ½td
      var txtName = document.createTextNode(nextNode);
      var txtDuty = document.createTextNode(nextDuty);
      hrefs.setAttribute("title",nextDuty);
         // cell.appendChild(txtName);
       //×°ÔØÒþ²ØÊý¾Ýµ½spanÔªËØ
      hrefs.appendChild(txtName);
      hrefs.appendChild(txtDuty);
      cell.appendChild(hrefs);
     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=inputField.offsetWidth;
        }
        
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) { //µÃµ½cell¶ÔÏó(½Úµã)ÀïµÄÎı¾Öµ
//Ìî³äÊý¾Ýµ½webÒ³Ã棬cell---->td¶ÔÏó
   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";
}