function addClickEvent(func) {
   var oldonclick = document.onclick;
   if (typeof document.onclick != 'function') {
       document.onclick = func;
   }
   else {
       document.onclick = function() {
           oldonclick();
           func();
       }
   }
}

/**
* @author Natalia Bazhenova www.fh54.de (c) 2005-2007
*/
    
/********************************/
/*******start config****************/
/*******************************/

//id of the textbox element
var inputID_surname = "fSurname"

//max size of "selectbox"
var maxcount_surname=5 
/*******************************/
/**********end config***********/
/*******************************/

var scripting_surname=false;
//initialize:
//for mozilla
if (window.captureEvents) {
    //window.captureEvents(Event.LOAD)
    //window.onload=suggestInput_init;
    addLoadEvent(suggestInput_init_surname);
    }
//for ie
document.onreadystatechange=ieInit_surname;
function ieInit_surname()
{
   if (document.readyState=="complete")
   {
      addLoadEvent(suggestInput_init_surname);
      //document.body.onload=function() {suggestInput_init()}
   }
}
var SIs_surname //initially invisible select box
var SItxt_surname //the main input text element
var newdiv_surname=document.createElement("DIV") //a visible pendant to select box
var globalN_surname=0; //how much options scrolled up
//for ie
if (document.attachEvent)
    document.attachEvent("onclick", hideSelect_surname)
// for Mozilla
if (document.captureEvents) {
    document.captureEvents(Event.CLICK);
    addClickEvent(hideSelect_surname);
    //document.onclick = hideSelect_surname;
}
function hideSelect_surname() {
    newdiv_surname.style.display="none"
}
function suggestInput_init_surname() {
    if (document.createElement("DIV")) { //otherwise nothing happens
        scripting_surname=true;
        SIs_surname=document.createElement("SELECT")
        SIs_surname.onkeyup=function(e){
            if(!e) e=event; setInputValue_surname(this.selectedIndex,e)
        }
        SIs_surname.className="select_input"
        SIs_surname.setAttribute("id","selectInput");
        SIs_surname.style.position="absolute"
        SIs_surname.style.top="-9999px"
        SIs_surname.style.left="-9999px"
        SIs_surname.style.visibility="hidden"
        document.body.appendChild(SIs_surname)
        SItxt_surname =document.getElementById(inputID_surname);
        SItxt_surname.setAttribute("autocomplete","OFF")
        SItxt_surname.onkeyup=function(e){
            if (!e) e=event; showSelection_surname(this.value,e)
        }
        //SItxt_surname.focus()
        for (i=0;i<opttext_surname.length;i++) {
            o=document.createElement("OPTION");;
            o.innerHTML=opttext_surname[i];
            SIs_surname.appendChild(o)
            SIs_surname.style.visibility="visible"; // for Opera
        }
        elt=SItxt_surname 
        //find coords where the suggest div will appear
        pos2=findPos(elt); pos2.push(elt.offsetHeight); pos2.push(elt.offsetWidth)
        
        newdiv_surname.style.top=(pos2[1]+pos2[2])+'px';
        newdiv_surname.style.left=pos2[0]+'px';
        newdiv_surname.style.width=pos2[3]+'px';
        newdiv_surname.className="suggestBoxContainer"
        newdiv_surname.style.display="none"
        buildDiv_surname(0)
        document.body.appendChild(newdiv_surname)
     }
} 
 
