Index: /main/trunk/greenstone3/web/interfaces/default/interfaceConfig.xml
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/interfaceConfig.xml	(revision 25935)
+++ /main/trunk/greenstone3/web/interfaces/default/interfaceConfig.xml	(revision 25936)
@@ -32,10 +32,4 @@
     </action>
   </actionList>
-  <optionList>
-    <option name="cssTheme" value="interfaces/default/style/themes/main/jquery-ui-1.8.16.custom.css"/>
-    <option name="highlightQueryTerms" value="true"/>
-    <option name="berryBaskets" value="true"/>
-	<option name="documentBasket" value="true"/>
-  </optionList>
   <languageList>
     <language name="en">
@@ -193,3 +187,9 @@
     </language>
   </languageList>
+  <optionList>
+    <option name="cssTheme" value="interfaces/default/style/themes/main/jquery-ui-1.8.16.custom.css"/>
+    <option name="highlightQueryTerms" value="true"/>
+    <option name="berryBaskets" value="true"/>
+	<option name="documentBasket" value="true"/>
+  </optionList>
 </interfaceConfig>
Index: /main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js	(revision 25935)
+++ /main/trunk/greenstone3/web/interfaces/default/js/document_scripts.js	(revision 25936)
@@ -92,5 +92,11 @@
 
 	var ajax = gs.functions.ajaxRequest();
-	ajax.open("GET", gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + sectionID + "?ilt=" + template.replace(" ", "%20"), true);
+	var url = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + sectionID + "?ilt=" + template.replace(" ", "%20");
+
+	if(gs.documentMetadata.docType == "paged")
+	{
+		url += "&dt=hierarchy";
+	}
+	ajax.open("GET", url, true);
 	ajax.onreadystatechange = function()
 	{
@@ -155,5 +161,6 @@
 					if(text.search("wrap" + nodeID) != -1)
 					{
-						document.getElementById("zoomOptions").style.display = "table-row";
+						document.getElementById("zoomOptions").style.display = null;
+						document.getElementById("pagedImageOptions").style.display = null;
 					}
 					getSubSectionsForSection(sectionID, function(sections)
@@ -338,9 +345,9 @@
 }
 
-function loadTopLevelPage(callbackFunction)
+function loadTopLevelPage(callbackFunction, customURL)
 {
 	var ajax = gs.functions.ajaxRequest();
 	
-	var url = gs.xsltParams.library_name + "?a=d&dt=hierarchy&c=" + gs.cgiParams.c + "&excerptid=gs-document";
+	var url = gs.xsltParams.library_name + "?a=d&c=" + gs.cgiParams.c + "&excerptid=gs-document";
 	if(gs.cgiParams.d && gs.cgiParams.d.length > 0)
 	{
@@ -351,6 +358,13 @@
 		url += "&d=&alb=1&rl=1&href=" + gs.cgiParams.href;
 	}
-	
-	ajax.open("GET", url, true);
+
+	if(customURL != null)
+	{
+		ajax.open("GET", customURL, true);
+	}
+	else
+	{
+		ajax.open("GET", url, true);
+	}
 	ajax.onreadystatechange = function()
 	{
@@ -365,4 +379,5 @@
 				var docEnd = response.lastIndexOf("<");
 				var doc = response.substring(docStart, docEnd);
+
 				targetElem.innerHTML = doc;
 				
Index: /main/trunk/greenstone3/web/interfaces/default/style/core.css
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 25935)
+++ /main/trunk/greenstone3/web/interfaces/default/style/core.css	(revision 25936)
@@ -203,5 +203,4 @@
 #viewOptions li {
 	list-style:none;
-	display: inline;
 	padding: 5px;
 }
@@ -210,4 +209,5 @@
 	margin: 0px;
 	padding: 0px;
+	width: 100%;
 }
 
Index: /main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl	(revision 25935)
+++ /main/trunk/greenstone3/web/interfaces/default/transform/javascript-global-setup.xsl	(revision 25936)
@@ -92,4 +92,6 @@
 				addMetadataToList(name, value, gs.documentMetadata, lang);
 			</xsl:for-each>
+			
+			<xsl:text disable-output-escaping="yes">addMetadataToList("docType", "</xsl:text><xsl:value-of select="/page/pageResponse/document/@docType"/><xsl:text disable-output-escaping="yes">", gs.documentMetadata, "</xsl:text><xsl:value-of select="@lang"/><xsl:text disable-output-escaping="yes">");</xsl:text>
 		</script>
 	</xsl:template>
Index: /main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl	(revision 25935)
+++ /main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl	(revision 25936)
@@ -177,18 +177,10 @@
 				<!-- The section name, links to the section in the document -->
 				<td>				
