72 files changed, 3798 insertions, 2778 deletions

diff --git a/css/ninja.css b/css/ninja.css
index d98aa513..b71ab79c 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -118,9 +118,9 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #sceneBar { height: 70px; background-color: #474747; }
 
-#mainContainer .rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; border-right: 11px solid black; }
+#mainContainer .rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; }
 
-.rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; }
+.rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; }
 
 #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; }
 
@@ -600,7 +600,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 
 .panels .panel { min-height: 25px; -webkit-box-flex: 0; display: -webkit-box; -webkit-box-orient: vertical; background: #282828; height: 200px; padding: 0px 2px; -webkit-box-sizing: border-box; }
 
-.panels .panel .panelBody { -webkit-box-flex: 1; -webkit-box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; overflow: auto; height: 200px; }
+.panels .panel .panelBody { -webkit-box-flex: 1; -webkit-box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; }
 
 .panel .panelBodyContent { -webkit-box-sizing: border-box; -webkit-box-align: stretch; position: absolute; height: 100%; width: 100%; }
 
@@ -871,6 +871,8 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); }
 
+.bindingTool { background-image: url("../images/tools/binding.png"); }
+
 .blueDiv { background: blue; opacity: 0.2; }
 
 ::-webkit-scrollbar { width: 11px; height: 11px; }
@@ -933,4 +935,12 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .montage-invisible { display: none; }
 
+.panels .panel { display: none; }
+
+.panels .panel.ws-binding { display: none; -webkit-box-flex-group: 2; }
+
+body.ws-binding .panel.ws-binding { display: -webkit-box; }
+
+body.ws-default .panel.default { display: -webkit-box; -webkit-box-flex-group: 1; }
+
 /*77*/
diff --git a/images/cursors/binding.png b/images/cursors/binding.png
new file mode 100644
index 00000000..16e84574
--- /dev/null
+++ b/images/cursors/binding.png
diff --git a/images/panels/horizontal-resize.png b/images/panels/horizontal-resize.png
new file mode 100644
index 00000000..7b2cf8a5
--- /dev/null
+++ b/images/panels/horizontal-resize.png
diff --git a/images/tools/binding.png b/images/tools/binding.png
new file mode 100644
index 00000000..33545ee1
--- /dev/null
+++ b/images/tools/binding.png
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index 103e418f..88b93b2c 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -93,12 +93,43 @@ exports.Editable = Montage.create(Component, {
             }
         }
     },
+
+    _value : { value: null },
     value : {
-        get: function() {
-            return this._element.textContent;
-        },
-        set: function(str) {
-            this._element.textContent = str;
+        get : function() { return this._value; },
+        set : function(value) {
+            if(value === this._value) { return; }
+
+            var node = this._getFirstTextNode();
+            node.textContent = value;
+
+            this._value = value;
+        }
+    },
+    _getFirstTextNode : {
+        value : function(el) {
+            ///// optional el argument specified container element
+            var e = el || this._element,
+                nodes = e.childNodes, node;
+
+            if(nodes.length) {
+                for(var i=0; i<nodes.length; i++) {
+                    if(nodes[i].nodeType === 3) {
+                        ///// found the first text node
+                        node = nodes[i];
+                        break;
+                    }
+                }
+            }
+
+            ///// Text node not found
+            if(!node) {
+                node = document.createTextNode('');
+                e.appendChild(node);
+            }
+
+
+            return node;
         }
     },
 
@@ -207,6 +238,8 @@ exports.Editable = Montage.create(Component, {
     ///// Text input has changed values