var selectedId = null;
var selectedName = ''; 
var items = [];
var images = [];

$(document).ready(function () {
    
    preload(['App_Themes/Public/images/b4_01.png', 'App_Themes/Public/images/b4_02.png']);

    selectedId = $('#hdCategoryMenuSelectedNode');

    if (JSONObject != null && JSONObject.length > 0) {
        var treeview = $('#ulCategoryTree');

        buildCategoryMenuTree(JSONObject);

        treeview.append(items.join(''));

        //expand parents node having selected child
        if ($.trim(selectedName) != '') {
            treeview.find('ul.children li a:contains("' + selectedName + '")').parents('ul.children').siblings('a.expbullet').children('img').attr('src', images[1].attr('src'));
            treeview.find('ul.children li a:contains("' + selectedName + '")').parents('ul.children').css('display', 'block');
        }
    }

    $('.expbullet').toggle(toggleTree, toggleTree);
});

function toggleTree() {
    var currentDisplayMode = $(this).siblings('.children').css('display');
    switch (currentDisplayMode) {
        case 'block':
            $(this).children('img').attr('src', images[0].attr('src'));
            $(this).siblings('.children').css('display', 'none');
            break;
        case 'none':
            $(this).children('img').attr('src', images[1].attr('src'));
            $(this).siblings('.children').css('display', 'block');
            break;
    }
}

function buildCategoryMenuTree(itemlist) {
    $.each(itemlist, function (i, item) {
        var link = '';
        var childlist = '';
        var selectedValue = $.trim(selectedId.val());

        //manipulate highlighted item
        if (selectedValue != "" && selectedValue == item.ID) {

            selectedName = item.Title;
            link = '<a class="selected" href="default.aspx?view=cat&id=' + item.ID + '">' + item.Title + '</a>';
            childlist = '<ul class="children" style="display:block">';
        }
        else {
            link = '<a href="default.aspx?view=cat&id=' + item.ID + '">' + item.Title + '</a>';
            childlist = '<ul class="children">';
        }

        //add manipulated string to list
        if (item.Children == null) {
            items.push('<li><img src="' + images[0].attr('src') + '"/>' + link + '</li>');
        }
        else {
            items.push('<li><a class="expbullet"><img src="' + images[0].attr('src') + '"/></a>' + link);
            items.push(childlist);

            buildCategoryMenuTree(item.Children);

            items.push('</ul></li>');
        }
    });
}

function preload(arrayOfImages) {
    $.each(arrayOfImages, function (i, image) {
        images.push($('<img>').attr('src', image));
    });
}