/// <reference path="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js"/>

var currentSearch = false;
function clearSearchFlag() {
    currentSearch = false;
}

$(function () {

    var avatars = [];
    //index is state variable for paging
    var index = 0;
    //global variable for the username to be incarnated
    var searchTerm;
    //for jQuery fades
    var fadeDuration = 300;
    //listen for focus on the button
    $("#UploadButton").focus(function () {

        if (currentSearch == true) return;
        setTimeout("clearSearchFlag();", 1000);
        currentSearch = true;
        //$("#IncarnateLoader").show();
        Incarnate();
    });
    //    //listen for click
    $("#UploadButton").click(function () {
        //focus event fights w/ button click so we need semaphore
        if (currentSearch == true) return;
        setTimeout("clearSearchFlag();", 1000);
        currentSearch = true;
        //$("#IncarnateLoader").show();
        Incarnate();
    });
    //if enter was hit, do the call
    $("#UploadUserName").keyup(function (event) {
        if (event.keyCode == 13) {
            if (currentSearch == true) return;
            setTimeout("clearSearchFlag();", 1000);
            currentSearch = true;
            //$("#IncarnateLoader").show();
            Incarnate();
        }
    });
    //    //Doesn't work on all browsers, which is why we have the close button
    $("body").focus(function () {
        $("#IncarnateResultsContainer").fadeOut(fadeDuration);
    });

    function Incarnate() {

        //clear out all state
        index = 0;
        avatars = [];

        //hold term in variable
        searchTerm = $("#UploadUserName").val()

        //clear out the container
        $("#IncarnateResultsContainer").empty();
        //add the cancel UI for the container

        //var cancelDiv = $('<div style="height:16px;margin:2px 2px 0 0;"><img style="margin:2px 0 0 2px; float:left;" src="http://incarnateblobs.visitmix.com/images/lockup_small.png"><span style="float:right;cursor:pointer; "><img src="http://incarnate.visitmix.com/images/close.png"/></span></div>');
        var cancelDiv = $('<div style="height:18px;margin:2px 2px 0 0;border-bottom:1px dotted #ccc;padding-bottom:2px;"><img style="cursor: pointer;margin:2px 0 0 2px; float:right; max-height:18px;max-width:18px" src="http://incarnate.visitmix.com/images/close.png"></div>');

        cancelDiv.click(function () {
            $("#IncarnateResultsContainer").hide();

        });

        $("#IncarnateResultsContainer").append(cancelDiv);


        $.getJSON("/Profile/Avatars/" + searchTerm,
        function (data) {
            if (data != null) {

                $("#IncarnateResultsContainer").fadeIn(fadeDuration);
                $("#IncarnateLoader").hide();

                $.each(data, function (i, item) {

                    var vCardDiv = $('<div class="IncarnateResult" style="clear:both;display:none;min-height:48px";></div>');
                    vCardDiv.append('<img style="float:left;border:1px solid #333;margin:10px;max-width:48px; max-height:48px" src="' + item + '" />');
                    vCardDiv.click(function () {
                        //clear all values

                        $("#PhotoUrl").attr("value", item);
                        $("#IncarnateImg").attr("src", item);


                        $("#IncarnateResultsContainer").fadeOut(fadeDuration);

                    });


                    vCardDiv.hover(function () {
                        vCardDiv.css({ 'clear': 'both', 'background-color': '#99ccff', 'overflow': 'hidden' });
                    },
                                                function () {
                                                    vCardDiv.css({ 'clear': 'both', 'background-color': 'transparent' });

                                                }
                                            );

                    $("#IncarnateResultsContainer").append(vCardDiv);
                    vCardDiv.fadeIn(fadeDuration);

                });
            }

        });

    }

});