/// <reference path="/Scripts/jquery-1.3.2.min.js" />

function AttachToggleAndLoadJs(AttachToId, TypeOfDataText) {
    $(AttachToId).click(function() {
        var PrimaryKeyId = this.id.replace('Toggle' + TypeOfDataText + '_', '');
        var ListName = '#' + TypeOfDataText + 'List_' + PrimaryKeyId;
        var ItemsInList;
        var ListItems;

        ListItems = $(ListName + ' > li');
        ItemsInList = ListItems.size();

        if ("/Images/Expand.png" == $(this).attr("src")) {
            $(this).attr("src", "/Images/Collapse.png");
        }
        else {
            $(this).attr("src", "/Images/Expand.png");
        }

        if (0 == ItemsInList) {
            $(this).attr("src", "/Images/Moving.png");
            $(ListName).html('<li><a href="#">Loading..</a><span>| </span></li>');
            if ('Category' == TypeOfDataText) {
                WebServices.GetProductsInCategory(PrimaryKeyId, CatLoaded, LoadFailed, PrimaryKeyId);
            }
            else if ('Group' == TypeOfDataText) {
                WebServices.GetProductsInGroup(PrimaryKeyId, GroupLoaded, LoadFailed, PrimaryKeyId);
            }
        }
        else {
            if ($(ListName + ' > li:first').is(':visible')) {
                ListItems.slideUp();
            }
            else {
                ListItems.show("slow");
            }
        }
        return false;
    });
}

$(function() {
    AttachToggleAndLoadJs('.ToggleCat', 'Category');
    AttachToggleAndLoadJs('.ToggleGroup', 'Group');
});

function PopulateUl(result, ListName, ImgLink) {
    $(ImgLink).attr("src", "/Images/Collapse.png");
    $(ListName).children().remove(); // Remove the 'loading' text.
    if (0 == result.length) {
        $(ListName).html('<li><a href="#">No results</a><span>| </span></li>');
        return;
    }
    for (var i = 0; i < result.length; i++) {
        $('<li><a href="../Pages/Product.aspx?P=' + result[i].ProductId + '">' + result[i].Name + '</a><span>| </span></li>').appendTo(ListName);
    }
}

function CatLoaded(result, userContext, methodName) {
    var ListName = '#' + 'CategoryList_' + userContext;
    var ImgLink = '#' + 'ToggleCategory_' + userContext;

    PopulateUl(result, ListName, ImgLink);
}

function GroupLoaded(result, userContext, methodName) {
    var ListName = '#' + 'GroupList_' + userContext;
    var ImgLink = '#' + 'ToggleGroup_' + userContext;

    PopulateUl(result, ListName, ImgLink);
}

function LoadFailed(error) {
    //    // Display the error.    
    //    var RsltElem =
    //        document.getElementById("ResultId");
    //    RsltElem.innerHTML =
    //    "Service Error: " + error.get_message();
}