Changes for new interface

diff --git a/BookReader/BookReader.css b/BookReader/BookReader.css
index 56164d2..99784ed 100644 (file)
--- a/BookReader/BookReader.css
+++ b/BookReader/BookReader.css
@@ -10,6 +10,9 @@ h3 {
   font-weight: 700;
   color: #dedede;
 }
+a {
+    outline: none;
+}
 #BookReader {
  position:absolute;
  font-family: arial, sans-serif;
@@ -19,7 +22,7 @@ h3 {
  bottom:0;
 }
 #BRtoolbar {
-    position: fixed;
+    position: relative;
     top: 0;
     left: 0;
     height: 40px;
@@ -188,9 +191,10 @@ h3 {
     height: 20px;
 }
 #BRreturn span {
-    font-size: 12px;
+    font-size: 11px;
     display: block;
     height: 12px;
+    padding-top: 3px;
 }
 #BRreturn a {
     font-size: 14px;
@@ -229,43 +233,30 @@ h3 {
 .BRicon.book_left:hover {background-position:-480px 0;}
 .BRicon.book_right {background-position:-520px 0;}
 .BRicon.book_right:hover {background-position:-560px 0;}
-.BRicon.zoom_out {background-position:-606px 0;}
-.BRicon.zoom_out:hover {background-position:-646px 0;}
-.BRicon.zoom_in {background-position:-686px 0;}
-.BRicon.zoom_in:hover {background-position:-726px 0;}
+.BRicon.zoom_out {background-position:-600px 0;}
+.BRicon.zoom_out:hover {background-position:-640px 0;}
+.BRicon.zoom_in {background-position:-680px 0;}
+.BRicon.zoom_in:hover {background-position:-720px 0;}
 .BRicon.play {background-position:-760px 0;}
 .BRicon.play:hover {background-position:-800px 0;}
 .BRicon.pause {background-position:-840px 0;}
 .BRicon.pause:hover {background-position:-880px 0;}
+.BRicon.twopg {background-position:-920px 0;}
+.BRicon.twopg:hover {background-position:-960px 0;}
+.BRicon.onepg {background-position:-1000px 0;}
+.BRicon.onepg:hover {background-position:-1040px 0;}
+.BRicon.thumb {background-position:-1080px 0;}
+.BRicon.thumb:hover {background-position:-1120px 0;}
+.BRicon.fit {background-position:-1160px 0;}
+.BRicon.fit:hover {background-position:-1200px 0;}
 
 
-/* NOT CURRENTLY IN USE
-.BRicon.embed {background-position:-440px;}
-.BRicon.embed:hover {background-position:-480px 0;}
-.BRicon.read {background-position:-520px 0;}
-.BRicon.read:hover {background-position:-560px 0;}
-.BRicon.full {background-position:-600px 0;}
-.BRicon.full:hover {background-position:-640px 0;}
-.BRicon.thumb {background-position:-680px 0;}
-.BRicon.thumb:hover {background-position:-720px 0;}
-.BRicon.twopg {background-position:-760px 0;display:none;}
-.BRicon.twopg:hover {background-position:-800px 0;}
-.BRicon.one_page_mode {background-position:;}
-.BRicon.two_page_mode {background-position:;}
-.BRicon.thumbnail_mode {background-position:;}
-.BRicon.book_up {background-position:;}
-.BRicon.book_down {background-position:;}
-.BRicon.book_leftmost {background-position:;}
-.BRicon.book_rightmost {background-position:;}
-.BRicon.book_top {background-position:;}
-.BRicon.book_bottom {background-position:;}
-*/
 a.logo {
     display: block;
     float: left;
     width: 40px;
     height: 40px;
-    margin-right: 10px;
+    margin: 0 5px;
     background: transparent url(images/icon_home.png) no-repeat 0 0;
 }
 a.popOff {
@@ -278,7 +269,6 @@ a.popOff {
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: -1050px 0;
-    outline: none;
 }
 a.popOff:hover {
     background-position: -1100px 0;
@@ -412,7 +402,7 @@ a.BRgrey:visited   { color: #666; }
 
 div#BRpage {
     float: right;
-    width: 80px;
+    width: 320px;
     padding-left:12px;
     text-align: right;
 }
@@ -428,16 +418,14 @@ div#BRnav {
 }
 div#BRnavpos {
     position: relative;
-    margin-right: 80px;
+    margin-right: 320px;
     height: 40px;
 }
 div#BRpager {
     position: relative;
-    
     /* Account for padding around nav line */
     margin-left: 10px;
     margin-right: 10px;
-    
     height: 40px;
 }
 div#BRslider {
