$(function() {
    var skey = $("#key"); // personal search refference
    var sq = $("#q"); // site search ref
    var psindex = -1; // arrow key index
    var isonselect = 0; // if arrow key highlights row


    /* ===================
    Auto Complete JS
    ===================           
    */
    $("#pstarget").hide(); // ensure target is initialy hidden
    // wait for DOM to fully load
    skey.keyup(function(e) { // event on key up function
        if (e.which == 13) {
            if (isonselect == 1) {
                var keydatacnt = $("div.psmitem").eq(psindex);
                var keydata = $("span.names", keydatacnt).attr("value");
                $(".boxcontent").html("");
                $('html, body').animate({ scrollTop: 0 }, 'fast'); // scroll page to top
                $(".overlay").show(0);
                $(".overlay").animate({ opacity: 0 }, 0);
                $(".overlay").animate({ opacity: 0.3 }, 500);
                $(".box").show(0);
                $(".box").animate({ opacity: 0 }, 0);
                $(".box").animate({ opacity: 1 }, 500);
                $(".boxcontrol").show(0);
                $(".boxcontrol").animate({ opacity: 0 }, 0);
                $(".boxcontrol").animate({ opacity: 1 }, 500);
                $("body").addClass("ovfhide");
                $.ajax({
                    type: "POST",
                    url: "Search/JQuery/UZKNTelephone.asmx/GetAllData",
                    data: "{'key': '" + keydata + "'}", // data to post
                    contentType: "application/json; charset=utf-8", // content type
                    dataType: "json", // data type
                    success: function(data) {
                        $(".boxcontent").append(data.d);
                        $(".loading").remove();
                    },
                    error: function() { // on failure

                    }
                });
                skey.blur();
            } else {
                $(".boxcontent").html("");
                $('html, body').animate({ scrollTop: 0 }, 'fast'); // scroll page to top
                $(".overlay").show(0);
                $(".overlay").animate({ opacity: 0 }, 0);
                $(".overlay").animate({ opacity: 0.3 }, 500);
                $(".box").show(0);
                $(".box").animate({ opacity: 0 }, 0);
                $(".box").animate({ opacity: 1 }, 500);
                $(".boxcontrol").show(0);
                $(".boxcontrol").animate({ opacity: 0 }, 0);
                $(".boxcontrol").animate({ opacity: 1 }, 500);
                $("body").addClass("ovfhide");
                $.ajax({
                    type: "POST",
                    url: "Search/JQuery/UZKNTelephone.asmx/GetAllData",
                    data: "{'key': '" + $('#key').val() + "'}", // data to post
                    contentType: "application/json; charset=utf-8", // content type
                    dataType: "json", // data type
                    success: function(data) {
                        $(".boxcontent").append(data.d);
                        $(".loading").remove();
                    },
                    error: function() { // on failure

                    }
                });
                skey.blur();
            }
        }
        if (e.which == 40 || e.which == 38) {
            //$(".psmitem").eq(psindex).addClass("highlight");
            isonselect = 1;
            var psml = $(".psmitem").length - 1;
            if (psindex < psml || psindex > 0) {

                if (e.which == 40) {
                    $(".psmitem").eq(psindex).removeClass("highlight");
                    psindex++;
                    $(".psmitem").eq(psindex).addClass("highlight");
                }
                if (e.which == 38) {

                    $(".psmitem").eq(psindex).removeClass("highlight");
                    psindex--;
                    $(".psmitem").eq(psindex).addClass("highlight");

                }
            }
        } else {
            isonselect = 0;
            psindex = -1;
            $('html, body').animate({ scrollTop: 0 }, 'fast');
            $("#pstarget").show(); // ensure target is not hidden
            $("#pstarget").html(""); // remove target html
            $.ajax({
                type: "POST", // use method POST
                url: "Search/JQuery/UZKNTelephone.asmx/GetData", // path to web service
                data: "{'key': '" + $('#key').val() + "'}", // data to post
                contentType: "application/json; charset=utf-8", // content type
                dataType: "json", // data type
                success: function(data) { // on success
                    $("#pstarget").html(""); // remove target html | multiple rows will not display if user types fast
                    $("#pstarget").append(data.d); // add data to target
                },
                error: function() { // on failure

                }
            });
        }
    });
    /* === Hide search list on searchbox blur ====== */
    skey.blur(function() {
        setTimeout(function() {
            $("#pstarget").hide();
        }, 200);
    });

    /* =======  text mask ========= */
    sq.attr({ value: "Site Search" });
    /* ====== remove mask on focus ======== */
    sq.focus(function() {
        var sval = sq.attr("value");
        if (sval == "Site Search") {
            sq.attr({ value: "" });
        }
    });
    /* ======= remask on blur if null ====== */
    sq.blur(function() {
        var sval = sq.attr("value");
        if (sval == "") {
            sq.attr({ value: "Site Search" });
        }
    });
    /* =======  text mask ========= */
    skey.attr({ value: "Personnel Search" });
    /* ====== remove mask on focus ======== */
    skey.focus(function() {
        var sval = skey.attr("value");
        if (sval == "Personnel Search") {
            skey.attr({ value: "" });
        }
    });
    /* ======= remask on blur if null ====== */
    skey.blur(function() {
        var sval = skey.attr("value");
        if (sval == "") {
            skey.attr({ value: "Personnel Search" });
        }
    });
    /* ======== Search Item Click Event ======== */
    $(".pslink").live("click", function(e) {
        e.preventDefault();
        $(".boxcontent").html("");
        $('html, body').animate({ scrollTop: 0 }, 'fast'); // scroll page to top
        $(".overlay").show(0);
        $(".overlay").animate({ opacity: 0 }, 0);
        $(".overlay").animate({ opacity: 0.3 }, 500);
        $(".box").show(0);
        $(".box").animate({ opacity: 0 }, 0);
        $(".box").animate({ opacity: 1 }, 500);
        $(".boxcontrol").show(0);
        $(".boxcontrol").animate({ opacity: 0 }, 0);
        $(".boxcontrol").animate({ opacity: 1 }, 500);
        $("body").addClass("ovfhide");
        $.ajax({
            type: "POST",
            url: "Search/JQuery/UZKNTelephone.asmx/GetAllData",
            data: "{'key': '" + $('#key').val() + "'}", // data to post
            contentType: "application/json; charset=utf-8", // content type
            dataType: "json", // data type
            success: function(data) {
                $(".boxcontent").append(data.d);
                $(".loading").remove();
            },
            error: function() { // on failure

            }
        });
        $("#key").attr({ value: $(this).text() });
    });
	    // overlay click
    $(".overlay").click(function(e) { // FF - IE - CHROME - SAFARI
        $(".overlay").animate({ opacity: 0 }, 500);
        $(".box").animate({ opacity: 0 }, 500);
        $(".boxcontrol").animate({ opacity: 0 }, 500);
        $("body").removeClass("ovfhide");
        setTimeout(function() {
            $(".overlay").hide(0);
            $(".box").hide(0);
            $(".boxcontrol").hide(0);
        }, 500);
    });
    // close button click
    $(".boxclose").click(function(e) { // FF - IE - CHROME - SAFARI
        e.preventDefault();
        $(".overlay").animate({ opacity: 0 }, 500);
        $(".box").animate({ opacity: 0 }, 500);
        $(".boxcontrol").animate({ opacity: 0 }, 500);
        $("body").removeClass("ovfhide");
        setTimeout(function() {
            $(".overlay").hide(0);
            $(".box").hide(0);
            $(".boxcontrol").hide(0);
        }, 500);
    });
});