var Pager = {

    Load: function(detail) {

        var scrollindex = Math.floor(detail.CurrentIndex / 5);
        var totalpages = Math.ceil(detail.TotalItems / detail.ItemsPerPage);
        var totalscrolls = Math.ceil(totalpages / 5);

        function GetRightScroll() {
            if (totalscrolls - 1 > scrollindex) {
                return $('<div class="scrollrighton"></div>')
				.data('pageindex', ((scrollindex + 1) * 5))
				.mouseover(function() { $(this).removeClass('scrollrighton').addClass('scrollrightmo'); })
				.mouseout(function() { $(this).removeClass('scrollrightmo').addClass('scrollrighton'); })
				.click(function() { detail.PageClick($(this).data('pageindex')); });
            }
            else {
                return $('<div class="scrollrightoff"></div>');
            }
        }

        function GetRightPage() {
            if (totalpages - 1 > detail.CurrentIndex) {
                return $('<div class="pagerighton"></div>')
				.mouseover(function() { $(this).removeClass('pagerighton').addClass('pagerightmo'); })
				.mouseout(function() { $(this).removeClass('pagerightmo').addClass('pagerighton'); })
				.data('pageindex', detail.CurrentIndex + 1)
				.click(function() { detail.PageClick($(this).data('pageindex')); });
            }
            else {
                return $('<div class="pagerightoff"></div>');
            }
        }

        function GetPageIndexer(result) {
            var start = scrollindex * 5;
            var remaing = totalpages - start;
            var end = (remaing >= 5) ? start + 5 : start + remaing;

            for (var i = end; i > start; i--) {
                if ((i - 1) == detail.CurrentIndex) {
                    result.append($('<div class="pageindexmo"></div>').html(i));
                }
                else {
                    result.append($('<div class="pageindex"></div>').html(i)
				    .mouseover(function() { $(this).removeClass('pageindex').addClass('pageindexmo'); })
				    .mouseout(function() { $(this).removeClass('pageindexmo').addClass('pageindex'); })
				    .data('pageindex', i - 1)
				    .click(function() { detail.PageClick($(this).data('pageindex')); }));
                }
            }
        }

        function GetLeftPage() {
            if (detail.CurrentIndex > 0) {
                return $('<div class="pagelefton"></div>')
				.mouseover(function() { $(this).removeClass('pagelefton').addClass('pageleftmo'); })
				.mouseout(function() { $(this).removeClass('pageleftmo').addClass('pagelefton'); })
				.data('pageindex', detail.CurrentIndex - 1)
				.click(function() { detail.PageClick($(this).data('pageindex')); });
            }
            else {
                return $('<div class="pageleftoff"></div>');
            }
        }

        function GetLeftScroll() {
            if (scrollindex > 0) {
                return $('<div class="scrolllefton"></div>')
				.mouseover(function() { $(this).removeClass('scrolllefton').addClass('scrollleftmo'); })
				.mouseout(function() { $(this).removeClass('scrollleftmo').addClass('scrolllefton'); })
				.data('pageindex', (scrollindex * 5) - 1)
				.click(function() { detail.PageClick($(this).data('pageindex')); });
            }
            else {
                return $('<div class="scrollleftoff"></div>');
            }
        }

        function AddPager() {
            var result = $('<div class="pagercontainer" style="width:' + detail.Width + ';"></div>').append(GetRightScroll()).append(GetRightPage());
            GetPageIndexer(result);
            result.append(GetLeftPage()).append(GetLeftScroll());
            detail.Container.html('').append(result);
        }

        $(document).ready(function() { AddPager(); });
    }
}

