4 files changed, 52 insertions, 73 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.html b/js/components/gradientpicker.reel/gradientpicker.html
index b0e23653..4a1eaaf3 100755
--- a/js/components/gradientpicker.reel/gradientpicker.html
+++ b/js/components/gradientpicker.reel/gradientpicker.html
@@ -18,7 +18,12 @@
                 "owner": {
                         "prototype": "js/components/gradientpicker.reel[GradientPicker]",
                         "properties": {
-                        "element": {"#": "gradientpicker"}
+                        "element": {"#": "gradientpicker"},
+                        "radioLinear": {"#": "radio_linear"},
+                        "radioRadial": {"#": "radio_radial"},
+                        "trackCover": {"#": "cover"},
+                        "trackMain": {"#": "track"},
+                        "trackChips": {"#": "chips"}
 
                         }
                 }
@@ -32,14 +37,14 @@
         <div data-montage-id="gradientpicker" class="gradientpicker">
                 
                 <div class="type">
-                        <input type="radio" class="cp_gp_linear radio" name="gradient" value="linear" id="cp_gp_linear" checked="like a boss"/><label for="cp_gp_linear">Linear Gradient</label>
-                        <input type="radio" class="cp_gp_radial radio" name="gradient" value="radial" id="cp_gp_radial"/><label for="cp_gp_radial">Radial Gradient</label>
+                        <input data-montage-id="radio_linear" type="radio" class="cp_gp_linear radio" name="gradient" value="linear" id="cp_gp_linear" checked="like a boss"/><label for="cp_gp_linear">Linear Gradient</label>
+                        <input data-montage-id="radio_radial" type="radio" class="cp_gp_radial radio" name="gradient" value="radial" id="cp_gp_radial"/><label for="cp_gp_radial">Radial Gradient</label>
                 </div>
                 
                 <div class="cp_gp_slider">
-                        <div class="track_container"><div class="track"></div></div>
-                        <div class="cover"></div>
-                        <div class="chips"></div>
+                        <div class="track_container"><div data-montage-id="track" class="track"></div></div>
+                        <div data-montage-id="cover" class="cover"></div>
+                        <div data-montage-id="chips" class="chips"></div>
                 </div>
         
         </div>
diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index b10f6624..7fd5d918 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -6,54 +6,43 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 ////////////////////////////////////////////////////////////////////////
 //
-var Montage =                   require("montage/core/core").Montage,
-        Component =             require("montage/ui/component").Component;
+var Montage =   require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as ColorWheel
 exports.GradientPicker = Montage.create(Component, {
         ////////////////////////////////////////////////////////////////////
         //
         hasTemplate: {
-                enumerable: true,
         value: true
     },
     ////////////////////////////////////////////////////////////////////
     //
     _updating: {
-        enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //
     _value: {
-        enumerable: false,
         value: null
     },
         ////////////////////////////////////////////////////////////////////
     //
     value: {
-        enumerable: true,
-        get: function() {
-            return this._value;
-        },
-        set: function(value) {
-            this._value = value;
-        }
+        get: function() {return this._value;},
+        set: function(value) {this._value = value;}
     },
     ////////////////////////////////////////////////////////////////////
     //
     _mode: {
-        enumerable: false,
         value: 'linear'
     },
         ////////////////////////////////////////////////////////////////////
     //
     mode: {
-        enumerable: true,
-        get: function() {
-            return this._mode;
-        },
+        get: function() {return this._mode;},
         set: function(value) {
+                //
                 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
                 //
             this._mode = value;
@@ -64,7 +53,6 @@ exports.GradientPicker = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     prepareForDraw: {
-        enumerable: false,
         value: function() {
                 //
                 }
@@ -72,23 +60,21 @@ exports.GradientPicker = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     willDraw: {
-        enumerable: false,
         value: function() {
                 //Getting component views from layout
-                this.element._components = {trackCover: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('cover')[0], gradientTrack: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('track')[0], stopsContainer: this.element.getElementsByClassName('cp_gp_slider')[0].getElementsByClassName('chips')[0]};
-                this.element._trackWidth = parseInt(getComputedStyle(this.element._components.stopsContainer).getPropertyCSSValue('width').cssText);
+                this.element._trackWidth = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText);
                 //TODO: Fix events and remove this hack
-                this.element._components.trackCover.addEventListener('mouseover', function () {
+                this.trackCover.addEventListener('mouseover', function () {
                                 if (!this._updating) {                  
-                                this.element._components.trackCover.style.display = 'none';
+                                this.trackCover.style.display = 'none';
                         }
                 }.bind(this), true);
                 //
-                this.element.getElementsByClassName('cp_gp_linear')[0].addEventListener('change', function (e){
+                this.radioLinear.addEventListener('change', function (e){
                         this.mode = 'linear';
                 }.bind(this), true);
                 //
-                this.element.getElementsByClassName('cp_gp_radial')[0].addEventListener('change', function (e){
+                this.radioRadial.addEventListener('change', function (e){
                         this.mode = 'radial';
                 }.bind(this), true);    
                 }
@@ -96,22 +82,19 @@ exports.GradientPicker = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     draw: {
-        enumerable: false,
         value: function() {
                 //
                 if (this.mode === 'linear') {
-                        this.element.getElementsByClassName('cp_gp_linear')[0].checked = 'true';
+                        this.radioLinear.checked = 'true';
                 } else if (this.mode === 'radial') {
-                        this.element.getElementsByClassName('cp_gp_radial')[0].checked = 'true';
+                        this.radioRadial.checked = 'true';
                 }
                 //
                 if (!this.value) {
                         this.addDefaultStops();
                         } else {
-                                //Temp holder
-                                var stops = this.value;
                                 //Adding stops from preset value
-                                for (var i=0; stops[i]; i++) {
+                                for (var i=0, stops = this.value; stops[i]; i++) {
                                         this.addStop({color: {mode: stops[i].mode, value: stops[i].value}, percent:stops[i].position}, true);
                                 }
                         }
@@ -120,10 +103,9 @@ exports.GradientPicker = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
         didDraw: {