Index: main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl
===================================================================
--- main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl	(revision 25921)
+++ main/trunk/greenstone3/web/interfaces/default/transform/layouts/toc.xsl	(revision 25922)
@@ -10,84 +10,106 @@
 	
 	<xsl:template name="rightSidebar">
-		<table id="rightSidebar">
-			<tr><td>
-				<xsl:call-template name="viewOptions"/>
-			</td></tr>
-			<tr><td>
-				<div id="contentsArea">	
-					<!-- show the berry basket if it's turned on -->
-					<gslib:berryBasket/>
+		<div id="rightSidebar">
+			<xsl:call-template name="displayCoverImage"/>
+			<xsl:call-template name="viewOptions"/>
+			<xsl:call-template name="displayTOC"/>
+		</div>
+	</xsl:template>
+	
+	<xsl:template name="displayCoverImage">
+		<!-- Need to be in the context of the top-level documentNode rather than the document for the gsf:metadata call to work -->
+		<xsl:for-each select="documentNode">
+			<xsl:variable name="hasCover"><gsf:metadata name="hascover"/></xsl:variable>
+			<xsl:if test="$hasCover = '1' and (not(/page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']) or /page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']/@value='true')">
+				<!-- the book's cover image -->
+				<div id="coverImage">
+					<img>
+						<xsl:attribute name="src"><xsl:value-of select="$httpPath"/>/index/assoc/<gsf:metadata name="assocfilepath"/>/cover.jpg</xsl:attribute>
+					</img><xsl:text> </xsl:text>
+				</div>
+			</xsl:if>
+		</xsl:for-each>
+	</xsl:template>
+	
+	<xsl:template name="displayTOC">
+		<div class="tableOfContentsContainer ui-state-default">
+			<table class="tocTable ui-widget-content">
+				<tr>
+					<td style="vertical-align:top; text-align:right;">
+						<a id="sidebarMinimizeButton" href="javascript:minimizeSidebar();" style="float: right; font-size:0.6em;">
+							<img class="icon" style="padding-top:3px;">
+								<xsl:attribute name="src">
+									<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'collapse_image')"/>
+								</xsl:attribute>
+							</img>
+						</a>
+						<a id="sidebarMaximizeButton" href="javascript:maximizeSidebar();" style="float: right; font-size:0.6em; display:none;">
+							<img class="icon" style="padding-top:3px;">
+								<xsl:attribute name="src">
+									<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'expand_image')"/>
+								</xsl:attribute>
+							</img>
+						</a>
+					</td>
+				</tr>
+				<tr><td>
+					<div id="contentsArea">	
+						<!-- show the berry basket if it's turned on -->
+						<gslib:berryBasket/>
 
-					<!-- Need to be in the context of the top-level documentNode rather than the document for the gsf:metadata call to work -->
-					<xsl:for-each select="documentNode">
-						<xsl:variable name="hasCover"><gsf:metadata name="hascover"/></xsl:variable>
-						<xsl:if test="$hasCover = '1'">
-							<!-- the book's cover image -->
-							<div id="coverImage">
-								<xsl:attribute name="class">
-									<xsl:choose>
-										<xsl:when test="not(/page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']) or /page/pageResponse/format[@type='display']/gsf:option[@name='coverImage']/@value='true'">visible</xsl:when>
-										<xsl:otherwise>hidden</xsl:otherwise>    
-									</xsl:choose>
-								</xsl:attribute>
-								<gslib:coverImage/><xsl:text> </xsl:text>
-							</div>
-						</xsl:if>
-					</xsl:for-each>
-
-					<!-- the contents (if enabled) -->
-					<xsl:choose>
-	      <xsl:when test="/page/pageResponse/document/@docType = 'simple'"></xsl:when>
-						<xsl:when test="/page/pageResponse/document/@docType = 'paged'">
-							<gsf:image type="Thumb"/>
-							<!-- Table of contents will be dynamically retrieved when viewing a paged document -->
-							<script type="text/javascript">
-								<xsl:text disable-output-escaping="yes">
-									$(window).load(function()
-									{
-										retrieveTableOfContentsAndTitles();
-									});
-								</xsl:text>
-							</script>
-							<div id="tableOfContents"><xsl:text> </xsl:text></div>
-							<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>
-							<table style="width:100%;"><tbody><tr>
-								<td><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.filter_pages')"/><xsl:text>: </xsl:text><input id="filterText" type="text" size="27"/></td>
-							</tr></tbody></table>
-						</xsl:when>
-						<xsl:when test="not(/page/pageRequest/paramList/param[@name = 'ed']/@value = '1')">
-							<div id="tableOfContents">
+						<!-- the contents (if enabled) -->
+						<xsl:choose>
+							<xsl:when test="/page/pageResponse/document/@docType = 'paged'">
+								<gsf:image type="Thumb"/>
+								<!-- Table of contents will be dynamically retrieved when viewing a paged document -->
+								<script type="text/javascript">
+									<xsl:text disable-output-escaping="yes">
+										$(window).load(function()
+										{
+											retrieveTableOfContentsAndTitles();
+										});
+									</xsl:text>
+								</script>
+								<div id="tableOfContents"><xsl:text> </xsl:text></div>
 								<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()
