$(document).ready(function () {
    $("#slides").hover(function () {
        $(this).fadeTo(.1, .7);
    },
    function () {
        $(this).fadeTo(.1, 1);
    });

    $("#txtSearch").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "POST",
                url: root + "Autocomplete.asmx/DoSearch",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: "{'term':'" + request.term + "'}",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return { label: MapSearchResultToAutoCompleteItem(item), value: item.Name, category: item.Category }
                    }));
                },
                error: function (xhr, textStatus, exception) {
                    alert('xhr:' + xhr.responseText + '\ntextStatus:' + textStatus + '\nException:' + exception);
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            var href = $(ui.item.label);
            window.location = href.attr('href');
            return false;
        }
    });
    
    

});

function MapSearchResultToAutoCompleteItem(item) {
 var htmlLine;
 if (item.Category == 'Products')
    htmlLine = $('<a href="' + item.Path + '"></a>')
            .append('<div class="autocompleteImage"><img src="/Products/Images/thumbs/pt_' + item.Photo + '.jpg" /></div>',
            '<div class="autocompleteName">' + item.Name + '</div>',
            '<div class="autocompleteDescription">' + item.Description + '</div>',
            '<div style="clear:both"></div>');
else
    htmlLine = $('<a href="' + item.Path + '"></a>')
            .append('<div class="autocompleteSuggestionName">' + item.Name + '</div>');
    return htmlLine;
};

(function ($) {
    var proto = $.ui.autocomplete.prototype;
    var initSource = proto._initSource;
    $.extend(proto, {
        _renderItem: function (ul, item) {

            var listItem;
            if (item.category == 'Search Suggestions' && !ul.find('li[id="suggestions"]').length)
                listItem = $('<li id="suggestions" class="ui-autocomplete-category"><div class="autocompleteGroup">' + item.category + '</div></li>').appendTo(ul);
        
            if (item.category == 'Products' && !ul.find('li[id="products"]').length)
                listItem = $('<li id="products" class="ui-autocomplete-category"><div class="autocompleteGroup">' + item.category + '</div></li>').appendTo(ul);

            listItem = $("<li></li>").data("item.autocomplete", item).append(item.label).appendTo(ul);
            return listItem;
        }
    });
})(jQuery);