$(document).ready(function(){

 var pageRight = $(".right_col");
 var contentCtr = $("#contentCtr");
 var content = $(".content");	
 var pages = Math.ceil(content.height()/contentCtr.height());
 var pagesObj = pageRight.find("div#str").eq(0);
 var pageNo = "0";
 var _pageNo = new Number();
 var _pageNoRegExp = new RegExp();

 function showPage(){
   
   if(pages<2) return;
   
   _pageNoRegExp = /([0-9]+)/g;
   _pageNo = parseInt(pageNo.match(_pageNoRegExp));
 
   var pagesHTML = '<div id="str"><ul style="width: '+(pages*21)+'px">';
   for(var i=0;i<pages;i++){
    if(i==_pageNo) {pagesHTML += '<li id="str'+i+'" class="current"></li>'}
	else {pagesHTML += '<li id="str'+i+'"></li>'}
   }
   pagesHTML += '</ul></div>';
   pagesObj.remove();
   pageRight.append(pagesHTML);
   
   content.animate({ top: (-1)*(_pageNo*contentCtr.height())+'px' }, 500);
   
   pagesObj = pageRight.find("div#str").eq(0);
   pagesObj.find("li[class!='current']").hover(
	function(){
	 $(this).addClass('hover');
	},
	function(){
 	 $(this).removeClass('hover');
	}
   );
   pagesObj.find("li[class!='current']").click(function(){
    pageNo = $(this).attr("id").toString();
	showPage();
   });
   
 }

 showPage();

});