-									{
-										retrieveFullTableOfContents();
-									});
-								</xsl:text>
-							</script>
-						</xsl:when>
-						<xsl:otherwise>
-							<div id="tableOfContents">
-								<xsl:attribute name="class">
-									<xsl:choose>
-										<xsl:when test="count(//documentNode) > 1 and not(/page/pageResponse/format[@type='display']/gsf:option[@name='TOC']) or /page/pageResponse/format[@type='display']/gsf:option[@name='TOC']/@value='true'">visible</xsl:when>
-										<xsl:otherwise>hidden</xsl:otherwise>
-									</xsl:choose>
-								</xsl:attribute>
-								<xsl:for-each select="documentNode">
-									<xsl:call-template name="documentNodeTOC"/>
-								</xsl:for-each>
-							</div>
-						</xsl:otherwise>
-					</xsl:choose>
-				</div>
-			</td></tr>
-		</table>
+								<table style="width:100%;"><tbody><tr>
+									<td><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.filter_pages')"/><xsl:text>: </xsl:text><input id="filterText" type="text" size="27"/></td>
+								</tr></tbody></table>
+							</xsl:when>
+							<xsl:when test="not(/page/pageRequest/paramList/param[@name = 'ed']/@value = '1')">
+								<div id="tableOfContents">
+									<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()
+										{
+											retrieveFullTableOfContents();
+										});
+									</xsl:text>
+								</script>
+							</xsl:when>
+							<xsl:otherwise>
+								<div id="tableOfContents">
+									<xsl:attribute name="class">
+										<xsl:choose>
+											<xsl:when test="count(//documentNode) > 1 and not(/page/pageResponse/format[@type='display']/gsf:option[@name='TOC']) or /page/pageResponse/format[@type='display']/gsf:option[@name='TOC']/@value='true'">visible</xsl:when>
+											<xsl:otherwise>hidden</xsl:otherwise>
+										</xsl:choose>
+									</xsl:attribute>
+									<xsl:for-each select="documentNode">
+										<xsl:call-template name="documentNodeTOC"/>
+									</xsl:for-each>
+								</div>
+							</xsl:otherwise>
+						</xsl:choose>
+					</div>
+				</td></tr>
+			</table>
+		</div>
 	</xsl:template>
 	
@@ -193,119 +215,99 @@
 	
 	<xsl:template name="viewOptions">
-		<table class="viewOptions ui-state-default ui-corner-all"><tr>
-
-			<!-- Paged-image options -->
-			<xsl:if test="count(//documentNode/metadataList/metadata[@name = 'Screen']) > 0 or /page/pageResponse/document/documentNode/@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>
-		
-			<!-- Realistic books link -->
-			<xsl:if test="/page/pageResponse/collection[@name = $collName]/metadataList/metadata[@name = 'tidyoption'] = 'tidy'">
-				<td>
-					<img>
-						<xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'realistic_books_image')"/></xsl:attribute>
-					</img>
-					<input id="rbOption" type="checkbox" onclick="bookInit();" class="optionCheckBox"/>
-				</td>
-			</xsl:if>
+		<div id="viewAndZoomOptions" class="ui-state-default ui-corner-all">
+			<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>
 			
-			<!-- Highlight on/off button -->
-			<xsl:if test="/page/pageRequest/paramList/param[@name = 'p.a']/@value = 'q' or /page/pageRequest/paramList/param[@name = 's1.query']">
-				<td>
-					<img>
-						<xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'highlight_image')"/></xsl:attribute>
-					</img>
-					<input id="highlightOption" type="checkbox" class="optionCheckBox" onclick="swapHighlight();">
-						<xsl:if test="/page/pageRequest/paramList/param[@name = 'hl']/@value = 'on'">
-							<xsl:attribute name="checked">true</xsl:attribute>
-						</xsl:if>
-					</input>
-				</td>
-			</xsl:if>
-			<td style="vertical-align:top; text-align:right;">
-				<xsl:if test="not(/page/pageResponse/document/@docType='simple') and (not(/page/pageResponse/format[@type='display']/gsf:option[@name='TOC']) or /page/pageResponse/format[@type='display']/gsf:option[@name='TOC']/@value='true')">
-					<span class="tableOfContentsTitle"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.table_of_contents')"/></span>
-
-					<a id="sidebarMinimizeButton" href="javascript:minimizeSidebar();" style="float: right; font-size:0.6em;">
-						<img class="icon" style="padding-top:3px;">
-							<xsl:attribute name="src">
-								<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'collapse_image')"/>
-							</xsl:attribute>
+				<!-- Realistic books link -->
+				<xsl:if test="/page/pageResponse/collection[@name = $collName]/metadataList/metadata[@name = 'tidyoption'] = 'tidy'">
+					<li>
+						<xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.realisticBooksTooltip')"/></xsl:attribute>
+						<img>
+							<xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'realistic_books_image')"/></xsl:attribute>
 						</img>
