Index: /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak
===================================================================
--- /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak	(revision 24783)
+++ /main/trunk/model-cols-dev/peijones/etc/collectionConfig.bak	(revision 24784)
@@ -113,32 +113,45 @@
 				<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">      
+					<xsl:text disable-output-escaping="yes">
+						_zoomEnabled = true;
 						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;
+							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"); 
@@ -152,8 +165,16 @@
 							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");
@@ -167,7 +188,140 @@
 							noZoom.style.display = "block";
 							var option = document.getElementById("zoomOption");
-							option.setAttribute("onclick", "addZoom();");
-						}     
+							if(option)
+							{
+								option.setAttribute("onclick", "addZoom();");
+							}
+						}    
 					</xsl:text>    
+				</script>
+				<script text="text/javascript">
+					<xsl:text disable-output-escaping="yes">
+						
+						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">
@@ -197,12 +351,13 @@
 				</script>
 			</xsl:template>
-			<xsl:template match="documentNode" mode="document">
+			
+			<!--<xsl:template match="documentNode" mode="document">-->
 				<!-- Get the photo notes for this document node -->
-				<gsf:variable-struct name="photoNotes">
+				<!--<gsf:variable-struct name="photoNotes">
 					<gsf:metadata multiple="true" name="gsimg.photoNote" separator=", "/>
-				</gsf:variable-struct>
+				</gsf:variable-struct>-->
 				
 				<!-- Get details about the image for zooming -->
-				<h3>   
+				<!--<h3>   
 					<gsf:choose-metadata>
 						<gsf:metadata name="dc.Title"/>
@@ -237,4 +392,6 @@
 					<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;">
@@ -245,5 +402,5 @@
 						<div id="small" style="width: {$screenImageWidth}; height: {$screenImageHeight};"><gsf:metadata name="screenicon"/></div>
 						<div id="mover">
-							<div id="overlay"><xsl:text/></div>
+							<div id="overlay"><xsl:text> </xsl:text></div>
 							<div id="large">
 								<img style="width: {$imageWidth}; height: {$imageHeight};">
@@ -255,6 +412,8 @@
 						</div>
 					</div>
+					<input type="button" value="Tag Photo!" style="margin-left:30px;" onclick="AddNote();" />
 				</xsl:if>	
-			</xsl:template>   
+			</xsl:template>-->
+			
 		</format>
     </display>
Index: /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml
===================================================================
--- /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml	(revision 24783)
+++ /main/trunk/model-cols-dev/peijones/etc/collectionConfig.xml	(revision 24784)
@@ -73,9 +73,75 @@
             <option name="-buttonname" value="Source"/>
         </classifier>