function buildDiv_surname(n) {
    if (n>SIs_surname.childNodes.length) 
        return false; 
    for (i=0;i<newdiv_surname.childNodes.length;i++) {
        newdiv_surname.removeChild(newdiv_surname.childNodes[i]);i--
    }
    if (n>0) {// insert top "..." - div
        d1=document.createElement("DIV");
        d1.id="lessDiv"
        d1.style.width="100%"
        d1.style.fontSize="0.8em"
        d1.onmouseover=function() {this.className="mouse_over";}
        d1.onmouseout=function() {this.className="suggestBox"}
        d1.onclick=function() {
            buildDiv_surname(n-1);
            d1.className="mouse_over"
        } 
        d1.innerHTML="......"; 
        newdiv_surname.appendChild(d1); 
    }
    m=(maxcount_surname<SIs_surname.childNodes.length)?(maxcount_surname):(SIs_surname.childNodes.length)
    for(i=0;i<m;i++) {
        d=document.createElement("DIV")
        d.style.width="100%"
        d.style.fontSize="0.8em"
        d.onmouseover=function() {
            this.className="mouse_over";
            SItxt_surname.value=this.innerHTML
        }
        d.onmouseout=function() {
            this.className='suggestBox'
        }
        d.onclick=function() {
            SItxt_surname.value=this.innerHTML;
            newdiv_surname.style.display="none"
        }
        try {
            d.innerHTML=SIs_surname.childNodes[i+n].innerHTML;
        }
        catch(err) {}
        newdiv_surname.appendChild(d)
    };
    globalN_surname=n;
    if (SIs_surname.childNodes.length-n>maxcount_surname) {// insert bottom "..." - div
        d2=document.createElement("DIV");
        d2.id="moreDiv"
        d2.style.width="100%"
        d2.style.fontSize="0.8em"
        d2.onmouseover=function() {this.className="mouse_over";}
        d2.onmouseout=function() {this.className="suggestBox";}
        d2.onclick=function() {
            buildDiv_surname(n+1); 
            d2.className="mouse_over";
        }
        d2.innerHTML="......"; 
        d2.className="suggestBox";
        newdiv_surname.appendChild(d2) 
     } 
 }
 
function setInputValue_surname(m,ev) {
    if (!scripting_surname) return;
    isLess=(document.getElementById("lessDiv"))?(1):(0)
    if (m>globalN_surname+maxcount_surname+isLess+1) {
        m=globalN_surname+maxcount_surname;SIs_surname.selectedIndex=m
    }
    if (m<isLess) {
        m=globalN_surname-1;SIs_surname.selectedIndex=globalN_surname-1
    }
    a=SIs_surname.childNodes[m].innerHTML
    SItxt_surname.value=a;
    try {
        if (newdiv_surname.childNodes[m-globalN_surname+isLess]) {  
            if (newdiv_surname.childNodes[m-globalN_surname+isLess].id=="moreDiv") { 
                buildDiv_surname(globalN_surname+1);  
                newdiv_surname.childNodes[maxcount_surname].className="mouse_over";;
                return
            }
        }
    } catch (err) {}
    try {
        if (newdiv_surname.childNodes[m-globalN_surname+isLess]) {  
            if (newdiv_surname.childNodes[m-globalN_surname+isLess].id=="lessDiv") {  
                buildDiv_surname(globalN_surname-1);
                isLess_new=(document.getElementById("lessDiv"))?(1):(0)
                 newdiv_surname.childNodes[isLess_new].className="mouse_over";
                 return
            }
        }
    } catch (err) {}
    try {
        for (i=0;i<newdiv_surname.childNodes.length;i++)
            newdiv_surname.childNodes[i].className="suggestBox";
         newdiv_surname.childNodes[m-globalN_surname+isLess].className="mouse_over";
    } catch(err) {}; 
    if ((ev.keyCode!=40) && (ev.keyCode!=38) && (ev.keyCode!=0)) { // if not arrow down, arrow up or mouseclick  
        newdiv_surname.style.display="none"
        SItxt_surname.focus();
    }
}
 
function showSelection_surname(t,ev) {
    if (!scripting_surname) return;
    if (ev.keyCode==40) { // by arrow down comes into suggestion select
         if (SIs_surname.childNodes.length>0) {
              newdiv_surname.childNodes[0].className="mouse_over";
              SItxt_surname.value=SIs_surname.childNodes[0].innerHTML; 
              try {
                  SIs_surname.focus();
              } catch(err){}
              SIs_surname.childNodes[0].selected=true;
         }
         return            
    }
    if (t=="") 
        return ;
    t=t.toLowerCase();
    l=t.length; 
    for (i=0;i<SIs_surname.childNodes.length;i++) {
        SIs_surname.removeChild(SIs_surname.childNodes[i]);
        i--
    }
    for(i=0;i<opttext_surname.length;i++) {
         if (opttext_surname[i].substr(0,l).toLowerCase()==t) {
              oOption = document.createElement("OPTION");
              SIs_surname.appendChild(oOption)
              oOption.innerHTML = opttext_surname[i];
         }
    }
    if (SIs_surname.childNodes.length>0)  {
        newdiv_surname.style.display=""
        buildDiv_surname(0)
    } 
    else 
        newdiv_surname.style.display="none";
    SItxt_surname.focus()
}

/** Source: http://www.quirksmode.org/js/findPos_surname.html - is better than my own**/
 function findPos_surname(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    } 
    return [curleft,curtop];
}