Cleaning up references

Still need to do more cleaning up.

2 files changed, 77 insertions, 69 deletions

diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index 5ad5c615..596580b4 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -21,7 +21,18 @@
                     "images": {"#": "cntnr_images"},
                     "gradients": {"#": "cntnr_gradients"},
                     "palettes": {"#": "cntnr_palettes"},
-                    "alpha": {"#": "cntnr_alpha"}
+                    "alpha": {"#": "cntnr_alpha"},
+                    "alphaSlider": {"#": "alpha_slider"},
+                    "alphaHottext": {"#": "alpha_hottext"},
+                    "btnPrevious": {"#": "btn_previous"},
+                    "btnCurrent": {"#": "btn_current"},
+                    "btnWheel": {"#": "btn_wheel"},
+                    "btnImage": {"#": "btn_images"},
+                    "btnGradient": {"#": "btn_gradients"},
+                    "btnPalette": {"#": "btn_palettes"},
+                    "btnNocolor": {"#": "btn_nocolor"},
+                    "inputHex": {"#": "input_hex"}
+                    
                 }
             }
         }
@@ -36,18 +47,18 @@
                         
                         <div class="cp_pu_history">
                                 
-                                <button class="cp_pu_color_previous">Previous Color</button>
-                                <button class="cp_pu_color_current">Current Color</button>
+                                <button data-montage-id="btn_previous" class="cp_pu_color_previous">Previous Color</button>
+                                <button data-montage-id="btn_current" class="cp_pu_color_current">Current Color</button>
                                 
                                 </div>
                         
-                        <div class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
+                        <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
                         
-                        <button class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
-                        <button class="cp_pu_images" title="Background Image">Images</button>
-                        <button class="cp_pu_gradients" title="Gradient">Gradients</button>
-                        <button class="cp_pu_palettes" title="Color Palette">Palettes</button>
-                        <button class="cp_pu_nocolor" title="No Color">No Color</button>
+                        <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
+                        <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
+                        <button data-montage-id="btn_gradients" class="cp_pu_gradients" title="Gradient">Gradients</button>
+                        <button data-montage-id="btn_palettes" class="cp_pu_palettes" title="Color Palette">Palettes</button>
+                        <button data-montage-id="btn_nocolor" class="cp_pu_nocolor" title="No Color">No Color</button>
                         
                 </div>
                 
@@ -60,8 +71,8 @@
                 
                 <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"/>
+                        <div data-montage-id="alpha_slider" class="cp_pu_a_slider"></div>
+                        <input data-montage-id="alpha_hottext" class="cp_pu_a_hottext"/>
                         <div class="cp_pu_a_label2">%</div>
                 </div>
                 
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index aebbbd41..4161cb50 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -23,19 +23,13 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
-        value: false
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Color manager
     colorManager: {
-        get: function() {
-            return this._colorManager;
-        },
-        set: function(value) {
-                if (value !== this._colorManager) {
-                        this._colorManager = value;
-                }
-        }
+        get: function() {return this._colorManager;},
+        set: function(value) {if (value !== this._colorManager) this._colorManager = value;}
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color panel
@@ -45,18 +39,19 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Color panel
     colorPanel: {
-        get: function() {
-            return this._colorPanel;
-        },
-        set: function(value) {
-                this._colorPanel = value;
-        }
+        get: function() {return this._colorPanel;},
+        set: function(value) {this._colorPanel = value;}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _components: {
+                value: null  
     },
     ////////////////////////////////////////////////////////////////////
     //
     setNoColor: {
         value: function (e) {
-                this.colorManager.applyNoColor();
+                if (this.colorManager) this.colorManager.applyNoColor();
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -64,7 +59,8 @@ exports.ColorPanelPopup = Montage.create(Component, {
     prepareForDraw: {
         value: function () {
                 //
-                this.element._components = {wheel: null, combo: null};
+                this._components = null;
+                this._components = {wheel: null, combo: null};
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -74,14 +70,14 @@ exports.ColorPanelPopup = Montage.create(Component, {
                 //
                 this.element.style.opacity = 0;
                 //
-                this.element._components.combo = {};
-                this.element._components.combo.slider = Slider.create();
-                        this.element._components.combo.hottext = HotText.create();
-                this.element._components.combo.slider.element = this.element.getElementsByClassName('cp_pu_a_slider')[0];
-                        this.element._components.combo.hottext.element = this.element.getElementsByClassName('cp_pu_a_hottext')[0];
+                this._components.combo = {};
+                this._components.combo.slider = Slider.create();
+                        this._components.combo.hottext = HotText.create();
+                this._components.combo.slider.element = this.alphaSlider;
+                        this._components.combo.hottext.element = this.alphaHottext;
                 //
-                Object.defineBinding(this.element._components.combo.hottext, "_value", {
-                                boundObject: this.element._components.combo.slider,
+                Object.defineBinding(this._components.combo.hottext, "_value", {
+                                boundObject: this._components.combo.slider,
                     boundObjectPropertyPath: "value",
                     oneway: false,
                 boundValueMutator: function(value) {
@@ -89,8 +85,8 @@ exports.ColorPanelPopup = Montage.create(Component, {
                 }
                         });
                         //
-                        Object.defineBinding(this.element._components.combo.hottext, "value", {
-                                boundObject: this.element._components.combo.slider,
+                        Object.defineBinding(this._components.combo.hottext, "value", {
+                                boundObject: this._components.combo.slider,
                     boundObjectPropertyPath: "value",
                     oneway: false,
                 boundValueMutator: function(value) {
@@ -98,7 +94,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
                 }
                         });
                         if (this.application.ninja.colorController.colorView) {
-                        Object.defineBinding(this.element._components.combo.slider, "value", {
+                        Object.defineBinding(this._components.combo.slider, "value", {
                                 boundObject: this.application.ninja.colorController.colorView._combo[3].slider,
                             boundObjectPropertyPath: "value",
                             oneway: false,
@@ -108,25 +104,26 @@ exports.ColorPanelPopup = Montage.create(Component, {
                         });
                 }
                 //
-                this.element._components.combo.slider.maxValue = this.element._components.combo.hottext.maxValue = 100;
+                this._components.combo.slider.maxValue = this._components.combo.hottext.maxValue = 100;
+                //
                 if (this.application.ninja.colorController.colorView) {
-                        this.element._components.combo.slider.customBackground = this.application.ninja.colorController.colorView._slider3Background.bind(this.application.ninja.colorController.colorView);
+                        this._components.combo.slider.customBackground = this.application.ninja.colorControll