16 files changed, 212 insertions, 7 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 1531b76c..ebf16395 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; }
 
@@ -997,4 +997,10 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .montage-invisible { display: none; }
 
+body .panel.ws-binding { display: none; }
+
+body.ws-binding .rightPanelContent .panel { display: none; }
+
+body.ws-binding .rightPanelContent .panel.ws-binding { display: block; }
+
 /*77*/
diff --git a/js/data/panels-data.js b/js/data/panels-data.js
index f613a3be..7fa22995 100644
--- a/js/data/panels-data.js
+++ b/js/data/panels-data.js
@@ -105,6 +105,32 @@ exports.PanelsData = Montage.create(Montage, {
             open: true,
             modulePath: "js/panels/history-panel/history.reel",
             moduleName: "History"
+        },
+        {
+            name: "Binding",
+            groups: ["ws-binding"],
+            minHeight: 100,
+            height: 100,
+            maxHeight: null,
+            flexible: true,
+            collapsed: true,
+            scrollable: true,
+            open: true,
+            modulePath: "js/panels/binding.reel",
+            moduleName: "BindingPanel"
+        },
+        {
+            name: "Objects",
+            groups: ["ws-binding"],
+            minHeight: 100,
+            height: 100,
+            maxHeight: null,
+            flexible: true,
+            collapsed: true,
+            scrollable: true,
+            open: true,
+            modulePath: "js/panels/objects.reel",
+            moduleName: "ObjectsPanel"
         }
     ]
     }
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index edc1efa4..7ab8e52c 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -18,6 +18,24 @@ exports.Ninja = Montage.create(Component, {
         value: null
     },
 
+    _workspaceMode: {
+        value: null
+    },
+
+    workspaceMode: {
+        get: function() {
+            return this.workspaceMode;
+        },
+        set: function(val) {
+            if( this._workspaceMode === val ) {
+                if(this._workspaceMode !== null) {
+                   document.body.classList.remove("ws-" + val);
+                }
+                document.body.classList.add("ws-" + val);
+            }
+        }
+    },
+
     toolsData: { value: null },
     appData:    { value: AppData },
 
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index 613bef4b..bd9b4e2f 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -13,6 +13,10 @@ exports.Panel = Montage.create(Component, {
         value: "Panel"
     },
 
+    groups: {
+        value: []
+    },
+
     _collapsed: {
         value: false
     },
@@ -119,6 +123,12 @@ exports.Panel = Montage.create(Component, {
                 this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create();
             }
 
+            if(this.groups) {
+                this.groups.forEach(function(className) {
+                    this.element.classList.add(className);
+                }.bind(this));
+            }
+
             if(this.modulePath && this.moduleName) {
                 // Load the slot content
                 var that = this;
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html
index ccefd3ae..f1d1a855 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -62,6 +62,20 @@
                 }
             },
 
+            "panel_7": {
+                "prototype": "js/panels/Panel.reel",
+                "properties": {
+                    "element": {"#": "panel_7"}
+                }
+            },
+
+            "panel_8": {
+                "prototype": "js/panels/Panel.reel",
+                "properties": {
+                    "element": {"#": "panel_8"}
+                }
+            },
+
             "owner": {
                 "prototype": "js/panels/PanelContainer.reel",
                 "properties": {
@@ -73,7 +87,9 @@
                     "panel_3":          {"@": "panel_3"},
                     "panel_4":          {"@": "panel_4"},
                     "panel_5":          {"@": "panel_5"},
-                    "panel_6":          {"@": "panel_6"}
+                    "panel_6":          {"@": "panel_6"},
+                    "panel_7":          {"@": "panel_7"},
+                    "panel_8":          {"@": "panel_8"}
                 },
                 "listeners": [
                     {
@@ -104,6 +120,8 @@
             <article data-montage-id="panel_4"></article>
             <article data-montage-id="panel_5"></article>
             <article data-montage-id="panel_6"></article>
+            <article data-montage-id="panel_7"></article>
+            <article data-montage-id="panel_8"></article>
                 </article>
     </section>
 </body>
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js
index 8d1d6a5e..044fd598 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer.reel/PanelContainer.js
@@ -21,6 +21,18 @@ exports.PanelContainer = Montage.create(Component, {
         value: []
     },
 
+    panelsAvailable: {
+        value: function() {
+            var pAvail = [];
+            this.panels.forEach(function(obj) {
+                if (window.getComputedStyle(obj.element).display !== "none") {
+                    pAvail.push(obj);
+                }
+            });
+            return pAvail;
+        }
+    },
+
     currentPanelState: {
         value: {}
     },
@@ -49,6 +61,8 @@ exports.PanelContainer = Montage.create(Component, {
                 this['panel_'+i].modulePath = p.modulePath;
                 this['panel_'+i].moduleName = p.moduleName;
                 this['panel_'+i].disabled = true;
+                this['panel_'+i].groups = p.groups;
+
 
                 this.currentPanelState[p.name] = {};
                 this.currentPanelState.version = "1.0";
@@ -144,6 +158,7 @@ exports.PanelContainer = Montage.create(Component, {
  
     _setPanelsSizes: {
         value: function(panelActivated) {
+            this.panelsAvailable();