3 files changed, 38 insertions, 0 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..53926c78 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.initialColor = 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)'});
         }
     },