add zoom toggle button

cbr.js/cbr.js

@@ -17,6 +17,7 @@ cbrjs.open = function(url) {
         Ox.$window.on({
             resize: app.resize
         });
+
     });
 
     function getSettings() {
@@ -49,6 +50,7 @@ cbrjs.CBRViewer = function(options, self) {
             page: setPage,
             url: loadBook
         }),
+        moveTimeout,
         canvas;
     
     self.pages = [];
@@ -66,6 +68,7 @@ cbrjs.CBRViewer = function(options, self) {
 
     self.$frame = Ox.Element()
         .on({
+            mousemove: showMenu,
             mousedown: function() {
                 self.$frame.gainFocus();
             },
@@ -191,6 +194,45 @@ cbrjs.CBRViewer = function(options, self) {
         .start()
         .appendTo(that);
 
+    self.$menu = Ox.Element().css({
+            position: 'fixed',
+            right: (Ox.UI.SCROLLBAR_SIZE + 4) + 'px',
+            top: '4px',
+            opacity: 0
+        })
+        .addClass('menu')
+        .appendTo(that);
+
+    self.$zoom = Ox.Button({
+            style: 'symbol',
+            title: 'fill',
+            tooltip: Ox._('Zoom to fill'),
+            type: 'image'
+        }).css({
+            width: '16px',
+            height: '16px',
+        }).on({
+            mousedown: function(event) {
+                if (self.$zoom.options('title') == 'fill') {
+                    self.$zoom.options({
+                        title: 'fit',
+                        tooltip: Ox._('Zoom to fit')
+                    })
+                    self.fitMode = 'W';
+                } else {
+                    self.$zoom.options({
+                        title: 'fill',
+                        tooltip: Ox._('Zoom to fill')
+                    })
+                    self.fitMode = 'B';
+                }
+                resize()
+                event.stopPropagation()
+                event.preventDefault();
+            }
+        })
+        .appendTo(self.$menu);
+
     loadBook();
 
     function createURLFromArray(array, mimeType) {
@@ -372,6 +414,17 @@ cbrjs.CBRViewer = function(options, self) {
         self.$scrollbar.options({value: self.options.page});
         that.triggerEvent('page', {page: self.options.page});
     }
+    function showMenu() {
+        if (moveTimeout) {
+            clearTimeout(moveTimeout);
+        } else {
+            self.$menu.animate({opacity: 1}, 250)
+        }
+        moveTimeout = setTimeout(function() {
+            self.$menu.animate({opacity: 0}, 250)
+            moveTimeout = null
+        }, 5000);
+    }
 
     that.resize = function() {
         resize();