Index: main/trunk/greenstone3/web/interfaces/oran/js/document_scripts.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/oran/js/document_scripts.js	(revision 25176)
+++ main/trunk/greenstone3/web/interfaces/oran/js/document_scripts.js	(revision 25177)
@@ -157,14 +157,24 @@
 function setImageVisible(visible)
 {
-	var image = document.getElementById("gs-document-image");
-	if(visible)
-	{
-		image.setAttribute("class", image.getAttribute("class").replace(/\bhidden\b/g, ""));
-	}
-	else
-	{
-		if(image.getAttribute("class").search(/\bhidden\b/) == -1)
-		{
-			image.setAttribute("class", image.getAttribute("class") + " hidden");
+	var divs = document.getElementsByTagName("DIV");
+	var images = new Array();
+	for (var i = 0; i < divs.length; i++)
+	{
+		if(divs[i].id && divs[i].id.search(/^image/) != -1)
+		{
+			images.push(divs[i]);
+		}
+	}
+	
+	for(var i = 0; i < images.length; i++)
+	{
+		var image = images[i];
+		if(visible)
+		{
+			image.style.display = "block";
+		}
+		else
+		{
+			image.style.display = "none";
 		}
 	}
@@ -173,14 +183,24 @@
 function setTextVisible(visible)
 {
-	var text = document.getElementById("gs-document-text");
-	if(visible)
-	{
-		text.setAttribute("class", text.getAttribute("class").replace(/\bhidden\b/g, ""));
-	}
-	else
-	{
-		if(text.getAttribute("class").search(/\bhidden\b/) == -1)
-		{
-			text.setAttribute("class", text.getAttribute("class") + " hidden");
+	var divs = document.getElementsByTagName("DIV");
+	var textDivs = new Array();
+	for (var i = 0; i < divs.length; i++)
+	{
+		if(divs[i].id && divs[i].id.search(/^text/) != -1)
+		{
+			textDivs.push(divs[i]);
+		}
+	}
+
+	for(var i = 0; i < textDivs.length; i++)
+	{
+		var text = textDivs[i];
+		if(visible)
+		{
+			text.style.display = "block";
+		}
+		else
+		{
+			text.style.display = "none";
 		}
 	}
@@ -198,4 +218,11 @@
 			document.getElementById("contentsArea").innerHTML = document.getElementById("contentsArea").innerHTML + ajax.responseText;
 			replaceLinksWithSlider();
+			var loading = document.getElementById("tocLoadingImage");
+			loading.parentNode.removeChild(loading);
+		}
+		else if(ajax.readyState == 4)
+		{
+			var loading = document.getElementById("tocLoadingImage");
+			loading.parentNode.removeChild(loading);
 		}
 	}
@@ -253,5 +280,5 @@
 	//The container for the widget
 	var _mainDiv = document.createElement("DIV");
-	_mainDiv.setAttribute("class", "pageSlider");
+	_mainDiv.setAttribute("class", "ui-widget-content pageSlider");
 	
 	//The table of images
@@ -287,6 +314,18 @@
 
 		var href = page.getAttribute("href");
-		//ajax.open("GET", href + "&excerptid=meta&dmd=true");
-		var template = '<xsl:template match="/"><html><gsf:metadata name="thumbicon"/></html></xsl:template>';
+		var template = '';
+		template += '<xsl:template match="/">';
+		template +=   '<html>';
+		template +=     '<img>';
+		template +=       '<xsl:attribute name="src">';
+		template +=         "<xsl:value-of disable-output-escaping=\"yes\" select=\"/page/pageResponse/collection/metadataList/metadata[@name = 'httpPath']\"/>";
+		template +=         '<xsl:text>/index/assoc/</xsl:text>';
+		template +=         "<xsl:value-of disable-output-escaping=\"yes\" select=\"/page/pageResponse/document/metadataList/metadata[@name = 'assocfilepath']\"/>";
+		template +=         '<xsl:text>/</xsl:text>';
+		template +=         "<xsl:value-of disable-output-escaping=\"yes\" select=\"/page/pageResponse/document/documentNode/metadataList/metadata[@name = 'Thumb']\"/>";
+		template +=       '</xsl:attribute>';
+		template +=     '</img>';
+		template +=   '</html>';
+		template += '</xsl:template>';
 		ajax.open("GET", href + "&ilt=" + template.replace(" ", "%20"));
 		ajax.onreadystatechange = function()
@@ -295,7 +334,6 @@
 			{
 				var text = ajax.responseText;
-
-				var start = text.indexOf("<img", text);
-				if(start == -1)
+				var hrefStart = text.indexOf("src=\"") + 5;
+				if(hrefStart == -1)
 				{
 					page.isLoading = false;
@@ -304,12 +342,22 @@
 					return;
 				}
-				var end = text.indexOf(">", start) + 4;
-				
-				var image = text.substring(start, end);
-				image = image.replace("[parent(Top):assocfilepath]", gs.documentMetadata.assocfilepath);
-				page.link.innerHTML = image;
-				
-				page.isLoading = false;
-				page.imageLoaded = true;
+				var hrefEnd = text.indexOf("\"", hrefStart);
+				var href = text.substring(hrefStart, hrefEnd);
+				console.log(href);
+				var image = document.createElement("IMG");
+				$(image).load(function()
+				{
+					page.link.innerHTML = "";
+					page.link.appendChild(image);
+					page.isLoading = false;
+					page.imageLoaded = true;
+				});
+				$(image).error(function()
+				{
+					page.isLoading = false;
+					page.noImage = true;
+					image.setAttribute("src", gs.imageURLs.blank);
+				});
+				image.setAttribute("src", href);
 			}
 			else if (ajax.readyState == 4 && !page.failed)
@@ -549,6 +597,27 @@
 	var newCell = document.createElement("TD");
 	newCell.setAttribute("style", "font-size:0.7em; padding:0px 10px");
+	
+	var linkSpan = document.createElement("SPAN");
+	linkSpan.setAttribute("class", "ui-state-default ui-corner-all");
+	linkSpan.setAttribute("style", "padding: 2px; float:left;");
+	
+	var linkLabel = document.createElement("SPAN");
+	linkLabel.innerHTML = "edit metadata";
+	var linkIcon = document.createElement("SPAN");
+	linkIcon.setAttribute("class", "ui-icon ui-icon-folder-collapsed");
+	
+	var uList = document.createElement("UL");
+	var labelItem = document.createElement("LI");
+	var iconItem = document.createElement("LI");
+	uList.appendChild(iconItem);
+	uList.appendChild(labelItem);
+	labelItem.appendChild(linkLabel);
+	iconItem.appendChild(linkIcon);
+	
+	uList.setAttribute("style", "outline: 0 none; margin:0px; padding:0px;");
+	labelItem.setAttribute("style", "float:left; list-style:none outside none;");
+	iconItem.setAttribute("style", "float:left; list-style:none outside none;");
+	
 	var newLink = document.createElement("A");
-	newLink.innerHTML = "edit metadata";
 	newLink.setAttribute("href", "javascript:;");
 	newLink.onclick = function()
@@ -556,4 +625,6 @@
 		if(metaTable.style.display == "none")
 		{
+			linkLabel.innerHTML = "hide metadata";
+			linkIcon.setAttribute("class", "ui-icon ui-icon-folder-open");
 			metaTable.style.display = "block";
 			metaTable.metaNameField.style.display = "inline";
@@ -562,4 +633,6 @@
 		else
 		{
+			linkLabel.innerHTML = "edit metadata";
+			linkIcon.setAttribute("class", "ui-icon ui-icon-folder-collapsed");
 			metaTable.style.display = "none";
 			metaTable.metaNameField.style.display = "none";
@@ -567,5 +640,7 @@
 		}
 	}
-	newCell.appendChild(newLink);
+	newLink.appendChild(uList);
+	linkSpan.appendChild(newLink);
+	newCell.appendChild(linkSpan);
 	row.appendChild(newCell);
 	
Index: main/trunk/greenstone3/web/interfaces/oran/js/zoomer.js
===================================================================
--- main/trunk/greenstone3/web/interfaces/oran/js/zoomer.js	(revision 25177)
+++ main/trunk/greenstone3/web/interfaces/oran/js/zoomer.js	(revision 25177)
@@ -0,0 +1,112 @@
+(function ($)
+{
+	$.anythingZoomer = 
+	{
+		defaults: 
+		{
+			smallArea: "#small",
+			largeArea: "#large",
+			zoomPort: "#overlay",
+			mover: "#mover",
+			expansionSize: 30,
+			speedMultiplier: 1.5
+		}
+	}
+	$.fn.extend(
+	{
+		anythingZoomer: function (config)
+		{
+			var config = $.extend({}, $.anythingZoomer.defaults, config);
+			var wrap = $(this);
+			var smallArea = $(config.smallArea);
+			var largeArea = $(config.largeArea);
+			var zoomPort = $(config.zoomPort);
+			var mover = $(config.mover);
+			var expansionSize = config.expansionSize;
+			var speedMultiplier = config.speedMultiplier;
+			var over = false;
+
+			function setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier)
+			{
+				smallArea.show();
+				zoomPort.fadeIn();
+				mover.css(
+				{
+					width: mover.data("origWidth"),
+					height: mover.data("origHeight"),
+					overflow: "hidden",
+					position: "absolute"
+				})
+				wrap.css(
+				{
+					//width: "auto"
+				}).mousemove(function (e)
+				{
+					var x = e.pageX - smallArea.offset().left;
+					var y = e.pageY - smallArea.offset().top;
+					if ((x < -expansionSize) || (x > smallArea.width() + expansionSize) || (y < -expansionSize) || (y > smallArea.height() + expansionSize))
+					{
+						if (over)
+						{
+							mover.fadeOut(50);
+							over = false;
+						}
+						return;
+					}
+					else
+					{
+						if (!over)
+						{
+							mover.fadeIn();
+							over = true;
+						}
+					}
+					mover.css(
+					{
+						top: y - (mover.height() / 2),
+						left: x - (mover.width() / 2)
+					});
+					largeArea.css(
+					{
+						left: (-(e.pageX - smallArea.offset().left) * speedMultiplier) + (mover.width() / 2),
+						top: (-(e.pageY - smallArea.offset().top) * speedMultiplier) + (mover.height() / 2),
+					});
+				}).dblclick(function ()
+				{
+					expand(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
+				});
+			};
+
+			function expand(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier)
+			{
+				smallArea.hide();
+				zoomPort.hide();
+				mover.fadeIn().data("origWidth", mover.width()).data("origHeight", mover.height()).css(
+				{
+					position: "static",
+					height: "auto",
+					width: "auto",
+					overflow: "visible"
+				});
+				wrap.css(
+				{
+					width: "100%"
+				}).unbind().dblclick(function ()
+				{
+					setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
+				});
+				largeArea.css(
+				{
+					left: 0,
+					top: 0,
+					width: largeArea.data("origWidth")
+				});
+			};
+			mover.data("origWidth", mover.width()).data("origHeight", mover.height());
+			// Because the largeArea is often hidden, the width() function returns zero, take width from CSS instead  
+			largeArea.data("origWidth", largeArea.css("width"));
+			setup(smallArea, largeArea, wrap, zoomPort, mover, expansionSize, speedMultiplier);
+			return this;
+		}
+	});
+})(jQuery);
Index: main/trunk/greenstone3/web/interfaces/oran/transform/config_format.xsl
===================================================================
--- main/trunk/greenstone3/web/interfaces/oran/transform/config_format.xsl	(revision 25176)
+++ main/trunk/greenstone3/web/interfaces/oran/transform/config_format.xsl	(revision 25177)
@@ -54,11 +54,11 @@
 				<xsl:choose>
 					<xsl:when test="@type = 'thumb'">
-						<xslt:value-of disable-output-escaping="yes" select=".//metadataList/metadata[@name = 'Thumb']"/>
+						<xslt:value-of disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name = 'Thumb']"/>
 					</xsl:when>
 					<xsl:when test="@type = 'screen'">
-						<xslt:value-of disable-output-escaping="yes" select=".//metadataList/metadata[@name = 'Screen']"/>
+						<xslt:value-of disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name = 'Screen']"/>
 					</xsl:when>
 					<xsl:when test="@type = 'source'">
-						<xslt:value-of disable-output-escaping="yes" select=".//metadataList/metadata[@name = 'SourceFile']"/>
+						<xslt:value-of disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name = 'SourceFile']"/>
 					</xsl:when>
 				</xsl:choose>
@@ -92,6 +92,6 @@
 				<a><xslt:attribute name='href'><xslt:value-of 
 				   disable-output-escaping="yes" select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']" />/index/assoc/<xslt:value-of 
-				   disable-output-escaping="yes" select="metadataList/metadata[@name='assocfilepath']" />/<xslt:value-of 
-				   disable-output-escaping="yes" select="metadataList/metadata[@name='srclinkFile']" /></xslt:attribute>
+				   disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name='assocfilepath']" />/<xslt:value-of 
+				   disable-output-escaping="yes" select="(.//metadataList)[last()]/metadata[@name='srclinkFile']" /></xslt:attribute>
 				  <xsl:apply-templates/>
 				</a>
