//var arr=[1,2,3,4,5,6,7,8];
		var sec1=new Pager('paging-display0',36);
		var sec2=new Pager('paging-display1',36);
		var sec3=new Pager('paging-display2',36);
		var sec4=new Pager('paging-display3',36);
		var arr_page= new Array(sec1,sec2,sec3,sec4);
		var arr_page_s= new Array('sec1','sec2','sec3','sec4');

function addPaging(i,pos){
	arr_page[i].init(); 			
	arr_page[i].showPageNav(arr_page_s[i],pos); 
	arr_page[i].showPage(1);
}		

function Pager(div_id, itemsPerPage) {
    this.div_id = div_id;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;
    
    this.showRecords = function(from, to) {        
        var p= document.getElementById(div_id);
		//alert(tag_div.length);
		if(p){
			var tag_div= p.getElementsByTagName("div");
			for(var i= 4; i<tag_div.length; i++){
				if(i < from || i > to){
					tag_div[i].style.display= 'none';
				} else{
					tag_div[i].style.display='block';
				}
			}
		}
		//alert(tag_div.length);
    }
    
    this.showPage = function(pageNumber) {
    	if (! this.inited) {
    		alert("not inited");
    		return;
		}
		var oldPageAnchor = document.getElementById(this.div_id+'-'+this.currentPage);
        oldPageAnchor.className = 'pg-normal';
        this.currentPage = pageNumber;   
		var newPageAnchor = document.getElementById(this.div_id+'-'+this.currentPage);
        newPageAnchor.className = 'pg-selected';
		var allPageAnchor = document.getElementById(this.div_id+'-viewall');
        allPageAnchor.className = 'pg-viewall';
		
	var nextPageAnchor = document.getElementById(this.div_id+'-next');
		if(this.currentPage == this.pages){
			nextPageAnchor.className = 'pg-next-prev';
		}
		else{
			nextPageAnchor.className = 'pg-next-prev-normal';
		}
		
		var prevPageAnchor = document.getElementById(this.div_id+'-prev');
		
		if(this.currentPage == 1){
			prevPageAnchor.className = 'pg-next-prev';
		}
		else{
			prevPageAnchor.className = 'pg-next-prev-normal';
		}
        var from = (pageNumber - 1) * itemsPerPage + 4;
        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.viewall = function(){
		var p= document.getElementById(div_id);
		var PageAnchor = document.getElementById(this.div_id+'-'+this.currentPage);
        PageAnchor.className = 'pg-normal';
		
		var allPageAnchor = document.getElementById(this.div_id+'-viewall');
        allPageAnchor.className = 'pg-viewall-selected';
		
		var nextPageAnchor = document.getElementById(this.div_id+'-next');
		nextPageAnchor.className = 'pg-next-prev';
		
		var prevPageAnchor = document.getElementById(this.div_id+'-prev');
		prevPageAnchor.className = 'pg-next-prev';
		
		var tag_div= p.getElementsByTagName("div");
        var records = (tag_div.length - 1); 
		this.showRecords(1,records);
	}
	
    this.init = function() {
        var p= document.getElementById(div_id);
		var tag_div= p.getElementsByTagName("div");
        var records = (tag_div.length - 4); 
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }

    this.showPageNav = function(pagerName, positionId) {
    	if (! this.inited) {
    		alert("not inited");
    		return;
    	}
    	var element = document.getElementById(positionId);
    	var pagerHtml = '<span id="'+this.div_id +'-viewall" onclick="' + pagerName + '.viewall();" class="pg-viewall">  View All </span> ';
    	pagerHtml += '<span id="'+this.div_id +'-prev" onclick="' + pagerName + '.prev();">|  Previous </span> | ';
        for (var page = 1; page <= this.pages; page++) 
            pagerHtml += '<span id="'+this.div_id +'-' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
        pagerHtml += '<span id="'+this.div_id +'-next" onclick="'+pagerName+'.next();"> Next </span>';            
        
        element.innerHTML = pagerHtml;
    }
}