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

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        	try {
        		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e1) {
                xmlHttp =  null;
            }
        }
                	
    } 
    else if (window.XMLHttpRequest) {
    	try {
        	xmlHttp = new XMLHttpRequest();
    	} catch (e) {
    		xmlHttp =  null;	
    	}
    }
	if (xmlHttp == null) errorMessage();   //XMLHttpRequest »ý¼º ½ÇÆÐ
    return xmlHttp;
}

function initVars() {
    inputField = document.getElementById("names"); //ÀԷ°ª
    nameTable = document.getElementById("name_table");
    completeDiv = document.getElementById("popup"); //div id
    nameTableBody = document.getElementById("name_table_body");
}

function findNames() {
    initVars();

    if (inputField.value.length > 0) { //ÀԷ°ªÀÌ ÀÖÀ» °æ¿ì ½ÇÇà..
        createXMLHttpRequest();
        //alert("333");
        var url = "/servlets/AjaxComponent?names=" + escape(inputField.value);
        //alert(url);
        xmlHttp.open("GET", url, true); //xmlHttp.open; GET/POST ¹æ½Ä, true´Â ºñµ¿±â ¹æ½Ä..
        xmlHttp.onreadystatechange = callback; //onreadystatechange; ó¸® »óÅ°¡ º¯°æµÇ¸é ÀÚµ¿À¸·Î À̺¥Æ® ¹ß»ý..
        xmlHttp.send(null);
    } else {
        clearNames();
    }
}

function callback() {
    if (xmlHttp.readyState == 4) { //readyState°¡ 4À̸鼭 status°¡ 200ÀÎ »óÅ°¡ Á¤»ó Á¾·á.
        if (xmlHttp.status == 200) {
            //var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data; //script ¿¡·¯ ¹ß»ý..
           	setNames(xmlHttp.responseXML.getElementsByTagName("name"));
        } else if (xmlHttp.status == 404){
            clearNames();
        }
    }
}

function setNames(the_names) {
    clearNames();
    var size = the_names.length;
    if ( size > 0 ) {
    	setOffsets();
	}
	//var suggestScroll = 0;     //¼­Á¦½ºÆ® ¶óÀÎ: 9¶óÀκÎÅÍ ½ºÅ©·Ñ ¹Ù Ç¥½Ã
	var entryName = document.getElementById("names").value;
    var row, cell, txtNode;

    //ÇѱÛÀÚ¶óµµ ÀÔ·ÂÇÑ °æ¿ì¿¡ ¼öÇà
    if (entryName.length >= 1) {
    	for (var i = 0; i < size; i++) {
    	    var nextNode = the_names[i].firstChild.data;
    	    
    	    row = document.createElement("tr");
    	    cell = document.createElement("td");
    	    
    	    txtNode = document.createTextNode(nextNode);
    	    cell.appendChild(txtNode);
    	    row.appendChild(cell);
    	    nameTableBody.appendChild(row);

    	    cell.onmouseout = function() {this.className='mouseOver';};
    	    cell.onmouseover = function() {this.className='mouseOut';};
    	    cell.setAttribute("bgcolor", "#FFFAFA");
    	    cell.setAttribute("border", "0");
    	    //cell.onclick = function() { populateName(this); };
    	    cell.onmouseup = function() { populateName(this); };
    		//}
    		//suggestScroll++;
    	}
    	// ¼­Á¦½ºÆ® µ¥ÀÌÅÍ°¡ 8°ÇÀÌ ³ÑÀ¸¸é, »óÇÏ ½ºÅ©·Ñ ¹Ù Ç¥½Ã
    	if (size > 8) {
    		completeDiv.style.overflowX = "hidden";
		    completeDiv.style.overflowY = "auto";
    	    completeDiv.style.height   = "177px"; 
    	}	
	}
}

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

    completeDiv.style.border = "green 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(); //Ŭ¸¯ÈÄ Çѹø¿¡ div°¡ »ç¶óÁöÁö ¾ÊÀ½..
    var parmParent = document.getElementById("popup");
    parmParent.parentNode.removeChild(parmParent);
}

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

    completeDiv.style.border = "none";
    completeDiv.style.overflow = "hidden";
    completeDiv.style.height   = "0px"; 
}

// Áö¿øÇÒ ¼ö ¾ø´Â ºê¶ó¿ìÀú »ç¿ë
function errorMessage() {
    alert("Áö¿øÇÒ ¼ö ¾ø´Â ºê¶ó¿ìÀúÀÔ´Ï´Ù."); 
    return;
}