Index: /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak
===================================================================
--- /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak	(revision 24768)
+++ /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak	(revision 24769)
@@ -56,4 +56,5 @@
             <plugin name="NulPlugin"/>
             <plugin name="OAIPlugin"/>
+            <plugin name="HTMLImagePlugin"/>
             <plugin name="MetadataXMLPlugin"/>
             <plugin name="ArchivesInfPlugin"/>
@@ -75,5 +76,186 @@
     </browse>
     <display>
-        <format><gsf:option name="TOC" value="false"/>   <xsl:template name="additionalHeaderContent">    <script src="interfaces/{$interface_name}/js/jquery-1.4.2.js" type="text/javascript"><xsl:text> </xsl:text></script>    <script src="sites/localsite/collect/peijones/js/documentmaker/zoomer.jquery.js" type="text/javascript"><xsl:text> </xsl:text></script>    <link href="sites/localsite/collect/peijones/style/style.css" rel="stylesheet" type="text/css"/>    <script type="text/javascript">     <xsl:text disable-output-escaping="yes">      function readyImagesForZoom()      {       document.getElementById("noZoom").style.display = "none";       document.getElementById("wrap").style.display = "";       var smallImageDiv = document.getElementById("small");       var smallImage = smallImageDiv.getElementsByTagName("img")[0];       smallImageDiv.style.width = smallImage.clientWidth + "px";       smallImageDiv.style.height = smallImage.clientHeight + "px";       var multiplier = largeImageHeight / smallImage.clientHeight;       $("#wrap").anythingZoomer({        expansionSize:50,        speedMultiplier:multiplier       });      }            function addZoom()      {       var wrapper = document.getElementById("wrap");       var noZoom = document.getElementById("noZoom");              noZoom.style.display = "none";       wrapper.style.display = "block";              var option = document.getElementById("zoomOption");       option.setAttribute("onclick", "removeZoom();");      }            function removeZoom()      {       var wrapper = document.getElementById("wrap");       var noZoom = document.getElementById("noZoom");              wrapper.style.display = "none";       noZoom.style.display = "block";              var option = document.getElementById("zoomOption");       option.setAttribute("onclick", "addZoom();");      }     </xsl:text>    </script>   </xsl:template>   <xsl:template match="documentNode" mode="document">   <gsf:variable-struct name="photoNotes"><gsf:metadata multiple="true" name="gsimg.photoNote" separator=", "/></gsf:variable-struct>   <h3>   <gsf:choose-metadata>     <gsf:metadata name="dc.Title"/>     <gsf:metadata name="ex.Title"/>   </gsf:choose-metadata>     </h3>   <xsl:variable name="imageWidth"><gsf:metadata name="ImageWidth"/>   </xsl:variable><xsl:variable name="imageHeight"><gsf:metadata name="ImageHeight"/>   </xsl:variable><xsl:variable name="screenImageWidth">   <gsf:metadata name="ScreenWidth"/>   </xsl:variable><xsl:variable name="screenImageHeight"><gsf:metadata name="ScreenHeight"/></xsl:variable><script type="text/javascript"><xsl:text>largeImageHeight =</xsl:text><xsl:value-of select="$imageHeight"/><xsl:text>;</xsl:text><xsl:text>largeImageWidth =</xsl:text><xsl:value-of select="$imageWidth"/><xsl:text>;</xsl:text></script><div id="noZoom" style="display:block;"><gsf:metadata name="screenicon"/></div><div id="wrap" style="display:none"><div id="small" style="width: {$screenImageWidth}; height: {$screenImageHeight};"><gsf:metadata name="screenicon"/></div><div id="mover"><div id="overlay"><xsl:text/></div><div id="large"><img style="width: {$imageWidth}; height: {$imageHeight};"><xsl:attribute name="src"><xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>/index/assoc/<gsf:metadata name="assocfilepath"/>/<gsf:metadata name="srclinkFile"/></xsl:attribute></img></div></div></div></xsl:template>    </format>
+        <format>
+			<gsf:option name="TOC" value="false"/>   
+			<xsl:template name="additionalHeaderContent">
+				<!-- jQuery must be included before Annotator -->
+				<script src="sites/localsite/collect/peijones/js/annotator/lib/vendor/jquery.js"><xsl:text> </xsl:text></script>
+
+				<!-- If you're sure your users will only be using browsers modern
+					 enough to have their own JSON.parse and JSON.stringify
+					 implementations you can skip this -->
+				<script src="sites/localsite/collect/peijones/js/annotator/lib/vendor/json2.js"><xsl:text> </xsl:text></script>
+
+				<!-- The main Annotator script -->
+				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.min.js"><xsl:text> </xsl:text></script>
+
+				<!-- Annotator's styling and images -->
+				<link rel="stylesheet" type="text/css" href="sites/localsite/collect/peijones/js/annotator/pkg/annotator.min.css"/>
+
+				<!-- The following plugins are entirely optional -->
+
+				<!-- The Store plugin. Saves annotations to a remote backend -->
+				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.store.min.js"><xsl:text> </xsl:text></script>
+
+				<!-- The Auth plugin. Allows users of Annotator to authenticate themselves
+					 to the remote backend -->
+				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.auth.min.js"><xsl:text> </xsl:text></script>
+
+				<!-- The Permissions plugin. See who created which annotation and create
+					 annotations as a specified user -->
+				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.permissions.min.js"><xsl:text> </xsl:text></script>
+
+				<!-- The Tags plugin. Edit and display tag keywords on annotations -->
+				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.tags.min.js"><xsl:text> </xsl:text></script>
+
+				<!-- The Markdown plugin. Treat annotation text as Markdown -->
+				<script src="sites/localsite/collect/peijones/js/annotator/lib/vendor/showdown.js"><xsl:text> </xsl:text></script>
+				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.markdown.min.js"><xsl:text> </xsl:text></script>
+				
+				<!--<script src="interfaces/{$interface_name}/js/jquery-1.4.2.js" type="text/javascript"><xsl:text> </xsl:text></script>-->
+				<script src="sites/localsite/collect/peijones/js/documentmaker/zoomer.jquery.js" type="text/javascript"><xsl:text> </xsl:text></script>    <link href="sites/localsite/collect/peijones/style/style.css" rel="stylesheet" type="text/css"/>
+				<script type="text/javascript">
+					<xsl:text disable-output-escaping="yes">      
+						function readyImagesForZoom()      
+						{       
+							var noZoom = document.getElementById("noZoom");
+							var wrap = document.getElementById("wrap");
+							
+							if(!noZoom || !wrap)
+							{
+								return;
+							}
+							
+							noZoom.style.display = "none";
+							wrap.style.display = "";
+							var smallImageDiv = document.getElementById("small");
+							var smallImage = smallImageDiv.getElementsByTagName("img")[0];
+							smallImageDiv.style.width = smallImage.clientWidth + "px"; 
+							smallImageDiv.style.height = smallImage.clientHeight + "px";
+							var multiplier = largeImageHeight / smallImage.clientHeight;
+							$("#wrap").anythingZoomer({        
+								expansionSize:50,  
+								speedMultiplier:multiplier   
+							});      
+						}            
+						function addZoom()  
+						{    
+							var wrapper = document.getElementById("wrap");  
+							var noZoom = document.getElementById("noZoom"); 
+							
+							if(!noZoom || !wrapper)
+							{
+								return;
+							}
+							
+							noZoom.style.display = "none";  
+							wrapper.style.display = "block"; 
+							var option = document.getElementById("zoomOption");
+							option.setAttribute("onclick", "removeZoom();");  
+						}           
+						function removeZoom()
+						{
+							var wrapper = document.getElementById("wrap");
+							var noZoom = document.getElementById("noZoom");
+							
+							if(!noZoom || !wrapper)
+							{
+								return;
+							}
+							
+							wrapper.style.display = "none";
+							noZoom.style.display = "block";
+							var option = document.getElementById("zoomOption");
+							option.setAttribute("onclick", "addZoom();");
+						}     
+					</xsl:text>    
+				</script>
+				<script text="text/javascript">
+					<xsl:text disable-output-escaping="yes">
+						function initAnnotator()
+						{
+							jQuery(function ($) {
+							//alert(typeof $.fn.annotator);
+							if (typeof $.fn.annotator !== 'function') {
+								alert("Ooops! it looks like you haven't built the Annotator concatenation file. " +
+								"Either download a tagged release from GitHub, or modify the Cakefile to point " +
+								"at your copy of the YUI compressor and run `cake package`.");
+							} else {
+							// This is the important bit: how to create the annotator and add
+							// plugins
+							$('#gs-document-text').annotator()
+								.annotator('addPlugin', 'Permissions')
+								.annotator('addPlugin', 'Markdown')
+								//.annotator('addPlugin', 'Auth')
+								.annotator('addPlugin', 'Tags');
+
+							$('#gs-document-text').data('annotator').plugins['Permissions'].setUser("");
+							}
+							});
+						}
+					</xsl:text>
+				</script>
+			</xsl:template>
+			<xsl:template match="documentNode" mode="document">
+				<!-- Get the photo notes for this document node -->
+				<gsf:variable-struct name="photoNotes">
+					<gsf:metadata multiple="true" name="gsimg.photoNote" separator=", "/>
+				</gsf:variable-struct>
+				
+				<!-- Get details about the image for zooming -->
+				<h3>   
+					<gsf:choose-metadata>
+						<gsf:metadata name="dc.Title"/>
+						<gsf:metadata name="ex.Title"/>
+					</gsf:choose-metadata>
+				</h3>
+				<xsl:variable name="imageWidth">
+					<gsf:choose-metadata>
+						<gsf:metadata name="ImageWidth"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
+				</xsl:variable>
+				<xsl:variable name="imageHeight">
+					<gsf:choose-metadata>
+						<gsf:metadata name="ImageHeight"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
+				</xsl:variable>
+				<xsl:variable name="screenImageWidth">
+					<gsf:choose-metadata>
+						<gsf:metadata name="ScreenWidth"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
+				</xsl:variable>
+				<xsl:variable name="screenImageHeight">
+					<gsf:choose-metadata>
+						<gsf:metadata name="ScreenHeight"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
+				</xsl:variable>
+				<script type="text/javascript">
+					<xsl:text>largeImageHeight =</xsl:text><xsl:value-of select="$imageHeight"/><xsl:text>;</xsl:text>
+					<xsl:text>largeImageWidth =</xsl:text><xsl:value-of select="$imageWidth"/><xsl:text>;</xsl:text>
+				</script>
+				<div id="noZoom" style="display:block;">
+					<gsf:metadata name="screenicon"/>
+				</div>
+				<xsl:if test="$imageHeight != -1">
+					<div id="wrap" style="display:none">
+						<div id="small" style="width: {$screenImageWidth}; height: {$screenImageHeight};"><gsf:metadata name="screenicon"/></div>
+						<div id="mover">
+							<div id="overlay"><xsl:text/></div>
+							<div id="large">
+								<img style="width: {$imageWidth}; height: {$imageHeight};">
+									<xsl:attribute name="src">
+										<xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>/index/assoc/<gsf:metadata name="assocfilepath"/>/<gsf:metadata name="srclinkFile"/>
+									</xsl:attribute>
+								</img>
+							</div>
+						</div>
+					</div>
+				</xsl:if>	
+			</xsl:template>   
+		</format>
     </display>
     <replaceListRef id="gs2-standard"/>
