var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;

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



function initVars() {
	inputField = document.getElementById("vraag_sn");            
    nameTable = document.getElementById("name_table");
    completeDiv = document.getElementById("popup");
    nameTableBody = document.getElementById("name_table_body");
}



function findLeden() {
	initVars();
    if (inputField.value.length > 0) {
    	createXMLHttpRequest();            
        var url = "content/leden/leden_xml.php?vraag_sn=" + escape(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) {
        	var name = xmlHttp.responseXML.getElementsByTagName("speelnaam")[0].firstChild.data;
            setNames(xmlHttp.responseXML.getElementsByTagName("speelnaam"));
        } 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");
        cell = document.createElement("td");
                
        cell.onmouseout = function() {this.className='mouseOut';};
        cell.onmouseover = function() {this.className='mouseOver';};
        cell.setAttribute("bgcolor", "#EDEDED");
        cell.setAttribute("border", "0");
        cell.setAttribute("font-family", "verdana");
        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";
    nameTable.style.width = "264px";
}



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";
}