diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css
index 8ebc1616..0063ba2d 100644
--- a/lib/ace/css/editor.css
+++ b/lib/ace/css/editor.css
@@ -71,8 +71,8 @@
 
 .ace_scrollbar {
     position: absolute;
-    overflow-x: hidden;
-    overflow-y: scroll;
+    overflow: hidden;
+    overflow-y: auto;
     right: 0;
     top: 0;
     bottom: 0;
@@ -84,6 +84,22 @@
     left: 0;
 }
 
+.ace_scrollbar-h {
+    position: absolute;
+    overflow-x: auto;
+    overflow-y: hidden;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.ace_scrollbar-inner {
+    position: absolute;
+    height: 1px;
+    left: 0;
+}
+
+
 .ace_print-margin {
     position: absolute;
     height: 100%;
diff --git a/lib/ace/edit_session.js b/lib/ace/edit_session.js
index 4f9ace1f..90b727ef 100644
--- a/lib/ace/edit_session.js
+++ b/lib/ace/edit_session.js
@@ -985,7 +985,7 @@ var EditSession = function(text, mode) {
     *
     **/
     this.setScrollTop = function(scrollTop) {
-        scrollTop = Math.round(Math.max(0, scrollTop));
+        scrollTop = Math.round(scrollTop);
         if (this.$scrollTop === scrollTop || isNaN(scrollTop))
             return;
 
@@ -1006,7 +1006,7 @@ var EditSession = function(text, mode) {
     * [Sets the value of the distance between the left of the editor and the leftmost part of the visible content.]{: #EditSession.setScrollLeft}
     **/
     this.setScrollLeft = function(scrollLeft) {
-        scrollLeft = Math.round(Math.max(0, scrollLeft));
+        scrollLeft = Math.round(scrollLeft);
         if (this.$scrollLeft === scrollLeft || isNaN(scrollLeft))
             return;
 
diff --git a/lib/ace/ext/textarea.js b/lib/ace/ext/textarea.js
index a402e65f..fee9b9b2 100644
--- a/lib/ace/ext/textarea.js
+++ b/lib/ace/ext/textarea.js
@@ -288,21 +288,18 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
             settingDiv.hideButton.focus();
             editor.on("focus", function onFocus() {
                 editor.removeListener("focus", onFocus);
-                settingDiv.style.display = "none"
+                settingDiv.style.display = "none";
             });
         } else {
             editor.focus();
-        };
+        }
     };
 
+    editor.$setOption = editor.setOption;
     editor.setOption = function(key, value) {
         if (options[key] == value) return;
 
         switch (key) {
-            case "gutter":
-                renderer.setShowGutter(toBool(value));
-            break;
-
             case "mode":
                 if (value != "text") {
                     // Load the required mode file. Files get loaded only once.
@@ -366,18 +363,9 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
                     break;
                 }
             break;
-
-            case "useSoftTabs":
-                session.setUseSoftTabs(toBool(value));
-            break;
-
-            case "showPrintMargin":
-                renderer.setShowPrintMargin(toBool(value));
-            break;
-
-            case "showInvisibles":
-                editor.setShowInvisibles(toBool(value));
-            break;
+            
+            default:
+                editor.$setOption(key, toBool(value));
         }
 
         options[key] = value;
@@ -391,9 +379,7 @@ function setupApi(editor, editorDiv, settingDiv, ace, options, loader) {
         return options;
     };
 
-    for (var option in exports.options) {
-        editor.setOption(option, exports.options[option]);
-    }
+    editor.setOptions(exports.options);
 
     return editor;
 }
@@ -493,7 +479,7 @@ function setupSettingPanel(settingDiv, settingOpener, editor, options) {
                     cValue == "true" ? "checked='true'" : "",
                "'></input>"
             );
-            return
+            return;
         }
         builder.push("<select title='" + option + "'>");
         for (var value in obj) {
diff --git a/lib/ace/scrollbar.js b/lib/ace/scrollbar.js
index 642e2d3e..85b69b6f 100644
--- a/lib/ace/scrollbar.js
+++ b/lib/ace/scrollbar.js
@@ -47,7 +47,7 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
  *
  * @constructor
  **/
-var ScrollBar = function(parent) {
+var ScrollBarV = function(parent) {
     this.element = dom.createElement("div");
     this.element.className = "ace_scrollbar";
 
@@ -63,26 +63,73 @@ var ScrollBar = function(parent) {
     // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
     // make element a little bit wider to retain scrollbar when page is zoomed 
     this.width = dom.scrollbarWidth(parent.ownerDocument);
+    this.fullWidth = this.width;
     this.element.style.width = (this.width || 15) + 5 + "px";
+    this.setVisible(false);
+    this.element.style.overflowY = "scroll";
+    
+    event.addListener(this.element, "scroll", this.onScrollV.bind(this));
+};
 
-    event.addListener(this.element, "scroll", this.onScroll.bind(this));
+var ScrollBarH = function(parent) {
+    this.element = dom.createElement("div");
+    this.element.className = "ace_scrollbar-h";
+
+    this.inner = dom.createElement("div");
+    this.inner.className = "ace_scrollbar-inner";
+    this.element.appendChild(this.inner);
+
+    parent.appendChild(this.element);
+
+    // in OSX lion the scrollbars appear to have no width. In this case resize the
+    // element to show the scrollbar but still pretend that the scrollbar has a width
+    // of 0px
+    // in Firefox 6+ scrollbar is hidden if element has the same width as scrollbar
+    // make element a little bit wider to retain scrollbar when page is zoomed 
+    this.height = dom.scrollbarWidth(parent.ownerDocument);
+    this.fullHeight = this.height;
+    this.element.style.height = (this.height || 15) + 5 + "px";
+    this.setVisible(false);
+    this.element.style.overflowX = "scroll";
+
+    event.addListener(this.element, "scroll", this.onScrollH.bind(this));
 };
 
 (function() {
     oop.implement(this, EventEmitter);
 
+    this.setVisible = function(show) {
+        if (show) {
+            this.element.style.display = "";
+            if (this.fullWidth)
+                this.width = this.fullWidth;
+            if (this.fullHeight)
+                this.height = this.fullHeight;
+        } else {
+            this.element.style.display = "none";
+            this.height = this.width = 0;
+        }
+    };
+    
     /**
      * Emitted when the scroll bar, well, scrolls.
      * @event scroll
      * @param {Object} e Contains one property, `"data"`, which indicates the current scroll top position
      **/
-    this.onScroll = function() {
+    this.onScrollV = function() {
         if (!this.skipEvent) {
             this.scrollTop = this.element.scrollTop;
             this._emit("scroll", {data: this.scrollTop});
         }
         this.skipEvent = false;
     };
+    this.onScrollH = function() {
+        if (!this.skipEvent) {
+            this.scrollLeft = this.element.scrollLeft;
+            this._emit("scroll", {data: this.scrollLeft});
+        }
+        this.skipEvent = false;
+    };
 
     /**
      * Returns the width of the scroll bar.
@@ -92,6 +139,10 @@ var ScrollBar = function(parent) {
         return this.width;
     };
 
+    this.getHeight = function() {
+        return this.height;
+    };
+
     /**
      * Sets the height of the scroll bar, in pixels.
      * @param {Number} height The new height
@@ -99,6 +150,10 @@ var ScrollBar = function(parent) {
     this.setHeight = function(height) {
         this.element.style.height = height + "px";
     };
+    
+    this.setWidth = function(width) {
+        this.element.style.width = width + "px";
+    };
 
     /**
      * Sets the inner height of the scroll bar, in pixels.
@@ -107,22 +162,36 @@ var ScrollBar = function(parent) {
     this.setInnerHeight = function(height) {
         this.inner.style.height = height + "px";
     };
+    
+    this.setInnerWidth = function(width) {
+        this.inner.style.width = width + "px";
+    };
 
-
-    // on chrome 17+ for small zoom levels after calling this function
-    // this.element.scrollTop != scrollTop which makes page to scroll up.
     /**
      * Sets the scroll top of the scroll bar.
      * @param {Number} scrollTop The new scroll top
      **/
+    // on chrome 17+ for small zoom levels after calling this function
+    // this.element.scrollTop != scrollTop which makes page to scroll up.
     this.setScrollTop = function(scrollTop) {
         if (this.scrollTop != scrollTop) {
             this.skipEvent = true;
             this.scrollTop = this.element.scrollTop = scrollTop;
         }
     };
+    this.setScrollLeft = function(scrollLeft) {
+        if (this.scrollLeft != scrollLeft) {
+            this.skipEvent = true;
+            this.scrollLeft = this.element.scrollLeft = scrollLeft;
+        }
+    };
 
-}).call(ScrollBar.prototype);
+}).call(ScrollBarV.prototype);
+ScrollBarH.prototype = ScrollBarV.prototype;
 
-exports.ScrollBar = ScrollBar;
+
+
+exports.ScrollBar = ScrollBarV; // backward compatibility
+exports.ScrollBarV = ScrollBarV;
+exports.ScrollBarH = ScrollBarH;
 });
diff --git a/lib/ace/virtual_renderer.js b/lib/ace/virtual_renderer.js
index 3bd0fcc3..6cb3ddc3 100644
--- a/lib/ace/virtual_renderer.js
+++ b/lib/ace/virtual_renderer.js
@@ -40,7 +40,8 @@ var GutterLayer = require("./layer/gutter").Gutter;
 var MarkerLayer = require("./layer/marker").Marker;
 var TextLayer = require("./layer/text").Text;
 var CursorLayer = require("./layer/cursor").Cursor;
-var ScrollBar = require("./scrollbar").ScrollBar;
+var ScrollBarH = require("./scrollbar").ScrollBarH;
+var ScrollBarV = require("./scrollbar").ScrollBarV;
 var RenderLoop = require("./renderloop").RenderLoop;
 var EventEmitter = require("./lib/event_emitter").EventEmitter;
 var editorCss = require("./requirejs/text!./css/editor.css");
@@ -102,22 +103,23 @@ var VirtualRenderer = function(container, theme) {
 
     // Indicates whether the horizontal scrollbar is visible
     this.$horizScroll = false;
+    this.$vScroll = false;
 
-    this.scrollBar = new ScrollBar(this.container);
-    this.scrollBar.addEventListener("scroll", function(e) {
+    this.scrollBar = 
+    this.scrollBarV = new ScrollBarV(this.container);
+    this.scrollBarH = new ScrollBarH(this.container);
+    this.scrollBarV.addEventListener("scroll", function(e) {
         if (!_self.$scrollAnimation)
-            _self.session.setScrollTop(e.data);
+            _self.session.setScrollTop(e.data - _self.scrollMargin.top);
+    });
+    this.scrollBarH.addEventListener("scroll", function(e) {
+        if (!_self.$scrollAnimation)
+            _self.session.setScrollLeft(e.data - _self.scrollMargin.left);
     });
 
     this.scrollTop = 0;
     this.scrollLeft = 0;
 
-    event.addListener(this.scroller, "scroll", function() {
-        var scrollLeft = _self.scroller.scrollLeft;
-        _self.scrollLeft = scrollLeft;
-        _self.session.setScrollLeft(scrollLeft);
-    });
-
     this.cursorPos = {
         row : 0,
         column : 0
@@ -126,6 +128,7 @@ var VirtualRenderer = function(container, theme) {
     this.$textLayer.addEventListener("changeCharacterSize", function() {
         _self.updateCharacterSize();
         _self.onResize(true);
+        _self._signal("changeCharacterSize");
     });
 
     this.$size = {
@@ -148,6 +151,15 @@ var VirtualRenderer = function(container, theme) {
         offset : 0,
         height : 1
     };
+    
+    this.scrollMargin = {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        v: 0,
+        h: 0
+    }
 
     this.$loop = new RenderLoop(
         this.$renderChanges.bind(this),
@@ -175,6 +187,22 @@ var VirtualRenderer = function(container, theme) {
     this.CHANGE_FULL = 512;
     this.CHANGE_H_SCROLL = 1024;
 
+    this.$logChanges = function(changes) {
+        var a = ""
+        if (changes & this.CHANGE_CURSOR) a += " cursor";
+        if (changes & this.CHANGE_MARKER) a += " marker";
+        if (changes & this.CHANGE_GUTTER) a += " gutter";
+        if (changes & this.CHANGE_SCROLL) a += " scroll";
+        if (changes & this.CHANGE_LINES) a += " lines";
+        if (changes & this.CHANGE_TEXT) a += " text";
+        if (changes & this.CHANGE_SIZE) a += " size";
+        if (changes & this.CHANGE_MARKER_BACK) a += " marker_back";
+        if (changes & this.CHANGE_MARKER_FRONT) a += " marker_front";
+        if (changes & this.CHANGE_FULL) a += " full";
+        if (changes & this.CHANGE_H_SCROLL) a += " h_scroll";
+        console.log(a.trim())
+    };
+
     oop.implement(this, EventEmitter);
 
     this.updateCharacterSize = function() {
@@ -281,9 +309,6 @@ var VirtualRenderer = function(container, theme) {
     *
     **/
     this.onResize = function(force, gutterWidth, width, height) {
-        var changes = this.$changes || 0;
-        var size = this.$size;
-
         if (this.resizing > 2)
             return;
         else if (this.resizing > 1)
@@ -291,41 +316,11 @@ var VirtualRenderer = function(container, theme) {
         else
             this.resizing = force ? 1 : 0;
         if (!height)
-            height = dom.getInnerHeight(this.container);
-
-        if (height && (force || size.height != height)) {
-            size.height = height;
-            changes = this.CHANGE_SIZE;
-
-            size.scrollerHeight = this.scroller.clientHeight;
-            if (force || !size.scrollerHeight) {
-                size.scrollerHeight = size.height;
-                if (this.$horizScroll)
-                    size.scrollerHeight -= this.scrollBar.getWidth();
-            }
-            this.scrollBar.setHeight(size.scrollerHeight);
-
-            if (this.session) {
-                this.session.setScrollTop(this.getScrollTop());
-                changes = changes | this.CHANGE_FULL;
-            }
-        }
-
+            height = this.container.clientHeight;
         if (!width)
-            width = dom.getInnerWidth(this.container);
+            width = this.container.clientWidth;
 
-        if (width && (force || this.resizing > 1 || size.width != width)) {
-            changes = this.CHANGE_SIZE;
-            size.width = width;
-
-            var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
-            this.scroller.style.left = gutterWidth + "px";
-            size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
-            this.scroller.style.right = this.scrollBar.getWidth() + "px";
-
-            if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
-                changes = changes | this.CHANGE_FULL;
-        }
+        var changes = this.$updateCachedSize(force, gutterWidth, width, height);
 
         if (!this.$size.scrollerHeight)
             return;
@@ -341,17 +336,57 @@ var VirtualRenderer = function(container, theme) {
         if (force)
             delete this.resizing;
     };
+    
+    this.$updateCachedSize = function(force, gutterWidth, width, height) {
+        var changes = this.$changes || 0;
+        var size = this.$size;
+        if (height && (force || size.height != height)) {
+            size.height = height;
+            changes = this.CHANGE_SIZE;
+
+            size.scrollerHeight = size.height;
+            if (this.$horizScroll)
+                size.scrollerHeight -= this.scrollBarH.getHeight();
+                
+            this.scrollBarV.setHeight(size.scrollerHeight);
+
+            if (this.session) {
+                this.session.setScrollTop(this.getScrollTop());
+                changes = changes | this.CHANGE_SCROLL;
+            }
+        }
+
+        if (width && (force || this.resizing > 1 || size.width != width)) {
+            changes = this.CHANGE_SIZE;
+            size.width = width;
+
+            var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
+            this.scrollBarH.element.style.left = 
+            this.scroller.style.left = gutterWidth + "px";
+            size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBarV.getWidth());           
+                
+            this.scroller.style.right = this.scrollBarV.getWidth() + "px";
+            this.scroller.style.bottom = this.scrollBarH.getHeight() + "px";
+                
+            this.scrollBarH.setWidth(size.scrollerWidth);
+
+            if (this.session && this.session.getUseWrapMode() && this.adjustWrapLimit() || force)
+                changes = changes | this.CHANGE_FULL;
+        }
+        return changes;
+    };
 
     this.onGutterResize = function() {
         var width = this.$size.width;
         var gutterWidth = this.$showGutter ? this.$gutter.offsetWidth : 0;
-        this.scroller.style.left = gutterWidth + "px";
-        this.$size.scrollerWidth = Math.max(0, width - gutterWidth - this.scrollBar.getWidth());
+        this.$updateCachedSize(true, gutterWidth, this.$size.width, this.$size.height);
 
         if (this.session.getUseWrapMode() && this.adjustWrapLimit())
             this.$loop.schedule(this.CHANGE_FULL);
-        else
+        else {
+            this.$computeLayerConfig();
             this.$loop.schedule(this.CHANGE_MARKER);
+        }
     };
 
     /**
@@ -534,6 +569,8 @@ var VirtualRenderer = function(container, theme) {
     // move text input over the cursor
     // this is required for iOS and IME
     this.$moveTextAreaToCursor = function() {
+    this.textarea.style.cssText = "top:0;left:0;position:fixed"
+    return
         if (!this.$keepTextAreaAtCursor)
             return;
         var config = this.layerConfig;
@@ -619,29 +656,56 @@ var VirtualRenderer = function(container, theme) {
         this.$loop.schedule(this.CHANGE_FULL);
         this.$updatePrintMargin();
     };
+    
+    this.setScrollMargin = function(top, left, bottom, right) {
+        var sm = this.scrollMargin;
+        sm.top = top|0;
+        sm.bottom = bottom|0;
+        sm.right = right|0;
+        sm.left = left|0;
+        sm.v = sm.top + sm.bottom;
+        sm.h = sm.left + sm.right;
+        this.updateFull();
+    };
 
     /**
-    *
-    * Returns whether the horizontal scrollbar is set to be always visible.
-    * @returns {Boolean}
-    **/
+     * Returns whether the horizontal scrollbar is set to be always visible.
+     * @returns {Boolean}
+     **/
     this.getHScrollBarAlwaysVisible = function() {
         return this.$hScrollBarAlwaysVisible;
     };
 
     /**
-    * Identifies whether you want to show the horizontal scrollbar or not.
-    * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
-    *
-    *
-    **/
+     * Identifies whether you want to show the horizontal scrollbar or not.
+     * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
+     **/
     this.setHScrollBarAlwaysVisible = function(alwaysVisible) {
         this.setOption("hScrollBarAlwaysVisible", alwaysVisible);
     };
+    /**
+     * Returns whether the horizontal scrollbar is set to be always visible.
+     * @returns {Boolean}
+     **/
+    this.getVScrollBarAlwaysVisible = function() {
+        return this.$hScrollBarAlwaysVisible;
+    };
 
-    this.$updateScrollBar = function() {
-        this.scrollBar.setInnerHeight(this.layerConfig.maxHeight);
-        this.scrollBar.setScrollTop(this.scrollTop);
+    /**
+     * Identifies whether you want to show the horizontal scrollbar or not.
+     * @param {Boolean} alwaysVisible Set to `true` to make the horizontal scroll bar visible
+     **/
+    this.setVScrollBarAlwaysVisible = function(alwaysVisible) {
+        this.setOption("vScrollBarAlwaysVisible", alwaysVisible);
+    };
+
+    this.$updateScrollBarV = function() {
+        this.scrollBarV.setInnerHeight(this.layerConfig.maxHeight + this.scrollMargin.v);
+        this.scrollBarV.setScrollTop(this.scrollTop + this.scrollMargin.top);
+    };
+    this.$updateScrollBarH = function() {
+        this.scrollBarH.setInnerWidth(this.layerConfig.width + 2 * this.$padding + this.scrollMargin.h);
+        this.scrollBarH.setScrollLeft(this.scrollLeft + this.scrollMargin.left);
     };
 
     this.$renderChanges = function(changes, force) {
@@ -649,7 +713,9 @@ var VirtualRenderer = function(container, theme) {
             this.$changes = changes;
             return; 
         }
-
+            
+        this.$logChanges(changes);
+        
         this._signal("beforeRender");
         // text, scrolling and resize changes can cause the view port size to change
         if (changes & this.CHANGE_FULL ||
@@ -662,21 +728,17 @@ var VirtualRenderer = function(container, theme) {
 
         // horizontal scrolling
         if (changes & this.CHANGE_H_SCROLL) {
-            this.scroller.scrollLeft = this.scrollLeft;
-
-            // read the value after writing it since the value might get clipped
-            var scrollLeft = this.scroller.scrollLeft;
-            this.scrollLeft = scrollLeft;
-            this.session.setScrollLeft(scrollLeft);
-
-            this.scroller.className = this.scrollLeft == 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
+            this.$updateScrollBarH();
+            this.content.style.marginLeft = -this.scrollLeft + "px";
+            this.scroller.className = this.scrollLeft <= 0 ? "ace_scroller" : "ace_scroller ace_scroll-left";
         }
 
         // full
         if (changes & this.CHANGE_FULL) {
             this.$textLayer.checkForSizeChanges();
             // update scrollbar first to not lose scroll position when gutter calls resize
-            this.$updateScrollBar();
+            this.$updateScrollBarV();
+            this.$updateScrollBarH();
             this.$textLayer.update(this.layerConfig);
             if (this.$showGutter)
                 this.$gutterLayer.update(this.layerConfig);
@@ -691,6 +753,7 @@ var VirtualRenderer = function(container, theme) {
 
         // scrolling
         if (changes & this.CHANGE_SCROLL) {
+            this.$updateScrollBarV();
             if (changes & this.CHANGE_TEXT || changes & this.CHANGE_LINES)
                 this.$textLayer.update(this.layerConfig);
             else
@@ -703,7 +766,6 @@ var VirtualRenderer = function(container, theme) {
             this.$cursorLayer.update(this.layerConfig);
             this.$highlightGutterLine && this.$updateGutterLineHighlight();
             this.$moveTextAreaToCursor();
-            this.$updateScrollBar();
             this._signal("afterRender");
             return;
         }
@@ -736,35 +798,70 @@ var VirtualRenderer = function(container, theme) {
             this.$markerBack.update(this.layerConfig);
         }
 
-        if (changes & this.CHANGE_SIZE)
-            this.$updateScrollBar();
+        if (changes & this.CHANGE_SIZE) {
+            this.$updateScrollBarV();
+            this.$updateScrollBarH();
+        }
 
         this._signal("afterRender");
     };
 
+    
+    this.setSize = function(height, width) {
+        this.scrollBar.element.style.display = "";
+        this.scrollBar.width = this.scrollBar.orginalWidth;
+        this.container.style.height = config.height + "px";
+        
+        this.scrollTop = height - this.maxLines * this.lineHeight;
+    };
+    
     this.$computeLayerConfig = function() {
         if (!this.$size.scrollerHeight)
             return this.onResize(true);
 
         var session = this.session;
+        
+        var screenLines = this.session.getScreenLength()
+        if (this.$size.maxLines) {
+            var underflow = screenLines < this.$size.maxLines;
+            if (underflow != this.underflow) {
+                
+                
+            } else if (true) {
+            
+            }
+        }
+        var maxHeight =  screenLines * this.lineHeight;
+        
+            
 
         var offset = this.scrollTop % this.lineHeight;
         var minHeight = this.$size.scrollerHeight + this.lineHeight;
 
         var longestLine = this.$getLongestLine();
 
-        var horizScroll = this.$hScrollBarAlwaysVisible || this.$size.scrollerWidth - longestLine < 0;
+        var horizScroll = this.$size.scrollerWidth - longestLine - 2 * this.$padding < 0;
+        if (!horizScroll && this.$hScrollBarAlwaysVisible)
+            horizScroll = true;
+
         var horizScrollChanged = this.$horizScroll !== horizScroll;
-        this.$horizScroll = horizScroll;
         if (horizScrollChanged) {
-            this.scroller.style.overflowX = horizScroll ? "scroll" : "hidden";
-            // when we hide scrollbar scroll event isn't emited
-            // leaving session with wrong scrollLeft value
-            if (!horizScroll)
-                this.session.setScrollLeft(0);
+            this.$horizScroll = horizScroll;
+            this.scrollBarH.setVisible(horizScroll);
         }
-        var maxHeight = this.session.getScreenLength() * this.lineHeight;
-        this.session.setScrollTop(Math.max(0, Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight)));
+        
+        var vScroll = this.$vScrollBarAlwaysVisible || this.$size.scrollerHeight - maxHeight < 0;
+        var vScrollChanged = this.$vScroll !== vScroll;
+        if (vScrollChanged) {
+            this.$vScroll = vScroll;
+            this.scrollBarV.setVisible(vScroll);
+        }
+        
+        this.session.setScrollTop(Math.max(-this.scrollMargin.top,
+            Math.min(this.scrollTop, maxHeight - this.$size.scrollerHeight + this.scrollMargin.v)));
+        console.log(longestLine , this.$size.scrollerWidth)
+        this.session.setScrollLeft(Math.max(-this.scrollMargin.left, Math.min(this.scrollLeft, 
+            longestLine + 2 * this.$padding - this.$size.scrollerWidth + this.scrollMargin.h)));
 
         var lineCount = Math.ceil(minHeight / this.lineHeight) - 1;
         var firstRow = Math.max(0, Math.round((this.scrollTop - offset) / this.lineHeight));
@@ -815,7 +912,7 @@ var VirtualRenderer = function(container, theme) {
 
         // Horizontal scrollbar visibility may have changed, which changes
         // the client height of the scroller
-        if (horizScrollChanged)
+        if (horizScrollChanged || vScrollChanged)
             this.onResize(true);
     };
 
@@ -952,6 +1049,10 @@ var VirtualRenderer = function(container, theme) {
         if (this.scrollTop > top) {
             if (offset)
                 top -= offset * this.$size.scrollerHeight;
+            if (top == 0)
+                top = - this.scrollMargin.top;
+            else if (top == 0)
+                top = + this.scrollMargin.bottom;
             this.session.setScrollTop(top);
         } else if (this.scrollTop + this.$size.scrollerHeight < top + this.lineHeight) {
             if (offset)
@@ -963,7 +1064,7 @@ var VirtualRenderer = function(container, theme) {
 
         if (scrollLeft > left) {
             if (left < this.$padding + 2 * this.layerConfig.characterWidth)
-                left = 0;
+                left = -this.scrollMargin.left;
             this.session.setScrollLeft(left);
         } else if (scrollLeft + this.$size.scrollerWidth < left + this.characterWidth) {
             this.session.setScrollLeft(Math.round(left + this.characterWidth - this.$size.scrollerWidth));
@@ -1119,9 +1220,6 @@ var VirtualRenderer = function(container, theme) {
     * @returns {Number}
     **/
     this.scrollToX = function(scrollLeft) {
-        if (scrollLeft < 0)
-            scrollLeft = 0;
-
         if (this.scrollLeft !== scrollLeft)
             this.scrollLeft = scrollLeft;
         this.$loop.schedule(this.CHANGE_H_SCROLL);
@@ -1148,9 +1246,10 @@ var VirtualRenderer = function(container, theme) {
     * @returns {Boolean}
     **/
     this.isScrollableBy = function(deltaX, deltaY) {
-        if (deltaY < 0 && this.session.getScrollTop() >= 1)
+        if (deltaY < 0 && this.session.getScrollTop() >= 1 - this.scrollMargin.top)
            return true;
-        if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight - this.layerConfig.maxHeight < -1)
+        if (deltaY > 0 && this.session.getScrollTop() + this.$size.scrollerHeight
+            - this.layerConfig.maxHeight < -1 + this.scrollMargin.bottom)
            return true;
         // todo: handle horizontal scrolling
     };
@@ -1424,13 +1523,19 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", {
         value: true
     },
     hScrollBarAlwaysVisible: {
-        set: function(alwaysVisible) {
-            this.$hScrollBarAlwaysVisible = alwaysVisible;
+        set: function(val) {
             if (!this.$hScrollBarAlwaysVisible || !this.$horizScroll)
                 this.$loop.schedule(this.CHANGE_SCROLL);
         },
         initialValue: false
     },
+    vScrollBarAlwaysVisible: {
+        set: function(val) {
+            if (!this.$vScrollBarAlwaysVisible || !this.$vScroll)
+                this.$loop.schedule(this.CHANGE_SCROLL);
+        },
+        initialValue: false
+    },
     fontSize:  {
         set: function(size) {
             if (typeof size == "number")