﻿
function PaginateGrid()
{
    $('div.paginated-post').each(function() {

        var currentPage = 0;
        var numPerPage = 1;

        var $element = $(this);

        //bind event to repaginate then show the current page and hide the others
        $element.bind('repaginate', function() {
            $element.find('.paginated-post-page').show()
                       .slice(0, currentPage * numPerPage).hide().end()
                       .slice((currentPage + 1) * numPerPage).hide().end();
            $('html').animate({ scrollTop: 0 }, 200);
        });

        //calculate the number of pages
        var numRows = $element.find('.paginated-post-page').length;
        var numPages = Math.ceil(numRows / numPerPage);

        //create page numbers, then insert the pager after the $element
        var $previous = $('<span runat=\"server\" id=\"previous\" class="dynamicPostPagerPrevious">Previous</span>').bind('click',
        function(event) {
            currentPage = currentPage - 1;
            $element.trigger('repaginate');

            var activeElement = $('.active');
            activeElement.prev().addClass('active');
            activeElement.removeClass('active');
            if (currentPage + 1 == numPages) $next.hide(); else $next.show();
            if (currentPage == 0) $previous.hide(); else $previous.show();
        });
        if (currentPage == 0) $previous.hide();

        var $next = $('<span runat=\"server\" id=\"next\" class=\"dynamicPostPagerNext\">Next</span>');

        $next.show();
        $next.bind('click',
        function(event) {
            currentPage = currentPage + 1;
            $element.trigger('repaginate');

            var activeElement = $('.active');
            activeElement.next().addClass('active');
            activeElement.removeClass('active');
            if (currentPage + 1 == numPages) $next.hide(); else $next.show();
            if (currentPage == 0) $previous.hide(); else $previous.show();
        });

        var $pager = $('<div class="postpager dynamicPostPager"></div>');
        for (var page = 0; page < numPages; page++) {
            $('<span class="page-number" name="numericList" >' + (page + 1) + '</span>')
               .bind('click', { 'newPage': page },
               function(event) {
                   currentPage = event.data['newPage'];
                   $element.trigger('repaginate');
                   $(this).addClass('active').siblings().removeClass('active');
                   if (currentPage + 1 == numPages) $next.hide(); else $next.show();
                   if (currentPage == 0) $previous.hide(); else $previous.show();
               })
               .appendTo($pager).addClass('clickable');
        }
        $pager.find('span.page-number:first').addClass('active');

        $pager.prepend($previous);
        $pager.append($next);
        $pager.insertAfter($element);
        $element.trigger('repaginate');
    });

}