31 files changed, 866 insertions, 572 deletions

diff --git a/js/data/panels-data.js b/js/data/panels-data.js
new file mode 100644
index 00000000..aa5057a2
--- /dev/null
+++ b/js/data/panels-data.js
@@ -0,0 +1,141 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+
+exports.PanelsData = Montage.create(Montage, {
+
+    panels: {
+        value: [
+        {
+            name: "Color",
+            height: 200,
+            minHeight: 200,
+            maxHeight: null,
+            flexible: false,
+            scrollable: false,
+            collapsed: false,
+            open: true,
+            contentComponent: null,
+            modulePath: "js/panels/Color/colorpanelbase.reel",
+            moduleName: "ColorPanelBase"
+        },
+        {
+            name: "Properties",
+            minHeight: 200,
+            height: 200,
+            maxHeight: null,
+            flexible: true,
+            scrollable: true,
+            collapsed: false,
+            open: true,
+            contentComponent: null,
+            modulePath: "js/panels/properties.reel",
+            moduleName: "Properties"
+        },
+        {
+            name: "Materials",
+            minHeight: 100,
+            height: 100,
+            maxHeight: null,
+            flexible: true,
+            collapsed: true,
+            scrollable: true,
+            open: true,
+            contentComponent: null,
+            modulePath: "js/panels/Materials/materials-library-panel.reel",
+            moduleName: "MaterialsLibraryPanel"
+        },
+        {
+            name: "Components",
+            minHeight: 100,
+            height: 200,
+            maxHeight: null,
+            flexible: true,
+            scrollable: true,
+            collapsed: true,
+            open: true,
+            contentComponent: null,
+            modulePath: "js/panels/Components/ComponentsPanelBase.reel",
+            moduleName: "ComponentsPanelBase"
+        },
+//        {
+//            name: "Project/Assets",
+//            minHeight: 250,
+//            height: 250,
+//            maxHeight: null,
+//            flexible: true,
+//            scrollable: true,
+//            collapsed: false,
+//            open: true,
+//            content: null,
+//            modulePath: "js/panels/Project/projectpanelbase.reel",
+//            moduleName: "ProjectPanelBase"
+//        },
+        {
+            name: "CSS",
+            minHeight: 195,
+            height: 195,
+            maxHeight: null,
+            flexible: true,
+            scrollable: true,
+            collapsed: true,
+            open: true,
+            contentComponent: null,
+            modulePath: "js/panels/CSSPanel/CSSPanelBase.reel",
+            moduleName: "CSSPanelBase"
+        },
+        {
+            name: "Presets",
+            minHeight: 100,
+            height: 100,
+            maxHeight: null,
+            flexible: true,
+            collapsed: true,
+            scrollable: true,
+            open: true,
+            contentComponent: null,
+            modulePath: "js/panels/presets/content.reel",
+            moduleName: "content"
+        }
+    ]
+    }
+
+
+    /*
+    _panelOrder: {
+        value: ["Properties","Color","Components","Project/Assets", "CSS","Materials"]
+    },
+
+    panelOrder: {
+        get: function() {
+            return this._panelOrder;
+        },
+        set: function(val) {
+            this._panelOrder = val;
+        }
+    }
+
+
+    panels: {
+        get: function() {
+            var filtered = this._panels.filter(function(item) {
+                return item.open;
+            });
+
+            filtered.sort(function(a,b) {
+               a.name
+            });
+
+            return filtered;
+        },
+        set : function() {
+
+        }
+    }
+    */
+
+});
\ No newline at end of file
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index a20a6090..112f844e 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -389,8 +389,8 @@
 
                 <section data-montage-id="rightPanelResizer" class="rightPanelResizer resizeBar"></section>
 
-                <section id="rightPanelContainer" class="panelContainer">
-                    <section id="rightPanelContent">
+                <section id="rightPanelContainer" class="rightPanelContainer panelContainer">
+                    <section id="rightPanelContent" class="rightPanelContent">
                     </section>
                 </section>
             </section>
diff --git a/js/panels/Color/colorpanel.js b/js/panels/Color/colorpanel.js
index 4858be68..3a603e98 100755
--- a/js/panels/Color/colorpanel.js
+++ b/js/panels/Color/colorpanel.js
@@ -38,7 +38,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
             ////////////////////////////////////////////////////////////
             ////////////////////////////////////////////////////////////
             //TODO: Remove and add via toolbar draw loop
-            this.application.ninja.colorController.createToolbar();
+
             ////////////////////////////////////////////////////////////
             ////////////////////////////////////////////////////////////
 
@@ -47,14 +47,7 @@ exports.ColorPanel = Montage.create(PanelBase, {
     },
     ////////////////////////////////////////////////////////////////////
     //Applying default colors only on first draw
-    handleFirstDraw: {
-        enumerable: true,
-        value: function (e) {
-                //
-                this.content.applyDefaultColors();
-                this.content.removeEventListener('firstDraw', this, false);
+