# HG changeset patch
# User casties
# Date 1343244511 -7200
# Node ID 0b8bed1223adcb391388d05f0d50375ad1474167
# Parent  ac232c293ad9a7cfc4974ba99b39fa09837826ef
new layout and styles.

diff -r ac232c293ad9 -r 0b8bed1223ad css/docuviewer.css
--- a/css/docuviewer.css	Thu Jul 05 12:08:58 2012 +0200
+++ b/css/docuviewer.css	Wed Jul 25 21:28:31 2012 +0200
@@ -1,3 +1,57 @@
+
+body {
+    background-color: #ebebeb;
+    margin: 5px;
+    font-size: 12px;
+}
+
+a:link,
+a:visited {
+    color: black;
+    font-weight: bold;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+/*
+ * head
+ */
+div.page-head div.logo {
+    display: table-cell;
+    vertical-align: top;
+    padding: 5px;
+}
+div.page-head div.title-block {
+    display: table-cell;
+    vertical-align: top;
+}
+div.page-head div.title {
+    max-width: 50em;
+    border: 1px solid silver;
+    padding: 0.5em;  
+    background-color: white;
+}
+
+ul.view-switcher {
+    padding-left: 0;
+    margin-top: 4px;
+}
+ul.view-switcher li {
+    list-style-type: none;
+    display: inline;
+    background-color: #d0d0d0;
+    margin-right: 0;
+    border-bottom: 1px solid silver;
+    border-left: 1px solid silver;
+    border-right: 1px solid silver;
+    border-radius: 0 0 5px 5px;
+    padding: 5px;
+}
+ul.view-switcher li.sel {
+    background-color: white;
+}
 
 div.page-body {
     display: table-row;
@@ -7,38 +61,146 @@
     vertical-align: top;
 }
 
-div.toc-text, 
-div.toc-figures {
-    max-width: 20em;
+/*
+ * TOC
+ */
+div.toc-container {
+    display:table-row;
 }
 
-div.col.results {
-	max-width: 20em;
+div.toc-switcher {
+    /* position: relative; */
+    display: table-cell;
+    width: 28px;
+}
+div.toc-switcher ul {
+    position: absolute;
+    z-index: 20;
+    transform: rotate(270deg);
+    transform-origin: top left;
+    -moz-transform: rotate(270deg);
+    -moz-transform-origin: top left;
+    -webkit-transform: rotate(270deg);
+    -webkit-transform-origin: top left;
+    -o-transform: rotate(270deg);
+    -o-transform-origin: top left;
+    left: 12px;
+    top: 486px;
+    padding: 0px;
+}
+div.toc-switcher li {
+    list-style-type: none;
+    display: inline;
+    background-color: #d0d0d0;
+    margin-bottom: 5px;
+    border-top: 1px solid silver;
+    border-left: 1px solid silver;
+    border-right: 1px solid silver;
+    border-radius: 5px 5px 0 0;
+    padding: 5px;
+}
+div.toc-switcher li.sel {
+    background-color: white;
 }
 
-div.toc-text .toc, 
-div.toc-figures .toc,
-div.toc-concordance .toc {
+div.tocbody {
+    z-index: 10;
+    display: table-cell;
+    border: 1px solid silver;
+    padding: 0.5em;  
+    background-color: white;    
+}
+
+div.tocbody.text, 
+div.tocbody.figures {
+    max-width: 20em;
+    background-color: white;
+}
+
+div.tocbody.text .toc, 
+div.tocbody.figures .toc,
+div.tocbody.concordance .toc {
     float:left;
     clear:right; 
 }
-div.toc-text .toc.float.right, 
-div.toc-figures .toc.float.right,
-div.toc-concordance .toc.float.right {
+div.tocbody.text .toc.float.right, 
+div.tocbody.figures .toc.float.right,
+div.tocbody.concordance .toc.float.right {
     float:right;
 }
 
-table.thumbs .thumb {
+div.tocbody table.thumbs td {
+    text-align: center;
+}
+div.tocbody table.thumbs .thumb {
     padding: 3px;
 }
-table.thumbs .thumbsel {
+div.tocbody table.thumbs .thumbsel {
     padding: 2px;
     border: 1px solid blue;
 }
-table.thumbs .thumbcap {
+div.tocbody table.thumbs .thumbcap {
     color: black;
 }
 
+/*
+ * content
+ */
+div.col.main {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+div.col.main div.ruler {
+    margin-top: 4px;
+}
+div.col.main span.ruler-main {
+    background-color: #d0d0d0;
+    border-left: 1px solid silver;
+    border-top: 1px solid silver;
+    border-right: 1px solid silver;
+    border-radius: 5px 5px 0 0;
+    padding: 4px;    
+}
+
+div.col.main div.content {
+    border: 1px solid silver;
+    padding: 1em;  
+    background-color: white;
+    font-size: 14px;
+    font-family: Junicode,Gentium,Georgia,serif;
+}
+div.col.main div.content a:link,
+div.col.main div.content a:visited {
+    font-weight: inherit;
+    color: #892B06;
+}
 span.hit.highlight {
-	background-color: lightgreen;
-}
\ No newline at end of file
+    background-color: lime;
+}
+
+/*
+ * buttons
+ */
+div.col.buttons div.options {
+    border: 1px solid silver;
+    padding: 0.5em;  
+    background-color: white;    
+}
+div.col.buttons h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+div.col.buttons ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+/*
+ * search results
+ */
+div.col.results {
+    max-width: 20em;
+}
+
diff -r ac232c293ad9 -r 0b8bed1223ad documentViewer.py
--- a/documentViewer.py	Thu Jul 05 12:08:58 2012 +0200
+++ b/documentViewer.py	Wed Jul 25 21:28:31 2012 +0200
@@ -143,7 +143,7 @@
     common_template = PageTemplateFile('zpt/common_template', globals())
     info_xml = PageTemplateFile('zpt/info_xml', globals())
     docuviewer_css = ImageFile('css/docuviewer.css',globals())
-    # make ImageFile better for development
+    # make docuviewer_css refreshable for development
     docuviewer_css.index_html = refreshingImageFileIndexHtml
     jquery_js = ImageFile('js/jquery.js',globals())
     
@@ -576,13 +576,21 @@
 
         # image path
         if mode != 'texttool':
-            # override image path from texttool with url TODO: how about mode=auto?
+            # override image path from texttool with url parameter TODO: how about mode=auto?
             docinfo['imagePath'] = url.replace('/mpiwg/online/', '', 1)
 
         # number of images from digilib
         if docinfo.get('imagePath', None):
             docinfo['imageURL'] = self.digilibBaseUrl + "/servlet/Scaler?fn=" + docinfo['imagePath']
             docinfo = self.getDocinfoFromDigilib(docinfo, docinfo['imagePath'])
+        else:
+            # imagePath still missing? try "./pageimg"
+            imgPath = os.path.join(docUrl, 'pageimg')
+            docinfo = self.getDocinfoFromDigilib(docinfo, imgPath)
+            if docinfo.get('numPages', 0) > 0:
+                # there are pages
+                docinfo['imagePath'] = imgPath
+                docinfo['imageURL'] = self.digilibBaseUrl + "/servlet/Scaler?fn=" + docinfo['imagePath']
 
         # check numPages
         if docinfo.get('numPages', 0) == 0:
@@ -662,7 +670,6 @@
                 docinfo['presentationUrl'] = presentation
             else:
                 docinfo['presentationUrl'] = os.path.join(docPath, presentation)
-            
         
         return docinfo
 
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/common_template.zpt
--- a/zpt/common_template.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/common_template.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -11,7 +11,11 @@
                 docpath docinfo/textURLPath | nothing;
                 bib docinfo/bib | nothing; bibType docinfo/bibType | nothing;
                 formattedLabel python:here.metadataService.getBibFormattedLabel(bibdata=bib);">
-    <div tal:condition="not:formattedLabel">
+    <div class="logo" tal:condition="exists:here/template/logo.png">
+      <img tal:attributes="src here/template/logo.png/absolute_url"/>
+    </div>
+    <div class="title-block">
+    <div class="title" tal:condition="not:formattedLabel">
       <tal:block tal:condition="python:docinfo['creator'] or docinfo['title']">
         <i tal:content="docinfo/creator" />,
         <span tal:content="docinfo/title" />, <span tal:content="docinfo/date" />
@@ -19,16 +23,24 @@
       <span tal:condition="not:python:docinfo['creator'] or docinfo['title']"
         tal:content="string:[no bibliographical information for this document (type ${bibType})]" />
     </div>
-    <div tal:condition="formattedLabel" tal:content="structure formattedLabel" />
-    <div class="doclinks">
-      <a tal:condition="python:viewMode!='index'" tal:attributes="href python:here.getLink('viewMode','index')">Bibliographical
-        information</a>
-      <a tal:condition="python:viewMode!='text'" tal:attributes="href python:here.getLink('viewMode','text')">Page view</a>
-      <a tal:condition="python:viewMode!='thumbs'" tal:attributes="href python:here.getLink('viewMode','thumbs')">Thumbnail overview</a>
+    <div class="title" tal:condition="formattedLabel" tal:content="structure formattedLabel" />
+    <ul class="view-switcher">
+      <li tal:attributes="class python:here.getStyle(viewMode, 'text')"><a tal:omit-tag="python:viewMode=='text'"
+        tal:attributes="href python:here.getLink('viewMode','text')">Text</a></li>
+      <li tal:attributes="class python:here.getStyle(viewMode, 'images')"><a tal:omit-tag="python:viewMode=='images'"
+        tal:attributes="href python:here.getLink('viewMode','images')">Image</a></li>
+      <li tal:attributes="class python:here.getStyle(viewMode, 'xml')"><a tal:omit-tag="python:viewMode=='xml'"
+        tal:attributes="href python:here.getLink('viewMode','xml')">XML</a></li>
+      <li tal:attributes="class python:here.getStyle(viewMode, 'thumbs')"><a tal:omit-tag="python:viewMode=='thumbs'"
+        tal:attributes="href python:here.getLink('viewMode','thumbs')">Thumbnail overview</a></li>
+      <li tal:attributes="class python:here.getStyle(viewMode, 'index')"><a tal:omit-tag="python:viewMode=='index'"
+        tal:attributes="href python:here.getLink('viewMode','index')">Document information</a></li>
+    </ul>
     </div>
   </metal:block>
   <!-- /head -->
 
+
   <!-- page ruler with previous/next page buttons -->
   <metal:block metal:define-macro="page_ruler"
     tal:define="
@@ -37,94 +49,75 @@
               left python:test(flowLtr,prev,next); right python:test(flowLtr,next,prev);
               leftest python:test(flowLtr,first,last); rightest python:test(flowLtr,last,first);">
     <form class="autosubmit" tal:attributes="action viewerUrl">
-      <input type="hidden" tal:define="params python:here.getParams('pn', None)"
-        tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
-      page <a tal:condition="leftest"
-        tal:attributes="href python:here.getLink('pn',leftest)">|&lt;</a> <span
-        tal:condition="not:leftest">|&lt;</span> <a tal:condition="left"
-        tal:attributes="href python:here.getLink('pn',left)">&lt;</a> <span
-        tal:condition="not:left">&lt;</span> <input class="autosubmit" size="3"
-        type="text" name="pn" tal:attributes="value pn" /> <span class="originalPage"
-        title="Original page number"
-        tal:define="originalPage pageinfo/pageNumberOrig | nothing"
-        tal:condition="python:originalPage!=None"> (<span
-        tal:replace="originalPage" /><span
-        tal:define="originalPageNorm pageinfo/pageNumberOrigNorm | nothing"
-        tal:condition="python:originalPageNorm!=None"> [<span
-          tal:replace="originalPageNorm" />]
-      </span>)
-      </span> <input type="submit" value="Go" /> of <span tal:replace="numPages" /> <a
-        tal:condition="right" tal:attributes="href python:here.getLink('pn',right)">&gt;</a>
-      <span tal:condition="not:right">&gt;</span> <a tal:condition="rightest"
-        tal:attributes="href python:here.getLink('pn',rightest)">&gt;|</a> <span
+      <input type="hidden" tal:define="params python:here.getParams('pn', None)" tal:repeat="param params"
+        tal:attributes="name param; value python:params[param]" />
+        <span class="ruler-main">page <a tal:condition="leftest"
+        tal:attributes="href python:here.getLink('pn',leftest)">|&lt;</a> <span tal:condition="not:leftest">|&lt;</span> <a
+        tal:condition="left" tal:attributes="href python:here.getLink('pn',left)">&lt;</a> <span tal:condition="not:left">&lt;</span>
+        <input class="autosubmit" size="3" type="text" name="pn" tal:attributes="value pn" /> <span class="originalPage"
+        title="Original page number" tal:define="originalPage pageinfo/pageNumberOrig | nothing"
+        tal:condition="python:originalPage!=None"> (<span tal:replace="originalPage" /><span
+          tal:define="originalPageNorm pageinfo/pageNumberOrigNorm | nothing" tal:condition="python:originalPageNorm!=None">
+            [<span tal:replace="originalPageNorm" />]
+        </span>)
+        </span> <input type="submit" value="Go" /> of <span tal:replace="numPages" /> <a tal:condition="right"
+        tal:attributes="href python:here.getLink('pn',right)">&gt;</a> <span tal:condition="not:right">&gt;</span> <a
+        tal:condition="rightest" tal:attributes="href python:here.getLink('pn',rightest)">&gt;|</a> <span
         tal:condition="not:rightest">&gt;|</span>
+      </span> <!-- ruler-main -->
     </form>
   </metal:block>
   <!-- /ruler -->
 
   <!-- toc ruler (using getBatch) with previous/next toc page buttons -->
   <metal:block metal:define-macro="toc_ruler">
-    <form class="autosubmit" tal:attributes="action viewerUrl"
-      tal:define="startParam startParam | string:start">
-      <input type="hidden" tal:define="params python:here.getParams(startParam, None)"
-        tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
-      <a tal:condition="batch/prevStart"
-        tal:attributes="href python:here.getLink(startParam,batch['prevStart'])">&lt;</a>
-      <span tal:condition="not:batch/prevStart">&lt;</span>
+    <form class="autosubmit" tal:attributes="action viewerUrl" tal:define="startParam startParam | string:start">
+      <input type="hidden" tal:define="params python:here.getParams(startParam, None)" tal:repeat="param params"
+        tal:attributes="name param; value python:params[param]" /> <a tal:condition="batch/prevStart"
+        tal:attributes="href python:here.getLink(startParam,batch['prevStart'])">&lt;</a> <span tal:condition="not:batch/prevStart">&lt;</span>
       <select class="autosubmit" tal:attributes="name startParam">
-        <option tal:repeat="grp batch/batches"
-          tal:attributes="selected python:(start==grp['start']); value grp/start"
+        <option tal:repeat="grp batch/batches" tal:attributes="selected python:(start==grp['start']); value grp/start"
           tal:content="string:${grp/start} - ${grp/end}" />
-      </select>
-      <input type="submit" value="Go" /> <a tal:condition="batch/nextStart"
-        tal:attributes="href python:here.getLink(startParam,batch['nextStart'])">&gt;</a>
-      <span tal:condition="not:batch/nextStart">&gt;</span>
+      </select> <input type="submit" value="Go" /> <a tal:condition="batch/nextStart"
+        tal:attributes="href python:here.getLink(startParam,batch['nextStart'])">&gt;</a> <span tal:condition="not:batch/nextStart">&gt;</span>
     </form>
   </metal:block>
 
   <!-- toc ruler for thumbs (using getPageBatch) with previous/next toc page buttons -->
   <metal:block metal:define-macro="toc_ruler_thumbs">
     <form class="autosubmit" tal:attributes="action viewerUrl">
-      <input type="hidden" tal:define="params python:here.getParams('start',None)"
-        tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
-      <a tal:condition="left" tal:attributes="href python:here.getLink('start',left)">&lt;</a>
-      <span tal:condition="not:left">&lt;</span>
-      <select class="autosubmit" name="start"
-        tal:define="ofs python:test(pageinfo['pageZero'],0,1)">
+      <input type="hidden" tal:define="params python:here.getParams('start',None)" tal:repeat="param params"
+        tal:attributes="name param; value python:params[param]" /> <a tal:condition="left"
+        tal:attributes="href python:here.getLink('start',left)">&lt;</a> <span tal:condition="not:left">&lt;</span> <select
+        class="autosubmit" name="start" tal:define="ofs python:test(pageinfo['pageZero'],0,1)">
         <tal:block>
-          <option tal:repeat="grp pageBatch/batches"
-            tal:attributes="selected python:start==grp['start']; value grp/start;"
+          <option tal:repeat="grp pageBatch/batches" tal:attributes="selected python:start==grp['start']; value grp/start;"
             tal:content="string:${grp/start} - ${grp/end}" />
         </tal:block>
-      </select>
-      <input type="submit" value="Go" /> <a tal:condition="right"
-        tal:attributes="href python:here.getLink('start',right)">&gt;</a> <span
-        tal:condition="not:right">&gt;</span>
+      </select> <input type="submit" value="Go" /> <a tal:condition="right" tal:attributes="href python:here.getLink('start',right)">&gt;</a>
+      <span tal:condition="not:right">&gt;</span>
     </form>
   </metal:block>
 
   <!-- toc type switcher -->
   <metal:block metal:define-macro="toc_switcher">
-    <ul class="switcher">
-      <li tal:attributes="class python:test(tocMode=='thumbs', 'sel', None)">
-        <a tal:attributes="href python:here.getLink('tocMode','thumbs')">Thumbnails</a>
-      </li>
-      <li tal:attributes="class python:test(tocMode=='text', 'sel', None)"
-        tal:condition="python:docpath and docinfo.get('numTocEntries', None)">
-        <a tal:attributes="href python:here.getLink('tocMode','text')">Content</a>
-      </li>
-      <li tal:attributes="class python:test(tocMode=='figures', 'sel', None)"
-        tal:condition="python:docpath and docinfo.get('numFigureEntries', None)">
-        <a tal:attributes="href python:here.getLink('tocMode','figures')">Figures</a>
-      </li>
-      <li tal:attributes="class python:test(tocMode=='concordance', 'sel', None)"
-        tal:condition="python:docpath and docinfo.get('pageNumbers', None)">
-        <a tal:attributes="href python:here.getLink('tocMode','concordance')">Concordance</a>
-      </li>
-      <li tal:attributes="class python:test(tocMode=='none', 'sel', None)">
-        <a tal:attributes="href python:here.getLink('tocMode','none')">None</a>
-      </li>
-    </ul>
+    <div class="toc-switcher">
+      <ul>
+        <li tal:attributes="class python:here.getStyle(tocMode, 'none')"><span><a tal:omit-tag="python:tocMode=='none'"
+            tal:attributes="href python:here.getLink('tocMode','none')">None</a></span></li>
+        <li tal:attributes="class python:here.getStyle(tocMode, 'concordance')"
+          tal:condition="python:docpath and docinfo.get('pageNumbers', None)"><span><a
+            tal:omit-tag="python:tocMode=='concordance'" tal:attributes="href python:here.getLink('tocMode','concordance')">Concordance</a></span></li>
+        <li tal:attributes="class python:here.getStyle(tocMode, 'figures')"
+          tal:condition="python:docpath and docinfo.get('numFigureEntries', None)"><span><a
+            tal:omit-tag="python:tocMode=='figures'" tal:attributes="href python:here.getLink('tocMode','figures')">Figures</a></span></li>
+        <li tal:attributes="class python:here.getStyle(tocMode, 'text')"
+          tal:condition="python:docpath and docinfo.get('numTocEntries', None)"><span><a
+            tal:omit-tag="python:tocMode=='text'" tal:attributes="href python:here.getLink('tocMode','text')">Content</a></span></li>
+        <li tal:attributes="class python:here.getStyle(tocMode, 'thumbs')"><span><a
+            tal:omit-tag="python:tocMode=='thumbs'" tal:attributes="href python:here.getLink('tocMode','thumbs')">Thumbnails</a></span></li>
+      </ul>
+    </div>
   </metal:block>
 
 </body>
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/layer_text_search.zpt
--- a/zpt/layer_text_search.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/layer_text_search.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -15,10 +15,8 @@
     <!-- LAYER DISPLAY OPTION  -->
     <ul>
       <metal:block metal:define-macro="layer_select_li">
-        <li tal:condition="python:query">
-          <input type="checkbox" class="autosubmit" name="viewLayer" value="search"
-            tal:attributes="checked python:'search' in viewLayers" /> Search hits
-        </li>
+        <li tal:condition="python:query"><input type="checkbox" class="autosubmit" name="viewLayer" value="search"
+          tal:attributes="checked python:'search' in viewLayers" /> Search hits</li>
       </metal:block>
     </ul>
   </div>
@@ -47,38 +45,25 @@
     <div class="options">
       <h4>Search</h4>
       <form tal:attributes="action viewerUrl">
-        <input type="hidden"
-          tal:define="params python:here.getParams(params={'query':None,'queryType':None,'viewLayer':None})"
-          tal:repeat="param params"
-          tal:attributes="name param; value python:params[param]" />
+        <input type="hidden" tal:define="params python:here.getParams(params={'query':None,'queryType':None,'viewLayer':None})"
+          tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
         <!-- make sure we have one viewLayer=search -->
         <tal:block tal:repeat="vl viewLayers">
-          <input type="hidden" name="viewLayer" tal:attributes="value vl"
-            tal:condition="python:vl != 'search'" />
+          <input type="hidden" name="viewLayer" tal:attributes="value vl" tal:condition="python:vl != 'search'" />
         </tal:block>
         <input type="hidden" name="viewLayer" value="search" />
         <!-- query text -->
-        <input type="text" name="query" tal:attributes="value query" /> <input
-          type="submit" value="Search" /> <a
+        <input type="text" name="query" tal:attributes="value query" /> <br /> <input type="submit" value="Search" /> <a
           tal:attributes="href python:here.getLink('query',None)">Clear</a>
         <ul>
-          <li>
-            <input type="radio" name="queryType" value="fulltext"
-              tal:attributes="checked python:queryType=='fulltext'" /> Exact
-          </li>
-          <li>
-            <input type="radio" name="queryType" value="fulltextMorph"
-              tal:attributes="checked python:queryType=='fulltextMorph'" /> All forms
-          </li>
-          <li>
-            <input type="radio" name="queryType" value="ftIndex"
-              tal:attributes="checked python:queryType=='ftIndex'" /> Fulltext index
-          </li>
-          <li>
-            <input type="radio" name="queryType" value="ftIndexMorph"
-              tal:attributes="checked python:queryType=='ftIndexMorph'" /> Morphological
-            index
-          </li>
+          <li><input type="radio" name="queryType" value="fulltext" tal:attributes="checked python:queryType=='fulltext'" />
+            Exact</li>
+          <li><input type="radio" name="queryType" value="fulltextMorph"
+            tal:attributes="checked python:queryType=='fulltextMorph'" /> All forms</li>
+          <li><input type="radio" name="queryType" value="ftIndex" tal:attributes="checked python:queryType=='ftIndex'" />
+            Fulltext index</li>
+          <li><input type="radio" name="queryType" value="ftIndexMorph"
+            tal:attributes="checked python:queryType=='ftIndexMorph'" /> Morphological index</li>
         </ul>
       </form>
     </div>
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/toc_concordance.zpt
--- a/zpt/toc_concordance.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/toc_concordance.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -5,41 +5,36 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
-  <!-- block used for main content area -->
-  <div class="toc-concordance" metal:define-macro="main"
-    tal:define="start pageinfo/start; tocsize docinfo/numPages; grpsize pageinfo/tocPageSize;
+  <div class="toc-container" metal:define-macro="main">
+    <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
+    <!-- block used for main content area -->
+    <div class="tocbody concordance"
+      tal:define="start pageinfo/start; tocsize docinfo/numPages; grpsize pageinfo/tocPageSize;
                 pageNumbers docinfo/pageNumbers | nothing;
                 batch python:here.getBatch(start=start,size=grpsize,end=tocsize,data=pageNumbers);">
-    <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
-    <div class="ruler">
-      <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler" />
-    </div>
-    <div class="content">
-      <table tal:condition="pageNumbers">
-        <tr>
-          <th>Scan</th>
-          <th>Original</th>
-        </tr>
-        <tr tal:repeat="toc batch/this">
-          <tal:block tal:define="pn toc/pn | nothing">
-            <td>
-              <a tal:condition="pn"
-                tal:attributes="href python:here.getLink('pn', toc['pn'])"
-                tal:content="toc/pn" title="Scan number">ScanNo</a>
-            </td>
-            <td>
-              <span class="originalPage" title="Original page number"
-                tal:define="originalPage toc/no | nothing"
-                tal:condition="python:originalPage!=None"><span
-                tal:replace="originalPage" /><span
-                tal:define="originalPageNorm toc/non | nothing"
-                tal:condition="python:originalPageNorm!=None"> [<span
-                  tal:replace="originalPageNorm" />]
-              </span></span>
-            </td>
-          </tal:block>
-        </tr>
-      </table>
+      <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
+      <div class="ruler">
+        <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler" />
+      </div>
+      <div class="content">
+        <table tal:condition="pageNumbers">
+          <tr>
+            <th>Scan</th>
+            <th>Original</th>
+          </tr>
+          <tr tal:repeat="toc batch/this">
+            <tal:block tal:define="pn toc/pn | nothing">
+              <td><a tal:condition="pn" tal:attributes="href python:here.getLink('pn', toc['pn'])" tal:content="toc/pn"
+                title="Scan number">ScanNo</a></td>
+              <td><span class="originalPage" title="Original page number" tal:define="originalPage toc/no | nothing"
+                tal:condition="python:originalPage!=None"><span tal:replace="originalPage" /><span
+                  tal:define="originalPageNorm toc/non | nothing" tal:condition="python:originalPageNorm!=None"> [<span
+                    tal:replace="originalPageNorm" />]
+                </span></span></td>
+            </tal:block>
+          </tr>
+        </table>
+      </div>
     </div>
   </div>
   <!-- /toc -->
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/toc_figures.zpt
--- a/zpt/toc_figures.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/toc_figures.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -5,16 +5,19 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
-  <!-- block used for main content area -->
-  <div class="toc-figures" metal:define-macro="main"
-    tal:define="start pageinfo/start; tocsize docinfo/numFigureEntries; grpsize pageinfo/tocPageSize;
+  <div class="toc-container" metal:define-macro="main">
+    <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
+    <!-- block used for main content area -->
+    <div class="tocbody figures"
+      tal:define="start pageinfo/start; tocsize docinfo/numFigureEntries; grpsize pageinfo/tocPageSize;
                 batch python:here.getBatch(start=start,size=grpsize,end=tocsize);">
-    <div metal:use-macro="here/template/common_template/macros/toc_switcher"/>
-    <div class="ruler">
-        <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler"/>
+      <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
+      <div class="ruler">
+        <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler" />
+      </div>
+      <div class="content"
+        tal:content="structure python:here.getTocPage(mode='figures',start=start,pageinfo=pageinfo,docinfo=docinfo)" />
     </div>
-    <div class="content"
-      tal:content="structure python:here.getTocPage(mode='figures',start=start,pageinfo=pageinfo,docinfo=docinfo)" />
   </div>
   <!-- /toc -->
 </body>
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/toc_text.zpt
--- a/zpt/toc_text.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/toc_text.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -5,17 +5,18 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
-  <!-- block used for main content area -->
-  <div class="toc-text" metal:define-macro="main"
-    tal:define="start pageinfo/start; tocsize docinfo/numTocEntries; grpsize pageinfo/tocPageSize;
+  <div class="toc-container" metal:define-macro="main">
+    <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
+    <!-- block used for main content area -->
+    <div class="tocbody text"
+      tal:define="start pageinfo/start; tocsize docinfo/numTocEntries; grpsize pageinfo/tocPageSize;
                 batch python:here.getBatch(start=start,size=grpsize,end=tocsize);">
-    <div metal:use-macro="here/template/common_template/macros/toc_switcher"/>
-    <div class="ruler">
-        <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler"/>
+      <div class="ruler">
+        <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler" />
+      </div>
+      <div class="content" tal:content="structure python:here.getTocPage(mode='text',start=start,pageinfo=pageinfo,docinfo=docinfo)" />
     </div>
-    <div class="content"
-      tal:content="structure python:here.getTocPage(mode='text',start=start,pageinfo=pageinfo,docinfo=docinfo)" />
   </div>
-  <!-- toc -->
+    <!-- toc -->
 </body>
 </html>
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/toc_thumbs.zpt
--- a/zpt/toc_thumbs.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/toc_thumbs.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -5,38 +5,39 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
-  <!-- block used for main content area -->
-  <div class="toc-thumbs" metal:define-macro="main"
-    tal:define="start pageinfo/start;
+  <div class="toc-container" metal:define-macro="main">
+    <div metal:use-macro="here/template/common_template/macros/toc_switcher" />
+    <!-- block used for main content area -->
+    <div class="tocbody thumbs"
+      tal:define="start pageinfo/start;
                 grpsize pageinfo/groupsize;
                 numgroups pageinfo/numgroups;
                 pageBatch pageinfo/pageBatch; pageZero pageinfo/pageZero;
                 pageNumbers docinfo/pageNumbers | nothing;
                 left python:test(flowLtr,pageBatch['prevStart'],pageBatch['nextStart']);
                 right python:test(flowLtr,pageBatch['nextStart'],pageBatch['prevStart']);">
-    <div metal:use-macro="here/template/common_template/macros/toc_switcher"/>
 
-    <div class="content">
-      <div class="ruler">
-        <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs"/>
-      </div>
+      <div class="content">
+        <div class="ruler">
+          <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
+        </div>
 
-      <table class="thumbs">
-        <tr tal:repeat="row pageBatch/pages">
-          <td tal:repeat="thumb row"
-            tal:attributes="class python:here.getStyle(thumb['idx'],pn,'thumb')">
-            <a tal:define="idx thumb/idx" tal:condition="idx"
-              tal:attributes="href python:here.getLink('pn',idx)">
-              <img
+        <table class="thumbs">
+          <tr tal:repeat="row pageBatch/pages">
+            <td tal:repeat="thumb row" tal:attributes="class python:here.getStyle(thumb['idx'],pn,'thumb')"><a
+              tal:define="idx thumb/idx" tal:condition="idx" tal:attributes="href python:here.getLink('pn',idx)"> <img
                 tal:attributes="src python:test(docinfo['imageURL'],here.getScalerUrl(pn=idx,dw=100,dh=100,docinfo=docinfo),'images/pic');
-                                alt idx" /><br/>
-              <span title="Scan number" tal:content="idx"/>
-              <span tal:condition="python:pageNumbers and pageNumbers.get(idx, False) and pageNumbers[idx]['no']" title="Original page number" tal:content="python:' (%s)'%(pageNumbers[idx]['no'])"/>
-            </a>
-          </td>
-        </tr>
-      </table>
-    </div> <!-- content -->
-  </div> <!-- toc -->
+                                alt idx" /><br />
+                <span title="Scan number" tal:content="idx" /> <span
+                tal:condition="python:pageNumbers and pageNumbers.get(idx, False) and pageNumbers[idx]['no']"
+                title="Original page number" tal:content="python:' (%s)'%(pageNumbers[idx]['no'])" />
+            </a></td>
+          </tr>
+        </table>
+      </div>
+      <!-- content -->
+    </div>
+    <!-- toc -->
+  </div>
 </body>
 </html>
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/viewer_images.zpt
--- a/zpt/viewer_images.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/viewer_images.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -24,15 +24,15 @@
     tal:attributes="href string:$dlBaseUrl/jquery/jquery.digilib.css" />
 
   <script type="text/javascript"
-    tal:content="string:
+    tal:content="python:'''
        var dlOpts = {
             'interactionMode' : 'fullscreen',
-            'digilibBaseUrl' : '$dlBaseUrl',
-            'fn' : '${docinfo/imagePath}',
-            'pn' : '${pageinfo/pn}',
+            'digilibBaseUrl' : '%s',
+            'fn' : '%s',
+            'pn' : '%s',
             'suppressParamNames' : ['fn'],
             'scalerInsets' : {'x' : 140, 'y' : 100}
-        };"></script>
+        };'''%(dlBaseUrl,docinfo.get('imagePath',''),pageinfo.get('pn','1'))"></script>
 
   <script type="text/javascript">
             // <!--
@@ -69,13 +69,6 @@
         <div class="ruler">
           <metal:block metal:use-macro="here/template/common_template/macros/page_ruler" />
         </div>
-        <ul class="switcher">
-          <li class="sel">Image</li>
-          <li tal:condition="docpath">
-            <a tal:attributes="href python:here.getLink('viewMode','text')">Text</a>
-          </li>
-        </ul>
-        <!-- /switcher -->
         <div class="content">
           <div id="scaler">
             <img
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/viewer_text.zpt
--- a/zpt/viewer_text.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/viewer_text.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -13,24 +13,22 @@
 <link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
 <script type="text/javascript" tal:attributes="src string:$rootUrl/template/jquery_js"></script>
 <script type="text/javascript">
-    // <!--
-    $(document).ready(function() {
-        // autosubmit forms
-        $('form.autosubmit').find('.autosubmit').change(function() {
-            this.form.submit();
-        });
-        $('form.autosubmit input[type="submit"]').hide();
-    });
+	// <!--
+	$(document).ready(function() {
+		// autosubmit forms
+		$('form.autosubmit').find('.autosubmit').change(function() {
+			this.form.submit();
+		});
+		$('form.autosubmit input[type="submit"]').hide();
+	});
 // -->
 </script>
 <!--  layer headers (rendered always) -->
 <tal:block tal:repeat="layer availableLayers">
-  <tal:block tal:define="mpath string:here/template/layer_text_${layer}/macros/html_head"
-    tal:condition="python:exists(mpath)">
+  <tal:block tal:define="mpath string:here/template/layer_text_${layer}/macros/html_head" tal:condition="python:exists(mpath)">
     <metal:block metal:use-macro="python:path(mpath)" />
   </tal:block>
 </tal:block>
-
 </head>
 <body tal:condition="numPages">
   <tal:block
@@ -42,11 +40,11 @@
     <div class="page-head">
       <metal:block metal:use-macro="here/template/common_template/macros/head" />
     </div>
+
     <div class="page-body" tal:condition="python:here.isAccessible(docinfo)">
       <!--table of contents-->
       <div class="col toc">
-        <metal:block
-          metal:use-macro="python:path('here/template/toc_%s/macros/main'%tocMode)" />
+        <metal:block metal:use-macro="python:path('here/template/toc_%s/macros/main'%tocMode)" />
       </div>
 
       <!-- text page -->
@@ -54,12 +52,6 @@
         <div class="ruler">
           <metal:block metal:use-macro="here/template/common_template/macros/page_ruler" />
         </div>
-        <ul class="switcher">
-          <li>
-            <a tal:attributes="href python:here.getLink('viewMode','images')">Image</a>
-          </li>
-          <li class="sel">Text</li>
-        </ul>
         <div class="content">
           <div class="pageHeaderTitle" tal:condition="exists:pageinfo/pageHeaderTitle"
             tal:content="structure pageinfo/pageHeaderTitle" />
@@ -80,52 +72,32 @@
       <div class="col buttons">
         <!--"BEGIN TEXT DISPLAY"  -->
         <div class="options">
-          <h4>Text display</h4>
+          <h4>Text layer</h4>
           <form tal:attributes="action viewerUrl" class="autosubmit">
-            <input type="hidden"
-              tal:define="params python:here.getParams(params={'viewLayer':None,'viewMode':None})"
-              tal:repeat="param params"
-              tal:attributes="name param; value python:params[param]" />
+            <input type="hidden" tal:define="params python:here.getParams(params={'viewLayer':None,'viewMode':None})"
+              tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
             <ul>
-              <li>
-                <input class="autosubmit" type="radio" name="viewMode" value="text"
-                  tal:attributes="checked python:viewMode=='text'" /> Text
-                <ul>
-                  <!-- text layer select buttons (rendered always) -->
-                  <tal:block tal:repeat="layer availableLayers">
-                    <tal:block
-                      tal:define="mpath string:here/template/layer_text_${layer}/macros/layer_select_li"
-                      tal:condition="python:exists(mpath)">
-                      <li metal:use-macro="python:path(mpath)" />
-                    </tal:block>
-                  </tal:block>
-                </ul>
-              </li>
-              <li>
-                <input type="radio" class="autosubmit" name="viewMode" value="xml"
-                  tal:attributes="checked python:viewMode=='xml'" /> XML<br /> <input
-                  type="submit" value="Go!" />
-              </li>
+              <!-- text layer select buttons (rendered always) -->
+              <tal:block tal:repeat="layer availableLayers">
+                <tal:block tal:define="mpath string:here/template/layer_text_${layer}/macros/layer_select_li"
+                  tal:condition="python:exists(mpath)">
+                  <li metal:use-macro="python:path(mpath)" />
+                </tal:block>
+              </tal:block>
             </ul>
           </form>
         </div>
         <!--"END TEXT DISPLAY"-->
 
         <!--"BEGIN TEXT SIZE"-->
-        <div class="options">
+        <!--  <div class="options">
           <h4>Text size</h4>
           <ul class="fsizer">
-            <li>
-              <a href="javascript:fontSize(12);" class="fs_sml">S</a>
-            </li>
-            <li>
-              <a href="javascript:fontSize(14);" class="fs_med">M</a>
-            </li>
-            <li>
-              <a href="javascript:fontSize(16);" class="fs_lrg">L</a>
-            </li>
+            <li><a href="javascript:fontSize(12);" class="fs_sml">S</a></li>
+            <li><a href="javascript:fontSize(14);" class="fs_med">M</a></li>
+            <li><a href="javascript:fontSize(16);" class="fs_lrg">L</a></li>
           </ul>
-        </div>
+        </div> -->
         <!--"END TEXT SIZE"-->
 
         <!--"BEGIN TEXT NORMALIZATION"-->
@@ -135,22 +107,14 @@
             tal:define="norm python:pageinfo.get('characterNormalization','regPlusNorm');">
             <input type="hidden"
               tal:define="params python:here.getParams(params={'characterNormalization':None, 'viewLayer':viewLayer})"
-              tal:repeat="param params"
-              tal:attributes="name param; value python:params[param]" />
+              tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
             <ul>
-              <li>
-                <input type="radio" class="autosubmit" name="characterNormalization"
-                  value="orig" tal:attributes="checked python:norm=='orig'" /> Original
-              </li>
-              <li>
-                <input type="radio" class="autosubmit" name="characterNormalization"
-                  value="reg" tal:attributes="checked python:norm=='reg'" /> Regularized
-              </li>
-              <li>
-                <input type="radio" class="autosubmit" name="characterNormalization"
-                  value="regPlusNorm" tal:attributes="checked python:norm=='regPlusNorm'" />
-                Normalized
-              </li>
+              <li><input type="radio" class="autosubmit" name="characterNormalization" value="orig"
+                tal:attributes="checked python:norm=='orig'" /> Original</li>
+              <li><input type="radio" class="autosubmit" name="characterNormalization" value="reg"
+                tal:attributes="checked python:norm=='reg'" /> Regularized</li>
+              <li><input type="radio" class="autosubmit" name="characterNormalization" value="regPlusNorm"
+                tal:attributes="checked python:norm=='regPlusNorm'" /> Normalized</li>
             </ul>
             <input type="submit" value="Go!" />
           </form>
@@ -159,8 +123,7 @@
 
         <!--  layer option boxes (rendered if active) -->
         <tal:block tal:repeat="layer availableLayers">
-          <tal:block
-            tal:define="mpath string:here/template/layer_text_${layer}/macros/options_box"
+          <tal:block tal:define="mpath string:here/template/layer_text_${layer}/macros/options_box"
             tal:condition="python:exists(mpath)">
             <metal:block metal:use-macro="python:path(mpath)" />
           </tal:block>
diff -r ac232c293ad9 -r 0b8bed1223ad zpt/viewer_xml.zpt
--- a/zpt/viewer_xml.zpt	Thu Jul 05 12:08:58 2012 +0200
+++ b/zpt/viewer_xml.zpt	Wed Jul 25 21:28:31 2012 +0200
@@ -45,12 +45,6 @@
         <div class="ruler">
           <metal:block metal:use-macro="here/template/common_template/macros/page_ruler" />
         </div>
-        <ul class="switcher">
-          <li>
-            <a tal:attributes="href python:here.getLink('viewMode','images')">Image</a>
-          </li>
-          <li class="sel">Text</li>
-        </ul>
         <div class="content">
           <div class="pageHeaderTitle" tal:condition="exists:pageinfo/pageHeaderTitle"
             tal:content="structure pageinfo/pageHeaderTitle" />
@@ -61,31 +55,8 @@
 
       <!-- right-side options -->
       <div class="col buttons">
-        <!--"BEGIN TEXT DISPLAY"  -->
-        <div class="options">
-          <h4>Text display</h4>
-          <form tal:attributes="action viewerUrl" class="autosubmit">
-            <input type="hidden"
-              tal:define="params python:here.getParams(params={'viewMode':None})"
-              tal:repeat="param params"
-              tal:attributes="name param; value python:params[param]" />
-            <ul>
-              <li>
-                <input class="autosubmit" type="radio" name="viewMode" value="text"
-                  tal:attributes="checked python:viewMode=='text'" /> Text
-              </li>
-              <li>
-                <input type="radio" class="autosubmit" name="viewMode" value="text"
-                  tal:attributes="checked python:viewMode=='xml'" /> XML
-              </li>
-            </ul>
-            <input type="submit" value="Go!" />
-          </form>
-        </div>
-        <!--"END TEXT DISPLAY"-->
-
         <!--"BEGIN TEXT SIZE"-->
-        <div class="options">
+        <!-- <div class="options">
           <h4>Text size</h4>
           <ul class="fsizer">
             <li>
@@ -98,7 +69,7 @@
               <a href="javascript:fontSize(16);" class="fs_lrg">L</a>
             </li>
           </ul>
-        </div>
+        </div> -->
         <!--"END TEXT SIZE"-->
 
       </div>