@@ -455,6 +443,9 @@ div#BRslider {
     margin-left: -12px; /* Center icon */
     background: url(images/slider.png);
     z-index: 103;
+}
+#BRpager a {
+    text-decoration: none;
 }
  /*   
   width: 8px;
@@ -699,3 +690,28 @@ div#BRzoombtn {
     font-size: 0.8em; 
     z-index: 3;    
 }
+.BRnavCntl {
+    background-color: #e2dcc5;
+    position: absolute;
+    right: 20px;
+    width: 40px;
+    height: 30px;
+    cursor: pointer;
+}
+#BRnavCntlBtm {
+    bottom: 40px;
+    -moz-border-radius-topright: 8px;
+    -webkit-border-top-right-radius: 8px;
+    -moz-border-radius-topleft: 8px;
+    -webkit-border-top-left-radius: 8px;
+}
+.BRup {
+    background-image: url("images/nav_control-up.png");
+    background-position: 8px 4px;
+    background-repeat: no-repeat;
+}
+.BRdn {
+    background-image: url("images/nav_control-dn.png");
+    background-position: 8px 4px;
+    background-repeat: no-repeat;
+}
\ No newline at end of file

diff --git a/BookReader/BookReader.js b/BookReader/BookReader.js
index 7178d30..5d042da 100644 (file)
--- a/BookReader/BookReader.js
+++ b/BookReader/BookReader.js
@@ -2415,7 +2415,7 @@ BookReader.prototype.prefetchImg = function(index) {
         if (index < 0 || index > (this.numLeafs - 1) ) {
             // Facing page at beginning or end, or beyond
             $(img).css({
-                'background-color': 'transparent'
+                'background-color': '#efefef'
             });
         }
         img.src = pageURI;
@@ -3280,6 +3280,12 @@ BookReader.prototype.initNavbar = function() {
     $('#BookReader').after(
         '<div id="BRnav">'
         +     '<div id="BRpage">'   // Page turn buttons
+        +         '<button class="BRicon onepg"></button>'
+        +         '<button class="BRicon twopg"></button>'
+        +         '<button class="BRicon thumb"></button>'
+        +         '<button class="BRicon fit"></button>'
+        +         '<button class="BRicon zoom_in"></button>'
+        +         '<button class="BRicon zoom_out"></button>'
         +         '<button class="BRicon book_left"></button>'
         +         '<button class="BRicon book_right"></button>'
         +     '</div>'
@@ -3291,6 +3297,7 @@ BookReader.prototype.initNavbar = function() {
         +             '<div class="BRnavend" id="BRnavright"></div>'
         +         '</div>'     
         +     '</div>'
+        +     '<div id="BRnavCntlBtm" class="BRnavCntl BRdn"></div>'
         + '</div>'
     );
     
@@ -3502,8 +3509,7 @@ BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex)
         closeWhenOthersOpen: true,
         cssStyles: {
             padding: '12px 14px',
-            //backgroundColor: '#000',
-            backgroundColor: '#444', // To set it off slightly from the chapter marker
+            backgroundColor: '#000',
             border: '4px solid #e2dcc5',
             //borderBottom: 'none',
             fontFamily: '"Arial", sans-serif',
@@ -3617,7 +3623,7 @@ BookReader.prototype.initToolbar = function(mode, ui) {
         +   "<span><a class='logo' href='" + this.logoURL + "'></a></span>"
         +   "<span id='BRreturn'><span>Back to</span><a href='" + this.bookUrl + "'>" + this.bookTitle + "</a></span>"
         + "</div>"
-        
+        /*
         + "<div id='BRzoomer'>"
         +   "<div id='BRzoompos'>"
         +     "<button class='BRicon zoom_out'></button>"
@@ -3627,7 +3633,9 @@ BookReader.prototype.initToolbar = function(mode, ui) {
         +     "</div>"
         +     "<button class='BRicon zoom_in'></button>"
         +   "</div>"
-        + "</div>");
+        + "</div>"
+        */
+        );
     
     this.updateToolbarZoom(this.reduce); // Pretty format
         
