13 files changed, 65 insertions, 21 deletions

diff --git a/js/panels/properties/sections/custom-rows/color-select.reel/color-select.html b/js/panels/properties/sections/custom-rows/color-select.reel/color-select.html
index 9c2588b9..9c2588b9 100644..100755
--- a/js/panels/properties/sections/custom-rows/color-select.reel/color-select.html
+++ b/js/panels/properties/sections/custom-rows/color-select.reel/color-select.html
diff --git a/js/panels/properties/sections/custom-rows/color-select.reel/color-select.js b/js/panels/properties/sections/custom-rows/color-select.reel/color-select.js
index 60f8efef..60f8efef 100644..100755
--- a/js/panels/properties/sections/custom-rows/color-select.reel/color-select.js
+++ b/js/panels/properties/sections/custom-rows/color-select.reel/color-select.js
diff --git a/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html
index 0398ff4c..0398ff4c 100644..100755
--- a/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html
+++ b/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html
diff --git a/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js
index 72d216ca..72d216ca 100644..100755
--- a/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js
+++ b/js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js
diff --git a/js/panels/properties/sections/custom-rows/single-row.reel/single-row.html b/js/panels/properties/sections/custom-rows/single-row.reel/single-row.html
index 27c02380..27c02380 100644..100755
--- a/js/panels/properties/sections/custom-rows/single-row.reel/single-row.html
+++ b/js/panels/properties/sections/custom-rows/single-row.reel/single-row.html
diff --git a/js/panels/properties/sections/custom-rows/single-row.reel/single-row.js b/js/panels/properties/sections/custom-rows/single-row.reel/single-row.js
index b606d6b8..b606d6b8 100644..100755
--- a/js/panels/properties/sections/custom-rows/single-row.reel/single-row.js
+++ b/js/panels/properties/sections/custom-rows/single-row.reel/single-row.js
diff --git a/js/panels/properties/sections/custom.reel/custom.html b/js/panels/properties/sections/custom.reel/custom.html
index 6d4cf0cd..6d4cf0cd 100644..100755
--- a/js/panels/properties/sections/custom.reel/custom.html
+++ b/js/panels/properties/sections/custom.reel/custom.html
diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js
index 992db8e6..a2b9b9fa 100644..100755
--- a/js/panels/properties/sections/custom.reel/custom.js
+++ b/js/panels/properties/sections/custom.reel/custom.js
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 //Custom Rows
 var SingleRow = require("js/panels/properties/sections/custom-rows/single-row.reel").SingleRow;
@@ -18,7 +19,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox;
 var TextField = require("js/components/textfield.reel").TextField;
 var FileInput = require("js/components/ui/file-input.reel").FileInput;
 var Checkbox = require("js/components/checkbox.reel").Checkbox;
-
+var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
 
 exports.CustomSection = Montage.create(Component, {
 
@@ -88,10 +89,8 @@ exports.CustomSection = Montage.create(Component, {
         value:{}
     },
 
-    handleChanging:
-        {
-                value:function(event)
-                {
+    handleChanging: {
+                value:function(event) {
             var obj = event.currentTarget;
             this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
                 }
@@ -106,6 +105,27 @@ exports.CustomSection = Montage.create(Component, {
                 }
         },
 
+    /**
+     * Color change handler. Hard coding the stage for now since only the stage PI uses this color chip
+     */
+    handleColorChange: {
+        value: function(event) {
+            // Change the stage color for now
+            //console.log(this, event);
+            ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            /*
+            var propEvent = document.createEvent("CustomEvent");
+            propEvent.initEvent("propertyChange", true, true);
+            propEvent.type = "propertyChange";
+
+            propEvent.prop = "background";//event.prop;
+            propEvent.value = event._event.color.css;
+
+            this.dispatchEvent(propEvent);
+            */
+        }
+    },
+
     _dispatchPropEvent: {
         value: function(event) {
 //            console.log(event);
@@ -140,6 +160,7 @@ exports.CustomSection = Montage.create(Component, {
                 case "textbox"  : return this.createTextField(fields);
                 case "file"     : return this.createFileInput(fields);
                 case "checkbox" : return this.createCheckbox(fields);
+                case "chip"     : return this.createColorChip(fields);
             }
         }
     },
@@ -305,6 +326,26 @@ exports.CustomSection = Montage.create(Component, {
 
             return obj;
         }
+    },
+
+    createColorChip: {
+        value: function(aField) {
+            var obj = ColorChip.create();
+
+            obj.chip = true;
+            obj.iconType = "fillIcon";
+            obj.mode = "chip";
+            obj.offset = 0;
+
+            if (aField.id)          obj.id = aField.id;
+            if (aField.prop)        obj.prop = aField.prop;
+
+            obj.changeDelegate = this.handleColorChange;
+
+            this.controls[aField.id] = obj;
+
+            return obj;
+        }
     }
 
 });
\ No newline at end of file
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.css b/js/panels/properties/sections/position-and-size.reel/position-and-size.css
index 227a232b..227a232b 100644..100755
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.css
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.css
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.html b/js/panels/properties/sections/position-and-size.reel/position-and-size.html
index 79a55385..79a55385 100644..100755
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.html
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.html
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.js b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
index 49117090..49117090 100644..100755
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
diff --git a/js/panels/properties/sections/three-d-view.reel/three-d-view.html b/js/panels/properties/sections/three-d-view.reel/three-d-view.html
index 1e24cb55..1e24cb55 100644..100755
--- a/js/panels/properties/sections/three-d-view.reel/three-d-view.html
+++ b/js/panels/properties/sections/three-d-view.reel/three-d-view.html
diff --git a/js/panels/properties/sections/three-d-view.reel/three-d-view.js b/js/panels/properties/sections/three-d-view.reel/three-d-view.js
index 0c4a9171..35591afa 100644..100755
--- a/js/panels/properties/sections/three-d-view.reel/three-d-view.js
+++ b/js/panels/properties/sections/three-d-view.reel/three-d-view.js
@@ -207,29 +207,32 @@ exports.ThreeD = Montage.create(Component, {
     templateDidLoad : {
         value: function() {
             Object.defineBinding(this, "axisMode", {
-                            boundObject: this.axisModeGroupControl,
-                            boundObjectPropertyPath: "selectedIndex",
-                            oneway: false
-                        });
+                boundObject: this.axisModeGroupControl,
+                boundObjectPropertyPath: "selectedIndex",
+                oneway: false
+            });
+
+            this.eventManager.addEventListener("openDocument", this, false);
+        }
+    },
+
+    handleOpenDocument: {
+        value: function() {
 
             Object.defineBinding(this, "item", {
-                    boundObject: this,
-                    boundObjectPropertyPath: "application.ninja.selectedElements",
-                    boundValueMutator: this._getSelectedItem,
-                    oneway: true
-                });
+                boundObject: this,
+                boundObjectPropertyPath: "application.ninja.selectedElements",
+                boundValueMutator: this._getSelectedItem,
+                oneway: true
+            });
         }
     },
 
     _getSelectedItem: {
-        value: function(els)
-        {
-            if(els.length)
-            {
+        value: function(els) {
+            if(els.length) {
                 return els[0]._element || els[0];
-            }
-            else
-            {
+            } else {