function Pager(pagerName, tableName, itemsPerPage) {
    this.pagerName = pagerName;
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.rows = 0;
        
    this.showPage = function(pageNumber) {
        this.currentPage = pageNumber;
              
        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;

        var rows = document.getElementById(tableName).rows;
        // the first and the last rows are skipped
        for (var i = 1; i < this.rows.length - 1; i++) {
            if (i < from || i > to)  
                this.rows[i].style.display = 'none';
            else
                this.rows[i].style.display = '';
        }
        
        this.setClass();
        document.getElementById('spanContent').innerHTML = pageNumber + " of " + this.pages
    }   
    
    this.prev = function() {        
        if (this.currentPage > 1) {
            this.showPage(this.currentPage - 1);
        } 
    }
    
    this.next = function() {      
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        } 
    }                    
    
    this.setClass = function() {
           document.getElementById('spanFirst').setAttribute("class", "pager-button");
           document.getElementById('spanFirst').setAttribute("className", "pager-button"); 
           document.getElementById('spanPrev').setAttribute("class", "pager-button"); 
           document.getElementById('spanPrev').setAttribute("className", "pager-button"); 
           document.getElementById('spanNext').setAttribute("class", "pager-button"); 
           document.getElementById('spanNext').setAttribute("className", "pager-button");  
           document.getElementById('spanLast').setAttribute("class", "pager-button"); 
           document.getElementById('spanLast').setAttribute("className", "pager-button"); 
               
        if (this.currentPage == 1) {
           document.getElementById('spanFirst').setAttribute("class", "pager-button-disabled");
           document.getElementById('spanFirst').setAttribute("className", "pager-button-disabled"); 
           document.getElementById('spanPrev').setAttribute("class", "pager-button-disabled"); 
           document.getElementById('spanPrev').setAttribute("className", "pager-button-disabled"); 
        }
        
        if (this.currentPage == this.pages) {
           document.getElementById('spanNext').setAttribute("class", "pager-button-disabled");
           document.getElementById('spanNext').setAttribute("className", "pager-button-disabled"); 
           document.getElementById('spanLast').setAttribute("class", "pager-button-disabled"); 
           document.getElementById('spanLast').setAttribute("className", "pager-button-disabled"); 
        }
    }    
    
    this.init = function() {
        this.rows = document.getElementById(tableName).rows;
        this.pages = Math.ceil((this.rows.length - 1) / itemsPerPage);
        
        var pagerRow = document.getElementById(tableName).insertRow(this.rows.length);
        var pagerCell  = pagerRow.insertCell(0);
        pagerCell.setAttribute("class", "pager-row");
        pagerCell.setAttribute("className", "pager-row");
        pagerCell.colSpan = this.rows[0].cells.length;
        var pagerDiv = document.createElement('div');
        pagerDiv.id = "pagerDiv";
        
    	var pagerHtml = "<span id='spanFirst' onclick='" + pagerName + ".showPage(1);' class='pager-button'> &lt;&lt; First </span>";
    	pagerHtml += "<span id='spanPrev' onclick='" + pagerName + ".prev();' class='pager-button'> &lt; Prev </span>";
    	pagerHtml += "<span id='spanContent' class='pager-text'></span>";
        pagerHtml += "<span id='spanNext' onclick='" + pagerName + ".next();' class='pager-button'> Next &gt;</span>";
        pagerHtml += "<span id='spanLast' onclick='" + pagerName + ".showPage(" + this.pages + ");' class='pager-button'> Last &gt;&gt;</span>";
        
        pagerDiv.innerHTML = pagerHtml;
        pagerCell.appendChild(pagerDiv);
        this.showPage(1);        
    }
}