// set constants
   var $pageheight = 189; // the single page height we're using
   var $pagewidth = 146; // the single page width we're using  

   var $pageYpos = 0; // the current Y position of our  background-image (in both pages)
   
// When the page is ready  
   $(document).ready(function(){
	/* things in here happen as soon the document is ready */
	 		/* left page turner */
	  $("#leftpage").click( function() { 
	  		$pageYpos = $pageYpos + $pageheight;
	  		$("#leftpage")
				.css("background-position", "0px "+$pageYpos+"px");	

			$("#flip")
				.css("background-position", "top right");	
			setTimeout ('$("#flip").css("background-position", "top center");', 200);
			setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);			
			  
		}); // close leftpage click function	
			   
	  /* right page turner */
	  $("#rightpage").click( function() { 
	  		$pageYpos = $pageYpos - $pageheight;  // note minus page height 
	  		$("#rightpage")
				.css("background-position", "0px "+$pageYpos+"px");	

			$("#flip")
				.css("background-position", "top left");	
			setTimeout ('$("#flip").css("background-position", "top center");', 200);
			setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);			
			  
		}); // close rightpage click function	
   });	  // close doc ready