diff --git a/lenses-freeform.html b/lenses-freeform.html
index 4c60c4e..d5f6ecf 100644
--- a/lenses-freeform.html
+++ b/lenses-freeform.html
@@ -4,7 +4,7 @@
 <link rel="import" href="../paper-input/paper-input.html">
 <link rel="import" href="../core-overlay/core-overlay.html">
 
-<polymer-element name="lenses-freeform" attributes="structure" on-keydown="{{keydownHandler}}" on-keyup="{{keyupHandler}}" on-mouseout="mouseoutHandler">
+<polymer-element name="lenses-freeform" attributes="structure" on-keydown="{{keydownHandler}}" on-keyup="{{keyupHandler}}">
 
   <template>
     <link rel="stylesheet" href="lenses-freeform.css">
@@ -192,13 +192,15 @@ <h3><paper-input label="Your Name" value="{{lensAuthor}}"></paper-input></h3>
       _deleteCallback: null,
 
       domReady: function() {
+        var self = this;
 
-        this.addEventListener('core-resize', function() {
+        self.addEventListener('core-resize', function() {
           this._drawConnections();
         });
 
-        this.$.zoomRange.value = this._zoom;
+        self.$.zoomRange.value = self._zoom;
 
+        document.addEventListener('mouseleave', self.mouseleaveHandler.bind(self));
       },
 
       ready: function() {
@@ -1010,7 +1012,7 @@ <h3><paper-input label="Your Name" value="{{lensAuthor}}"></paper-input></h3>
           var focusedArea = e.path['0'].localName;
 
           // make sure it is not a text or input area
-          if (focusedArea.indexOf('text') > -1 || focusedArea.indexOf('input') > 1) {
+          if (focusedArea.indexOf('text') > -1 || focusedArea.indexOf('input') > -1) {
             console.log('in a text area');
             return;
           }
@@ -1058,7 +1060,7 @@ <h3><paper-input label="Your Name" value="{{lensAuthor}}"></paper-input></h3>
 
         },
 
-        mouseoutHandler: function(e) {
+        mouseleaveHandler: function(e) {
           this._clearDragArea();
         },