2 files changed, 40 insertions, 62 deletions

diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index f65d5bc0..5ad5c615 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -16,7 +16,12 @@
             "owner": {
                 "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]",
                 "properties": {
-                    "element": {"#": "cpp_popup"}
+                    "element": {"#": "cpp_popup"},
+                    "wheel": {"#": "cntnr_wheel"},
+                    "images": {"#": "cntnr_images"},
+                    "gradients": {"#": "cntnr_gradients"},
+                    "palettes": {"#": "cntnr_palettes"},
+                    "alpha": {"#": "cntnr_alpha"}
                 }
             }
         }
@@ -47,13 +52,13 @@
                 </div>
                 
                 <div class="cp_pu_content">
-                        <div class="cp_pu_wheel_container cp_pu_content_container"></div>
-                        <div class="cp_pu_gradient_container cp_pu_content_container"></div>
-                        <div class="cp_pu_palette_container cp_pu_content_container"></div>
-                        <div class="cp_pu_image_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_wheel" class="cp_pu_wheel_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_gradients" class="cp_pu_gradient_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_palettes" class="cp_pu_palette_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_images" class="cp_pu_image_container cp_pu_content_container"></div>
                 </div>
                 
-                <div class="cp_pu_alpha">
+                <div data-montage-id="cntnr_alpha" class="cp_pu_alpha">
                         <div class="cp_pu_a_label">Alpha</div>
                         <div class="cp_pu_a_slider"></div>
                         <input class="cp_pu_a_hottext"/>
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index dd7e6192..aebbbd41 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -23,13 +23,11 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
-        enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //Color manager
     colorManager: {
-        enumerable: true,
         get: function() {
             return this._colorManager;
         },
@@ -42,13 +40,11 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Storing color panel
     _colorPanel: {
-        enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //Color panel
     colorPanel: {
-        enumerable: true,
         get: function() {
             return this._colorPanel;
         },
@@ -59,7 +55,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     setNoColor: {
-        enumerable: true,
         value: function (e) {
                 this.colorManager.applyNoColor();
         }
@@ -67,23 +62,14 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     prepareForDraw: {
-        enumerable: false,
         value: function () {
                 //
-                this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}};
                 this.element._components = {wheel: null, combo: null};
-                //Storing containers for reference
-                this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
-                this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
-                this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
-                this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
-                this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
     willDraw: {
-        enumerable: false,
         value: function() {
                 //
                 this.element.style.opacity = 0;
@@ -131,7 +117,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
                         this.element._components.combo.hottext.addEventListener('change', this.alphaChange.bind(this), true);
                         //
                         this.element._components.wheel = ColorWheel.create();
-                    this.element._components.wheel.element = this.element._popups.containers.wheel;
+                    this.element._components.wheel.element = this.wheel;
                 this.element._components.wheel.element.style.display = 'block';
                 this.element._components.wheel.rimWidth = 14;
                     this.element._components.wheel.strokeWidth = 2;
@@ -152,7 +138,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     draw: {
-        enumerable: false,
         value: function() {
                 //
                 this.drawPalette(this.defaultPalette);
@@ -171,20 +156,20 @@ exports.ColorPanelPopup = Montage.create(Component, {
                 }.bind(this), true);
                 //
                 this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.element._popups.containers.palette);
+                                this.popupSwitchInputTo(this.palettes);
                 }.bind(this), true);
                 //
                 this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.element._popups.containers.wheel);
+                                this.popupSwitchInputTo(this.wheel);
                 }.bind(this), true);
                 //
                 this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.element._popups.containers.gradient);
+                                this.popupSwitchInputTo(this.gradients);
                 }.bind(this), true);
                 //
                 this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button
                 this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () {
-                                //this.popupSwitchInputTo(this.element._popups.containers.image);
+                                //this.popupSwitchInputTo(this.images);
                 }.bind(this), true);
                 //
                 this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]);
@@ -198,7 +183,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     didDraw: {
-        enumerable: false,
         value: function() {
                 //
                 
@@ -207,7 +191,6 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Reworking logic, firstDraw bubbles up, so target must be checked
     handleFirstDraw: {
-        enumerable: false,
         value: function (e) {
                 //
                 if (this.element._components.wheel) {
@@ -217,16 +200,16 @@ exports.ColorPanelPopup = Montage.create(Component, {
                 //Switching to tab from previous selection