function VirtualScrollbar(){
  
    var scrollHeight = parseInt($('typography').scrollHeight);
    var height =  parseInt($('typographyWrapper').getHeight());
    var numberOfPages = Math.ceil(scrollHeight / height);
    var currentPage = 1;
    
    this.correctHeight = function(){
        $('typography').setStyle('height', height * numberOfPages + "px");
    }
    
    this.displayPageNumbers = function(){
        if (numberOfPages > 1) {
            $('pageNavigator').innerHTML = "";
            
            for (i = 1; i <= numberOfPages; i++) {
                if(i == currentPage)
                $('pageNavigator').innerHTML += "<a href=\"javascript:virtualScrollbar.showPage(" + i + ");\" class=\"active\">" + i + "</a>";
                else
                $('pageNavigator').innerHTML += "<a href=\"javascript:virtualScrollbar.showPage(" + i + ");\">" + i + "</a>";
            }
        }
    }
    
    this.showPage = function(page){
        //alert(page);
        myEffect.start(0, (page - 1) * height);
        currentPage = page;
        this.displayPageNumbers(); 
    }
    
    this.init = function(){
        $('pageNavigator').innerHTML = "";
        $('typography').setStyle('height',"auto");
        
        scrollHeight = parseInt($('typography').scrollHeight);
        height =  parseInt($('typographyWrapper').getHeight());
        numberOfPages = Math.ceil(scrollHeight / height);
        currentPage = 1;
        
        //alert(scrollHeight + "-" + height + "-" + numberOfPages);
        
        virtualScrollbar.displayPageNumbers(); 
        virtualScrollbar.correctHeight();
    }
    
}



var virtualScrollbar = new VirtualScrollbar();

window.addEvent('domready', function(){
  
    virtualScrollbar.init();
    
    myEffect = new Fx.Scroll('typographyWrapper', {
        duration: 200,
        link: 'cancel',
        transition: Fx.Transitions.Expo.easeOut,
        offset: {'x': 0,'y': 0},
		onComplete: function(){
		}
    });
    
});