Index: /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml
===================================================================
--- /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml	(revision 24768)
+++ /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml	(revision 24769)
@@ -113,50 +113,222 @@
 				<script src="sites/localsite/collect/peijones/js/annotator/pkg/annotator.markdown.min.js"><xsl:text> </xsl:text></script>
 				
+				<!-- Photo note scripts -->
+				<script type="text/javascript" src="sites/localsite/collect/peijones/js/documentmaker/BrowserDetect.js"><xsl:text> </xsl:text></script>
+				<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"/>
 				
-				
+				<!-- Zoom scripts -->
 				<!--<script src="interfaces/{$interface_name}/js/jquery-1.4.2.js" type="text/javascript"><xsl:text> </xsl:text></script>-->
 				<script src="sites/localsite/collect/peijones/js/documentmaker/zoomer.jquery.js" type="text/javascript"><xsl:text> </xsl:text></script>    <link href="sites/localsite/collect/peijones/style/style.css" rel="stylesheet" type="text/css"/>
-				<!--<script type="text/javascript">
-					<xsl:text disable-output-escaping="yes">      
+				<script type="text/javascript">
+					<xsl:text disable-output-escaping="yes">
+						_zoomEnabled = true;
 						function readyImagesForZoom()      
-						{       
-							document.getElementById("noZoom").style.display = "none";
-							document.getElementById("wrap").style.display = "";
+						{ 
+							var noZoom = document.getElementById("noZoom");
+							var wrap = document.getElementById("wrap");
+							if(!noZoom || !wrap)
+							{
+								return;
+							}
 							var smallImageDiv = document.getElementById("small");
 							var smallImage = smallImageDiv.getElementsByTagName("img")[0];
-							smallImageDiv.style.width = smallImage.clientWidth + "px"; 
-							smallImageDiv.style.height = smallImage.clientHeight + "px";
-							var multiplier = largeImageHeight / smallImage.clientHeight;
+							smallImageDiv.style.width = smallImageWidth + "px"; 
+							smallImageDiv.style.height = smallImageHeight + "px";
+							var multiplier = largeImageHeight / smallImageHeight;
 							$("#wrap").anythingZoomer({        
 								expansionSize:50,  
 								speedMultiplier:multiplier   
-							});      
+							});   	
+
+							noZoom.onclick = function(){addZoom();}
+							document.getElementById("overlay").onclick = function(){removeZoom();}							
+							
+							removeZoom();
 						}            
 						function addZoom()  
