Index: main/trunk/model-cols-dev/peijones/transform/pages/about.xsl
===================================================================
--- main/trunk/model-cols-dev/peijones/transform/pages/about.xsl	(revision 24730)
+++ main/trunk/model-cols-dev/peijones/transform/pages/about.xsl	(revision 24764)
@@ -14,5 +14,6 @@
 		and if some services are available then create a list
 		of links for each service within a <ul id="servicelist"> element.-->
-	<table><tbody><tr><td style="width:60%;"><gslib:collectionDescriptionTextAndServicesLinks/></td>
+	<table><tbody>
+	<tr><td style="width:60%;"><gslib:collectionDescriptionTextAndServicesLinks/></td>
 	<td>
 	
@@ -22,4 +23,158 @@
 <script language="javascript" type="text/javascript">
 <xsl:text disable-output-escaping="yes">
+
+	var Book_Image_Sources = new Array();
+	var Book_Image_Width=200;
+	var Book_Image_Height=280;
+	var Book_Border=true;
+	var Book_Border_Color="gray";
+	var Book_Speed=15;
+	var Book_NextPage_Delay=1500; //1 second=1000
+	var Book_Vertical_Turn=0;
+
+	var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
+	var B_MSz,B_Stppd=false;B_Pre_Img=new Array();
+
+	function ImageBook()
+	{
+		if(document.getElementById)
+		{
+			for(i=0;i&lt;Book_Image_Sources.length;i+=1)
+			{
+				B_Pre_Img[i]=new Image();
+				B_Pre_Img[i].src=Book_Image_Sources[i];
+			}
+			
+			Book_Div=document.getElementById("Book");
+			B_LI=document.createElement("img");Book_Div.appendChild(B_LI);	
+			B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
+			B_MI=document.createElement("img");Book_Div.appendChild(B_MI);	
+			
+			B_LI.style.position = B_MI.style.position = B_RI.style.position = "absolute";
+			
+			B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
+			
+			B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:-Book_Image_Height/3)+"px";
+			B_LI.style.left=0+"px";
+			B_MI.style.top=-Book_Image_Height/3+"px";
+			B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
+			B_RI.style.top=-Book_Image_Height/3+"px";
+			B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
+			
+			B_LI.style.height=Book_Image_Height+"px";
+			B_MI.style.height=Book_Image_Height+"px";
+			B_RI.style.height=Book_Image_Height+"px";
+			B_LI.style.width=Book_Image_Width+"px";
+			B_MI.style.width=Book_Image_Width+"px";
+			B_RI.style.width=Book_Image_Width+"px";
+			
+			if(Book_Border)
+			{
+				B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
+				B_LI.style.borderWidth=1+"px";
+				B_MI.style.borderWidth=1+"px";
+				B_RI.style.borderWidth=1+"px";
+				B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color
+			}
+			
+			B_LI.src=B_Pre_Img[0].src;
+			B_LI.lnk=Book_Image_Sources[1];
+			B_MI.src=B_Pre_Img[2].src;
+			B_MI.lnk=Book_Image_Sources[3];
+			B_RI.src=B_Pre_Img[4].src;
+			B_RI.lnk=Book_Image_Sources[5];
+			B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
+			B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
+			B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
+			BookImages()
+		}
+	}
+
+	function BookImages(){
+		if(!B_Stppd)
+		{
+			if(Book_Vertical_Turn)
+			{
+				B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
+				MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
+				B_MI.style.top=MidOffset+"px";
+				B_MI.style.height=B_MSz+"px"
+			}
+			else
+			{	
+				B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
+				MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
+				B_MI.style.left=MidOffset+"px";
+				B_MI.style.width=B_MSz+"px"
+			}
+			B_Angle+=Book_Speed/720*Math.PI;
+			if(B_Angle&gt;=Math.PI/2&amp;&amp;B_Direction)
+			{
+				B_Direction=0;
+				if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
+				B_MI.src=B_Pre_Img[B_CrImg].src;
+				B_MI.lnk=Book_Image_Sources[B_CrImg];
+				B_CrImg+=1
+			}
+			if(B_Angle&gt;=Math.PI)
+			{
+				B_Direction=1;
+				B_TI=B_LI;
+				B_LI=B_MI;
+				B_MI=B_TI;
+				if(Book_Vertical_Turn)B_MI.style.top=0+"px";
+				else B_MI.style.left=Book_Image_Width+1+"px";			
+				B_MI.src=B_RI.src;
+				B_MI.lnk=B_RI.lnk;
+
+				setTimeout("Book_Next_Delay()",Book_NextPage_Delay)
+			}
+			else 
+			{
+				setTimeout("BookImages()",50)
+			}
+		}
+		else 
+		{
+			setTimeout("BookImages()",50)
+		}
+	}
+
+	function Book_Next_Delay()
+	{
+		if(B_CrImg==Book_Image_Sources.length)
+		{
+			B_CrImg=0;
+		}
+
+		B_RI.src=B_Pre_Img[B_CrImg].src;
+		B_RI.lnk=Book_Image_Sources[B_CrImg];
+		B_MI.style.zIndex=2;
+		B_LI.style.zIndex=1;
+		B_Angle=0;
+		B_CrImg+=1;
+		
+		setTimeout("BookImages()",50)
+	}
+
+	function B_LdLnk()
+	{
+		if(this.lnk)
+		{
+			window.location.href=this.lnk
+		}
+	}
+	
+	function B_Stp()
+	{
+		B_Stppd=true;
+		this.style.cursor=this.lnk?"pointer":"default"
+	}
+	
+	function B_Rstrt()
+	{
+		B_Stppd=false
+	}
+	
 
   var collageDelayMsec = 2000;
