text selection OK, switch outline OK

web/viewer.css

@@ -1,8 +1,6 @@
 * {
   padding: 0;
   margin: 0;
-  -moz-user-select:none;
-  cursor: default;
 }
 
 html {
@@ -21,8 +19,6 @@ body {
   -moz-box-orient: horizontal;
   width: 100%;
   height: 100%;
-  -moz-user-select:none;
-  cursor: default;
 }
 
 #sidebarContainer {
@@ -284,12 +280,12 @@ body {
   content: url(images/toolbarButton-bookmark.png);
 }
     
-.toolbarButton.viewThumbnail::before {
+#viewThumbnail.toolbarButton::before {
   display: inline-block;
   content: url(images/toolbarButton-viewThumbnail.png);
 }
     
-.toolbarButton.viewOutline::before {
+#viewOutline.toolbarButton::before {
   display: inline-block;
   content: url(images/toolbarButton-viewOutline.png);
 }
@@ -352,6 +348,9 @@ body {
   padding: 10px 40px 0;
   overflow: auto;
 }
+#thumbnailView.hidden {
+  display:none;
+}
 
 .thumbnail {
   width: 134px;
@@ -477,3 +476,91 @@ canvas {
   -moz-box-shadow: 0px 2px 10px #ff0;
   -webkit-box-shadow: 0px 2px 10px #ff0;
 }
+
+#loadingBox {
+  margin: 100px 0;
+  text-align: center;
+}
+
+#loadingBar {
+  background-color: #333;
+  display: inline-block;
+  border: 1px solid black;
+  clear: both;
+  margin:0px;
+  line-height: 0;
+  border-radius: 4px;
+  width: 15em;
+  height: 1.5em;
+}
+
+#loadingBar .progress {
+  background-color: green;
+  display: inline-block;
+  float: left;
+
+  background: #b4e391;
+  background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
+  background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
+  background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
+  background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
+  background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);    
+
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  width: 0%;
+  height: 100%;
+}
+
+.textLayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  color: #000;
+  font-family: sans-serif;
+}
+
+.textLayer > div {
+  color: transparent;
+  position: absolute;
+  line-height:1.3;
+}
+
+.annotComment > div {
+  position: absolute;
+}
+
+.annotComment > img {
+  position: absolute;
+}
+
+.annotComment > img:hover {
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.annotComment > div {
+  padding: 0.2em;
+  max-width: 20em;
+  background-color: #F1E47B;
+  box-shadow: 0px 2px 10px #333;
+  -moz-box-shadow: 0px 2px 10px #333;
+  -webkit-box-shadow: 0px 2px 10px #333;
+}
+
+.annotComment > div > h1 {
+  font-weight: normal;
+  font-size: 1.2em;
+  border-bottom: 1px solid #000000;
+  margin: 0px;
+}
+
+/* TODO: file FF bug to support ::-moz-selection:window-inactive
+   so we can override the opaque grey background when the window is inactive;
+   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
+::selection { background:rgba(0,0,255,0.3); }
+::-moz-selection { background:rgba(0,0,255,0.3); }

web/viewer.html

@@ -41,20 +41,20 @@
 
       <div class="toolbar">
         <div id="toolbarContainer">
-          <div id="toolbarSidebar">
+          <div id="toolbarSidebar" class="hidden">
             <div class="splitToolbarButton toggled">
-              <div class="toolbarButton viewThumbnail toggled" title="Show Thumbnails"></div>
+              <div id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></div>
               <div class="splitToolbarButtonSeparator"></div>
-              <div class="toolbarButton viewOutline" title="Show Document Outline"></div>
+              <div id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled></div>
             </div>
           </div>
           <div id="toolbarViewer">
             <div id="sidebarToggle" class="toolbarButton toggled" title="Toggle Sidebar"></div>
             <div class="toolbarButtonSpacer"></div>
             <div class="splitToolbarButton">
-              <div class="toolbarButton pageUp" title="Previous Page"></div>
+              <div class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--"></div>
               <div class="splitToolbarButtonSeparator"></div>
-              <div class="toolbarButton pageDown" title="Next Page"></div>
+              <div class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++"></div>
             </div>
             <div id="pageNumber" class="toolbarField" contentEditable="true">1</div>
             <div id="numPages" class="toolbarLabel"></div>
@@ -74,7 +74,7 @@
         </div>
       </div>
 
-      <div id="sidebarContainer">
+      <div id="sidebarContainer" class="hidden">
         <div id="thumbnailView">
         </div>
 
@@ -91,8 +91,12 @@
         <div id="viewer" />
       </div>
 
-    </div> <!-- outerContainer -->
+      <div id="loadingBox">
+          <div id="loading">Loading... 0%</div>
+          <div id="loadingBar"><div class="progress"></div></div>
+      </div>
 
+    </div> <!-- outerContainer -->
 
 
 
@@ -206,11 +210,11 @@
       </div>
     </div>
  -->
-    <div id="loadingBox">
+<!--     <div id="loadingBox">
         <div id="loading">Loading... 0%</div>
         <div id="loadingBar"><div class="progress"></div></div>
     </div>
-
+ -->
 </div> <!-- display none -->
 
   </body>

web/viewer.js

@@ -498,7 +498,7 @@ var PDFView = {
     var pagesCount = pdf.numPages;
     var id = pdf.fingerprint;
     var storedHash = null;
-    document.getElementById('numPages').textContent = pagesCount;
+    document.getElementById('numPages').textContent = '/ '+pagesCount;
     document.getElementById('pageNumber').max = pagesCount;
     PDFView.documentFingerprint = id;
     var store = PDFView.store = new Settings(id);
@@ -618,23 +618,24 @@ var PDFView = {
   },
 
   switchSidebarView: function pdfViewSwitchSidebarView(view) {
-    var thumbsScrollView = document.getElementById('thumbnailView');
+    var thumbsView = document.getElementById('thumbnailView');
-    var outlineScrollView = document.getElementById('outlineScrollView');
+    var outlineView = document.getElementById('outlineView');
     var thumbsSwitchButton = document.getElementById('thumbsSwitch');
     var outlineSwitchButton = document.getElementById('outlineSwitch');
+
+    if (outlineSwitchButton.getAttribute('disabled'))
+      return;
+
+    thumbsView.classList.toggle('hidden');
+    outlineView.classList.toggle('hidden');
+    document.getElementById('viewThumbnail').classList.toggle('toggled');
+    document.getElementById('viewOutline').classList.toggle('toggled');
+
     switch (view) {
       case 'thumbs':
-        thumbsScrollView.removeAttribute('hidden');
-        outlineScrollView.setAttribute('hidden', 'true');
-        thumbsSwitchButton.setAttribute('data-selected', true);
-        outlineSwitchButton.removeAttribute('data-selected');
         updateThumbViewArea();
         break;
       case 'outline':
-        thumbsScrollView.setAttribute('hidden', 'true');
-        outlineScrollView.removeAttribute('hidden');
-        thumbsSwitchButton.removeAttribute('data-selected');
-        outlineSwitchButton.setAttribute('data-selected', true);
         break;
     }
   },