-						{    
+						{
+							if(!_zoomEnabled)
+							{
+								return;
+							}
+							
 							var wrapper = document.getElementById("wrap");  
 							var noZoom = document.getElementById("noZoom"); 
+							
+							if(!noZoom || !wrapper)
+							{
+								return;
+							}
+							
 							noZoom.style.display = "none";  
 							wrapper.style.display = "block"; 
 							var option = document.getElementById("zoomOption");
-							option.setAttribute("onclick", "removeZoom();");  
+							if(option)
+							{
+								option.setAttribute("onclick", "removeZoom();");  
+							}
 						}           
 						function removeZoom()
 						{
+							if(!_zoomEnabled)
+							{
+								return;
+							}
+						
 							var wrapper = document.getElementById("wrap");
 							var noZoom = document.getElementById("noZoom");
+							
+							if(!noZoom || !wrapper)
+							{
+								return;
+							}
+							
 							wrapper.style.display = "none";
 							noZoom.style.display = "block";
 							var option = document.getElementById("zoomOption");
-							option.setAttribute("onclick", "addZoom();");
-						}     
+							if(option)
+							{
+								option.setAttribute("onclick", "addZoom();");
+							}
+						}    
 					</xsl:text>    
-				</script>   -->
+				</script>
 				<script text="text/javascript">
 					<xsl:text disable-output-escaping="yes">
