5 files changed, 66 insertions, 1 deletions

diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index ed1ac27a..7a7411da 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -92,6 +92,21 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
                 this.changeDelegate(evt);
             }
         }
+    },
+
+    destroy: {
+        value: function() {
+            this.application.ninja.colorController.removeButton(this.mode, this.chipBtn);
+            var mode = this.mode;
+            if(this.iconType) {
+                if(this.iconType === "fillIcon") {
+                    mode = "fill";
+                } else if(this.iconType === "strokeIcon") {
+                    mode = "stroke";
+                }
+            }
+            this.application.ninja.colorController.removeButton(mode, this.icon);
+        }
     }
 
 });
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index cc9ec96a..72c02ffd 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -172,6 +172,17 @@ exports.Content = Montage.create(Component, {
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width"));
 
             if(this.customPi !== stage.elementModel.pi) {
+                // We need to unregister color chips from the previous selection from the Color Model
+                var len = this.customSections.length;
+                for(var n = 0, controls; n < len; n++) {
+                    controls = this.customSections[n].content.controls;
+                    if(controls["colorSelect"]) {
+                        controls["colorSelect"].destroy();
+                    } else if(controls["stageBackground"]) {
+                        controls["stageBackground"].destroy();
+                    }
+                }
+
                 this.customPi = stage.elementModel.pi;
                 this.displayCustomProperties(stage, stage.elementModel.pi);
             }
@@ -237,6 +248,17 @@ exports.Content = Montage.create(Component, {
 
             // Custom Section
             if(this.customPi !== el.elementModel.pi) {
+                // We need to unregister color chips from the previous selection from the Color Model
+                var len = this.customSections.length;
+                for(var n = 0, controls; n < len; n++) {
+                    controls = this.customSections[n].content.controls;
+                    if(controls["colorSelect"]) {
+                        controls["colorSelect"].destroy();
+                    } else if(controls["stageBackground"]) {
+                        controls["stageBackground"].destroy();
+                    }
+                }
+
                 this.customPi = el.elementModel.pi;
                 this.displayCustomProperties(el, el.elementModel.pi);
             }
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..96cc4de7 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
@@ -14,7 +14,9 @@
             "properties" : {
                 "element" : {"#": "section"},
                 "Stroke" : {"#": "Stroke"},
-                "Fill" : {"#": "Fill"}
+                "Fill" : {"#": "Fill"},
+                "strokeChip" : {"@": "colorChip"},
+                "fillChip" : {"@": "colorChip2"}
             }
         },
 
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..3e81ff67 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
@@ -17,6 +17,14 @@ exports.ColorSelect = Montage.create(Component, {
         value: null
     },
 
+    strokeChip: {
+        value: null
+    },
+
+    fillChip: {
+        value: null
+    },
+
     handleChange: {
         value: function(e) {
 
@@ -57,6 +65,19 @@ exports.ColorSelect = Montage.create(Component, {
 //            }
 
         }
+    },
+
+    destroy: {
+        value: function() {
+            if(this.strokeChip)
+            {
+                this.strokeChip.destroy();
+            }
+            if(this.fillChip)
+            {
+                this.fillChip.destroy();
+            }
+        }
     }
 
 });
\ No newline at end of file
diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js
index a2b9b9fa..a537d323 100755
--- a/js/panels/properties/sections/custom.reel/custom.js
+++ b/js/panels/properties/sections/custom.reel/custom.js
@@ -59,6 +59,8 @@ exports.CustomSection = Montage.create(Component, {
                         if(obj1.visible === false) tmpRow.colorVisible = obj1.visible;
                         if(obj2.visible === false) tmpRow.color2Visible = obj2.visible;
 
+                        // TODO - Hack for now to reference the color select object to unregister color chips
+                        this.controls["colorSelect"] = tmpRow;
                     }
                     else
                     {
@@ -344,6 +346,9 @@ exports.CustomSection = Montage.create(Component, {
 
             this.controls[aField.id] = obj;
 
+            // TODO - Hack for now to reference the color select object to unregister color chips
+            this.controls["stageBackground"] = obj;
+
             return obj;
         }
     }