diff --git a/cbr.js/cbr.js b/cbr.js/cbr.js
index 926e360..4e82002 100644
--- a/cbr.js/cbr.js
+++ b/cbr.js/cbr.js
@@ -91,19 +91,57 @@ cbrjs.CBRViewer = function(options, self) {
                     page: 1 
                 })
             },
-            singleclick: function() {
-                //left part previous
-                //that.options({
-                //    page: Math.min(self.options.page - 1, self.pages.length)
-                //})
-                //right part next
-                that.options({
-                    page: Math.min(self.options.page + 1, self.pages.length)
-                })
+            key_n: function() {
+                self.fitMode = 'N';
+                resize();
+            },
+            key_h: function() {
+                self.fitMode = 'H';
+                resize();
+            },
+            key_b: function() {
+                self.fitMode = 'B';
+                resize();
+            },
+            key_w: function() {
+                self.fitMode = 'W';
+                resize();
+            },
+            key_l: function() {
+                self.rotateTimes--;
+                if (self.rotateTimes < 0) {
+                    self.rotateTimes = 3;
+                }
+                setPage();
+            },
+            key_f: function() {
+                if (!self.hflip && !self.vflip) {
+                    self.hflip = true;
+                } else if(self.hflip == true) {
+                    self.vflip = true;
+                    self.hflip = false;
+                } else if(self.vflip == true) {
+                    self.vflip = false;
+                }
+                setPage();
+            },
+            singleclick: function(data) {
+                if (data.clientX < (that.width() / 2)) {
+                    that.options({
+                        page: Math.max(self.options.page - 1, 1)
+                    });
+                } else {
+                    that.options({
+                        page: Math.min(self.options.page + 1, self.pages.length)
+                    });
+                }
             }
         })
         .css({
-            textAlign: 'center',
+            margin: 0,
+            overflow: 'auto',
+            padding: 0,
+            textAlign: 'center'
         });
     self.$canvas = Ox.Element('<canvas>')
         .appendTo(self.$frame);
@@ -260,7 +298,7 @@ cbrjs.CBRViewer = function(options, self) {
         canvas.style.height = '';
         canvas.style.maxWidth = '';
         canvas.style.maxHeight = '';
-        var maxheight = that.height() - 16;
+        var maxheight = self.$frame.height() - 4;
         if (clear || self.fitMode == 'N') {
 
         } else if (self.fitMode == 'B') {