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

     function setVisible(visi){

          var s = document.getElementById("tra");
          var f = document.getElementById("podklad");
          var x = document.getElementById("shadow");
          var t = document.getElementsByName("CITY")[0];

	  var hh = (words.length*13)+3;

          x.style.position = 'absolute';
          x.style.top =  (findPosY(t)+3)+"px";
          x.style.left = (findPosX(t)+2)+"px";
          x.style.visibility = visi;

	  if (at.ie){

         	f.style.position = 'absolute';
          	f.style.height = hh+"px";
          	f.style.top =  (findPosY(t)+3)+"px";
          	f.style.left = (findPosX(t))+"px";
          	f.style.visibility = visi;
	 }

          s.style.position = 'absolute';
          s.style.top =  (findPosY(t)-48)+"px";
          s.style.left = (findPosX(t)-10)+"px";
          s.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("CITY")[0].value;

          if (oldins == ins) return;
          else if (posi > -1);
          else if (ins.length >= 2){
		
               words = getWord(ins);
               if (words.length >= 1){
                    clearOutput();
                    for (var i=0;i<words.length; ++i){

			addWord (words[i]);

		    }

                    setVisible("visible");
                    input = document.getElementsByName("CITY")[0].value;
               }
               else{
                    setVisible("hidden");
                    posi = -1;
               }
          }
          else{
               setVisible("hidden");
               posi = -1;
          }
          oldins = ins;
     }
     
     function addWord(word){

          var sp = document.createElement("div");
          sp.appendChild(document.createTextNode(word));
          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 dile = 0;

          var words = new Array();
          
          for (var i=0;i<suggestions.length; ++i){


	    if(dile<who_many){

               		var j = -1;
               		var correct = 1;

               		while (correct == 1 && ++j < beginning.length){
                    		if (suggestions[i].toLowerCase().charAt(j) != beginning.toLowerCase().charAt(j)) correct = 0;
               		}

               		if (correct == 1){

				words[words.length] = suggestions[i];

				dile++;

	 		}

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

     function HO(){
 	  document.getElementsByName("CITY")[0].value = outp.childNodes[0].firstChild.nodeValue;
	  setVisible("hidden");
          posi = -1;
          oldins = outp.childNodes[0].firstChild.nodeValue;
     }