@@ -179,5 +179,5 @@
 						<xsl:text>(</xsl:text>
 					</xsl:if>
-					<xsl:text>.//metadataList/metadata[@name='</xsl:text>
+					<xsl:text>(.//metadataList)[last()]/metadata[@name='</xsl:text>
 					<xsl:apply-templates select="." mode="get-metadata-name"/>
 					<xsl:text>']</xsl:text>
@@ -209,5 +209,5 @@
 		<xslt:value-of disable-output-escaping="yes">
 			<xsl:attribute name="select">
-				<xsl:text>.//metadataList/metadata[@name="</xsl:text>
+				<xsl:text>(.//metadataList)[last()]/metadata[@name="</xsl:text>
 				<xsl:choose>
 					<xsl:when test="@select='parent'">
@@ -242,5 +242,5 @@
 			<xsl:for-each select="gsf:metadata">
 				<xslt:when>
-					<xsl:attribute name="test">.//metadataList/metadata[@name='<xsl:apply-templates select="." mode="get-metadata-name"/>']</xsl:attribute>
+					<xsl:attribute name="test">(.//metadataList)[last()]/metadata[@name='<xsl:apply-templates select="." mode="get-metadata-name"/>']</xsl:attribute>
 					<xsl:apply-templates select="."/>
 				</xslt:when>
@@ -254,5 +254,5 @@
 	<xsl:template match="gsf:switch">
 		<xsl:variable name="meta-name"><xsl:apply-templates select="gsf:metadata" mode="get-metadata-name"/></xsl:variable>
-		<xslt:variable name="meta"><xsl:choose><xsl:when test="@preprocess"><xslt:value-of select="util:{@preprocess}(.//metadataList/metadata[@name='{$meta-name}'])"/></xsl:when><xsl:otherwise><xslt:value-of select=".//metadataList/metadata[@name='{$meta-name}']"/></xsl:otherwise></xsl:choose></xslt:variable>
+		<xslt:variable name="meta"><xsl:choose><xsl:when test="@preprocess"><xslt:value-of select="util:{@preprocess}((.//metadataList)[last()]/metadata[@name='{$meta-name}'])"/></xsl:when><xsl:otherwise><xslt:value-of select="(.//metadataList)[last()]/metadata[@name='{$meta-name}']"/></xsl:otherwise></xsl:choose></xslt:variable>
 		<xslt:choose>
 			<xsl:for-each select="gsf:when">
Index: main/trunk/greenstone3/web/interfaces/oran/transform/layouts/header.xsl
===================================================================
--- main/trunk/greenstone3/web/interfaces/oran/transform/layouts/header.xsl	(revision 25176)
+++ main/trunk/greenstone3/web/interfaces/oran/transform/layouts/header.xsl	(revision 25177)
@@ -44,4 +44,5 @@
 		
 		<script type="text/javascript" src="interfaces/{$interface_name}/js/direct-edit.js"><xsl:text> </xsl:text></script>
+		<script type="text/javascript" src="interfaces/{$interface_name}/js/zoomer.js"><xsl:text> </xsl:text></script>
 		
 		<xsl:if test="/page/pageResponse/format[@type='display' or @type='browse' or @type='search']/gsf:option[@name='mapEnabled']/@value = 'true'">
@@ -49,5 +50,7 @@
 		</xsl:if>
 		
-		<xsl:call-template name="init-direct-edit"/>
+		<xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
+			<xsl:call-template name="init-direct-edit"/>
+		</xsl:if>
 		<xsl:call-template name="setup-gs-variable"/>
 		<xsl:call-template name="additionalHeaderContent"/>
Index: main/trunk/greenstone3/web/interfaces/oran/transform/pages/document.xsl
===================================================================
--- main/trunk/greenstone3/web/interfaces/oran/transform/pages/document.xsl	(revision 25176)
+++ main/trunk/greenstone3/web/interfaces/oran/transform/pages/document.xsl	(revision 25177)
@@ -100,5 +100,5 @@
 			
 			<div id="doc{@nodeID}" class="sectionContainer"><!-- *** -->
-				<xsl:if test="/page/pageRequest/paramList/param[@name = 'documentbasket']/@value = 'on' and /page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
+				<xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
 					<table id="meta{@nodeID}">
 						<xsl:attribute name="style">
@@ -124,5 +124,75 @@
 					</table>
 				</xsl:if>
+
+				<gsf:variable name="screenImageWidth"><gsf:metadata name="ScreenWidth"/></gsf:variable>
+				<gsf:variable name="screenImageHeight"><gsf:metadata name="ScreenHeight"/></gsf:variable>
+				<gsf:variable name="imageWidth"><gsf:metadata name="ImageWidth"/></gsf:variable>
+				<gsf:variable name="imageHeight"><gsf:metadata name="ImageHeight"/></gsf:variable>
+
+				<xsl:choose>
+					<xsl:when test="metadataList/metadata[@name = 'Screen'] and metadataList/metadata[@name = 'Source'] and /page/pageRequest/paramList/param[@name = 'zoom']/@value = 'true'">
+						<div id="wrap{util:replace(@nodeID, '.', '_')}" class="zoomImage" style="position:relative; width: {$screenImageWidth}px; height: {$screenImageHeight}px;">
+							<div id="small{util:replace(@nodeID, '.', '_')}" style="position:relative; width: {$screenImageWidth}px; height: {$screenImageHeight}px;">
+								<gsf:image type="screen"/>
+							</div>
+							<div id="mover{util:replace(@nodeID, '.', '_')}" style="border: 1px solid green; position: absolute; top: 0; left: 0; width: 198px; height: 198px; overflow: hidden; z-index: 100; background: white; display: none;">
+								<div id="overlay{util:replace(@nodeID, '.', '_')}" style="width: 200px; height: 200px; position: absolute; top: 0; left: 0; z-index: 200;">
+									<xsl:text> </xsl:text>
+								</div>
+								<div id="large{util:replace(@nodeID, '.', '_')}" style="position: relative;">
+									<gsf:image type="source"/>
+								</div>
+							</div>
+						</div>
+						<script type="text/javascript">
+							<xsl:text disable-output-escaping="yes">
+								$(window).load(function()
+								{
+									var nodeID = "</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">";
+									var bigHeight = </xsl:text><xsl:value-of select="$imageHeight"/><xsl:text disable-output-escaping="yes">;
+									var smallHeight = </xsl:text><xsl:value-of select="$screenImageHeight"/><xsl:text disable-output-escaping="yes">
+									
+									nodeID = nodeID.replace(/\./g, "_");
+									var multiplier = bigHeight / smallHeight;
+
+									$("#wrap" + nodeID).anythingZoomer({
+										smallArea: "#small" + nodeID,
+										largeArea: "#large" + nodeID,
+										zoomPort: "#overlay" + nodeID,
+										mover: "#mover" + nodeID,
+										expansionSize:50,  
+										speedMultiplier:multiplier   
+									}); 
+								});
+							</xsl:text>
+						</script>
+					</xsl:when>
+					<xsl:when test="metadataList/metadata[@name = 'Screen']">
+						<div id="image{@nodeID}">
+							<xsl:attribute name="style">
+								<xsl:choose>
+									<xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'">
+										<xsl:text>display:none;</xsl:text>
+									</xsl:when>
+									<xsl:otherwise>
+										<xsl:text>display:block;</xsl:text>
+									</xsl:otherwise>
+								</xsl:choose>
+							</xsl:attribute>
+							<gsf:image type="screen"/>
+						</div>
+					</xsl:when>
+				</xsl:choose>
 				<div id="text{@nodeID}" class="sectionText"><!-- *** -->
+					<xsl:attribute name="style">
+						<xsl:choose>
+							<xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'">
+								<xsl:text>display:none;</xsl:text>
+							</xsl:when>
+							<xsl:otherwise>
+								<xsl:text>display:block;</xsl:text>
+							</xsl:otherwise>
+						</xsl:choose>
+					</xsl:attribute>
 					<!-- Get the section content from the document template -->
 					<xsl:apply-templates select="." mode="document"/>
@@ -137,5 +207,5 @@
 	<!-- the page content -->
 	<xsl:template match="/page/pageResponse/document">
-		<xsl:if test="/page/pageRequest/paramList/param[@name = 'documentbasket']/@value = 'on' and /page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
+		<xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
 			<script type="text/javascript" src="interfaces/{$interface_name}/js/documentmaker_scripts.js"><xsl:text> </xsl:text></script>
 			<script type="text/javascript" src="interfaces/{$interface_name}/js/documentmaker_scripts_util.js"><xsl:text> </xsl:text></script>
@@ -162,5 +232,5 @@
 			<xsl:call-template name="documentBerryForDocumentPage"/>
 			
-			<xsl:if test="/page/pageRequest/paramList/param[@name = 'documentbasket']/@value = 'on' and /page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
+			<xsl:if test="/page/pageRequest/userInformation and (util:contains(/page/pageRequest/userInformation/@groups, 'administrator') or util:contains(/page/pageRequest/userInformation/@groups, 'all-collections-editor') or util:contains(/page/pageRequest/userInformation/@groups, $thisCollectionEditor))">
 				<table style="width:100%"><tr>
 					<td id="editBarLeft" style="width:70%"><xsl:text> </xsl:text></td>
@@ -205,7 +275,13 @@
 									<script type="text/javascript">
 										<xsl:text disable-output-escaping="yes">
-											retrieveTableOfContents();
+											$(window).load(function()
+											{
+												retrieveTableOfContents();
+											});
 										</xsl:text>
 									</script>
+									<div id="tocLoadingImage" style="text-align:center;">
+										<img src="{util:getInterfaceText($interface_name, /page/@lang, 'loading_image')}"/><xsl:text> loading...</xsl:text>
+									</div>
 								</xsl:when>
 								<xsl:otherwise>
@@ -260,18 +336,5 @@
 			<xsl:otherwise>
 				<div id="gs-document">
-					<div id="gs-document-image">
-						<xsl:attribute name="class">
-							<xsl:text>sectionImage</xsl:text>
-							<xsl:if test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'"><xsl:text> hidden</xsl:text></xsl:if>
-						</xsl:attribute>
-						<!-- Get the section content from the document template -->
-						<xsl:call-template name="documentImage"/>
-						<xsl:text> </xsl:text>
-					</div>
-					<div id="gs-document-text" collection="{/page/pageResponse/collection/@name}"><!-- *** -->
-						<xsl:attribute name="class">
-							<xsl:text>documenttext</xsl:text>
-							<xsl:if test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'"><xsl:text> hidden</xsl:text></xsl:if>
-						</xsl:attribute>
+					<div id="gs-document-text" class="documenttext" collection="{/page/pageResponse/collection/@name}"><!-- *** -->
 						<xsl:call-template name="wrapDocumentNodes"/>
 					</div>
@@ -337,5 +400,5 @@
 		<xsl:variable name="imageTest"><gsf:metadata name="ScreenWidth"/></xsl:variable>
 		<xsl:if test="$imageTest != ''">
-			<h3>   
+			<h3>
 				<gsf:choose-metadata>
 					<gsf:metadata name="dc.Title"/>
@@ -474,27 +537,25 @@
 		
 			<!-- Paged-image options -->
-			<xsl:if test="/page/pageResponse/document/@docType = 'paged'">
-				<td>
-					<select id="viewSelection" onchange="changeView();">
-						<xsl:choose>
-							<xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'">
-								<option>Default view</option>
-								<option selected="true">Image view</option>
-								<option>Text view</option>
-							</xsl:when>
-							<xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'">
-								<option>Default view</option>
-								<option>Image view</option>
-								<option selected="true">Text view</option>
-							</xsl:when>
-							<xsl:otherwise>
-								<option selected="true">Default view</option>
-								<option>Image view</option>
-								<option>Text view</option>
-							</xsl:otherwise>
-						</xsl:choose>
-					</select>
-				</td>
-			</xsl:if>
+			<td>
+				<select id="viewSelection" onchange="changeView();">
+					<xsl:choose>
+						<xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'image'">
+							<option>Default view</option>
+							<option selected="true">Image view</option>
+							<option>Text view</option>
+						</xsl:when>
+						<xsl:when test="/page/pageRequest/paramList/param[@name = 'view']/@value = 'text'">
+							<option>Default view</option>
+							<option>Image view</option>
+							<option selected="true">Text view</option>
+						</xsl:when>
+						<xsl:otherwise>
+							<option selected="true">Default view</option>
+							<option>Image view</option>
+							<option>Text view</option>
+						</xsl:otherwise>
+					</xsl:choose>
+				</select>
+			</td>
 		
 			<!-- Realistic books link -->
