function Pager(tableName, itemsPerPage) 
{
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;
    this.positionFooterId = null; 	
    this.positionHeaderId = null;
    this.pagerName = null;
    this.showRecords = function(from, to) 
    {  
	
	    var rows = document.getElementById(tableName).rows;
	    // i starts from 1 to skip table header row
	    if(from > 1)
	    {
		    from = (from * 2) - 1;
            }
	    to = to * 2;
	    var elementHeader = document.getElementById(this.positionHeaderId);
	    var elementFooter = document.getElementById(this.positionFooterId);
	
	    if(to >= rows.length )
	    {
			
		    if(this.currentPage == 1)
		    {
		        //show link to only first page
      	        var pagerHtml = '<a  class="pg-normal"> &lt;&lt; '+ this.currentPage +' of</a> ';
			    pagerHtml += '<a onmouseover=\'this.style.cursor="pointer";\' id="pg' + this.currentPage  + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + this.currentPage + ');javascript:scroll(0,0);">' + this.currentPage + '</a> ';
	            pagerHtml += '<a class="pg-normal"> &gt;&gt;</a>'; 
			    elementHeader.innerHTML = pagerHtml;
			    elementFooter.innerHTML = pagerHtml;	
		    }
		    else
		    {
		        //show only previous link
	      	    var pagerHtml = '<a  onmouseover=\'this.style.cursor="pointer";\' onclick="' + this.pagerName + '.prev();javascript:scroll(0,0);" class="pg-normal"> &lt;&lt; </a>  ';
	      	    pagerHtml += '<a  class="pg-normal" >' + this.currentPage + ' of</a> ';
                pagerHtml += '<a onmouseover=\'this.style.cursor="pointer";\' id="pg' + Math.round(this.pages / 2)  + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + Math.round(this.pages / 2) + ');javascript:scroll(0,0);">' + Math.round(this.pages / 2) + '</a>  ';
                pagerHtml += '<a class="pg-normal"> &gt;&gt;</a>'; 
	            elementHeader.innerHTML = pagerHtml;
			    elementFooter.innerHTML = pagerHtml;
		    }

	    }
	    else if(from <= 1)
	    {
	
	        //show only next link
      	    var pagerHtml = '<a  class="pg-normal"> &lt;&lt; '+ this.currentPage +' of</a> ';
            pagerHtml += '<a onmouseover=\'this.style.cursor="pointer";\' id="pg' + Math.round(this.pages / 2)  + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + Math.round(this.pages / 2) + ');javascript:scroll(0,0);">' + Math.round(this.pages / 2) + '</a>  ';
	        pagerHtml += '<a  onmouseover=\'this.style.cursor="pointer";\' onclick="' + this.pagerName + '.next();javascript:scroll(0,0);" class="pg-normal"> &gt;&gt; </a>  ';
	        elementHeader.innerHTML = pagerHtml;
		    elementFooter.innerHTML = pagerHtml;
        }
	    else
	    {
		    if( this.currentPage!=Math.round(this.pages / 2))
	 		    this.showPageNav (this.pagerName, this.positionHeaderId, this.positionFooterId);
		    else
		    {
		        //show only previous link
      	        var pagerHtml = '<a  onmouseover=\'this.style.cursor="pointer";\' onclick="' + this.pagerName + '.prev();javascript:scroll(0,0);" class="pg-normal"> &lt;&lt; </a>  ';
      	        pagerHtml += '<a  class="pg-normal" >' + this.currentPage + ' of</a> ';
                pagerHtml += '<a onmouseover=\'this.style.cursor="pointer";\' id="pg' + Math.round(this.pages / 2)  + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + Math.round(this.pages / 2) + ');javascript:scroll(0,0);">' + Math.round(this.pages / 2) + '</a>  ';
                pagerHtml += '<a class="pg-normal"> &gt;&gt;</a>'; 
                elementHeader.innerHTML = pagerHtml;
		        elementFooter.innerHTML = pagerHtml;
    			
		    }	
	    }
        for (var i = 1; i < rows.length; i++) 
        {
            if (i < from || i > to)  
            {   
                rows[i].style.display = 'none';
            }
            else
		    {
                rows[i].style.display = '';
 		    }
        }
	    //this.sync(this.positionId);
    }
    this.showPage = function(pageNumber) 
    {
    	if (! this.inited) 
    	{
    		alert("not inited");
    		return;
    	}
    	if(document.getElementById("featuredHead")!=null)
    	{
    	    if(pageNumber!=1)
    	    {
    	    
    	        document.getElementById("featuredHead").style.display = 'none';
    	        document.getElementById("featuredSeparator1").style.display = 'none';
    	        document.getElementById("featuredBody").style.display = 'none';
    	        document.getElementById("featuredSeparator2").style.display = 'none';
    	    }
    	    else
    	    {
    	        document.getElementById("featuredHead").style.display = '';
    	        document.getElementById("featuredSeparator1").style.display = '';
    	        document.getElementById("featuredBody").style.display = '';
    	        document.getElementById("featuredSeparator2").style.display = '';
    	    }
    	}
        //var oldPageAnchor = document.getElementById('pg'+this.currentPage);
        //oldPageAnchor.className = 'pg-normal';
        this.currentPage = pageNumber;
        //var newPageAnchor = document.getElementById('pg'+this.currentPage);
        //newPageAnchor.className = 'pg-selected';
        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
	    this.showRecords(from, to);
    }   
    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.init = function() 
    {
	  var rows = document.getElementById(tableName).rows;
	
 	  var records = (rows.length - 1); 
	  this.pages = Math.ceil(records / itemsPerPage);

	  this.inited = true;
    }
    this.showPageNav = function(pagerName, positionHeaderId, positionFooterId) 
    {
	
   	    if (! this.inited) 
   	    {
    		alert("not inited");
    		return;
    	}
	    this.positionHeaderId = positionHeaderId;
	    this.positionFooterId= positionFooterId;
	    this.pagerName = pagerName;
    	var elementHeader = document.getElementById(positionHeaderId);
	    var elementFooter = document.getElementById(positionFooterId);
	    var pagerHtml = '<a onmouseover=\'this.style.cursor="pointer";\' onclick="' + pagerName + '.prev();javascript:scroll(0,0);" class="pg-normal"> &lt;&lt; </a>  ';
        //for (var page = 1; page <= this.pages; page++) 
        //   pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');javascript:scroll(0,0);">' + page + '</span>  ';
       
	    pagerHtml += '<a  class="pg-normal" >' + this.currentPage + ' of</a> ';
        pagerHtml += '<a onmouseover=\'this.style.cursor="pointer";\' id="pg' + Math.round(this.pages / 2)  + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + Math.round(this.pages / 2) + ');javascript:scroll(0,0);">' + Math.round(this.pages / 2) + '</a>  ';
        pagerHtml += '<a onmouseover=\'this.style.cursor="pointer";\' onclick="'+pagerName+'.next();javascript:scroll(0,0);" class="pg-normal"> &gt;&gt;</a>'; 
         
	    elementHeader.innerHTML = pagerHtml;
	    elementFooter.innerHTML = pagerHtml;
    }
    this.sync = function(positionId) 
    {
    	alert("Hi in Sync");
    }
}