@@ -3809,12 +3817,12 @@ BookReader.prototype.bindToolbarNavHandlers = function(jToolbar) {
     });
     
     // $$$mang cleanup
-    $('#BRzoomer .zoom_in').bind('click', function() {
+    $('#BRpage .zoom_in').bind('click', function() {
         self.zoom(1);
         return false;
     });
     
-    $('#BRzoomer .zoom_out').bind('click', function() {
+    $('#BRpage .zoom_out').bind('click', function() {
         self.zoom(-1);
         return false;
     });
@@ -3902,7 +3910,7 @@ BookReader.prototype.hideNavigation = function() {
         // $$$ don't hardcode height
         $('#BRtoolbar').animate({top:-60});
         $('#BRnav').animate({bottom:-60});
-        $('#BRzoomer').animate({right:-26});
+        //$('#BRzoomer').animate({right:-26});
     }
 }
 
@@ -3914,7 +3922,7 @@ BookReader.prototype.showNavigation = function() {
     if (!this.navigationIsVisible()) {
         $('#BRtoolbar').animate({top:0});
         $('#BRnav').animate({bottom:0});
-        $('#BRzoomer').animate({right:0});
+        //$('#BRzoomer').animate({right:0});
     }
 }
 
@@ -4304,7 +4312,7 @@ BookReader.prototype._getPageHeight= function(index) {
 // Returns the page URI or transparent image if out of range
 BookReader.prototype._getPageURI = function(index, reduce, rotate) {
     if (index < 0 || index >= this.numLeafs) { // Synthesize page
-        return this.imagesBaseURL + "/transparent.png";
+        return this.imagesBaseURL + "transparent.png";
     }
     
     if ('undefined' == typeof(reduce)) {
@@ -4803,3 +4811,41 @@ BookReader.prototype.ttsStartPolling = function () {
         self.ttsNextChunk();
     },500);    
 }
+//FADING, ETC.
+    function changeArrow(){
+        setTimeout(function(){
+            $('#BRnavCntlBtm').removeClass('BRdn').addClass('BRup');
+        },3000);
+    };
+    $().ready(function(){
+        $('#BRtoolbar').animate({top:0},3000).animate({top:-40});
+        $('#BRnav').animate({bottom:0},3000).animate({bottom:-40});
+        changeArrow();
+        $('.BRnavCntl').animate({opacity:1},4000).animate({opacity:.25},1000);
+        $('.BRnavCntl').click(
+            function(){
+                if ($('#BRnavCntlBtm').hasClass('BRdn')) {
+                    $('#BRtoolbar').animate({top:-40});
+                    $('#BRnav').animate({bottom:-40});
+                    $('#BRnavCntlBtm').addClass('BRup').removeClass('BRdn');
+                    $('.BRnavCntl').animate({opacity:1},1000).animate({opacity:.25},1000);
+                } else {
+                    $('#BRtoolbar').animate({top:0});
+                    $('#BRnav').animate({bottom:0});
+                    $('#BRnavCntlBtm').addClass('BRdn').removeClass('BRup');
+                    $('.BRnavCntl').animate({opacity:1});
+                };
+            }
+        );
+        $('#BRnavCntlBtm').mouseover(function(){
+            if ($(this).hasClass('BRup')) {
+                $('.BRnavCntl').animate({opacity:1},250);
+            };
+        });
+        $('#BRnavCntlBtm').mouseleave(function(){
+            if ($(this).hasClass('BRup')) {
+                $('.BRnavCntl').animate({opacity:.25},250);
+            };
+        });
+    });
+

diff --git a/BookReader/images/BRicons.png b/BookReader/images/BRicons.png
index 3f3d266..3c4fb5c 100644 (file)
Binary files a/BookReader/images/BRicons.png and b/BookReader/images/BRicons.png differ

diff --git a/BookReader/images/marker_chap-off.png b/BookReader/images/marker_chap-off.png
index 5aea393..45514ac 100644 (file)
Binary files a/BookReader/images/marker_chap-off.png and b/BookReader/images/marker_chap-off.png differ

diff --git a/BookReader/images/marker_chap-on.png b/BookReader/images/marker_chap-on.png
index 5aea393..7871ead 100644 (file)
Binary files a/BookReader/images/marker_chap-on.png and b/BookReader/images/marker_chap-on.png differ

diff --git a/BookReader/images/nav_control-dn.png b/BookReader/images/nav_control-dn.png
new file mode 100644 (file)
index 0000000..cc5be11
Binary files /dev/null and b/BookReader/images/nav_control-dn.png differ

diff --git a/BookReader/images/nav_control-up.png b/BookReader/images/nav_control-up.png
new file mode 100644 (file)
index 0000000..e7a716d
Binary files /dev/null and b/BookReader/images/nav_control-up.png differ

diff --git a/BookReader/newbook.html b/BookReader/newbook.html
index c247297..959d35b 100644 (file)
--- a/BookReader/newbook.html
+++ b/BookReader/newbook.html
@@ -4,101 +4,51 @@
 <head> 
     <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
-    <title>In the wake of the war canoe : a stirring record of forty years' successful labour, peril & adventure amongst the savage Indian tribes of the Pacific coast, and the piratical head-hunting Haidas of the Queen Charlotte Islands, B. C</title> 
+    <title>Flatland : a romance of many dimensions</title> 
 <!--[if lte IE 6]>
-    <meta http-equiv="refresh" content="2; URL=/bookreader/browserunsupported.php?id=wakewarcanoe00collrich">
+    <meta http-equiv="refresh" content="2; URL=browserunsupported.php?id=flatlandromanceo00abbouoft">
 <![endif]--> 
-    <script src="http://www-testflip.archive.org/includes/jquery-1.4.2.min.js" type="text/javascript"></script> 
-    <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/jquery-ui-1.8.5.custom.min.js"></script> 
-    <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/dragscrollable.js"></script> 
-    <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/jquery.colorbox-min.js"></script> 
+    <link rel="stylesheet" type="text/css" href="BookReader.css?v=r28_1287170395"> 
+    <script src="http://www.archive.org/includes/jquery-1.4.2.min.js" type="text/javascript"></script> 
+    <script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js?v=r28_1287170395"></script> 
+    <script type="text/javascript" src="http://www.archive.org/includes/analytics.js?v=2"></script> 
+    <script type="text/javascript" src="dragscrollable.js?v=r28_1287170395"></script> 
+    <script type="text/javascript" src="jquery.colorbox-min.js"></script> 
+    <script type="text/javascript" src="jquery.ui.ipad.js"></script> 
      <!-- THIS ALLOWS BEAUTYTIPS TO WORK ON IE --> 
         <!--[if lt IE 9]>
-        <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/excanvas.compiled.js"></script>
+        <script type="text/javascript" src="excanvas.compiled.js"></script>
         <![endif]--> 
-    <script type="text/javascript" src="http://www-testflip.archive.org/bookreader/jquery.bt.min.js"></script> 
-    <script type="text/javascript" src="BookReader.js"></script> 
-    <link rel="stylesheet" type="text/css" href="BookReader.css"> 
+    <script type="text/javascript" src="jquery.bt.min.js"></script> 
+    <script type="text/javascript" src="BookReader.js?v=r28_1287170395"></script> 
+    <script type="text/javascript" src="soundmanager/soundmanager2.js?v=r28_1287170395"></script> 
+    <script> 
+        soundManager.debugMode = false;
+        soundManager.url = 'soundmanager/swf/';       
+        soundManager.useHTML5Audio = true;
+        soundManager.flashVersion = 9; //flash 8 version of swf is buggy when calling play() on a sound that is still loading
+    </script>
 </head> 
-<body style="background-color: ##939598;"> 
+<body> 
  
  
 <div id="BookReader">Internet Archive BookReader <noscript>requires JavaScript to be enabled.</noscript></div> 
  
-<div id="BRnav">
-    <div id="BRpage">
-        <button class="BRicon book_left"></button>
-        <button class="BRicon book_right"></button>
-    </div>
-    <div id="BRnavpos">
-        <div id="BRfiller"></div>
-        <div id="BRpager">
-            <div id="BRslider">
-                <div id="slider"></div>
-                <div id="pager"></div>
-                <div id="pagenum"><span>n141</span> / 325</div>
-            </div>
-        </div>       
-        <div id="BRnavline">
-            <div class="BRnavend" id="BRnavleft"></div>
-            <div class="BRnavend" id="BRnavright"></div>
-        </div>
-<!-- LOAD SEARCH RESULTS FIRST SO CHAPTER INDICATORS CAN APPEAR IN FRONT --> 
-        <div class="search" style="left:80%;" title="Search result"> 
-            <div class="query">The Kingdom of the Future, for instance, though interesting in a Caley Robinson way, with its cold, mystical colour relieved by touches of warm reddish browns, and its big draped figures, was a composition in the past, and did not stimulate the <strong><a href="">emotional</a></strong> powers of the observer with a suggestion of coming ages or a prophecy of progress. <span>Page 26</span></div> 
-        </div> 
-        
-        <div class="search" style="left:22%;" title="Search result"> 
-            <div class="query">A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 27</span></div> 
-        </div> 
-        
-        <div class="search" style="left:75%;" title="Search result"> 
-            <div class="query">A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 27</span></div> 
-        </div> 
-        
-        <div class="chapter" style="left:1%;"> 
-            <div class="title">I. The Minotaur <span>|</span> Page 1</div> 
-        </div> 
-        
-        <div class="chapter" style="left:17%;"> 
-            <div class="title">II. The Griffon <span>|</span> Page 44</div> 
-        </div> 
-        
-        <div class="chapter" style="left:30%;"> 
-            <div class="title">III. The Firedrake <span>|</span> Page 129</div> 
-        </div> 
-        
-        <div class="chapter" style="left:67.5%;"> 
-            <div class="title">V. The Pegasus <span>|</span> Page 201</div> 
-        </div> 
-        
-        <div class="chapter" style="left:90%;"> 
-            <div class="title">VI. The Goblin <span>|</span> Page 255</div> 
-        </div> 
-        
-        <div class="searchChap" style="left:49%;" title="Search result"> 
-            <div class="query"> 
-            A related distinction is between the emotion and the results of the emotion, principally behaviors and <strong><a href="">emotional</a></strong> expressions. People often behave in certain ways as a direct result of their <strong><a href="">emotional</a></strong> state, such as crying, fighting or fleeing. <span>Page 163</span> 
-                <div class="queryChap">IV. The Witch <span>|</span> Page 163</div> 
-            </div> 
-        </div> 
-        
-    </div> 
-</div> 
-
- 
 <script type="text/javascript"> 
   // Set some config variables -- $$$ NB: Config object format has not been finalized
   var brConfig = {};
   brConfig["mode"] = 2;
 </script> 
 <!-- The script included below is dynamically generated JavaScript that includes the book metadata and page image access functions --> 
-<script type="text/javascript" src="http://ia331435.us.archive.org/~testflip/BookReader/BookReaderJSIA.php?id=wakewarcanoe00collrich&itemPath=/0/items/wakewarcanoe00collrich&server=ia331435.us.archive.org&subPrefix=wakewarcanoe00collrich"></script> 
+<script type="text/javascript" src="http://ia311205.us.archive.org/~testflip/BookReader/BookReaderJSIA.php?id=flatlandromanceo00abbouoft&itemPath=/2/items/flatlandromanceo00abbouoft&server=ia311205.us.archive.org&subPrefix=flatlandromanceo00abbouoft"></script> 
  
 <script type="text/javascript"> 
     // $$$ hack to workaround sizing bug when starting in two-up mode
     $(document).ready(function() {
         $(window).trigger('resize');
-    });    
+    });
+    
+    // Usage stats
+    if(window.archive_analytics) { window.archive_analytics.values['bookreader'] = 'open'};
 </script>