$(document).ready(function(){

 var strCtr = $(".middle_col");
 var miniaturesQty = $("#mini li").length;
 var maxMiniatures = 9;	
 var pages = Math.ceil(miniaturesQty/maxMiniatures);
 var pagesObj = strCtr.find("div#str").eq(0);
 var pageNo = "0";
 var _pageNo = new Number();
 var _pageNoRegExp = new RegExp();
 
 $("#mini li").hide();
 $(".press_note").hide();

 function showPage(){
   
   if(pages<=1){
	for(var i=0;i<miniaturesQty;i++){
	 if(i >= (maxMiniatures*_pageNo) && i<((maxMiniatures*(_pageNo+1)))){
      $("#mini li").eq(i).show();
	 }
    }    
   }
   
   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();

   $("#mini li").hide();

   for(var i=0;i<miniaturesQty;i++){
	if(i >= (maxMiniatures*_pageNo) && i<((maxMiniatures*(_pageNo+1)))){
     $("#mini li").eq(i).show();
	}
   }
 
   strCtr.append(pagesHTML);
  
   pagesObj = strCtr.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();
 
 $("#mini li a").eq(0).addClass("active");
 $(".press_note").eq(0).show();
 $("#mini li a").click(function(event){
   event.preventDefault();
   $(".press_note").hide();
   $("#mini li a").removeClass("active");
   $(this).addClass("active");
   var noteNo = $("#mini li a").index(this);
   $(".press_note").eq(noteNo).show();
 });
 
});