-					<a id="toclink{@nodeID}">
-						<xsl:choose>
-							<xsl:when test="/page/pageResponse/document/@docType = 'paged'">
-								<xsl:attribute name="href"><xsl:value-of select="$library_name"/>?a=d&amp;c=<xsl:value-of select="/page/pageResponse/collection/@name"/>&amp;d=<xsl:value-of select="@nodeID"/>&amp;dt=<xsl:value-of select="@docType"/>&amp;p.a=b&amp;p.s=<xsl:value-of select="/page/pageResponse/service/@name"/></xsl:attribute>
-							</xsl:when>
-							<xsl:otherwise>
-								<xsl:attribute name="href">javascript:focusSection('<xsl:value-of select="@nodeID"/>');</xsl:attribute>
-							</xsl:otherwise>
-						</xsl:choose>
+					<a id="toclink{@nodeID}" href="javascript:focusSection('{@nodeID}');">
 						<xsl:if test="util:hashToSectionId(@nodeID)">
 							<xsl:value-of select="util:hashToSectionId(@nodeID)"/>
 							<xsl:text> </xsl:text>
 						</xsl:if>
-						<xsl:call-template name="sectionTitle"/>
+						<xsl:call-template name="sectionHeader"/>
 					</a>
 				</td>
@@ -221,27 +213,34 @@
 			<ul id="viewOptions">
 				<!-- Paged-image options -->
-				<xsl:if test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@docType = 'paged'">
-					<li>
-						<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>
-					</li>
-				</xsl:if>
+				<li id="pagedImageOptions">
+					<xsl:attribute name="style">
+						<xsl:choose>
+							<xsl:when test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@docType = 'paged'">
+							</xsl:when>
+							<xsl:otherwise>
+								display:none;
+							</xsl:otherwise>
+						</xsl:choose>
+					</xsl:attribute>
+					<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>
+				</li>
 			
 				<!-- Realistic books link -->
@@ -269,5 +268,5 @@
 						</input>
 					</li>
-				</xsl:if>
+				</xsl:if><xsl:text> </xsl:text>
 			</ul>
 			<ul id="zoomOptions">
Index: /main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl
===================================================================
--- /main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl	(revision 25935)
+++ /main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl	(revision 25936)
@@ -60,11 +60,16 @@
 	</xsl:template>
 	
+	<xsl:template name="sectionHeader">
+		<xsl:call-template name="sectionTitle"/>
+	</xsl:template>
+	
 	<!-- Used to make sure that regardless what the collection designer uses for the title and content we can wrap it properly -->
 	<!-- If editing, be aware that the Document Basket looks for specific classes that this template bakes in (key points marked with ***) -->
 	<xsl:template name="wrapDocumentNodes">
 		<a name="{@nodeID}"><xsl:text> </xsl:text></a>
+		
 		<!-- Section header -->
 		<table class="sectionHeader"><tr>
-		
+
 			<!-- Expand/collapse button -->
 			<xsl:if test="not(/page/pageResponse/format[@type='display' or @type='browse' or @type='search']/gsf:option[@name='sectionExpandCollapse']/@value) or /page/pageResponse/format[@type='display' or @type='browse' or @type='search']/gsf:option[@name='sectionExpandCollapse']/@value = 'true'">
@@ -84,16 +89,19 @@
 				</td>
 			</xsl:if>
-			
+					
 			<!-- Title -->
 			<td id="header{@nodeID}" class="headerTD sectionTitle"><!-- *** -->
-				<!-- Get the title from the title sectionTitle template -->
-				<xsl:choose>
-					<xsl:when test="not(/page/pageRequest/paramList/param[@name = 'dmd']) or /page/pageRequest/paramList/param[@name = 'dmd']/@value = 'false'">
-						<xsl:call-template name="sectionTitleFormat"/>
-					</xsl:when>
-					<xsl:otherwise>
-						<xsl:call-template name="sectionTitle"/>
-					</xsl:otherwise>
-				</xsl:choose>
+				<p>
+					<xsl:attribute name="class"><xsl:value-of select="util:hashToDepthClass(@nodeID)"/> sectionHeader</xsl:attribute>
+
+					<xsl:if test="util:hashToSectionId(@nodeID)">
+						<span class="sectionNumberSpan">
+							<xsl:value-of select="util:hashToSectionId(@nodeID)"/>
+							<xsl:text> </xsl:text>
+						</span>
+					</xsl:if>
+					<!-- Display the title for the section regardless of whether automatic section numbering is turned on -->
+					<span><xsl:call-template name="sectionHeader"/></span>
+				</p>
 			</td>
 			
@@ -107,5 +115,5 @@
 			</xsl:if>
 		</tr></table>
-		
+
 		<div id="doc{@nodeID}"><!-- *** -->
 			<xsl:choose>
@@ -161,7 +169,5 @@
 			</xsl:if>
 			
-			<xsl:for-each select=".">
-				<xsl:call-template name="sectionImage"/>
-			</xsl:for-each>
+			<xsl:call-template name="sectionImage"/>
 			
 			<div id="text{@nodeID}" class="sectionText"><!-- *** -->
@@ -278,5 +284,6 @@
 	<xsl:template name="wrappedDocument">
 		<xsl:choose>
