19 files changed, 117 insertions, 22 deletions

diff --git a/js/panels/properties/content.reel/content.css b/js/panels/properties/content.reel/content.css
index 2537aea2..2537aea2 100644..100755
--- a/js/panels/properties/content.reel/content.css
+++ b/js/panels/properties/content.reel/content.css
diff --git a/js/panels/properties/content.reel/content.html b/js/panels/properties/content.reel/content.html
index ab485323..ab485323 100644..100755
--- a/js/panels/properties/content.reel/content.html
+++ b/js/panels/properties/content.reel/content.html
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 0088447a..8fa33a75 100644..100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -54,8 +54,17 @@ exports.Content = Montage.create(Component, {
                 this.eventManager.addEventListener( "elementChanging", this, false);
             }
 
+            this.eventManager.addEventListener("openDocument", this, false);
+        }
+    },
+
+    // Document is opened - Display the current selection
+    handleOpenDocument: {
+        value: function() {
+
             this.eventManager.addEventListener( "elementChange", this, false);
 
+            // For now always assume that the stage is selected by default
             if(this.application.ninja.selectedElements.length === 0) {
                 this.displayStageProperties();
             }
@@ -150,6 +159,35 @@ exports.Content = Montage.create(Component, {
                 this.customPi = stage.elementModel.pi;
                 this.displayCustomProperties(stage, stage.elementModel.pi);
             }
+
+            // For now hardcode the background since it is the only custom property
+            // No need to loop through all the properties.
+            var backgroundChip = this.customSections[0].content.controls["background"];
+            backgroundChip.color = ElementsMediator.getProperty(stage, "background");
+
+            /*
+            var customPI = PiData[this.customPi];
+            // Get all the custom section for the custom PI
+            for(var i = 0, customSec; customSec = customPI[i]; i++) {
+
+                // Now set the Fields for the custom PI
+                for(var j = 0, fields; fields = customSec.Section[j]; j++) {
+                    for(var k = 0, control; control = fields[k]; k++) {
+
+                        var colorChipEl = this.customSections[i].content.controls[control.id];
+                        this.foo = colorChipEl;
+                        colorChipEl.addEventListener("firstDraw", this, false);
+
+                    }
+                }
+            }
+            */
+        }
+    },
+
+    handleFirstDraw: {
+        value: function() {
+            this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
         }
     },
 
@@ -217,6 +255,12 @@ exports.Content = Montage.create(Component, {
 
                             if(currentValue)
                             {
+                                if(currentValue.color)
+                                {
+                                    currentValue.color.wasSetByCode = true;
+                                    currentValue.color.type = "change";
+                                }
+
                                 if(currentValue.mode === "gradient")
                                 {
                                     this.application.ninja.colorController.colorModel["gradient"] =
@@ -229,7 +273,14 @@ exports.Content = Montage.create(Component, {
                                         this.application.ninja.colorController.colorModel.alpha =
                                                         {value: currentValue.color.a, wasSetByCode: true, type: 'change'};
                                     }
-                                    this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
+                                    if(currentValue.color.mode)
+                                    {
+                                        this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
+                                    }
+                                    else
+                                    {
+                                        this.application.ninja.colorController.colorModel["rgb"] = currentValue.color;
+                                    }
                                 }
                             }
                             else
diff --git a/js/panels/properties/properties-panel.js b/js/panels/properties/properties-panel.js
index 31bc4919..31bc4919 100644..100755
--- a/js/panels/properties/properties-panel.js
+++ b/js/panels/properties/properties-panel.js
diff --git a/js/panels/properties/section.reel/section.html b/js/panels/properties/section.reel/section.html
index 8a331119..8a331119 100644..100755
--- a/js/panels/properties/section.reel/section.html
+++ b/js/panels/properties/section.reel/section.html
diff --git a/js/panels/properties/section.reel/section.js b/js/panels/properties/section.reel/section.js
index b246c171..b246c171 100644..100755
--- a/js/panels/properties/section.reel/section.js
+++ b/js/panels/properties/section.reel/section.js
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", '');