var request = createXMLHttpRequest();
var a;
var displayed = false;
var currentIndex = 0;

function scrollHighlight(e)
{
    if (displayed)
    {
        var evt = e || window.event;

        var k = evt.keyCode;
        if (k == 38)
        {
            currentIndex -= 1;
            if (currentIndex < 0)
            {
                currentIndex = a.length - 1;
            }
            changebg(currentIndex);
            entervalue(currentIndex);
            return;
        }

        if (k == 40)
        {
            currentIndex += 1;
            if (currentIndex >= a.length)
            {
                currentIndex = 0;
            }
            changebg(currentIndex);
            entervalue(currentIndex);
            return;
        }
    }
}

function setCurrentIndex(i)
{
    currentIndex = i;
}

function findRecipeByName(e)
{
    var o = document.getElementById("name");

    var evt = e || window.event;

    var k = evt.keyCode;
    if (displayed && (k == 38 || k == 40))
    {
        return;
    }


    if (o.value.length > 2)
    {
        request.open("GET", "/dropdown.srv?string=" + o.value, true);
        request.send(null);
        request.onreadystatechange = function()
        {
            if (request.readyState == 4)
            {
                a = evalJSON(request.responseText);
                if (a.length > 0)
                {
                    var s = "<div class='dropdown' >";
                    for (var i = 0; i < a.length; i++)
                    {
                        s += '<a href="#" onclick="return false;" style="color: #666666" >';
                        s += '<span id="dd' + i + '" onmouseover="changebg(' + i + ')" onclick="entervalue(' + i + '); setCurrentIndex(' + i + ');">';
                        s += a[i];
                        s += '</span>';
                        s += '</a><br/>';
                    }

                    s += "<p style='text-align: right;' onclick='closediv(); focusName();'>";
                    s += "<a href='#' onclick='return false;' style='color: #666666' >close</a></p>";
                    s += "</div>"


                    document.getElementById("dropDownList").innerHTML = s;
                    displayed = true;
                    changebg(0);
                    currentIndex = 0;
                }
                else
                {
                    closediv();
                    focusName();
                }
            };
        }
    }
    else
    {
        closediv();
        focusName();
    }
}

function focusName()
{
    document.getElementById("name").focus();
}

function closediv()
{
    document.getElementById("dropDownList").innerHTML = "";
    displayed = false;
}

function changebg(j)
{
    for (var i = 0; i < a.length; i++)
    {
        document.getElementById("dd" + i).style.background = 'Ivory';
    }

    document.getElementById("dd" + j).style.background = '#A0A0A0';
}

function entervalue(j)
{
    var o = document.getElementById("name");
    o.value = document.getElementById("dd" + j).innerHTML;
    o.focus();
}

function init()
{
    document.getElementById("name").setAttribute("autocomplete","off");
}