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

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

function initVars() {
	inputField = document.myform.search_word;            
	nameTable = document.getElementById("name_table");
	completeDiv = document.getElementById("popup");
	nameTableBody = document.getElementById("name_table_body");
	searchType	= document.myform.search_opt;
}

/*
* GET 방식
*/
function findNames() {
	initVars();
	if (searchType.value==1)
		return;

	if (inputField.value.length > 0) {
		createXMLHttpRequest();
		var url = "/util/z.php?mnu_name=" + encodeURI(inputField.value);
		//encodeURI 대신에 encodeURIComponent 를 사용해도 결과는 동일하다.
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	} else {
		clearNames();
	}
}

/**
* POST 방식
*/
/*function findNames() {
	initVars();
	if (inputField.value.length > 0) {
		createXMLHttpRequest();
		var url = "AutoCompleteServlet";
		xmlHttp.open("POST", url, true);
		xmlHttp.onreadystatechange = callback;
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.send("names=" + encodeURI(inputField.value));
		//encodeURI 대신에 encodeURIComponent 를 사용해도 결과는 동일하다.
	} 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");
		cell = document.createElement("td");
		
		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); } ;                             

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