var outp;
var oldins;
var posi = -1;
var items;
var input;
var key;

function setVisible(visi) {
	var x = document.getElementById("shadow");
	var o = document.getElementById("output");
	var t = document.getElementById(txtField);
	x.style.position = "absolute";
	x.style.top  = findPosY(t) + "px";
	x.style.left = findPosX(t) + "px";

	o.style.width = t.offsetWidth;
	x.style.visibility = visi;
}

function findPosX(obj) {
	var curleft = 0;
	if ( obj.offsetParent ) {
		var outestWidth = 0;
		while (obj.offsetParent) {
			curleft += obj.offsetLeft;
			outestWidth = obj.offsetLeft;
			obj = obj.offsetParent;
		}

		/* TODO 원인이 확실치 않으나 맨 바깥쪽
		   offsetLeft 값만큼 밀려나는 현상이 있어 일단 뺀다. */
		curleft -= outestWidth;
	}
	else if (obj.x) {
		curleft += obj.x;
	}

	return curleft;
}

function findPosY(obj) {
	var curtop = 0;
	if (obj.offsetParent) {
		curtop += obj.offsetHeight;
		while (obj.offsetParent) {
			// TODO Dojo에 특화된 코드.
			if ( dojo.query(obj).style("position") == "relative" ) break;

			curtop += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	else if (obj.y) {
		curtop += obj.y;
		curtop += obj.height;
	}

	return curtop;
}

function lookAt() {

	var ins = document.getElementById(txtField).value;

	if (oldins == ins)
		return;
	else if (posi > -1)
		;
	else if (ins.length > 0) {
		getWord(ins);
	} else {
		setVisible("hidden");
		posi = -1;
	}
	oldins = ins;
}

function addWord(label, word) {
	var sp = document.createElement("div");
	sp.innerHTML = label;
	sp.onmouseover = mouseHandler;
	sp.onmouseout = mouseHandlerOut;
	sp.onclick = mouseClick;
	sp.word = word;
	outp.appendChild(sp);
}

function clearOutput() {
	while (outp.hasChildNodes()) {
		noten = outp.firstChild;
		outp.removeChild(noten);
	}
	posi = -1;
}

function getWord(beginning) {
	var url = urlAjax + encodeURIComponent(beginning);

	dojo.xhrGet({
		url: url,
		handleAs: "json",
		sync: false,
		load: onSucess
	});
}

function onSucess(retobj, ioArgs) {
	items = retobj.items;

	if (items.length > 0) {
		clearOutput();

		for ( var ni = 0; ni < items.length; ni++) {
			addWord(items[ni].label, items[ni].word);
		}

		setVisible("visible");
		input = document.getElementById(txtField).value;
	} else {
		setVisible("hidden");
		posi = -1;
	}
}

function setColor(_posi, _color, _forg) {
	outp.childNodes[_posi].style.background = _color;
	outp.childNodes[_posi].style.color = _forg;
}

function keygetter(event) {
	if (!event && window.event)
		event = window.event;
	if (event)
		key = event.keyCode;
	else
		key = event.which;
}

function keyHandler(event) {
	if (document.getElementById("shadow").style.visibility == "visible") {
		var textfield = document.getElementById(txtField);
		var ScOffSet = document.getElementById("output");
		var nHeightPerLine = 15;

		if (key == 40) { // Key down
			// alert (words);
			if (items.length > 0 && posi < items.length - 1) {
				if (posi >= 0)
					setColor(posi, "#fff", "black");
				else
					input = textfield.value;
				setColor(++posi, "#99CCEE", "white");
				textfield.value = outp.childNodes[posi].childNodes[0].innerHTML
						+ ":" + outp.childNodes[posi].childNodes[1].innerHTML;
				document.getElementById("txtSubject").value = outp.childNodes[posi].word;
			}
		} else if (key == 38) { // Key up
			if (items.length > 0 && posi >= 0) {
				if (posi >= 1) {
					setColor(posi, "#fff", "black");
					setColor(--posi, "#99CCEE", "white");
					textfield.value = outp.childNodes[posi].childNodes[0].innerHTML
							+ ":"
							+ outp.childNodes[posi].childNodes[1].innerHTML;
					document.getElementById("txtSubject").value = outp.childNodes[posi].word;
				} else {
					setColor(posi, "#fff", "black");
					textfield.value = input;
					textfield.focus();
					posi--;
				}
			}
		} else if (key == 27) { // Esc
			textfield.value = input;
			setVisible("hidden");
			posi = -1;
			oldins = input;
		} else if (key == 8) { // Backspace
			posi = -1;
			oldins = -1;
		}

		if (posi > 4) {
			if ( ScOffSet.scrollTop < ((posi-4)*nHeightPerLine) ) ScOffSet.scrollTop = (posi-4)*nHeightPerLine;
		} else if (posi <= 4) {
			if ( ScOffSet.scrollTop > 0 && ((posi-4)*nHeightPerLine) <= 0 ) ScOffSet.scrollTop = ScOffSet.scrollTop - nHeightPerLine;
		}
	}
}

mouseHandler = function() {
	for ( var i = 0; i < items.length; ++i)
		setColor(i, "white", "black");

	this.style.background = "#99CCEE";
}

mouseHandlerOut = function() {
	this.style.background = "white";
	this.style.color = "black";
}

mouseClick = function() {
	var dvNode = this.firstChild.parentNode;

	document.getElementById(txtField).value = dvNode.childNodes[0].innerHTML
			+ ":" + dvNode.childNodes[1].innerHTML;

	if(document.getElementById("txtSubject"))
		document.getElementById("txtSubject").value = dvNode.word;

	setVisible("hidden");
	posi = -1;
	oldins = dvNode.childNodes[0].innerHTML + ":"
			+ dvNode.childNodes[1].innerHTML;
	document.getElementById(txtField).focus();
}

layerBlur = function(evt) {
	if (document.getElementById("shadow").style.visibility == "hidden") return;

	if(!evt) evt = window.event;
	var tgt = evt.srcElement;
	if(!tgt) tgt = evt.target;

	var obj = tgt;
	while(obj.offsetParent) {
		obj = obj.offsetParent;
		if(obj.id=="output") {
			return;
		}
	}
	setVisible("hidden");
}