/// <summary>
/// Initializes the pager for a given DOM element.
/// </summary>
/// <param name="tableId">The id of the table (or other dom element) that the pager will be added to.</param>
/// <param name="pagerGroupId">The group id for the ul DOM element that will contain page numbers. The elements will have a "groupId" attribute.</param>
/// <param name="pageSize">The number of rows that are going to be visible per page.</param>
/// <param name="totalElements">The total number of rows.</param>
/// <param name="displayElements">(optional) The id of the container for showing the numbers for the rows that are beign displayed and the total results.</param>
/// <param name="pagingFunction">(optional) Custom function for handling the paging logic. The default will hide rows from a table element.</param>
/// <param name="elementToBlockId">(optional) DOM element to block while paging is executing.</param>
function AddPager(tableId, pagerGroupId, pageSize, totalElements, displayElements, pagingFunction, elementToBlockId, noResultsElement, resultsElement) {
    
    // Gets the element 
    var table = document.getElementById(tableId);

    // Stores the parameters into the dom object.
    table.pagerGroupId = pagerGroupId;
    table.pageSize = pageSize;
    table.currentPage = 1;
    table.totalElements = totalElements;
    table.totalPages = Math.ceil(table.totalElements / table.pageSize);
    table.displayTotalsElementId = displayElements;
    table.pagingFunction = pagingFunction;
    table.elementToBlockId = elementToBlockId;
    table.noResultsElement = noResultsElement;
    table.resultsElement = resultsElement;

    // Calls pagination logic
    Paginate(table);
}

/// <summary>
/// Handler for the click event of the '<<' link element.
/// </summary>
/// <param name="tableId">The id of the table (or other dom element) for which the pager logic is applied.</param>
function PrevPage(tableId) {
    var table = document.getElementById(tableId);

    // Updates currentPage property
    if (table.currentPage > 1)
        table.currentPage--;

    Paginate(table);
}

/// <summary>
/// Handler for the click event of the '>>' link element.
/// </summary>
/// <param name="tableId">The id of the table (or other dom element) for which the pager logic is applied.</param>
function NextPage(tableId) {

    var table = document.getElementById(tableId);

    // Updates currentPage property    
    if (table.currentPage < table.totalPages)
        table.currentPage++;

    Paginate(table);
}

/// <summary>
/// Changes the number of elements that are displayed per page.
/// </summary>
/// <param name="tableId">The id of the table (or other dom element) for which the pager logic is applied.</param>
/// <param name="newPageSize">The new size of the pages.</param>
function ChangePageSize(tableId, newPageSize) {
    var table = document.getElementById(tableId);

    // Updates pageSize and totalPages properties
    table.pageSize = newPageSize;
    table.totalPages = Math.ceil(table.totalElements / table.pageSize);

    table.currentPage = 1;

    Paginate(table);
}

/// <summary>
/// Renders the text that displays the current number of displayed results and totals.
/// </summary>
/// <param name="tableId">The id of the table (or other dom element) for which the pager logic is applied.</param>
function ChangeDisplayedResults(tableId) {

    var table = document.getElementById(tableId);

    // Reders text, for ex: Displaying 1-20 of 100 results.
    var displayMessage = "Displaying ";

    var firstDisplayedElement = (table.currentPage * table.pageSize) - table.pageSize + 1;

    displayMessage += firstDisplayedElement;

    displayMessage += "-";

    var lastDisplayedElement = (table.currentPage * table.pageSize) < table.totalElements ? (table.currentPage * table.pageSize) : table.totalElements;

    displayMessage += lastDisplayedElement;

    displayMessage += " of ";

    displayMessage += table.totalElements;

    displayMessage += " Results";

    $("#" + table.displayTotalsElementId).html(displayMessage)  
}

