16 files changed, 457 insertions, 7 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 885d710f..e78c1ef1 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-container.js b/js/panels/css-panel/css-panel-container.js
new file mode 100644
index 00000000..aeaa2d13
--- /dev/null
+++ b/js/panels/css-panel/css-panel-container.js
@@ -0,0 +1,15 @@
+/* <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;
+var PanelBase = require("js/panels/PanelBase").PanelBase;
+var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;
+
+exports.CSSPanelContainer = Montage.create(PanelBase, {
+    panelName : { value: "CSSPanelNew" },
+    minHeight : { value: 200 },
+    content : { value: Content }
+});
\ No newline at end of file
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/js/panels/css-panel/css-panel.reel/css-panel.css
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.html b/js/panels/css-panel/css-panel.reel/css-panel.html
new file mode 100644
index 00000000..86bfbbb7
--- /dev/null
+++ b/js/panels/css-panel/css-panel.reel/css-panel.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- <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> -->
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" href="css-panel.css" type="text/css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/css-panel/css-panel.reel",
+                "name" : "CSSPanel",
+                "properties" : {
+                    "element" : {"#" : "container"}
+                }
+            },
+            "styleSheetView": {
+                "module" : "js/panels/css-panel/style-sheets-view.reel",
+                "name": "StyleSheetsView",
+                "properties": {
+                    "element": {"#": "style-sheet-view" }
+                }
+            },
+            "stylesViewContainer": {
+                "module" : "js/panels/css-panel/styles-view-container.reel",
+                "name": "StylesViewContainer",
+                "properties": {
+                    "element": {"#": "styles-view-container" }
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<section id="container" class="css-panel">
+    <h2>Style Sheets</h2>
+    <div id="style-sheet-view"></div>
+    <h2>Styles</h2>
+    <div id="styles-view-container"></div>
+</section>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.js b/js/panels/css-panel/css-panel.reel/css-panel.js
new file mode 100644
index 00000000..a593f1c4
--- /dev/null
+++ b/js/panels/css-panel/css-panel.reel/css-panel.js
@@ -0,0 +1,33 @@
+/* <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,
+    Component = require("montage/ui/component").Component;
+
+exports.CSSPanelNew = Montage.create(Component, {
+    hasTemplate: {
+        value: true
+    },
+    condition: {
+        value: false
+    },
+    templateDidLoad : {
+        value: function() {
+            console.log("css panel : template did load");
+            //this.condition = true;
+        }
+    },
+    prepareForDraw : {
+        value: function() {
+            console.log("css panel : prepare for draw");
+        }
+    },
+    draw : {
+        value: function() {
+            console.log("css panel : draw");
+        }
+    }
+});
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
new file mode 100644
index 00000000..43ffec6f
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>