function Pager(elementName, className) {
		this.elementName = elementName;
		this.className = className;
		// create an array of elements inside the elementName id tag
		var rowsAll = document.getElementById(elementName).getElementsByTagName('div');
		// create an empty array that will hold the filtered array. 
		var rows = new Array();
		// Get only the elements with a specific className found in rowsAll
			for (var e = 0; e < rowsAll.length; e++)
				if (rowsAll[e].className == className)
					rows[rows.length] = rowsAll[e];
		// get the lenght of the array
    var len = rows.length;
		// always start with the first page
    this.currentPage = 1;
		// the number of pages exacpt the active one
    this.pages = len-1;
		// hide the elements except the active one
    this.showRecords = function(from, to) {        
        for (var i = 0; i < len; i++) {
            if (i < from || i > to) {
				rows[i].style.display = 'none';
				rows[i].setAttribute("id", i);

			}
			else {
				rows[i].style.display = 'none';
				rows[i].setAttribute("id", "current");
				$(document).ready(function(){  
				      $("#current").fadeIn("slow");
				  });				
			}
        }
			parent.location='#top';
    }		
		/*this.showRecords = function(from, to) {        
        for (var i = 0; i < len; i++) {
            if (i < from || i > to)  
								rows[i].style.display = 'none';
            else
								rows[i].style.display = '';
        }
			parent.location='#top';
    }*/
		
		// show the page based on number
    this.showPage = function(pageNumber) {
				this.pageNumber = pageNumber;
			
        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';
				
						// if no prev page is found change the class
						var oldPrev = document.getElementById('prevpage');				
						if (pageNumber==0){      	
							oldPrev.className = 'nopage';
						}
						else{
							oldPrev.className = 'pg-normal';
						}
						
						// if no next page is found change the class
						var oldNext = document.getElementById('nextpage');				
						if (pageNumber==this.pages){
							oldNext.className = 'nopage';	
						}
						else{
							oldNext.className = 'pg-normal';	
						}
					
        var from = pageNumber;
        var to = pageNumber;
        this.showRecords(from, to);
    }   
    // previous
    this.prev = function() {
        if (this.currentPage >= 1)
            this.showPage(this.currentPage - 1);
    }
    // next
    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }                        
		// build the page navigation
    this.showPageNav = function(pagerName, positionId) {
			var	counter = 1; // for proper naming at display
			var element = document.getElementById(positionId); 
			var pagerHtml = '<ul><li><a id="prevpage" onclick="' + pagerName + '.prev();" class="pg-normal">&#171 prev</a></li>';
  	      for (var page = 0; page <= this.pages; page++){
    	        pagerHtml += '<li><a id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + counter + '</a></li>';
							counter++;
							}
       pagerHtml += '<li><a id="nextpage" onclick="'+pagerName+'.next();" class="pg-normal">next &#187;</a><li></ul><div class="clearfloat"><!-- --></div>';
       pagerHtml += '<div class="clearfloat"><!-- --></div>';	// fix for the Guillotine bug in IE
       element.innerHTML = pagerHtml;
    }
}