$(function() {
    $("input[tip=autoComplete][wrapDiv=on]").wrap('<div style="position:relative; ">');

    $("input[tip=autoComplete]").bind("focus", function(e) {
        this.popup = true;
        callServie($(this).attr('url'), this);
    });
    $("input[tip=autoComplete]").bind("keypress", function(e) {
         if ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13) return false;
    });
    $("input[tip=autoComplete]").bind("keyup", function(e) {
        if ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13)
        {
            var index = 0;
            if ($("div[tip=autoComplete]").attr("sIndex")==null)  
            {
             switch (e.keyCode)
                {
                    case 37:
                    case 38:
                        index =  $("div[tip=autoComplete] a").length - 1;
                         $("div[tip=autoComplete]").attr("sIndex" , index);
                        break;
                    case 39:
                    case 40:
                        $("div[tip=autoComplete]").attr("sIndex" , 0);
                        index=0;
                        break;
                    case 13:
                        return false;
                }
            } else 
            {
                index= $("div[tip=autoComplete]").attr("sIndex");
                var a = $("div[tip=autoComplete] a:eq("+index+")");
                a.removeClass('selected');
                switch (e.keyCode)
                {
                    case 37:
                    case 38:
                        index--;
                        if (index<0) index = $("div[tip=autoComplete] a").length - 1;;
                        break;
                    case 39:
                    case 40:
                        index++;
                        if (index==$("div[tip=autoComplete] a").length) index = 0;
                        break;
                    case 13:
                        $("div[tip=autoComplete]").removeAttr("sIndex");
                        setValue($(this).attr('valueControlId'), $(a).find("span:last").html());
                        $(this).attr('value', $(a).find("span:first").html())
                        $(this)[0].tag.remove();
                        $(this).removeAttr('tag');                        
                        return false;
                        break;
                }
                $("div[tip=autoComplete]").attr("sIndex",index);
            }
            $("div[tip=autoComplete] a:eq("+index+")").addClass('selected');
        }
        else 
        {
            this.popup = true;
            callServie($(this).attr('url'), this);
        }
    });
    $("input[tip=autoComplete]").bind("blur", function(e) {
        var input = this;
        input.popup = false;
        if (input.tag != null) {
            var divs = $(input.tag).find('div');
            if (divs.length == 1 && input.blur == true) {
                setValue($(input).attr('valueControlId'), divs.find("span:last").html());
                $(input).attr('value', divs.find("span:first").html())
            }
        }
        this.timeout = setTimeout(function() {
            if (input.tag != null) {
                input.tag.remove();
                input.tag = null;
            }
        }, 200);
    });
});


function callServie(url, input) {
    data = $(input).attr('value');
    $.get(url + escape(data), function(data) { serviceComplete(data, input) });
}

function serviceComplete(data, input) {
    if (input.popup != true) return;
    broj = $(input).attr('broj');
    if (input.tag != null) {
        input.tag.remove();
        input.tag = null;
    }
    $(input).parent().css("position", "relative");
    $("div[tip=autoComplete]").css("display", "none");
    $("input[tip=autoComplete][broj!=" + broj + "]").parent().css("position","");
    

    var y = input.offsetTop + input.offsetHeight;
    var x = input.offsetLeft;
    var w = input.offsetWidth;
    if (w < 250) w = 250;
    var v = '';
    var div = $("<div tip='autoComplete' class='" + $(input).attr('divClass') + "' broj='" + broj + "' style='position:absolute; top:" + y + "px;left:" + x + "px; width:" + w + "px;'></div>");
    input.tag = div;
    var records = eval(data);
    if (records == null) return;
    {
        if (records.length == 0) {
            input.blur = false;
            var iDiv = $("<div ><a><span class='" + $(input).attr('itemKeyClass') + "'>" + "</span><span class='" + $(input).attr('itemValClass') + "'>" + "nema rezultata" + "</span></a></div>");
            iDiv.appendTo(div);
        }
        for (var i = 0; i < records.length; i++) {
            input.blur = true;
            var itemDiv = $("<div ><a><span class='" + $(input).attr('itemKeyClass') + "'>" + records[i].key + "</span><span class='" + $(input).attr('itemValClass') + "'>" + records[i].val + "</span></a></div>");
            itemDiv.appendTo(div);
            itemDiv.click(function() {
                setValue($(input).attr('valueControlId'), $(this).find("span:last").html());
                $(input).attr('value', $(this).find("span:first").html())
                $(this).parent().remove();
            });
        }
    }
    $(div).mouseenter(function() {
        clearTimeout(input.timeout);
    });
    $(div).insertAfter(input);
}

function setValue(controlId, value) {
    if (controlId == null) return;
    var controlToFill = $('#' + controlId);
    if (controlToFill == null) return;
    if (controlToFill.attr('value') == 'undefined' || controlToFill.attr('value') == null) {
        controlToFill.html(value);

    } else {
        controlToFill.attr('value', value);
    }
}