diff --git a/cbr.js/cbr.js b/cbr.js/cbr.js
index bec9e05..c675fbc 100644
--- a/cbr.js/cbr.js
+++ b/cbr.js/cbr.js
@@ -1,7 +1,8 @@
 this.cbrjs = {};
 
 cbrjs.open = function(url) {
-    var settings = getSettings();
+    cbrjs.url = url
+    cbrjs.loadSettings()
     Ox.load('UI', function() {
         var $body = Ox.$('body')
                 .css({
@@ -10,9 +11,10 @@ cbrjs.open = function(url) {
                 });
         window.app = cbrjs.CBRViewer(Ox.extend({
             url: url,
-        }, settings)
+        }, cbrjs.settings)
         ).bindEvent({
-            page: updateSettings
+            page: cbrjs.updateSettings,
+            fitMode: cbrjs.updateSettings,
         }).appendTo($body);
         Ox.$window.on({
             resize: app.resize
@@ -20,24 +22,26 @@ cbrjs.open = function(url) {
 
     });
 
-    function getSettings() {
-        var settings = {};
-        try {
-            settings =  JSON.parse(localStorage['cbrjs.' + url]);
-        } catch(e) {
-            settings.page = 1;
-        }
-        return settings;
-    }
-
-    function updateSettings(data) {
-        Ox.forEach(data, function(value, key) {
-            settings[key] = value;
-        });
-        localStorage['cbrjs.' + url] = JSON.stringify(settings);
-    }
 };
 
+cbrjs.loadSettings = function() {
+    var settings = {};
+    try {
+        settings =  JSON.parse(localStorage['cbrjs.' + cbrjs.url]);
+    } catch(e) {
+        settings.page = 1;
+        settings.fitMode = 'B';
+    }
+    cbrjs.settings = settings;
+}
+
+cbrjs.updateSettings = function(data) {
+    Ox.forEach(data, function(value, key) {
+        cbrjs.settings[key] = value;
+    });
+    localStorage['cbrjs.' + cbrjs.url] = JSON.stringify(cbrjs.settings);
+}
+
 cbrjs.CBRViewer = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
@@ -48,6 +52,10 @@ cbrjs.CBRViewer = function(options, self) {
         .options(options || {})
         .update({
             page: setPage,
+            fitMode: function() {
+                resize()
+                that.triggerEvent('fitMode', {fitMode: self.options.fitMode});
+            },
             url: loadBook
         }),
         moveTimeout,
@@ -57,7 +65,6 @@ cbrjs.CBRViewer = function(options, self) {
     self.rotateTimes = 0;
     self.hflip = false;
     self.vflip = false;
-    self.fitMode = 'B';
 
     self.mimeTypes = {
         'png': 'image/png',
@@ -75,40 +82,50 @@ cbrjs.CBRViewer = function(options, self) {
         })
         .bindEvent({
             key_down: function() {
-                that.options({
-                    page: self.pages.length
-                })
+                self.$frame.scrollTop(self.$frame.scrollTop() + self.$frame.height())
             },
             key_left: function() {
                 that.options({
                     page: Math.max(self.options.page - 1, 1)
                 })
             },
+            key_pagedown: function() {
+                that.options({
+                    page: self.pages.length
+                })
+            },
+            key_pageup: function() {
+                that.options({
+                    page: 1
+                })
+            },
             key_right: function() {
                 that.options({
                     page: Math.min(self.options.page + 1, self.pages.length)
                 })
             },
             key_up: function() {
-                that.options({
-                    page: 1 
-                })
+                self.$frame.scrollTop(self.$frame.scrollTop() - self.$frame.height())
             },
             key_n: function() {
-                self.fitMode = 'N';
-                resize();
+                that.options({
+                    fitMode: 'N'
+                })
             },
             key_h: function() {
-                self.fitMode = 'H';
-                resize();
+                that.options({
+                    fitMode: 'H'
+                })
             },
             key_b: function() {
-                self.fitMode = 'B';
-                resize();
+                that.options({
+                    fitMode: 'B'
+                })
             },
             key_w: function() {
-                self.fitMode = 'W';
-                resize();
+                that.options({
+                    fitMode: 'W'
+                })
             },
             key_l: function() {
                 self.rotateTimes--;
@@ -128,6 +145,15 @@ cbrjs.CBRViewer = function(options, self) {
                 }
                 setPage();
             },
+            key_space: function() {
+                var old = self.$frame.scrollTop()
+                self.$frame.scrollTop(self.$frame.scrollTop() + self.$frame.height())
+                if (self.$frame.scrollTop() == old) {
+                    that.options({
+                        page: Math.min(self.options.page + 1, self.pages.length)
+                    })
+                }
+            },
             singleclick: function(data) {
                 if (data.clientX < (that.width() / 2)) {
                     that.options({
@@ -218,15 +244,18 @@ cbrjs.CBRViewer = function(options, self) {
                         title: 'fit',
                         tooltip: Ox._('Zoom to fit')
                     })
-                    self.fitMode = 'W';
+                    that.options({
+                        fitMode: 'W'
+                    })
                 } else {
                     self.$zoom.options({
                         title: 'fill',
                         tooltip: Ox._('Zoom to fill')
                     })
-                    self.fitMode = 'B';
+                    that.options({
+                        fitMode: 'B'
+                    })
                 }
-                resize()
                 event.stopPropagation()
                 event.preventDefault();
             }
@@ -341,14 +370,14 @@ cbrjs.CBRViewer = function(options, self) {
         canvas.style.maxWidth = '';
         canvas.style.maxHeight = '';
         var maxheight = self.$frame.height() - 4;
-        if (clear || self.fitMode == 'N') {
+        if (clear || self.options.fitMode == 'N') {
 
-        } else if (self.fitMode == 'B') {
+        } else if (self.options.fitMode == 'B') {
             canvas.style.maxWidth = '100%';
             canvas.style.maxHeight = maxheight + 'px';
-        } else if (self.fitMode == 'H') {
+        } else if (self.options.fitMode == 'H') {
             canvas.style.height = maxheight + 'px';
-        } else if (self.fitMode == 'W') {
+        } else if (self.options.fitMode == 'W') {
             canvas.style.width = '100%';
         }
         self.$scrollbar.options({