var outp;
var oldins;
var posi = -1;
var words = new Array();
var input;
var key;

function entity(str, mode) {
	str = (str) ? str : "";
	mode = (mode) ? mode : "string";

	var e = document.createElement("div");
	e.innerHTML = str;

	if (mode == "numeric") {
		return "&#" + e.innerHTML.charCodeAt(0) + ";";
	}
	else if (mode == "utf16") {
		var un = e.innerHTML.charCodeAt(0).toString(16);
		while (un.length < 4) un = "0" + un;
		return "\\u" + un;
	}
	else return e.innerHTML;
}

function setVisible(visi)
{
	var x = document.getElementById("shadow");
	var t = document.getElementsByName("q")[0];
	x.style.position = 'absolute';
	x.style.top = (findPosY(t)+3)+"px";
	x.style.left = (findPosX(t)+2)+"px";
	x.style.visibility = visi;
}

function init()
{
	outp = document.getElementById("output");
	window.setInterval("lookAt()", 100);
	setVisible("hidden");
	document.onkeydown = keygetter; //needed for Opera...
	document.onkeyup = keyHandler;
}

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

function findPosY(obj)
{
	var curtop = 0;
	
	if (obj.offsetParent)
	{
		curtop += obj.offsetHeight;
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	
	else if (obj.y)
	{
		curtop += obj.y;
		curtop += obj.height;
	}
	
	return curtop;
}

function lookAt()
{
	var ins = document.getElementsByName("q")[0].value;
	if (oldins == ins)
	return;
	else if (posi > -1);
	else if (ins.length > 0)
	{
		words = getWord(ins);
		if (words.length > 0)
		{
			clearOutput();
			for (var i=0;i < words.length; ++i)
			addWord (words[i]);
			setVisible("visible");
			input = document.getElementsByName("q")[0].value;
		}
		else
		{
			setVisible("hidden");
			posi = -1;
		}
	}
	else
	{
		setVisible("hidden");
		posi = -1;
	}
	oldins = ins;
}

function addWord(word)
{
var sp = document.createElement("li");
sp.appendChild(document.createTextNode(entity(word, 'number')));
sp.onmouseover = mouseHandler;
sp.onmouseout = mouseHandlerOut;
sp.onclick = mouseClick;
outp.appendChild(sp);
}

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

function getWord(beginning)
{
var words = new Array();
for (var i=0;i < suggestions.length; ++i)
{
var j = -1;
var correct = 1;
while (correct == 1 && ++j < beginning.length)
{
if (suggestions[i].charAt(j) != beginning.charAt(j))
correct = 0;
}
if (correct == 1)
words[words.length] = suggestions[i];
}
return words;
}
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.getElementsByName("q")[0];
if (key == 40)//key down
{
if (words.length > 0 && posi <= words.length-1)
{
if (posi >=0)
setColor(posi, "#FFFFFF", "#222222");
else
input = textfield.value;

setColor(++posi, "#918F8D", "#FFFFFF");
textfield.value = outp.childNodes[posi].firstChild.nodeValue;
}
}
else if (key == 38)
{ //Key up
if (words.length > 0 && posi >= 0)
{
if (posi >=1)
{
setColor(posi, "#FFFFFF", "#222222");
setColor(--posi, "#918F8D", "#FFFFFF");
textfield.value = outp.childNodes[posi].firstChild.nodeValue;
}
else
{
setColor(posi, "#FFFFFF", "#222222");
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;
}
}
}
var mouseHandler=function()
{
for (var i=0; i < words.length; ++i)
setColor (i, "#FFFFFF", "#222222");
this.style.background = "#918F8D";
this.style.color= "#FFFFFF";
}
var mouseHandlerOut=function()
{
this.style.background = "#FFFFFF";
this.style.color= "#222222";
}
var mouseClick=function()
{
document.getElementsByName("q")[0].value = this.firstChild.nodeValue;
setVisible("hidden");
posi = -1;
oldins = this.firstChild.nodeValue;
}