@@ -45,5 +200,4 @@
         var j = (colframeNum+1+i) % numCollageImages;
 
-		console.log("j = " + j);
         var zindex = collagelet[j].style.zIndex;
 		if (zindex &gt; 0) {
@@ -147,18 +301,17 @@
 
 
-	<div id="collagewrapper"  
-		style="background: #ffffd0; 
-			width: 600px;
-			height: 500px;
-            position: relative; left: 0px; top: 0px;">
+	<div id="collagewrapper" style="background: #ffffd0; width: 600px; height: 500px; position: relative; left: 0px; top: 0px;"><xsl:text> </xsl:text>
 	</div>
-		
-	
-	</td></tr></tbody></table>
+
+	<div id="Book" style="position:relative;">
+		<img src="placeholder.png" width="404"><xsl:text> </xsl:text></img>
+	</div>
+	
+	</td></tr>
+	<tr><td><button id="switchImageDisplay" style="display:none; float:right;">Flip Photos</button></td></tr>
+	</tbody></table>
 
 	<script type="text/javascript">
 <xsl:text disable-output-escaping="yes">
-
-	var Book_Image_Sources = new Array();
 
 function getImages()
@@ -186,6 +339,28 @@
 			if(Book_Image_Sources.length &gt; 0)
 			{
+				var button = document.getElementById("switchImageDisplay");
+				var BookDiv = document.getElementById("Book");
+				var CollDiv = document.getElementById("collagewrapper");
+
+				button.style.display = "block";
+				button.onclick = function()
+				{
+					if(button.innerHTML == "Flip Book")
+					{
+						BookDiv.style.display = "block";
+						CollDiv.style.display = "none";
+						button.innerHTML = "Collage";
+					}
+					else
+					{
+						BookDiv.style.display = "none";
+						CollDiv.style.display = "block";
+						button.innerHTML = "Flip Book";
+					}
+				}
 				initCollage();
 				collageNextImage(1);
+				ImageBook();
+				BookDiv.style.display = "none";
 			}
 		},
Index: main/trunk/model-cols-dev/peijones/transform/pages/document.xsl
===================================================================
--- main/trunk/model-cols-dev/peijones/transform/pages/document.xsl	(revision 24730)
+++ main/trunk/model-cols-dev/peijones/transform/pages/document.xsl	(revision 24764)
@@ -35,4 +35,6 @@
 		<script type="text/javascript" src="sites/localsite/collect/peijones/js/documentmaker/PhotoNotes-1.5.js"><xsl:text> </xsl:text></script>
 		<link rel="stylesheet" type="text/css" href="sites/localsite/collect/peijones/style/PhotoNotes-1.5.css"/>
+		
+		<!--
 		<div class="Photo fn-container" id="PhotoContainer">
 			<img src="sites/localsite/collect/peijones/images/photo/0_PAColl-0671-01korokijones.jpg" />
@@ -40,4 +42,6 @@
 
 		<input type="button" value="Tag Photo!" style="margin-left:30px;" onclick="AddNote();" />
+		-->
+		
 		<script type="text/javascript">
 			<xsl:text disable-output-escaping="yes">
@@ -144,5 +148,5 @@
                     newNote.Select();
                 }
-				//window.onload = function(){getNotes(); readyImagesForZoom();};
+				window.onload = function(){getNotes(); readyImagesForZoom(); initAnnotator();};
 			</xsl:text>
 		</script>