-			<xsl:when test="/page/pageRequest/paramList/param[@name = 'alb']/@value = '1' or (string-length(/page/pageRequest/paramList/param[@name = 'd']/@value) > 0 and (/page/pageRequest/paramList/param[@name = 'ed']/@value = '1' or not(util:contains(/page/pageResponse/document/@selectedNode, '.'))))">
+			<!-- NOTE: alb = ajax load bypass -->
+			<xsl:when test="/page/pageResponse/document/@docType = 'hierarchy' and (/page/pageRequest/paramList/param[@name = 'alb']/@value = '1' or (string-length(/page/pageRequest/paramList/param[@name = 'd']/@value) > 0 and (/page/pageRequest/paramList/param[@name = 'ed']/@value = '1' or not(util:contains(/page/pageResponse/document/@selectedNode, '.')))))">
 				<div id="gs-document">
 					<xsl:call-template name="documentPre"/>
@@ -287,4 +294,20 @@
 					</div>
 				</div>
+			</xsl:when>
+			<xsl:when test="/page/pageResponse/document/@docType = 'paged'">
+				<div id="gs-document">							
+					<div id="tocLoadingImage" style="text-align:center;">
+						<img src="{util:getInterfaceText($interface_name, /page/@lang, 'loading_image')}"/><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.loading')"/><xsl:text>...</xsl:text>
+					</div>
+				</div>
+				<script type="text/javascript">
+					<xsl:text disable-output-escaping="yes">
+						$(window).load(function()
+						{
+							var url = gs.xsltParams.library_name + "?a=d&amp;c=" + gs.cgiParams.c + "&amp;excerptid=gs-document&amp;dt=hierarchy&amp;d=" + gs.cgiParams.d.replace(/([^.]*)\..*/, "$1");
+							loadTopLevelPage(null, url);
+						});
+					</xsl:text>
+				</script>
 			</xsl:when>
 			<xsl:otherwise>
@@ -370,20 +393,4 @@
 		</xsl:choose>
 	</xsl:template>
-	
-	<xsl:template name="sectionTitleFormat">
-		<p>
-			<xsl:attribute name="class"><xsl:value-of select="util:hashToDepthClass(@nodeID)"/> sectionHeader</xsl:attribute>
-			
-			<xsl:if test="util:hashToSectionId(@nodeID)">
-				<span class="sectionNumberSpan">
-					<xsl:value-of select="util:hashToSectionId(@nodeID)"/>
-					<xsl:text> </xsl:text>
-				</span>
-			</xsl:if>
-			<!-- Display the title for the section regardless of whether automatic section numbering is turned on -->
-			<span><xsl:call-template name="sectionTitle"/></span>
-		</p>
-	</xsl:template>
-	
 		
 	<!-- The default template for displaying section titles -->
@@ -400,41 +407,43 @@
 		<xsl:choose>
 			<xsl:when test="metadataList/metadata[@name = 'Screen'] and metadataList/metadata[@name = 'Source'] and ($imageWidth div $screenImageWidth > 1.2)">
-				<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 id="image{@nodeID}">
+					<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="large{util:replace(@nodeID, '.', '_')}" style="position: relative; width: {$imageWidth}px; height: {$imageHeight}px;">
-							<gsf:image type="source"/>
+						<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; width: {$imageWidth}px; height: {$imageHeight}px;">
+								<gsf:image type="source"/>
+							</div>
 						</div>
 					</div>
-				</div>
-				<script type="text/javascript">
-					<xsl:text disable-output-escaping="yes">
-						{
-							var nodeID = "</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">";
-							nodeID = nodeID.replace(/\./g, "_");
-
-							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">;
-
-							var multiplier = bigHeight / smallHeight;
-
-							$("#wrap" + nodeID).anythingZoomer({
-								smallArea: "#small" + nodeID,
-								largeArea: "#large" + nodeID,
-								zoomPort: "#overlay" + nodeID,
-								mover: "#mover" + nodeID,
-								expansionSize:50,  
-								speedMultiplier:multiplier   
-							});
-							
-							$("#zoomOptions").css("display", "table-row");
-						}
-					</xsl:text>
-				</script>
+					<script type="text/javascript">
+						<xsl:text disable-output-escaping="yes">
+							{
+								var nodeID = "</xsl:text><xsl:value-of select="@nodeID"/><xsl:text disable-output-escaping="yes">";
+								nodeID = nodeID.replace(/\./g, "_");
+
+								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">;
+
+								var multiplier = bigHeight / smallHeight;
+
+								$("#wrap" + nodeID).anythingZoomer({
+									smallArea: "#small" + nodeID,
+									largeArea: "#large" + nodeID,
+									zoomPort: "#overlay" + nodeID,
+									mover: "#mover" + nodeID,
+									expansionSize:50,  
+									speedMultiplier:multiplier   
+								});
+								
+								$("#zoomOptions").css("display", null);
+							}
+						</xsl:text>
+					</script>
+				</div>
 			</xsl:when>
 			<xsl:when test="metadataList/metadata[@name = 'Screen']">
