9 files changed, 55 insertions, 26 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 44ca50e1..aa5a4e7f 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -94,11 +94,18 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             // Returns null if sheet not found (as in non-ninja projects)
             // Setter will handle null case
             this.defaultStylesheet = this.getSheetFromElement(this.CONST.DEFAULT_SHEET_ID);
-                        
-            //debugger;
+
+            this.userStyleSheets = nj.toArray(document._document.styleSheets).filter(function(sheet) {
+                return sheet !== this._stageStylesheet;
+            }, this);
+
+            NJevent('styleSheetsReady', this);
         },
         enumerable : false
     },
+    userStyleSheets : {
+        value : null
+    },
     _stageStylesheet : {
         value : null
     },
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 887743c5..49dfd706 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -19,16 +19,18 @@ exports.NJUtils = Object.create(Object.prototype, {
     
     ///// Quick "getElementById"
     $ : {
-        value: function(id) {
-            return document.getElementById(id);            
+        value: function(id, doc) {
+            doc = doc || document;
+            return doc.getElementById(id);
         }
     },
     
     ///// Quick "getElementsByClassName" which also returns as an Array
     ///// Can return as NodeList by passing true as second argument
     $$ : {
-        value: function(className, asNodeList) {
-            var list = document.getElementsByClassName(className);
+        value: function(className, asNodeList, doc) {
+            doc = doc || document;
+            var list = doc.getElementsByClassName(className);
             return (asNodeList) ? list : this.toArray(list);
         }
     },
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index b8223471..db0f494b 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -16,6 +16,7 @@ var ComponentsPanel = require("js/panels/Components/ComponentsPanel").Components
 var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
 var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
 var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
+var CSSPanelNew    = require("js/panels/css-panel/css-panel-container").CSSPanelContainer;
 
 exports.PanelContainer = Montage.create(Component, {
     lastOffset: {
@@ -45,7 +46,7 @@ exports.PanelContainer = Montage.create(Component, {
     },
 
     initPanelOrder: {
-        value: ['PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
+        value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
     },
 
     panelOrder: {
@@ -101,6 +102,7 @@ exports.PanelContainer = Montage.create(Component, {
             this.addEventListener("change@appModel.CSSPanel", this, false);
             this.addEventListener("change@appModel.MaterialsPanel", this, false);
             this.addEventListener("change@appModel.PresetsPanel", this, false);
+            this.addEventListener("change@appModel.CSSPanelNew", this, false);
         }
     },
 
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
index cc1876c3..86bfbbb7 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.html
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -26,9 +26,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             },
             "stylesViewContainer": {
                 "module" : "js/panels/css-panel/styles-view-container.reel",
-                "name": "StyleSheetView",
+                "name": "StylesViewContainer",
                 "properties": {
-                    "element": {"#": "css-styles-view" }
+                    "element": {"#": "styles-view-container" }
                 }
             }
         }
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
index 4fb94335..43ffec6f 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.html
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -20,7 +20,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "module": "montage/ui/dynamic-text.reel",
                 "name": "DynamicText",
                 "properties": {
-                    "element": {"#": "sheet-name"}
+                    "element": {"#": "sheet-name"},
+                    "defaultText": "Style sheet"
                 },
                 "bindings": {
                     "value": {
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
index daa614c2..a4fe5960 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -34,19 +34,21 @@ exports.StyleSheet = Montage.create(Component, {
             this._name = text;
         }
     },
-    _styleSheet : {
+    _source : {
         value: null
     },
-    styleSheet : {
+    source : {
         get: function() {
-            return this._styleSheet;
+            return this._source;
         },
         set: function(sheet) {
+            console.log('sheet being set');
             if(sheet.href) {
                 this.name = sheet.href.substring(sheet.href.lastIndexOf('/'));
             } else {
                 this.name = 'Style Tag';
             }
+            this._source = sheet;
         }
     }
 });
\ No newline at end of file
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
index 78836f21..d1dbfa2b 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.html
@@ -16,22 +16,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                     "element" : {"#" : "style-sheet-view-container"}
                 }
             },
+            "arrayController" : {
+                "module" : "montage/ui/controller/array-controller",
+                "name": "ArrayController",
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "styleSheets",
+                        "oneway": true
+                    }
+                }
+            },
             "styleSheetList": {
                 "module" : "montage/ui/list.reel",
                 "name": "List",
                 "properties": {
-                    "element": {"#": "sheet-list" }
-                },
-                "bindings": {
-                    "content": {
-                        "boundObject": {"@": "owner" },
-                        "boundObjectPropertyPath": "styleSheets"
-                    }
+                    "element": {"#": "sheet-list" },
+                    "contentController": {"@": "arrayController"}
                 }
             },
             "sheet": {
                 "module": "js/panels/css-panel/style-sheet.reel",
                 "name": "StyleSheet",
+                "properties": {
+                    "element": {"#": "sheet-item"}
+                },
                 "bindings": {
                     "source": {
                         "boundObject": {"@": "styleSheetList"},
@@ -61,7 +70,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot