﻿
//
// CommunitySelectorTool.ascx.js
//

/// <reference path="../Edentity.Global.js" />
/// <reference path="../API/Agility.js" />
/// <reference path="../API/Agility.UGC.API.js" />
/// <reference path="../External/jquery-1.3.2-vsdoc2.js" />
/// <reference path="../External/jScrollPane.js" />
/// <reference path="../Plugins/QueryString.js" />
/// <reference path="../Controls/ClientSidePager.js" />


Edentity.RegisterNamespace("Whiskas.Modules.CommunitySelectorTool");

(function(CST, $) {

    var pnlCommunitySelectorTool = null;
    var MediaType = '';
    var ItemsPerPage = 0;
    var Categories = [];
    var UploadedByLabel = '';
    var SingularMediaTypeLabel = '';
    var PluralMediaTypeLabel = '';
    var BackLinkLabel = '';
    var RecordID = 0;

    var StartTab = 0;
    var StartOffset = 0;

    // Init call
    CST.OnInit = function(pnlCommunitySelectorToolID, mediaType, recordID, itemsPerPage, categories, uploadedByLabel,
        singularMediaTypeLabel, pluralMediaTypeLabel, backLinkLabel) {

        Categories = categories;
        MediaType = mediaType;
        ItemsPerPage = itemsPerPage;
        UploadedByLabel = uploadedByLabel;
        SingularMediaTypeLabel = singularMediaTypeLabel;
        PluralMediaTypeLabel = pluralMediaTypeLabel;
        BackLinkLabel = backLinkLabel;
        RecordID = recordID;

        var tab = parseInt($.Hash.get('tab'));
        if (!isNaN(tab) && tab >= 0) {
            StartTab = tab;
        }
        var offset = parseInt($.Hash.get('offset'));
        if (!isNaN(offset) && offset >= 0) {
            StartOffset = offset;
        }

        pnlCommunitySelectorTool = $('#' + pnlCommunitySelectorToolID);

        _bindCommunityItems();

        _bindNavigator();
    };

    function _bindNextPrevButtonsUrl(recordID, records) {
        var prevID = -1;
        var nextID = -1;
        for (var i = 0; i < records.length; i++) {
            if (records[i].ID == recordID) {
                if (i > 0) {
                    prevID = records[i - 1].ID;
                }
                if (i + 1 < records.length) {
                    nextID = records[i + 1].ID;
                }
                break;
            }
        }
        var buttons = $("div.PhotoNavigator img");
        if (prevID > 0) {
            buttons.eq(0).click(function(e) {
                window.location = $.Pa
            });
        }
    };

    function _bindCommunityItems() {
        var panels = $('div.CommunityList', pnlCommunitySelectorTool);

        // View all panel
        var searchArg0 = {
            RecordTypeName: MediaType,
            PageSize: ItemsPerPage,
            RecordOffset: (StartTab == '0' ? StartOffset : 0),
            SortedField: "CreatedOn",
            SortDirection: Agility.UGC.API.SortDirection.DESC,
            Join: ""
        }
        panels.eq(0).data("agilitySearchArg", searchArg0);

        // Most viewed panel
        var searchArg1 = {
            RecordTypeName: MediaType,
            PageSize: ItemsPerPage,
            RecordOffset: (StartTab == '1' ? StartOffset : 0),
            Join: "AccessTracking"
        }
        panels.eq(1).data("agilitySearchArg", searchArg1);

        // Popular panel
        var searchArg2 = {
            RecordTypeName: MediaType,
            PageSize: ItemsPerPage,
            RecordOffset: (StartTab == '2' ? StartOffset : 0),
            Join: "RatingTracking"
        }
        panels.eq(2).data("agilitySearchArg", searchArg2);

        // Category panel
        var searchArg3 = {
            RecordTypeName: MediaType,
            PageSize: 0,
            ItemsPerPage: ItemsPerPage,
            RecordOffset: (StartTab == '3' ? StartOffset : 0),
            SortedField: "Category",
            SortDirection: Agility.UGC.API.SortDirection.ASC,
            Search: "",
            BackLink: "",
            GroupBy: "Category"
        }
        panels.eq(3).data("agilitySearchArg", searchArg3);
    };

    var MediaTypes = {
        Video: 'Video', Photo: 'Photo', Story: 'Story'
    };

    CST.OnShowCategory = function(sender, categoryID) {
        var panel = $('div.CommunityList:eq(3)', pnlCommunitySelectorTool);
        var searchArg = panel.data("agilitySearchArg");

        searchArg.PageSize = searchArg.ItemsPerPage;
        searchArg.Search = "Category = '" + categoryID + "'";
        searchArg.BackLink = "<div class='CategoryHeader'><span class='Left'>" + $(sender).html() +
            "</span><a class='Right' href='javascript:;' onclick='Whiskas.Modules.CommunitySelectorTool.OnShowCategories(this);'>&#9666;&nbsp;" +
            BackLinkLabel + "</a></div><div class='Clear'></div>";
        searchArg.RecordOffset = 0;
        if (searchArg.pager) {
            searchArg.pager.Remove();
            searchArg.pager = null;
        }

        _populateItems(panel, searchArg.RecordTypeName);
    };

    CST.OnShowCategories = function(sender) {
        var panel = $('div.CommunityList:eq(3)', pnlCommunitySelectorTool);
        var searchArg = panel.data("agilitySearchArg");

        searchArg.Search = "";
        searchArg.BackLink = "";
        searchArg.PageSize = 0;
        if (searchArg.pager) {
            searchArg.pager.Remove();
            searchArg.pager = null;
        }

        _populateItems(panel, searchArg.RecordTypeName);
    };

    CST.OnPopulateItems = function(sender) {
        var pageLink = $(sender);

        var panel = pageLink.parents(".CommunityList");
        var searchArg = panel.data("agilitySearchArg");
        var pageNo = parseInt(pageLink.attr('pageno'));
        searchArg.RecordOffset = pageNo * searchArg.PageSize;

        _populateItems(panel, searchArg.RecordTypeName);
    };

    function _populateItems(panel) {

        var searchArg = panel.data("agilitySearchArg");
        var gettingCategoryList = (searchArg.GroupBy == "Category" && searchArg.Search != undefined && searchArg.Search == "");
        var pnlItemList = $('div.ItemList', panel);
        var method = (gettingCategoryList) ? "/GetCategoryCounts" : "/SearchCommunity";

        $.ajax({
            type: "POST",
            url: Agility.ResolveUrl("~/WebServices/AjaxServices.asmx") + method,
            contentType: "application/json; charset=utf-8",
            data:
                "{'RecordTypeName':'" + searchArg.RecordTypeName +
                "', 'PageSize':" + searchArg.PageSize +
                ", 'RecordOffset':" + searchArg.RecordOffset +
                ", 'SortedField':'" + searchArg.SortedField +
                "', 'SortDirection':'" + searchArg.SortDirection +
                "', 'Search':\"" + (searchArg.Search != undefined ? searchArg.Search : "") +
                "\", 'Join':'" + searchArg.Join + "'}",
            dataType: "json",
            success:
                function(result, textStatus) {

                    var data = result.d;
                    var records = null;
                    var len = 0;

                    var templateUrl = "";

                    if (gettingCategoryList) {
                        if (searchArg.pager != null) {
                            searchArg.pager.Remove();
                            searchArg.pager = null;
                        }
                        //records = _countCategories(data.Records);
                        records = _addTitlesToCategories(data);
                        len = records.length;
                        templateUrl = Agility.ResolveUrl("~/ClientTemplates/Categories.htm");
                    }
                    else {
                        switch (MediaType) {
                            case MediaTypes.Video:
                                templateUrl = Agility.ResolveUrl("~/ClientTemplates/Videos.htm");
                                //console.log(data.Records[0].Values.YouTubeData);
                                break;
                            case MediaTypes.Photo:
                                templateUrl = Agility.ResolveUrl("~/ClientTemplates/Photos.htm");
                                //console.dir(data.Records[0].Values);
                                break;
                            case MediaTypes.Story:
                                templateUrl = Agility.ResolveUrl("~/ClientTemplates/Stories.htm");
                                break;
                        }
                        records = data.Records;
                        len = data.TotalRecords;
                    }

                    //Set hash for navigation
                    _setHash('offset', searchArg.RecordOffset);

                    //use jTemplates to build the data
                    if (templateUrl != "") {
                        pnlItemList.setTemplateURL(templateUrl);
                        pnlItemList.setParam("renderUrl", Whiskas.Modules.CommunitySelectorTool.RenderUrl);
                        pnlItemList.setParam("singularLabel", SingularMediaTypeLabel);
                        pnlItemList.setParam("recordID", RecordID);
                        pnlItemList.setParam("pluralLabel", PluralMediaTypeLabel);
                        pnlItemList.setParam("uploadedByLabel", UploadedByLabel);
                        pnlItemList.processTemplate(records);

                        //add the pager
                        if (searchArg.pager == null && !gettingCategoryList) {
                            var pager = _setGridFooter(pnlItemList.next(), searchArg.PageSize, len, searchArg.RecordOffset);
                            searchArg.pager = pager;
                        }

                        //add custom scroll bars
                        setTimeout(function() {
                            $('.CSPanel:first', pnlItemList).jScrollPane({
                                showArrows: true,
                                scrollbarWidth: 22,
                                defaultHeight: 230,
                                defaultWidth: 300
                            });
                        }, 200);
                                                
                        if (searchArg.BackLink != undefined && searchArg.BackLink.length > 0) {
                            pnlItemList.prepend('<div>' + searchArg.BackLink + '</div>');
                        }
                    }

                    //Set navigation in case of photos ..
                    //alert($("a.Selected", pnlItemList).attr("href"));
                },
            error:
                function(XMLHttpRequest, textStatus, errorThrown) {
                    pnlItemList.html("There was an error loading the records: " + textStatus + ' ' + errorThrown);
                }
        });
    };

    function _getCategoryName(categoryID) {
        for (var i = 0; i < Categories.length; i++) {
            if (Categories[i].Key == categoryID) {
                return Categories[i].Value;
            }
        }
        return "";
    };
    
    function _addTitlesToCategories(categories) {
        for (var i = 0; i < categories.length; i++) {
            categories[i].Category = _getCategoryName(categories[i].CategoryID);
        }
//        return categories.sort(function(a, b) {
//            var cat1 = a.Category,
//                cat2 = b.Category;
//            if (cat1 < cat2) {
//                return -1;
//            } else if (cat1 > cat2) {
//                return 1;
//            } else {
//                return 0;
//            }
//        });
        return categories;
    }

    function _countValue(ary, value) {
        for (var i = 0; i < ary.length; i++) {
            if (ary[i].CategoryID == value) {
                ary[i].Count++;
                return;
            }
        }
        ary[ary.length] = { 'CategoryID': value, 'Category': _getCategoryName(value), 'Count': 1 };
    };

    function _countCategories(records) {

        var checked = [];

        for (var i = 0; i < records.length; i++) {
            _countValue(checked, records[i].Values.Category);
        }

        return checked;
    };

    CST.RenderUrl = function(id) {
        return $.Params.set(MediaType + 'ID', id).toString() + $.Hash.toString();
    };

    CST.RenderThumbnail = function(id) {
        return $.Params.set(MediaType + 'ID', id).toString();
    };

    function _setGridFooter(listingFooter, pageSize, totalRecords, recordOffset) {

        if (pageSize <= 0) {
            pageSize = 6; //Default
        }

        var currentPage = Math.floor(recordOffset / pageSize);
        var containerID = listingFooter.attr("id");
        var pager = new Whiskas.Controls.ClientSidePager(containerID, totalRecords, pageSize, currentPage, _adjustCentering, function(newPage) {
            var pageLink = $("a[pageno=" + newPage + "]", pager.container).get(0);
            Whiskas.Modules.CommunitySelectorTool.OnPopulateItems(pageLink);
        });
        pager.Init();
        return pager;
    }
    
    function _adjustCentering($pagerContainer) {
        var width = $('div.PagerLeft', $pagerContainer).width();
        width += $('div.PrevPages', $pagerContainer).width() || 0;
        width += $('div.Pages', $pagerContainer).width();
        width += $('div.NextPages', $pagerContainer).width() || 0;
        width += $('div.PagerRight', $pagerContainer).width();
        $('div.Div', $pagerContainer).width(($pagerContainer.width() - width) / 2);
    }

    var navigatorSliding = false;

    function _bindNavigator() {

        var Listings = $('div.Listings', pnlCommunitySelectorTool);

        $('img', Listings).each(function(idx) {
            if (idx == StartTab) { //Select StartTab by default
                _selectPanel(this, idx);
            }
            $(this).click(function() {
                _selectPanel(this, idx);
            });
        });

        $('img.Sliders:eq(0)', pnlCommunitySelectorTool).click(function(e) {
            if (!navigatorSliding) {
                navigatorSliding = true;
                var left = parseInt(Listings.css('left'));
                if (left < 0) {
                    Listings.animate({ left: '+=130px' }, 'normal', function() {
                        navigatorSliding = false;
                    });
                }
                else {
                    navigatorSliding = false;
                }
            }
        });

        $('img.Sliders:eq(1)', pnlCommunitySelectorTool).click(function(e) {
            if (!navigatorSliding) {
                navigatorSliding = true;
                var left = parseInt(Listings.css('left'));
                if (left > -260) {
                    Listings.animate({ left: '-=130px' }, 'normal', function() {
                        navigatorSliding = false;
                    });
                }
                else {
                    navigatorSliding = false;
                }
            }
        });

        // Set the highlited tab visible
        if (!navigatorSliding && StartTab > 1) {
            navigatorSliding = true;
            Listings.animate({ left: '-=260px' }, 'normal', function() {
                navigatorSliding = false;
            });
        }
        else {
            navigatorSliding = false;
        }
    };

    function _selectPanel(sender, idx) {
        var img = $(sender);
        _clearSelection(img.parent());
        img.attr('src', img.attr('SelectedImageUrl'));

        //Panels
        var panels = $('div.CommunityList', img.parent().parent().next().next().next()).css('visibility', 'hidden').data("hasBeenLoaded", false);
        panels.eq(idx).css('visibility', 'visible');

        //Populate data
        var searchArg = panels.eq(idx).data("agilitySearchArg");
        _populateItems(panels.eq(idx), searchArg.RecordTypeName);

        //Set hash for navigation
        _setHash('tab', idx);
    };

    function _setHash(hashID, hashValue) {
        //Set hash for navigation
        window.location.hash = $.Hash.set(hashID, hashValue).toString();
    };

    function _clearSelection(Listings) {
        $('img', Listings).each(function(idx) {
            var img = $(this);
            img.attr('src', img.attr('ImageUrl'));
            jQuery("<img>").attr("src", img.attr('SelectedImageUrl'));
        });
    };

})(Whiskas.Modules.CommunitySelectorTool, jQuery);

