Index: css/docuviewer.css
===================================================================
--- css/docuviewer.css	(revision 482)
+++ css/docuviewer.css	(revision 483)
@@ -7,4 +7,7 @@
 }
 div.col_main {
+    display: table-cell;
+}
+div.col_right {
     display: table-cell;
 }
Index: documentViewer.py
===================================================================
--- documentViewer.py	(revision 482)
+++ documentViewer.py	(revision 483)
@@ -125,4 +125,5 @@
     # templates and forms
     viewer_text = PageTemplateFile('zpt/viewer_text', globals())
+    viewer_images = PageTemplateFile('zpt/viewer_images', globals())
     viewer_main = PageTemplateFile('zpt/viewer_main', globals())
     toc_thumbs = PageTemplateFile('zpt/toc_thumbs', globals())
Index: zpt/viewer_images.zpt
===================================================================
--- zpt/viewer_images.zpt	(revision 483)
+++ zpt/viewer_images.zpt	(revision 483)
@@ -0,0 +1,101 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+  tal:define="docinfo options/docinfo; pageinfo options/pageinfo; viewMode pageinfo/viewMode;
+              tocMode pageinfo/tocMode; viewType pageinfo/viewType; viewerUrl docinfo/viewerUrl;
+              numPages docinfo/numPages | nothing; dlBaseUrl docinfo/digilibBaseUrl | nothing;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title tal:content="python:docinfo.get('creator',' ') + ' - ' + docinfo.get('title',' ')" />
+  <link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.cookie.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.geometry.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.birdseye.js"></script>
+<!--        <script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.regions.js"></script> -->
+<link rel="stylesheet" type="text/css" tal:attributes="href string:$dlBaseUrl/jquery/jquery.digilib.css" />
+
+<script type="text/javascript"
+  tal:content="string:
+       var dlOpts = {
+            'interactionMode' : 'fullscreen',
+            'digilibBaseUrl' : '$dlBaseUrl',
+            'fn' : '${docinfo/imagePath}',
+            'pn' : '${pageinfo/pn}',
+            'suppressParamNames' : ['fn'],
+            'showRegionNumbers' : true
+        };"></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();
+        // configure digilib
+        $('div.scaler').digilib(dlOpts);
+    });
+//-->
+</script>
+</head>
+<body tal:condition="numPages">
+  <tal:block
+    tal:define="docpath docinfo/textURLPath | nothing;
+              pn pageinfo/pn; 
+              flowLtr python:pageinfo.get('pageFlow','ltr')!='rtl';
+              prev python:test(pn>1,pn-1,None); next python:test(pn<numPages,pn+1,None);
+              first python:test(pn>1,1,None); last python:test(pn<numPages,numPages,None);
+              left python:test(flowLtr,prev,next); right python:test(flowLtr,next,prev);
+              leftest python:test(flowLtr,first,last); rightest python:test(flowLtr,last,first);">
+    <div class="page_head" metal:use-macro="here/template/head_main/macros/main" />
+    <div class="page_body" tal:condition="python:here.isAccessible(docinfo)">
+      <!--table of contents-->
+      <div class="col_left" metal:use-macro="python:path('here/template/toc_%s/macros/main'%tocMode)" />
+      <!-- text page -->
+      <div class="col_main">
+        <div class="ruler">
+          <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" />
+            <tal:block 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>)      
+            </tal:block>
+            <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>
+          </form>
+        </div>
+        <!-- ruler -->
+        <ul class="switcher">
+          <li class="sel">Image</li>
+          <li><a tal:condition="docpath" tal:attributes="href python:here.getLink('viewMode','text')">Text</a></li>
+        </ul>
+        <div class="content">
+          <div class="scaler">
+            <img tal:attributes="src string:${docinfo/imageURL}&pn=${pageinfo/pn}&dw=500&dh=500" />
+          </div>
+        </div> <!-- content -->
+      </div> <!-- col_main -->
+      <div class="col_right">
+        BUTTONS
+      </div>
+    </div> <!-- page_body -->
+    <div class="page_body" tal:condition="python:not here.isAccessible(docinfo)">
+      <div class="errortext">Sorry, access to this document is restricted.</div>
+    </div>
+  </tal:block>
+</body>
+<body tal:condition="not:numPages">
+  <div class="errortext">Sorry, document doesn't exist.</div>
+</body>
+</html>
Index: zpt/viewer_text.zpt
===================================================================
--- zpt/viewer_text.zpt	(revision 481)
+++ zpt/viewer_text.zpt	(revision 483)
@@ -7,4 +7,5 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title tal:content="python:docinfo.get('creator',' ') + ' - ' + docinfo.get('title',' ')"/>
   <link rel="stylesheet" href="template/docuviewer_css" type="text/css">
 </head>
@@ -47,5 +48,11 @@
         <span tal:condition="not:rightest">&gt;|</span>
         </form>
-      </div>
+      </div> <!-- ruler -->
+      <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"/>