-					</a>
-					<a id="sidebarMaximizeButton" href="javascript:maximizeSidebar();" style="float: right; font-size:0.6em; display:none;">
-						<img class="icon" style="padding-top:3px;">
-							<xsl:attribute name="src">
-								<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'expand_image')"/>
-							</xsl:attribute>
+						<input id="rbOption" type="checkbox" onclick="bookInit();" class="optionCheckBox"/>
+					</li>
+				</xsl:if>
+				
+				<!-- Highlight on/off button -->
+				<xsl:if test="util:contains(/page/pageRequest/paramList/param[@name = 'p.s']/@value, 'Query')">
+					<li>
+						<xsl:attribute name="title"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.highlightTooltip')"/></xsl:attribute>
+						<img>
+							<xsl:attribute name="src"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'highlight_image')"/></xsl:attribute>
 						</img>
-					</a>
+						<input id="highlightOption" type="checkbox" class="optionCheckBox" onclick="swapHighlight();">
+							<xsl:if test="/page/pageRequest/paramList/param[@name = 'hl']/@value = 'on'">
+								<xsl:attribute name="checked">true</xsl:attribute>
+							</xsl:if>
+						</input>
+					</li>
 				</xsl:if>
-			</td>
-		</tr>
-		<tr id="zoomOptions">
-			<!-- This is invisible unless it is made visible by Javascript controlling the image zooming -->
-			<xsl:attribute name="style">display: none;</xsl:attribute>
-			<td style="width:40%;">
-				<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom')"/><input id="zoomToggle" type="checkbox"/>
+			</ul>
+			<ul id="zoomOptions">
+				<!-- This is invisible unless it is made visible by Javascript controlling the image zooming -->
+				<xsl:attribute name="style">display: none;</xsl:attribute>
+				<li style="width:10%;">
+					<xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom')"/>
+				</li>
+				<li style="width:5%;">
+					<input id="zoomToggle" type="checkbox"/>
+					<script type="text/javascript">
+						<xsl:text disable-output-escaping="yes">
+							$("#zoomToggle").change(function()
+							{
+								_imageZoomEnabled = !_imageZoomEnabled;
+							});
+						</xsl:text>
+					</script>
+				</li>
+				<li style="width:15%;"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom_size')"/><xsl:text>:</xsl:text></li>
+				<li id="zoomSlider" style="width:50%; height:5px;"><xsl:text> </xsl:text></li>
 				<script type="text/javascript">
 					<xsl:text disable-output-escaping="yes">
-						$("#zoomToggle").change(function()
+						$("#zoomSlider").slider(
 						{
-							_imageZoomEnabled = !_imageZoomEnabled;
+							change: function(event, ui)
+							{
+								var sliderValue = ui.value;
+								var divs = document.getElementsByTagName("DIV");
+								for(var i = 0; i &lt; divs.length; i++)
+								{
+									if(divs[i].getAttribute("id") &amp;&amp; divs[i].getAttribute("id").search(/^mover.*/) != -1)
+									{
+										divs[i].style.height = 200 + (2 * sliderValue) + "px";
+										divs[i].style.width = 200 + (2 * sliderValue) + "px";
+									}
+								}
+							}
 						});
 					</xsl:text>
 				</script>
-			</td>
-			<td style="width:60%;">
-				<div>
-					<div style="float:left; width:30%;"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'doc.zoom_size')"/><xsl:text>:</xsl:text></div>
-					<div id="zoomSlider" style="float:right; width:65%; height:5px; margin-top:6px;"><xsl:text> </xsl:text></div>
-					<script type="text/javascript">
-						<xsl:text disable-output-escaping="yes">
-							$("#zoomSlider").slider(
-							{
-								change: function(event, ui)
-								{
-									var sliderValue = ui.value;
-									var divs = document.getElementsByTagName("DIV");
-									for(var i = 0; i &lt; divs.length; i++)
-									{
-										if(divs[i].getAttribute("id") &amp;&amp; divs[i].getAttribute("id").search(/^mover.*/) != -1)
-										{
-											divs[i].style.height = 200 + (2 * sliderValue) + "px";
-											divs[i].style.width = 200 + (2 * sliderValue) + "px";
-										}
-									}
-								}
-							});
-						</xsl:text>
-					</script>
-					<style>.ui-slider .ui-slider-handle{height:0.8em; width:1.0em;}</style>
-					<div style="float:clear;"><xsl:text> </xsl:text></div>
-				</div>
-			</td>
-		</tr>
-		</table>	
+				<style>.ui-slider .ui-slider-handle{height:0.8em; width:1.0em;}</style>
+			</ul>
+		</div>
 	</xsl:template>
 </xsl:stylesheet>
