/*
    http://www.webreference.com/programming/javascript/ncz/index.html
    http://www.webreference.com/programming/javascript/ncz/column2/index.html
    http://www.webreference.com/programming/javascript/ncz/column3/

    http://www.sitepoint.com/article/life-autocomplete-textboxes
*/
    
function initSuggest(e)
{
    if (!e){
       var e=window.event;
    }

    if (arguments.callee.done) {
        return;
    }

    // flag this function so we do not do the same thing twice
    arguments.callee.done = true;

    var searchText = document.getElementById( 'searchtext' );
    if ( searchText ) {
        // turn the browser's autocomplete function off, otherwise they'll interfere with each other
        searchText.setAttribute( 'autocomplete', 'off' );
        //alert( 'searchtext found' );
        searchText.onkeyup = function (oEvent) {
            if (!oEvent) {
                oEvent = window.event;
            }
            handleKeyUp('searchtext', oEvent);
        };
    }
}

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", initSuggest, false );
    // fallback for browsers supporting addEventListener but not the DOMContentLoaded event
    window.addEventListener("load", initSuggest, false );
} else if (window.attachEvent) {
    // IE
    window.attachEvent("onload", initSuggest);
};

function handleKeyUp(textBoxID, oEvent)
{
    var textBox = document.getElementById( textBoxID );
    var sTextBoxValue = textBox.value;

    if ( sTextBoxValue.length == 0 ) {
        var layer = document.getElementById( 'suggestions' );
        hideSuggestions( layer );
        return false;
    }

    var tid = setTimeout( 'realHandleKeyUp("' + textBoxID + '", ' + oEvent.keyCode + ', "' +  sTextBoxValue + '")', 800 );
    return true;
}

function realHandleKeyUp( textBoxID, iKeyCode, sTextBoxOldValue )
{
    var textBox = document.getElementById( textBoxID );
    var sTextBoxValue = textBox.value;

    if (sTextBoxOldValue != sTextBoxValue) {
        return false;
    }

    if (iKeyCode == 8 || iKeyCode == 46) {
        xajax_suggest(sTextBoxValue, textBoxID, 0);
    }

    if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {
    //ignore
    } else {
        xajax_suggest(sTextBoxValue, textBoxID, 1);
    }
}

function autoSuggest(textBoxID, aSuggestions, bTypeAhead)
{
    //window.alert( 'auto suggest with ' + aSuggestions.length + 'results: ' + "\r\n" + aSuggestions.join( "\r\n" ) );
    if (aSuggestions.length > 0 ) {
        if ( bTypeAhead ) {
            typeAhead(textBoxID, aSuggestions[0]);
        }

        if (aSuggestions.length > 1 ) {
            showSuggestions( textBoxID, aSuggestions );
        } else {
            var layer = document.getElementById( 'suggestions' );
            hideSuggestions( layer );
        }
    } else {
        var layer = document.getElementById( 'suggestions' );
        hideSuggestions( layer );
    }
}

function typeAhead(textBoxID, sSuggestion)
{
    textBox = document.getElementById( textBoxID );
    if (textBox.createTextRange || textBox.setSelectionRange) {
        var iLen = textBox.value.length;
        textBox.value = sSuggestion;
        if (textBox.createTextRange) {
            var oRange = textBox.createTextRange();
            oRange.moveStart("character", iLen);
            oRange.moveEnd("character", sSuggestion.length - textBox.value.length);
            oRange.select();
        } else if (textBox.setSelectionRange) {
            textBox.setSelectionRange(iLen, sSuggestion.length);
        }
    }
}

function highlightSuggestion( layer, oSuggestionNode )
{
    for (var i=0; i < layer.childNodes.length; i++) {
        var oNode = layer.childNodes[i];
        if (oNode == oSuggestionNode) {
            oNode.className = "current"
        } else if (oNode.className == "current") {
            oNode.className = "";
        }
    }
}

function createDropDown( textBoxID )
{
    textBox = document.getElementById( textBoxID );
    layer = document.createElement("div");
    layer.className = "suggestions";
    layer.id="suggestions";
    layer.style.visibility = "hidden";
    layer.style.width = textBox.offsetWidth + 'px';
    document.body.appendChild(layer);

    layer.onmousedown = layer.onmouseup = layer.onmouseover = function (oEvent) {
        oEvent = oEvent || window.event;
        var oTarget = oEvent.target || oEvent.srcElement;

        if ( oTarget.id == 'suggestions' ) {
            return true;
        }
        if (oEvent.type == "mousedown") {
            textBox.value = oTarget.firstChild.nodeValue;
            hideSuggestions( layer );
        } else if (oEvent.type == "mouseover") {
            highlightSuggestion( layer, oTarget );
        } else {
            textBox.focus();
        }
    };
}

function hideSuggestions( element )
{
    element.style.visibility = "hidden";
}

function getLeft( oNode )
{
    var iLeft = 0;

    while(oNode && oNode.tagName.toLowerCase != "body") {
        iLeft += oNode.offsetLeft;
        oNode = oNode.offsetParent;
    }

    return iLeft;
}

function getTop( oNode )
{
    var iTop = 0;

    while(oNode && oNode.tagName.toLowerCase != "body") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
    }

    return iTop;
}

function showSuggestions( textBoxID, aSuggestions )
{
    //window.alert( 'auto suggest with ' + aSuggestions.length + ' results' );

    var textBox = document.getElementById(textBoxID);
    //window.alert( textBox );
    var oDiv = null;
    var layer = document.getElementById( 'suggestions' );

    if ( layer == null ) {
        createDropDown( textBoxID );
        layer = document.getElementById( 'suggestions' );
    }

    //window.alert( layer );
    layer.innerHTML = "";

    for (var i=0; i < aSuggestions.length; i++) {
        oDiv = document.createElement("div");
        oDiv.appendChild(document.createTextNode(aSuggestions[i]));
        layer.appendChild(oDiv);
    }

    layer.style.left = getLeft(textBox) + "px";
    layer.style.top = (getTop(textBox)+textBox.offsetHeight) + "px";
    layer.style.visibility = "visible";
}