jQuery(document).ready(function() {
    if ($("#query").is(":visible")) {

        // Onload, focus on the textbox with a class of focus.
        $("input.focus:last").focus();

        // Add a class to the search box as well.
        $("li.searchbox").addClass("edit-focus");

        // Hide the float menus
        $(".menu-float").hide();

        // When we hover, show the menu.
        $("ul#search-list li.entry").hover(
        function() {
            $(this).children(".menu-float").show();
        }, function() {
            $(this).children(".menu-float").hide();
        }); //hover

        $("ul.user-list li.entry").hover(
        function() {
            $(this).children(".menu-float").show();
        }, function() {
            $(this).children(".menu-float").hide();
        }); //hover

        // Click on the search options.
        $("a#search-selected").click(function() {
            if ($(".search-options").is(":visible")) {
                $(".search-options").hide();
            } else {
                var elPos = $(this).position();
                $(".search-options").css('left', elPos.left - 3);
                $(".search-options").css('top', elPos.top + 20);
                $(".search-options").show();
            }
        })
        .blur(function() {
            // $(".search-options").hide();
        });

        // If the user clicks on the query textbox and the search options
        // is open, close it.
        $("#query")
        .focus(function() {
            $("li.searchbox").addClass("edit-focus");
            if ($(".search-options").is(":visible")) {
                $(".search-options").hide();
            }
        })
        // On leaving the search box and the search options is open, close it.
        .blur(function() {
            $("li.searchbox").removeClass("edit-focus");
            if ($(".search-options").is(":visible")) {
                $(".search-options").hide();
            }
        });

        // Click on an item and set the dropdownlist to the category.
        $("ul.search-options li a").click(function() {
            $("span#value").text($(this).text());
            $("#st").val($(this).attr("id"));
            $(".search-options").hide();
            $("#query").focus();
        });

        var listItem;
        var linkItem;
        // Add an item to the list through AJAX.
        $(".addToList").click(function() {
            linkItem = $(this);
            listItem = $(this).parent().parent().parent().parent();

            $.ajax({
                url: "/Service/addToList?userId=" + $("#userId").val() + "&productId=" + $(this).attr("id"),
                type: "GET",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success:
                    function(result) {
                        var obj = JSON.parse(result);
                        var html = "<div class=\"message\" style=\"margin: 0 5px; padding: 0; \">";
                        if (obj.error) {
                            html += "<div class=\"error\">";
                            html += "<h3>Error: Adding the product</h3>";
                            html += "<p>" + obj.error + "</p>";
                            html += "</div></div>";
                            $(html).hide().prependTo(listItem).slideDown(1000).fadeTo(3000, 1).slideUp(1000).fadeOut(1000);
                        } else {
                            $(linkItem).fadeOut(1000);
                            html += "<div class=\"success\">";
                            html += "<p>Product was successfully added to your list.</p>";
                            html += "</div></div>";
                            $(html).hide().prependTo(listItem).slideDown(1000).fadeTo(3000, 1).slideUp(1000).fadeOut(1000);
                        }
                    }
            });
        });

        // Add a recommendation to the list through AJAX.
        $(".recommend").click(function() {
            linkItem = $(this);
            listItem = $(this).parent().parent().parent().parent();

            $.ajax({
                url: "/Service/AddToRecommended?userId=" + $("#userId").val() +
                            "&productId=" + $(this).attr("id") +
                            "&tzo=" + $("input#tzo").val(),
                type: "GET",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success:
                    function(result) {
                        var obj = JSON.parse(result);
                        var html = "<div class=\"message\" style=\"margin: 0 5px; padding: 0; \">";
                        if (obj.error) {
                            html += "<div class=\"error\">";
                            html += "<h3>Error: Adding the product</h3>";
                            html += "<p>" + obj.error + "</p>";
                            html += "</div></div>";
                            $(html).hide().prependTo(listItem).slideDown(1000).fadeTo(3000, 1).slideUp(1000).fadeOut(1000);
                        } else {
                            $(linkItem).fadeOut(1000);
                            html += "<div class=\"success\">";
                            html += "<p>Recommendation was successfully added to your list.</p>";
                            html += "</div></div>";
                            $(html).hide().prependTo(listItem).slideDown(1000).fadeTo(3000, 1).slideUp(1000).fadeOut(1000);
                        }
                    }
            });
        });

        // TriBar addition.
        $(".currently").click(function() {
            linkItem = $(this);
            listItem = $(this).parent().parent().parent().parent();

            $.ajax({
                url: "/Service/addToTriBar?userId=" + $("#userId").val() +
                    "&productId=" + $(this).attr("id") +
                    "&tzo=" + $("input#tzo").val(),
                type: "GET",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success:
                    function(result) {
                        var obj = JSON.parse(result);
                        var html = "<div class=\"message\" style=\"margin: 0 5px; padding: 0; \">";
                        if (obj.error) {
                            html += "<div class=\"error\">";
                            html += "<h3>Error: Adding the product to your TriBar</h3>";
                            html += "<p>" + obj.error + "</p>";
                            html += "</div></div>";
                            $(html).hide().prependTo(listItem).slideDown(1000).fadeTo(3000, 1).slideUp(1000).fadeOut(1000);
                        } else {
                            html += "<div class=\"success\">";
                            html += "<p>Product was successfully added to your TriBar.</p>";
                            html += "</div></div>";
                            $(html).hide().prependTo(listItem).slideDown(1000).fadeTo(3000, 1).slideUp(1000).fadeOut(1000);
                        }
                    }
            });
        });
    }
});