-						function init()
+						
+						var _posCount = 0;
+						var _notes;
+						function initNotes()
+						{
+							/* create the Photo Note Container */
+							_notes = new PhotoNoteContainer(document.getElementById("noZoom"));
+							getNotes();
+						}
+						
+						function deleteFunction(note)
+						{
+							var callback =
+							{
+								success: function(response)
+								{
+									var updateURL = gs.siteMetadata.siteURL.replace("8080","9090") + gs.xsltParams.library_name + "?a=s&amp;sa=c";
+								
+									var updateCallback = 
+									{
+										success: function(response){},
+										failed: function(){alert("Failed in deleteFunction() to update Greenstone server with: " + updateURL);}
+									};
+									
+			
+									YAHOO.util.Connect.asyncRequest("GET", updateURL, updateCallback);
+								},
+								failed: function(){ alert("Failed in deleteFunction() with note id: " + note.id)},
+							};
+							
+							var status = true;
+							
+							if (note &amp;&amp; note.id &amp;&amp; note.id &gt; 0) {
+								var metaposStr =  note.id - 1;
+							
+								var url = gs.siteMetadata.siteURL.replace("8080","9090") + "cgi-bin/metadata-server.pl?a=remove-metadata&amp;site=localsite&amp;c=" + gs.cgiParams.c + "&amp;d=" + gs.cgiParams.d + "&amp;metaname=gsimg.photoNote&amp;metapos=" + metaposStr;
+								YAHOO.util.Connect.asyncRequest("GET", url, callback);
+							}
+							else {
+								alert("Failed to find valid note data to delete");
+								status = false;
+							}
+							
+							return status;
+						}
+						
+						function saveFunction(note)
+						{
+							var callback = 
+							{
+								success: function(response)
+								{
+									var updateURL = gs.siteMetadata.siteURL.replace("8080","9090") + gs.xsltParams.library_name + "?a=s&amp;sa=c";
+								
+									var updateCallback = 
+									{
+										success: function(response){},
+										failed: function(reponse){ alert("Failed in saveFunction() to update Greenstone server with: " + updateURL);}
+									};
+									
+									
+									YAHOO.util.Connect.asyncRequest("GET", updateURL, updateCallback);
+								},
+								failed: function(reponse){ alert("Failed in saveFunction() with note id: " + note.id)},
+							};
+							
+							var jsonVal = '{"caption":"' + note.text + '", "area":{"x":' + note.rect.left + ', "y":' + note.rect.top + ', "width":' + note.rect.width + ', "height":' + note.rect.height + '}}';
+							var metaposStr = (note &amp;&amp; note.id &amp;&amp; note.id &gt; 0) ? note.id - 1 : _posCount;
+							
+							var saveURL = gs.siteMetadata.siteURL.replace("8080","9090") + "cgi-bin/metadata-server.pl?a=set-metadata&amp;site=localsite&amp;c=" + gs.cgiParams.c + "&amp;d=" + gs.cgiParams.d + "&amp;metaname=gsimg.photoNote&amp;metavalue=" + jsonVal + "&amp;metapos=" + metaposStr;
+							YAHOO.util.Connect.asyncRequest("GET", saveURL, callback);
+							
+							return 1;
+						}				
+						
+						function getNotes()
+						{
+							if(gs.variables.photoNotes == null || gs.variables.photoNotes == undefined)
+							{
+								console.log("No photo notes");
+								return;
+							}
+							
+							for(var i = 0; i &lt; gs.variables.photoNotes.length; i++)
+							{
+								var note = gs.variables.photoNotes[i];
+								if(!note)
+								{
+									continue;
+								}
+								var newNote = new PhotoNote(note.caption, i+1, new PhotoNoteRect(note.area.x,note.area.y,note.area.width,note.area.height));
+								newNote.onsave = saveFunction;
+								newNote.ondelete = deleteFunction;
+								_notes.AddNote(newNote);
+								_posCount++;
+							}
+							
+							addNoteOverAndOutHandlers();
+						}
+						
+						function AddNote()
+						{
+							var newNote = new PhotoNote('Add note text here...',_posCount+1,new PhotoNoteRect(10,10,50,50));
+							newNote.onsave = saveFunction;
+							newNote.ondelete = deleteFunction;
+							_notes.AddNote(newNote);
+							_posCount++;
+							
+							addNoteOverAndOutHandlers();
+							newNote.Select();
+						}
+						
+						function addNoteOverAndOutHandlers()
+						{
+							var divs = document.getElementsByTagName("DIV");
+							for(var i = 0; i &lt; divs.length; i++)
+							{
+								if(divs[i].getAttribute("class") &amp;&amp; divs[i].getAttribute("class").search("fn-area") != -1)
+								{
+									divs[i].onmouseover = function(){_zoomEnabled = false;}
+									divs[i].onmouseout = function(){_zoomEnabled = true;}
+								}
+							}
+						}
+						
+						window.onload = function(){initNotes(); readyImagesForZoom(); initAnnotator();};
+					</xsl:text>
+				</script>
+				<script text="text/javascript">
+					<xsl:text disable-output-escaping="yes">
+						function initAnnotator()
 						{
 							jQuery(function ($) {
-							alert(typeof $.fn.annotator);
+							//alert(typeof $.fn.annotator);
 							if (typeof $.fn.annotator !== 'function') {
 								alert("Ooops! it looks like you haven't built the Annotator concatenation file. " +
@@ -169,20 +341,21 @@
 								.annotator('addPlugin', 'Permissions')
 								.annotator('addPlugin', 'Markdown')
-								.annotator('addPlugin', 'Auth')
+								//.annotator('addPlugin', 'Auth')
 								.annotator('addPlugin', 'Tags');
 
-							$('#gs-document-text').data('annotator').plugins['Permissions'].setUser("Bloggs");
+							$('#gs-document-text').data('annotator').plugins['Permissions'].setUser("");
 							}
 							});
 						}
-						window.onload = init;
 					</xsl:text>
 				</script>
 			</xsl:template>
-			<!--
 			<xsl:template match="documentNode" mode="document">
+				<!-- Get the photo notes for this document node -->
 				<gsf:variable-struct name="photoNotes">
 					<gsf:metadata multiple="true" name="gsimg.photoNote" separator=", "/>
 				</gsf:variable-struct>
+				
+				<!-- Get details about the image for zooming -->
 				<h3>   
 					<gsf:choose-metadata>
@@ -192,37 +365,53 @@
 				</h3>
 				<xsl:variable name="imageWidth">
-					<gsf:metadata name="ImageWidth"/>   
+					<gsf:choose-metadata>
+						<gsf:metadata name="ImageWidth"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
 				</xsl:variable>
 				<xsl:variable name="imageHeight">
-					<gsf:metadata name="ImageHeight"/>
+					<gsf:choose-metadata>
+						<gsf:metadata name="ImageHeight"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
 				</xsl:variable>
 				<xsl:variable name="screenImageWidth">
-					<gsf:metadata name="ScreenWidth"/>
+					<gsf:choose-metadata>
+						<gsf:metadata name="ScreenWidth"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
 				</xsl:variable>
 				<xsl:variable name="screenImageHeight">
-					<gsf:metadata name="ScreenHeight"/>
+					<gsf:choose-metadata>
+						<gsf:metadata name="ScreenHeight"/> 
+						<gsf:default>-1</gsf:default>  						
+					</gsf:choose-metadata>
 				</xsl:variable>
 				<script type="text/javascript">
 					<xsl:text>largeImageHeight =</xsl:text><xsl:value-of select="$imageHeight"/><xsl:text>;</xsl:text>
 					<xsl:text>largeImageWidth =</xsl:text><xsl:value-of select="$imageWidth"/><xsl:text>;</xsl:text>
+					<xsl:text>smallImageHeight =</xsl:text><xsl:value-of select="$screenImageHeight"/><xsl:text>;</xsl:text>
+					<xsl:text>smallImageWidth =</xsl:text><xsl:value-of select="$screenImageWidth"/><xsl:text>;</xsl:text>
 				</script>
 				<div id="noZoom" style="display:block;">
 					<gsf:metadata name="screenicon"/>
 				</div>
-				<div id="wrap" style="display:none">
-					<div id="small" style="width: {$screenImageWidth}; height: {$screenImageHeight};"><gsf:metadata name="screenicon"/></div>
-					<div id="mover">
-						<div id="overlay"><xsl:text/></div>
-						<div id="large">
-							<img style="width: {$imageWidth}; height: {$imageHeight};">
-								<xsl:attribute name="src">
-									<xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>/index/assoc/<gsf:metadata name="assocfilepath"/>/<gsf:metadata name="srclinkFile"/>
-								</xsl:attribute>
-							</img>
+				<xsl:if test="$imageHeight != -1">
+					<div id="wrap" style="display:none">
+						<div id="small" style="width: {$screenImageWidth}; height: {$screenImageHeight};"><gsf:metadata name="screenicon"/></div>
+						<div id="mover">
+							<div id="overlay"><xsl:text> </xsl:text></div>
+							<div id="large">
+								<img style="width: {$imageWidth}; height: {$imageHeight};">
+									<xsl:attribute name="src">
+										<xsl:value-of disable-output-escaping="yes" select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']"/>/index/assoc/<gsf:metadata name="assocfilepath"/>/<gsf:metadata name="srclinkFile"/>
+									</xsl:attribute>
+								</img>
+							</div>
 						</div>
 					</div>
-				</div>
-				
-			</xsl:template>-->    
+					<input type="button" value="Tag Photo!" style="margin-left:30px;" onclick="AddNote();" />
+				</xsl:if>	
+			</xsl:template>   
 		</format>
     </display>
Index: /main/trunk/model-cols-dev/peijones/transform/pages/about.xsl
===================================================================
--- /main/trunk/model-cols-dev/peijones/transform/pages/about.xsl	(revision 24768)
+++ /main/trunk/model-cols-dev/peijones/transform/pages/about.xsl	(revision 24769)
@@ -309,5 +309,5 @@
 	
 	</td></tr>
-	<tr><td><button id="switchImageDisplay" style="display:none; float:right;">Flip Photos</button></td></tr>
+	<tr><td><button id="switchImageDisplay" style="display:none; float:right;">Flip Book</button></td></tr>
 	</tbody></table>
 
Index: /main/trunk/model-cols-dev/peijones/transform/pages/document.xsl
===================================================================
--- /main/trunk/model-cols-dev/peijones/transform/pages/document.xsl	(revision 24768)
+++ /main/trunk/model-cols-dev/peijones/transform/pages/document.xsl	(revision 24769)
@@ -31,124 +31,4 @@
 		
 			<script type="text/javascript" src="interfaces/{$interface_name}/js/document_scripts.js"><xsl:text> </xsl:text></script>
-			
-		<script type="text/javascript" src="sites/localsite/collect/peijones/js/documentmaker/BrowserDetect.js"><xsl:text> </xsl:text></script>
-		<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" />
-		</div>
-
-		<input type="button" value="Tag Photo!" style="margin-left:30px;" onclick="AddNote();" />
-		-->
-		
-		<script type="text/javascript">
-			<xsl:text disable-output-escaping="yes">
-				/* create the Photo Note Container */
-                var notes = new PhotoNoteContainer(document.getElementById('PhotoContainer'));
-                var posCount = 0;
-				
-				function deleteFunction(note)
-				{
-					var callback =
-					{
-						success: function(response)
-						{
-							var updateURL = gs.siteMetadata.siteURL.replace("8080","9090") + gs.xsltParams.library_name + "?a=s&amp;sa=c";
-						
-							var updateCallback = 
-							{
-								success: function(response){},
-								failed: function(){alert("Failed in deleteFunction() to update Greenstone server with: " + updateURL);}
-							};
-							
-	
-							YAHOO.util.Connect.asyncRequest("GET", updateURL, updateCallback);
-						},
-						failed: function(){ alert("Failed in deleteFunction() with note id: " + note.id)},
-					};
-					
-					var status = true;
-					
-					if (note &amp;&amp; note.id &amp;&amp; note.id &gt; 0) {
-						var metaposStr =  note.id - 1;
-					
-						var url = gs.siteMetadata.siteURL.replace("8080","9090") + "cgi-bin/metadata-server.pl?a=remove-metadata&amp;site=localsite&amp;c=" + gs.cgiParams.c + "&amp;d=" + gs.cgiParams.d + "&amp;metaname=gsimg.photoNote&amp;metapos=" + metaposStr;
-						YAHOO.util.Connect.asyncRequest("GET", url, callback);
-					}
-					else {
-						alert("Failed to find valid note data to delete");
-						status = false;
-					}
-					
-					return status;
-				}
-				
-                function saveFunction(note)
-				{
-					var callback = 
-					{
-						success: function(response)
-						{
-							var updateURL = gs.siteMetadata.siteURL.replace("8080","9090") + gs.xsltParams.library_name + "?a=s&amp;sa=c";
-						
-							var updateCallback = 
-							{
-								success: function(response){},
-								failed: function(reponse){ alert("Failed in saveFunction() to update Greenstone server with: " + updateURL);}
-							};
-							
-							
-							YAHOO.util.Connect.asyncRequest("GET", updateURL, updateCallback);
-						},
-						failed: function(reponse){ alert("Failed in saveFunction() with note id: " + note.id)},
-					};
-					
-					var jsonVal = '{"caption":"' + note.text + '", "area":{"x":' + note.rect.left + ', "y":' + note.rect.top + ', "width":' + note.rect.width + ', "height":' + note.rect.height + '}}';
-					var metaposStr = (note &amp;&amp; note.id &amp;&amp; note.id &gt; 0) ? note.id - 1 : posCount;
-					
-					var saveURL = gs.siteMetadata.siteURL.replace("8080","9090") + "cgi-bin/metadata-server.pl?a=set-metadata&amp;site=localsite&amp;c=" + gs.cgiParams.c + "&amp;d=" + gs.cgiParams.d + "&amp;metaname=gsimg.photoNote&amp;metavalue=" + jsonVal + "&amp;metapos=" + metaposStr;
-					YAHOO.util.Connect.asyncRequest("GET", saveURL, callback);
-					
-					return 1;
-				}				
-				
-				function getNotes()
-				{
-					if(gs.variables.photoNotes == null || gs.variables.photoNotes == undefined)
-					{
-						console.log("No photo notes");
-						return;
-					}
-					
-					for(var i = 0; i &lt; gs.variables.photoNotes.length; i++)
-					{
-						var note = gs.variables.photoNotes[i];
-						if(!note)
-						{
-							continue;
-						}
-						var newNote = new PhotoNote(note.caption, i+1, new PhotoNoteRect(note.area.x,note.area.y,note.area.width,note.area.height));
-						newNote.onsave = saveFunction;
-						newNote.ondelete = deleteFunction;
-						notes.AddNote(newNote);
-						posCount++;
-					}
-				}
-                
-                function AddNote()
-                {
-                    var newNote = new PhotoNote('Add note text here...',posCount+1,new PhotoNoteRect(10,10,50,50));
-					newNote.onsave = saveFunction;
-                    newNote.ondelete = deleteFunction;
-                    notes.AddNote(newNote);
-					posCount++;
-					
-                    newNote.Select();
-                }
-				window.onload = function(){getNotes(); readyImagesForZoom(); initAnnotator();};
-			</xsl:text>
-		</script>
 			
 			<!-- Adds the realistic books javascript if necessary ( *** in document-scripts.xsl *** ) -->