-        <format><gsf:template match="documentNode"><td valign="top"><gsf:link type="document"><gsf:icon type="document"/></gsf:link></td><td valign="top"><gsf:link type="source"><gsf:choose-metadata><gsf:metadata name="thumbicon"/><gsf:metadata name="srcicon"/></gsf:choose-metadata></gsf:link></td><td valign="top"><gsf:choose-metadata><gsf:metadata name="dc.Title"/><gsf:metadata name="exp.Title"/><gsf:metadata name="Title"/><gsf:default>Untitled</gsf:default></gsf:choose-metadata><gsf:switch><gsf:metadata name="Source"/><gsf:when test="exists"><br/><i>(<gsf:metadata name="Source"/>)</i></gsf:when></gsf:switch></td></gsf:template><gsf:template match="classifierNode"><td valign="top"><gsf:link type="classifier"><gsf:icon type="classifier"/></gsf:link></td><td valign="top"><gsf:metadata name="srclink"/><gsf:choose-metadata><gsf:metadata name="thumbicon"/><gsf:metadata name="srcicon"/></gsf:choose-metadata><gsf:metadata name="/srclink"/></td><td valign="top"><gsf:choose-metadata><gsf:metadata name="dc.Title"/><gsf:metadata name="exp.Title"/><gsf:metadata name="Title"/><gsf:default>Untitled</gsf:default></gsf:choose-metadata><gsf:switch><gsf:metadata name="Source"/><gsf:when test="exists"><br/><i>(<gsf:metadata name="Source"/>)</i></gsf:when></gsf:switch></td></gsf:template><gsf:template match="classifierNode" mode="horizontal"><gsf:link type="horizontal"><gsf:metadata name="Title"/></gsf:link></gsf:template></format>
+        <format>
+			<gsf:template match="documentNode">
+				<td valign="top">
+					<gsf:link type="document">
+						<gsf:icon type="document"/>
+					</gsf:link>
+				</td>
+				<td valign="top">
+					<gsf:link type="source">
+						<gsf:choose-metadata>
+							<gsf:metadata name="thumbicon"/>
+							<gsf:metadata name="srcicon"/>
+						</gsf:choose-metadata>
+					</gsf:link>
+				</td>
+				<td valign="top">
+					<gsf:choose-metadata>
+						<gsf:metadata name="dc.Title"/>
+						<gsf:metadata name="exp.Title"/>
+						<gsf:metadata name="Title"/>
+						<gsf:default>Untitled</gsf:default>
+					</gsf:choose-metadata>
+					<gsf:switch>
+						<gsf:metadata name="Source"/>
+						<gsf:when test="exists">
+							<br/><i>(<gsf:metadata name="Source"/>)</i>
+						</gsf:when>
+					</gsf:switch>
+				</td>
+			</gsf:template>
+			
+			<gsf:template match="classifierNode">
+				<td valign="top">
+					<gsf:link type="classifier">
+						<gsf:icon type="classifier"/>
+					</gsf:link>
+				</td>
+				<td valign="top">
+					<gsf:metadata name="srclink"/>
+					<gsf:choose-metadata>
+						<gsf:metadata name="thumbicon"/>
+						<gsf:metadata name="srcicon"/>
+					</gsf:choose-metadata>
+					<gsf:metadata name="/srclink"/>
+				</td>
+				<td valign="top">
+					<gsf:choose-metadata>
+						<gsf:metadata name="dc.Title"/>
+						<gsf:metadata name="exp.Title"/>
+						<gsf:metadata name="Title"/>
+						<gsf:default>Untitled</gsf:default>
+					</gsf:choose-metadata>
+					<gsf:switch>
+						<gsf:metadata name="Source"/>
+						<gsf:when test="exists">
+							<br/><i>(<gsf:metadata name="Source"/>)</i>
+						</gsf:when>
+					</gsf:switch>
+				</td>
+			</gsf:template>
+			
+			<gsf:template match="classifierNode" mode="horizontal">
+				<gsf:link type="horizontal">
+					<gsf:metadata name="Title"/>
+				</gsf:link>
+			</gsf:template>
+		</format>
     </browse>
     <display>
         <format>
-			<gsf:option name="TOC" value="false"/>   
+			<gsf:option name="sideBar" value="false"/>   
 			<xsl:template name="additionalHeaderContent">
 				<!-- jQuery must be included before Annotator -->
@@ -351,5 +417,6 @@
 				</script>
 			</xsl:template>
-			<xsl:template match="documentNode" mode="document">
+			
+			<xsl:template name="documentImage">
 				<!-- Get the photo notes for this document node -->
 				<gsf:variable-struct name="photoNotes">
@@ -398,5 +465,5 @@
 				</div>
 				<xsl:if test="$imageHeight != -1">
-					<div id="wrap" style="display:none">
+					<div id="wrap" style="display:none; width: {$screenImageWidth}; height: {$screenImageHeight};">
 						<div id="small" style="width: {$screenImageWidth}; height: {$screenImageHeight};"><gsf:metadata name="screenicon"/></div>
 						<div id="mover">
@@ -413,5 +480,6 @@
 					<input type="button" value="Tag Photo!" style="margin-left:30px;" onclick="AddNote();" />
 				</xsl:if>	
-			</xsl:template>   
+			</xsl:template>
+			
 		</format>
     </display>
Index: /main/trunk/model-cols-dev/peijones/style/style.css
===================================================================
--- /main/trunk/model-cols-dev/peijones/style/style.css	(revision 24783)
+++ /main/trunk/model-cols-dev/peijones/style/style.css	(revision 24784)
@@ -36,7 +36,7 @@
 	FOR THE MOVER
 */
-#wrap							{ width: 600px; position: relative; }
-#small							{ position: relative;} /* width: 100%; */
-#large   							{ background: white; position: relative; width: 600px;}
+#wrap							{ position: relative; }
+#small							{ position: relative; } /* width: 100%; */
+#large   							{ background: white; position: relative; width: 600px; }
 #mover							{ border: 1px solid blue; position: absolute; top: 0; left: 0; width: 198px; height: 198px; overflow: hidden; z-index: 100; background: white; display: none; }
 #overlay						{  width: 200px; height: 200px; position: absolute; top: 0; left: 0; z-index: 200; }