var BrowseBrick = {

    Load: function(detail) {

        function SetFilterUnSelected(filter) {
            filter.removeClass(filter.data('oncss')).addClass(filter.data('offcss')).data('active', false).css('cursor', 'pointer');
        }

        function SetFilterSelected(filter) {
            $('div.NavSelected').each(function() { SetFilterUnSelected($(this)) });
            filter.removeClass(filter.data('offcss')).addClass(filter.data('oncss')).data('active', true).css('cursor', 'default').css('textDecoration', 'none');
        }

        function SetSelectedFilter() {
            if (detail.CurrentFilter == '') {
                SetFilterSelected($('div.NavHeader'));
            }
            else {
                $('div.NavTextFilter').each(function() {
                    var filter = $(this);

                    if (filter.children(":first").text() == detail.CurrentFilter) {
                        SetFilterSelected(filter);
                        ShowSubCategory(filter.data('subcategory'));
                    }
                });
            }

            if ($('div.NavOpen').length == 0) {
                ShowSubCategory($('div.NavClose:first'));
            }
        }

        function ShowSubCategory(subcategory) {
            if (subcategory) {
                var filterlinks = subcategory.data('filterlinks');

                if (filterlinks && filterlinks.css('display') == 'none') {
                    $('div.NavText').each(function() { if (!$(this).data('show')) { this.style.display = 'none'; } });
                    $('div.NavSubCategory').each(function() { this.className = 'NavSubCategory NavClose'; });
                    filterlinks.css('display', '');
                    subcategory.removeClass('NavClose').addClass('NavOpen');
                }
            }
        }

        function WriteFilters(parent, filters, subcategory) {
            $.each(filters, function(i, filter) {
                parent.append($("<div class='NavTextFilter'></div>")
				.click(function() { SetFilterSelected($(this)); detail.FilterSelect($(this).data('media'), $(this).children(":first").text()); })
				.mouseover(function() { if (!$(this).data('active')) { $(this).css('textDecoration', 'underline').css('cursor', 'pointer'); } })
				.mouseout(function() { $(this).css('textDecoration', 'none').css('cursor', 'defualt'); })
				.append("<span>" + filter.Key + "</span>")
				.data('media', filter.Value)
				.data('offcss', 'NavTextFilter')
				.data('oncss', 'NavSelected')
				.data('subcategory', subcategory))
				.append(((i < filters.length - 1) ? "<div class='NavTextSpacer'></div>" : ''));
            });
        }

        function WriteSubCategories(subcategories, parent) {
            $.each(subcategories, function(i, subcategory) {
                var filterlinks = $("<div class='NavText'></div>")
				.css('display', ((detail.CurrentFilter == '' && i == 0) ? '' : 'none'));

                var result = $("<div class='NavSubCategory" + ((detail.CurrentFilter == '' && i == 0) ? ' NavOpen' : ' NavClose') + "'>" + subcategory.Name + "</div>")
				.click(function() { ShowSubCategory($(this)); })
				.data('filterlinks', filterlinks);

                parent.append(result).append(filterlinks);
                WriteFilters(filterlinks, subcategory.Filters, result);
            });
        }

        function WriteCategories(categories, parent) {
            $.each(categories, function(i, category) {
                parent.append("<div class='NavCategory'>" + category.Name + "</div>");
                WriteSubCategories(category.SubCategories, parent)

                if (category.Filters.length > 0) {
                    var filterlinks = $("<div class='NavText'></div>").data('show', true);
                    parent.append(filterlinks);
                    WriteFilters(filterlinks, category.Filters, false);
                }

                if (i < categories.length - 1) {
                    parent.append("<div class='NavCatSpacer'></div>");
                }
            });
        }

        function CreateNavHeader(text) {
            return $("<div class='NavHeader'></div>")
		    .click(function() { SetFilterSelected($('div.NavHeader')); detail.FilterReset(); })
		    .mouseover(function() { if (!$(this).data('active')) { $(this).css('textDecoration', 'underline').css('cursor', 'pointer'); } })
		    .mouseout(function() { $(this).css('textDecoration', 'none').css('cursor', 'defualt'); })
		    .data('offcss', 'NavHeader')
		    .data('oncss', 'NavHeader NavSelected')
		    .css('cursor', 'default')
		    .append('<span>' + text + '</span>');
        }

        function LoadBrick(result) {
            var filtercontainer = $("<div class='NavContent'></div>")
			.append("<div class='NavHeaderTopSpacer'></div>")
			.append(CreateNavHeader(result.resettext))
			.append("<div class='NavHeaderBtmSpacer'></div>");

            WriteCategories(result.categories, filtercontainer);

            detail.Container.append($("<div class='NavThumbContainer'></div>")
			.append($("<div class='browsebrickouter'></div>")
			.append("<div class='NavTitle'>" + result.title + "</div>")
			.append(filtercontainer))
			.append(detail.ThumbContainer.addClass('smallthumbouter'))
			.append("<div class='filterspacer'></div>"));

            SetSelectedFilter();
        }

        function GetBrowseBrick() {
            $.ajax({type: 'POST',
                    url: detail.Uri,
                    contentType: 'application/json; charset=utf-8',
                    data: detail.Data,
                    dataType: 'json',
                    success: function(result) { LoadBrick(result.d); },
                    error: detail.Fail
            });
        }

        $(document).ready(function() {
            GetBrowseBrick();
        });
    }
}

var MediaThumbs = {

    Load: function(detail) {

        function IsEnd(index) { return (index % 4 == 3); }

        function WriteThumbs(result) {
            detail.Container.html('');
            detail.PagerContainer.html('');

            $.each(result.thumbs, function(i, thumb) {
                detail.Container.append(detail.CreateChild(thumb, IsEnd(i)));

                if (IsEnd(i) && i < (result.thumbs.length - 1)) {
                    detail.Container.append("<div class='" + detail.SpacerClass + "'></div>");
                }
            });

            if (result.totalthumbs > 12) {
                Pager.Load({
                    Container: detail.PagerContainer,
                    CurrentIndex: result.currentindex,
                    TotalItems: result.totalthumbs,
                    ItemsPerPage: 12,
                    Width: '926px',
                    PageClick: function(index) { detail.PagerClick(index); }
                });
            }

            detail.ShowContainer();
        }

        function GetThumbs() {
            detail.ShowLoading();

            $.ajax({ type: 'POST',
                url: detail.Uri,
                contentType: 'application/json; charset=utf-8',
                data: detail.Data,
                dataType: 'json',
                success: function(result) { WriteThumbs(result.d); },
                error: function() { detail.FailLoading(); }
            });
        }

        $(document).ready(function() {
            GetThumbs();
        });
    }
}