Index: /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak
===================================================================
--- /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak	(revision 24729)
+++ /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak	(revision 24730)
@@ -75,5 +75,5 @@
     </browse>
     <display>
-        <format><gsf:option name="TOC" value="false"/><xsl:template match="documentNode" mode="document"><h3><gsf:metadata name="ex.Title"/></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">    <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>
     </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 24729)
+++ /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml	(revision 24730)
@@ -56,4 +56,5 @@
             <plugin name="NulPlugin"/>
             <plugin name="OAIPlugin"/>
+            <plugin name="HTMLImagePlugin"/>
             <plugin name="MetadataXMLPlugin"/>
             <plugin name="ArchivesInfPlugin"/>
@@ -75,68 +76,155 @@
     </browse>
     <display>
-        <format><gsf:option name="TOC" value="false"/>
-		<xsl:template name="additionalHeaderContent">
-			<script type="text/javascript" src="interfaces/{$interface_name}/js/jquery-1.4.2.js"><xsl:text> </xsl:text></script>
-			<script type="text/javascript" src="sites/localsite/collect/peijones/js/documentmaker/zoomer.jquery.js"><xsl:text> </xsl:text></script>
-			<link rel="stylesheet" type="text/css" href="sites/localsite/collect/peijones/style/style.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 name="gsimg.photoNote" multiple="true" 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>   
-	
-	</display>
+        <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()      
+						{       
+							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>   -->
+				<script text="text/javascript">
+					<xsl:text disable-output-escaping="yes">
+						function init()
+						{
+							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("Bloggs");
+							}
+							});
+						}
+						window.onload = init;
+					</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>
+    </display>
     <replaceListRef id="gs2-standard"/>
     <replaceListRef id="gs2-image"/>
Index: /main/trunk/model-cols-dev/peijones/transform/pages/document.xsl
===================================================================
--- /main/trunk/model-cols-dev/peijones/transform/pages/document.xsl	(revision 24729)
+++ /main/trunk/model-cols-dev/peijones/transform/pages/document.xsl	(revision 24730)
@@ -144,5 +144,5 @@
                     newNote.Select();
                 }
-				window.onload = function(){getNotes(); readyImagesForZoom();};
+				//window.onload = function(){getNotes(); readyImagesForZoom();};
 			</xsl:text>
 		</script>
