var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
var j = 0;
var row1;
var row2;
var auto_ck = true;
var mouse_ck = false;
var data = new Array();
var key=0;
var k = 0;
var size_=0;
var mouseover_id;

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

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

/*
* GET 방식
*/
function findNames() {			
	initVars();	
	if (inputField.value.length > 0) {
		createXMLHttpRequest();
		//encodeURI 대신에 encodeURIComponent 를 사용해도 결과는 동일하다.
		var url = "/inhye/AutoBox_t.asp?Search_Text=" + encodeURI(inputField.value); 

		xmlHttp.open("GET", url, false);
		//xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
		//alert(xmlHttp.status);
		//alert(xmlHttp.responseText);
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {	
				if(xmlHttp.responseXML.getElementsByTagName("word").length == 0){					
					emptyMsg();
				}else{
					setNames(xmlHttp.responseXML.getElementsByTagName("word"));
				}				
			} else if (xmlHttp.status == 204){
				clearNames();
			}
		}
	} 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 emptyMsg(){
	clearNames();
/*
	setOffsets();

	var row, cell;
	var txtNode = "해당 검색어가 없습니다.";
	
	row = document.createElement("tr");
	cell = document.createElement("td");
	cell.setAttribute("bgcolor", "#FFFFFF");
	cell.setAttribute("border", "0");
	cell.appendChild(txtNode);
	row.appendChild(cell);
	nameTableBody.appendChild(row);
*/
}

function setNames(the_names) {
	
	var size = the_names.length;
	
	if(auto_ck==true){
		clearNames();
		size_ = the_names.length;
		setOffsets();
		var row, cell, txtNode;
		for (var i = 0; i < size; i++) {
			var nextNode = the_names[i].firstChild.data;
			data[i] = the_names[i].firstChild.data;
			row = document.createElement("tr");
			cell = document.createElement("td");			
			
			cell.setAttribute("bgcolor", "#FFFFFF");
			cell.setAttribute("border", "0");
			txtNode = document.createTextNode(nextNode);
			cell.appendChild(txtNode);
			cell.id = "row"+i

			cell.onmouseout = function() {
					this.className='mouseOver';
			};
			
			cell.onmouseover = function() {
				if(mouse_ck==true){					
					row1 = document.getElementById("row"+j);
					row1.className='mouseOver';
					mouse_ck = false;
				}
				this.className='mouseOut';
				j = eval(this.id.charAt(3));
				//alert(mouseover_id);
			};

			cell.onclick = function() {
				populateName(this); 
			} ;    

			row.appendChild(cell);
			nameTableBody.appendChild(row);
		}
	}
	
	if(event.keyCode == 40 || event.keyCode == 38){		
		
		auto_ck=false;

			if(event.keyCode == 40){
			
				if(key==0){
					row1 = document.getElementById("row"+j);
					row1.className='keyboard';
					inputField.value = data[j];
				}

				if(key==40){

					if(j==(size_-1)) return;

					row1 = document.getElementById("row"+j);
					row1.className='mouseOver';
					j++;
					row1 = document.getElementById("row"+j);
					row1.className='keyboard';
					inputField.value = data[j];
				
				}
				key=40;
			}

			if(event.keyCode == 38){
				if(key==40){
					if(j==0) return;
				}
				row1 = document.getElementById("row"+j);
				row1.className='mouseOver';
				j--;
				row1 = document.getElementById("row"+j);
				row1.className='keyboard';
				inputField.value = data[j];
			}
			mouse_ck=true;

		

	}else if(event.keyCode == 8){
		j=0;
		key=0;
		size_=0;
		auto_ck=true;
		mouse_ck=false;
	}
}


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

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