22 files changed, 390 insertions, 245 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index b4a803b2..b496ce4a 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -57,11 +57,6 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
 
             this.eventManager.addEventListener("selectionChange", this, true);
             this.eventManager.addEventListener("elementChange", this, true);
-            this.eventManager.addEventListener("openDocument", this, true);
-
-            if(this.application.ninja.currentDocument) {
-                this.captureOpenDocument();
-            }
 
             this.addEventListener('webkitTransitionEnd', this, false);
             ['sheets', 'styles'].forEach(function(section) {
@@ -73,11 +68,29 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
             this._setUpToolbars();
         }
     },
-    captureOpenDocument : {
-        value : function(e) {
-            this.populateStyleSheetList();
+
+    _currentDocument: {
+        value : null,
+        enumerable : false
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(this._currentDocument.currentView === "design") {
+                this.populateStyleSheetList();
+            }
         }
     },
+
     handleWebkitTransitionEnd : {
         value: function(e) {
             //console.log('transition end at panel base');
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index bd9b4e2f..3783459e 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -104,6 +104,35 @@ exports.Panel = Montage.create(Component, {
         }
     },
 
+    _currentDocument: {
+        value : null,
+        enumerable : false
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(typeof this.panelContent.content[0].controller._currentDocument !== "undefined") {
+                this.panelContent.content[0].controller.currentDocument = this._currentDocument;
+            }
+
+            if(!value) {
+                this.disabled = true;
+            } else {
+                this.disabled = this._currentDocument.currentView !== "design";
+            }
+
+        }
+    },
+
     handleBtnCollapseAction: {
         value: function() {
             this.collapsed = !this.collapsed;
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html
index 7327fb1d..7d7444c5 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -17,6 +17,9 @@
                 "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_0"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -24,6 +27,9 @@
                 "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_1"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -31,6 +37,9 @@
                 "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_2"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -38,6 +47,9 @@
                 "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_3"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -45,6 +57,9 @@
                 "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_4"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -52,6 +67,9 @@
                 "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_5"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -60,6 +78,9 @@
                 "name": "Panel",
                 "properties": {
                     "element": {"#": "panel_6"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js
index b4f77317..82069146 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer.reel/PanelContainer.js
@@ -16,7 +16,24 @@ exports.PanelContainer = Montage.create(Component, {
         value: null
     },
 
-    // This will hold the current loaded panels.
+    _currentDocument: {