13 files changed, 234 insertions, 79 deletions

diff --git a/js/components/colorwheel.reel/compass_app_log.txt b/js/components/colorwheel.reel/compass_app_log.txt
deleted file mode 100644
index 815feb02..00000000
--- a/js/components/colorwheel.reel/compass_app_log.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-2011-11-23 01:07:12    create css/colorwheel.css
-2011-11-23 01:07:25 overwrite css/colorwheel.css
-2011-12-20 17:04:05 overwrite css/colorwheel.css
diff --git a/js/components/popup.reel/compass_app_log.txt b/js/components/popup.reel/compass_app_log.txt
deleted file mode 100644
index 8a3fb984..00000000
--- a/js/components/popup.reel/compass_app_log.txt
+++ /dev/null
@@ -1,48 +0,0 @@
-2011-06-28 18:13:06    create css/popup.css
-2011-06-28 18:13:12 identical css/popup.css
-2011-06-28 18:14:08 overwrite css/popup.css
-2011-06-28 18:14:20 overwrite css/popup.css
-2011-06-28 18:14:29 overwrite css/popup.css
-2011-06-28 18:17:23 overwrite css/popup.css
-2011-06-28 18:17:27 overwrite css/popup.css
-2011-06-28 18:17:56 overwrite css/popup.css
-2011-06-28 18:18:09 overwrite css/popup.css
-2011-06-28 18:20:30 overwrite css/popup.css
-2011-06-28 18:22:35 overwrite css/popup.css
-2011-06-28 18:24:12 overwrite css/popup.css
-2011-06-28 18:24:23 overwrite css/popup.css
-2011-06-28 18:24:33 overwrite css/popup.css
-2011-06-28 18:25:17 overwrite css/popup.css
-2011-06-28 18:26:21 overwrite css/popup.css
-2011-06-28 18:26:33 overwrite css/popup.css
-2011-06-28 18:26:42 overwrite css/popup.css
-2011-06-28 18:26:57 overwrite css/popup.css
-2011-06-28 18:29:57 overwrite css/popup.css
-2011-06-28 18:30:14 overwrite css/popup.css
-2011-06-28 18:30:23 overwrite css/popup.css
-2011-06-28 18:30:48 overwrite css/popup.css
-2011-06-28 18:31:03 overwrite css/popup.css
-2011-06-29 10:18:31 overwrite css/popup.css
-2011-06-29 10:18:47 overwrite css/popup.css
-2011-06-29 10:37:19 overwrite css/popup.css
-2011-06-29 10:40:29 overwrite css/popup.css
-2011-06-29 10:45:37 overwrite css/popup.css
-2011-06-29 10:45:53 identical css/popup.css
-2011-06-29 10:46:52 overwrite css/popup.css
-2011-06-29 10:47:02 identical css/popup.css
-2011-06-29 13:30:47 overwrite css/popup.css
-2011-06-29 13:31:14 overwrite css/popup.css
-2011-12-20 17:06:48 overwrite css/popup.css
-2011-12-22 11:29:15 overwrite css/popup.css
-2011-12-22 11:29:24 identical css/popup.css
-2011-12-22 11:30:05 overwrite css/popup.css
-2011-12-22 11:30:33 overwrite css/popup.css
-2011-12-22 11:30:51 overwrite css/popup.css
-2011-12-22 11:32:30 overwrite css/popup.css
-2011-12-22 11:33:06 overwrite css/popup.css
-2011-12-22 11:33:12 overwrite css/popup.css
-2011-12-22 11:33:32 identical css/popup.css
-2011-12-22 11:33:36 overwrite css/popup.css
-2011-12-22 11:34:48 overwrite css/popup.css
-2012-01-26 11:42:18 overwrite css/popup.css
-2012-01-26 11:42:20 overwrite css/popup.css
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
index 749df3cd..0b7a171e 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -41,7 +41,6 @@ exports.Leaf = Montage.create(TreeNode, {
     },
     callDelegateMethod : {
         value: function(methodName) {
-            console.log("Delegate method name: ", methodName);
             var delegate = this.treeView.contentController.delegate;
             if(delegate && typeof delegate[methodName] === 'function') {
                 delegate[methodName](this.sourceObject);
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index 5bef7020..e51bdd8a 100644
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -9,32 +9,80 @@ var Montage = require("montage/core/core").Montage,
 
 var ColorChip = exports.ColorChip = Montage.create(Component, {
 
+    chip: {
+        value: false
+    },
+
     hasIcon: {
         value: true
     },
 
+    iconType: {
+        value: null
+    },
+
     mode: {
         value: "stroke"
     },
 
-    prepareForDraw: {
-        value: function() {
-//            this.colorButton.props = {side: 'right', align: 'bottom', wheel: true, palette: true, gradient: true, image: true, offset: 20};
-//            this.application.ninja.colorController.addButton('chip', this.colorButton);
+    offset: {
+        value: 20
+    },
 
+    initialColor: {
+        value: false
+    },
 
+    changeDelegate: {
+        value: null
+    },
+
+    prepareForDraw: {
+        value: function() {
             this.addEventListener("firstDraw", this, false);
         }
     },
 
     draw: {
         value: function() {
+            if(this.hasIcon) {
+                var icon = this.iconType || this.mode + "Icon";
+                this.application.ninja.colorController.addButton(icon, this.icon);
+            }
 
-            if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon);
-
-//            this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
-            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20};
+            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset};
             this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
+
+        }
+    },
+
+    handleFirstDraw: {
+        value: function(evt) {
+            if(this.chip) {
+                // This is a single chip - Not related to the color panel -- Set the initial color if found
+                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)";
+
+                if(this.initialColor) {
+                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor);
+                    mode = colorObj.mode;
+                    r = colorObj.value.r;
+                    g = colorObj.value.g;
+                    b = colorObj.value.b;
+                    a = colorObj.value.a;
+                    css = colorObj.css;
+                }
+
+                this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
+                this.chipBtn.addEventListener("change", this, false);
+            }
+        }
+    },
+
+    handleChange: {
+        value: function(evt) {
+            if(this.changeDelegate && typeof(this.changeDelegate === "function")) {
+                this.changeDelegate(evt);
+            }
         }
     }
 
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index b8170826..af7c4858 100644
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -75,6 +75,8 @@ exports.StageController = Montage.create(ElementController, {
     getProperty: {
         value: function(el, p) {
             switch(p) {
+                case "background" :
+                    return el.elementModel.stageBackground.style.getProperty(p);
                 case "border":
                     return el.elementModel.stageView.style.getProperty(p);
                 case "height":
@@ -92,7 +94,7 @@ exports.StageController = Montage.create(ElementController, {
         value: function(el, p, value) {
             switch(p) {
                 case "background":
-                    el.elementModel.body.style.setProperty(p, value);
+                    el.elementModel.stageBackground.style.setProperty(p, value);
                     break;
                 case "overflow":
                     el.elementModel.viewPort.style.setProperty(p, value);
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 44e0e798..44ca50e1 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -128,7 +128,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 } else {
                     this._defaultStylesheet = sheets[lastIndex];
                 }
-                
+
             }
         }
     },
@@ -179,14 +179,14 @@ var stylesController =