/// <summary>
/// Main function for handling the pagination logic.
/// </summary>
/// <param name="table">The DOM element that contains the pager or it´s id.</param>
/// <param name="newPage">The number of the page that will be visible.</param>
function Paginate(table, newPage) {
    // Gets the element (if the table parameter is an id and not an object)
    if (typeof (table) != "object") {
        table = document.getElementById(table);
    }
    
    // Updates the currentPage property
    if (typeof (newPage) != "undefined") {
        table.currentPage = newPage;
    }

    // Blocks UI
//    $('#' + table.elementToBlockId).block({ message: '<img src="./Content/images/LoadingImageSmall.gif"/>',
//        css: { border: '1px solid #FFF' }
//    });

    // Blocks UI
    if (typeof (ToggleWorkingDisplay) != 'undefined') {
        ToggleWorkingDisplay(true, "Loading page " + table.currentPage, table.elementToBlockId);
    }
    else {

        $('#' + table.elementToBlockId).block({ message: '<img src="' + BASE_URL + 'Content/images/LoadingImageSmall.gif"/>',
            css: { border: '1px solid #FFF' }
        });
    }

    // Gets the last element to be display for this page.
    var lastDisplayedElement = (table.currentPage * table.pageSize) < table.totalElements ? (table.currentPage * table.pageSize) : table.totalElements;

    // Gets the first element to be displayed for this page.
    var firstDisplayedElement = (table.currentPage * table.pageSize) - table.pageSize;

    
    // If a custom paging function was defined (by using the pagingFunction parameter) executes it. Otherwise executes the default logic 
    // (hides rows from a table)
    if (typeof (table.pagingFunction) != 'undefined') {
        table.pagingFunction(table, firstDisplayedElement, lastDisplayedElement);
    }
    else {
        $("#" + table.id).find("tbody tr").show().filter(':gt(' + (lastDisplayedElement - 1) + ')').hide();
        $("#" + table.id).find("tbody tr").filter(':lt(' + firstDisplayedElement + ')').hide();
    }

    
    // Gets the ul where the page numbers will be rendered.
    var pagers = $("[groupId='" + table.pagerGroupId + "']");

    // Renders page numbers.    
    pagers.html("");

    var pageSizeSelectItem = document.getElementById("pageSizeSelector");
    if (pageSizeSelectItem)
    pageSizeSelectItem.parentNode.style.display = 'block';
    
    if (table.totalPages > 1) {
        //pagers.append("<li class='page'><a class='button-sml btnsH1' onclick=\"PrevPage('" + table.id + "')\"><span class='text'>&laquo;</span><span class='butt'>&nbsp;</span></a></li>");

        if (table.currentPage != 1 && table.totalPages > 5)
            pagers.append("<a href='#' class='next' onclick=\"PrevPage('" + table.id + "')\">previous</a>");

        var lastShowedPage;
        var firstShowedPage;

        if (table.totalPages > 5) {
            lastShowedPage = table.currentPage > 5 ? table.currentPage : 5;
            firstShowedPage = table.currentPage > 5 ? table.currentPage - 4 : 1;
        }
        else {
            lastShowedPage = table.totalPages;
            firstShowedPage = 1;
        }

        for (var i = firstShowedPage; i <= lastShowedPage; i++) {
            if (i == table.currentPage)
            //pagers.append("<li class='page'><a class='button-sml btnsH1' onclick=\"Paginate('" + table.id + "'," + i + ")\"><span class='text selected click'>" + i + "</span><span class='butt selected'>&nbsp;</span></a></li>");
                pagers.append("<span class='current' onclick=\"Paginate('" + table.id + "'," + i + ")\">" + i + "</span>");
            else
            //pagers.append("<li class='page'><a class='button-sml btnsH1' onclick=\"Paginate('" + table.id + "'," + i + ")\"><span class='text click'>" + i + "</span><span class='butt'>&nbsp;</span></a></li>");
                pagers.append("<a href='#' onclick=\"Paginate('" + table.id + "'," + i + ")\">" + i + "</a>");

            //pagers.append("<li class='page'><a class='button-sml btnsH1' onclick=\"Paginate('" + table.id + "'," + i + ")\"><span class='text click'>" + i + "</span><span class='butt'>&nbsp;</span></a></li>");
        }

        if (table.currentPage != table.totalPages && table.totalPages > 5)
            pagers.append("<a class='next' href='#' onclick=\"NextPage('" + table.id + "')\">next</a>");

        //pagers.append("<li class='nb'><a href='#' class='button-sml btnsH1' onclick=\"NextPage('" + table.id + "')\"><span class='text click'>&raquo;</span><span class='butt'>&nbsp;</span></a></li>");
    }
    else {
        
        if (table.totalElements <= 10) {
            // Tries to get the page size selector element (assuming that is called pageSizeSelector) and if it exists hides it´s content

            if (pageSizeSelectItem)
                pageSizeSelectItem.parentNode.style.display = 'none';
        }
        
    }
    

    // If the displayTotalsElementId was set executes the function to display the displayed result numbers.
    if (table.displayTotalsElementId != "undefined")
        ChangeDisplayedResults(table.id);

    // Unblock UI
    //$('#' + table.elementToBlockId).unblock();
    if (typeof (ToggleWorkingDisplay) != 'undefined') {
        ToggleWorkingDisplay(false, "", table.elementToBlockId);
    }
    else {
        $('#' + table.elementToBlockId).unblock();
    }

    if (typeof (table.noResultsElement) != 'undefined') {

        if (table.totalElements > 0) {
            $("#" + table.resultsElement).show();
            $("#" + table.noResultsElement).hide();
        }
        else {
            $("#" + table.resultsElement).hide();
            $("#" + table.noResultsElement).show();
        }
    }
}