25 files changed, 1659 insertions, 54 deletions

diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index 15eb4da9..16643813 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: []
+    },
+
     panelContent: {
         value: null,
         serializable: true
@@ -154,6 +158,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 b22b3609..820348d2 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -74,8 +74,7 @@
             },
 
             "panel_6": {
-                "module": "js/panels/Panel.reel",
-                "name": "Panel",
+                "prototype": "js/panels/Panel.reel",
                 "properties": {
                     "element": {"#": "panel_6"}
                 },
@@ -84,6 +83,16 @@
                 }
             },
 
+            "panel_7": {
+                "prototype": "js/panels/Panel.reel",
+                "properties": {
+                    "element": {"#": "panel_7"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
+                }
+            },
+
             "owner": {
                 "prototype": "js/panels/PanelContainer.reel",
                 "properties": {
@@ -95,7 +104,8 @@
                     "panel_3":          {"@": "panel_3"},
                     "panel_4":          {"@": "panel_4"},
                     "panel_5":          {"@": "panel_5"},
-                    "panel_6":          {"@": "panel_6"}
+                    "panel_6":          {"@": "panel_6"},
+                    "panel_7":          {"@": "panel_7"}
                 },
                 "listeners": [
                     {
@@ -126,6 +136,7 @@
             <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>
     </section>
 </body>
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js
index 5c733b92..e0e547f9 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer.reel/PanelContainer.js
@@ -84,6 +84,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: {}
     },
@@ -112,6 +124,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";
@@ -185,15 +199,17 @@ exports.PanelContainer = Montage.create(Component, {
  
     _setPanelsSizes: {
         value: function(panelActivated) {
-            var len = this.panels.length, setLocked = true;
+            var availablePanels = this.panelsAvailable();
+            var len = availablePanels.length;
+            var setLocked = true;
 
             for(var i = 0; i < len; i++) {
-                if(this.panels[i] === panelActivated || panelActivated === null) {
+                if(availablePanels[i] === panelActivated || panelActivated === null) {
                     setLocked = false;
                 }
 
-                this.panels[i].locked = setLocked;
-                this.panels[i].needsDraw = true;
+                availablePanels[i].locked = setLocked;
+                availablePanels[i].needsDraw = true;
             }
         }
     },
@@ -201,7 +217,8 @@ exports.PanelContainer = Montage.create(Component, {
     _redrawPanels: {
         value: function(panelActivated, unlockPanels) {
             var maxHeight = this.element.offsetHeight, setLocked = true;
-            var len = this.panels.length;
+            var availablePanels = this.panelsAvailable();
+            var len = availablePanels.length;
 
             if(unlockPanels === true) {
                 setLocked = false;
@@ -215,7 +232,7 @@ exports.PanelContainer = Montage.create(Component, {
             }
 
             for(var i = 0; i < len; i++) {
-                var obj = this['panel_'+i];
+                var obj = availablePanels[i];
 
                 if(obj === panelActivated) {
                     setLocked = false;
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index c6d46911..4f2a137e 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -156,7 +156,7 @@ exports.Splitter = Montage.create(Component, {
         }
     },