function ClientsidePage(totalPages, viewportSize) {
    this._pagesLoaded = new Array(totalPages);
    this._viewportSize = typeof viewportSize == 'undefined' ? 2 : viewportSize;
    this.pageLoad = function(webServiceMethodName, mediaType, context, elementId, jTemplateId, page, pageSize, maxImageHeight) {
        if (this._pagesLoaded[page] == null || this._pagesLoaded[page] == false) {
            this._viewportSize = (this._viewportSize == 0) ? 2 : this._viewportSize;

            $.ajax({
                jTemplateId: jTemplateId,
                pageObj: this,
                pageStart: page,
                pageSize: pageSize,
                domElement: context,
                maxImageHeight: typeof maxImageHeight == 'undefined' ? -1 : maxImageHeight,
                type: "POST",
                url: AjaxServicesAsmxURL + '/' + webServiceMethodName,
                data: "{ 'mediaType': '" + mediaType + "', 'pageIdx': " + page + ", 'pageSize': " + pageSize + ", 'loadFactor': " + this._viewportSize + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    if (result.d != null) {
                        for (i = 0; i < result.d.length; i++) {
                            $('#' + elementId + result.d[i].ID).setTemplateElement(this.jTemplateId);
                            $('#' + elementId + result.d[i].ID).processTemplate(result.d[i]);

                            if (this.pageObj._pagesLoaded != null && i < this.pageObj._viewportSize) {
                                this.pageObj._pagesLoaded[this.pageStart + i] = true;
                            }
                        }
                    }

                    //Adjust image size
                    if (this.maxImageHeight > 0) {
                        $('img', this.domElement).attr("maxheight", this.maxImageHeight).each(function() {
                            try {
                                var width = $(this).width();    // Current image width
                                var height = $(this).height();  // Current image height
                                var maxHeight = $(this).attr("maxheight");
                                var ratio = maxHeight / height;     // get ratio for scaling image

                                $(this).css("width", width * ratio);   // Set new width
                                $(this).css("height", maxHeight);      // Scale height based on ratio
                                height = height * ratio;            // Reset height to match scaled image
                                width = width * ratio;              // Reset width to match scaled image
                            }
                            catch (err) { }
                        });
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        }


    };
}

function markSelectedPage(element, parent) {
    if (typeof parent != 'undefined'
            && parent != null) {
        $('#' + parent).find("a").removeClass("Selected");
    }

    $(element).addClass('Selected');
}

function ScrollPager(pager, totalPages, maxPagesPerView, currentPage) {
    if (pager == null) {
        return;
    }

    if (typeof totalPages == 'undefined') {
        throw "Missing total pages";
    }

    if (typeof maxPagesPerView == 'undefined' || maxPagesPerView == 0) {
        maxPagesPerView = 5;
    }

    if (typeof currentPage == 'undefined') {
        throw "Missing current pages";
    }

    var viewport = $('div.Viewport', pager);
    var pageWidth = 19;

    if (totalPages >= maxPagesPerView) { // Side sliding pager
        var step = 0;
        if (currentPage < 2) {
            step = 0;
        }
        else if (totalPages - currentPage <= 2) {
            step = -totalPages + maxPagesPerView;
        }
        else {
            step = -Math.floor(currentPage % maxPagesPerView) + 2;
        }

        viewport.animate({ left: (step * pageWidth) + 'px' }, 'slow');
    }
}

function PagingViewPortRender(pager, viewportSize, totalPages) {
    var pageWidth = 19;
    
    if (totalPages > viewportSize) {
        $('div.Pages', pager).css({ "width": viewportSize * pageWidth, "overflow": "hidden" });        
    } else {
        $('div.Pages', pager).css({ "width": totalPages * pageWidth, "overflow": "hidden" });        
    }

    $('div.Viewport', pager).css("width", totalPages * pageWidth);
}