1 files changed, 70 insertions, 102 deletions

diff --git a/js/components/colorwheel.reel/colorwheel.js b/js/components/colorwheel.reel/colorwheel.js
index 343422e2..0980253c 100755
--- a/js/components/colorwheel.reel/colorwheel.js
+++ b/js/components/colorwheel.reel/colorwheel.js
@@ -14,19 +14,16 @@ exports.ColorWheel = Montage.create(Component, {
         ////////////////////////////////////////////////////////////////////
         //
         hasTemplate: {
-                enumerable: false,
         value: true
     },
     ////////////////////////////////////////////////////////////////////
     //Value of wheel in HSV (360, 100, 100)
     _value: {
-        enumerable: false,
         value: {h: 0, s: 0, v: 0}
     },
         ////////////////////////////////////////////////////////////////////
     //Value of wheel in HSV (360, 100, 100)
     value: {
-        enumerable: false,
         get: function() {
             return this._value;
         },
@@ -34,8 +31,8 @@ exports.ColorWheel = Montage.create(Component, {
             this._value = value;
             if (this._wheelData) {
                 if (value && !value.wasSetByCode) {
-                        this.wheelSelectorAngle(value.h/this.element._component.math.TAU*360);
-                                        this.drawSwatchColor(value.h/this.element._component.math.TAU*360);
+                        this.wheelSelectorAngle(value.h/this._math.TAU*360);
+                                        this.drawSwatchColor(value.h/this._math.TAU*360);
                                         this.drawSwatchSelector(value.s*100, value.v*100);
                 }
                                 if (!this._isMouseDown) {
@@ -47,14 +44,12 @@ exports.ColorWheel = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Stroke size of wheel
     _strokeWidth: {
-        enumerable: false,
         value: 2
     },
     ////////////////////////////////////////////////////////////////////
     //Size must be set in digits and interpreted as pixel
     strokeWidth: {
-        enumerable: false,
-         get: function() {
+        get: function() {
             return this._strokeWidth;
         },
         set: function(value) {
@@ -64,14 +59,12 @@ exports.ColorWheel = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Stroke color of wheel
     _strokeColor: {
-        enumerable: false,
         value: 'rgb(255, 255, 255)'
     },
     ////////////////////////////////////////////////////////////////////
     //Stroke only apply to wheel rim
     strokeColor: {
-        enumerable: false,
-         get: function() {
+        get: function() {
             return this._strokeColor;
         },
         set: function(value) {
@@ -81,14 +74,12 @@ exports.ColorWheel = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Width of the rim
     _rimWidth: {
-        enumerable: false,
         value: 2
     },
     ////////////////////////////////////////////////////////////////////
     //Width must be set using digits interpreted as pixel
     rimWidth: {
-        enumerable: false,
-         get: function() {
+        get: function() {
             return this._rimWidth;
         },
         set: function(value) {
@@ -97,75 +88,57 @@ exports.ColorWheel = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    _math: {
+            value: {PI: Math.PI, TAU: Math.PI*2, RADIANS: Math.PI/180}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     prepareForDraw: {
-        enumerable: false,
         value: function() {
-                //
-                this.element._component = {wheel: {}, swatch: {}, wheel_select: {}, swatch_select: {}, math: {}};
-                //
-                this.element._component.math.PI = Math.PI,
-                this.element._component.math.TAU = Math.PI*2,
-                this.element._component.math.RADIANS = Math.PI/180;
+                //Hidding component while it is drawn
+                this.element.style.opacity = 0;
                 }
     },
     ////////////////////////////////////////////////////////////////////
     //
     willDraw: {
-        enumerable: false,
         value: function() {
                 //
-                this.element.style.opacity = 0;
-                //
-                var cnvs = this.element.getElementsByTagName('canvas');
-                //
-                this.element._component.wheel.canvas = cnvs[0];
-                this.element._component.swatch.canvas = cnvs[1];
-                this.element._component.wheel_select.canvas = cnvs[3];
-                this.element._component.swatch_select.canvas = cnvs[2];
-                //
-                this.element._component.wheel.context = this.element._component.wheel.canvas.getContext("2d");
-                this.element._component.swatch.context = this.element._component.swatch.canvas.getContext("2d");
-                this.element._component.wheel_select.context = this.element._component.wheel_select.canvas.getContext("2d");
-                this.element._component.swatch_select.context = this.element._component.swatch_select.canvas.getContext("2d");
                 }
     },
     ////////////////////////////////////////////////////////////////////
     //
     draw: {
-        enumerable: false,
         value: function() {
                 //
-                var slice, i, whlctx = this.element._component.wheel.context, math = this.element._component.math,
-                        whlcvs = this.element._component.wheel.canvas, swhcvs = this.element._component.swatch.canvas,
-                        wslcvs = this.element._component.wheel_select.canvas, swscvs = this.element._component.swatch_select.canvas;
+                var slice, i, whlctx = this.wheel.getContext("2d");
                 //Determing radius by smallest factor of width or height
                 if (this.element.offsetWidth > this.element.offsetHeight) {
-                        math.diameter = this.element.offsetWidth;
+                        this._math.diameter = this.element.offsetWidth;
                 } else {
-                        math.diameter = this.element.offsetHeight;
+                        this._math.diameter = this.element.offsetHeight;
                 }
                 //Setting the radius from diameter
-                math.radius = math.diameter/2;
+                this._math.radius = this._math.diameter/2;
                 //Inner radius of wheel
-                math.innerRadius = math.radius - this.rimWidth;
+                this._math.innerRadius = this._math.radius - this.rimWidth;
                 //Setting the widths and heights to match the container's
-                whlcvs.width = whlcvs.height = wslcvs.width = wslcvs.height = swscvs.width = swscvs.height = math.diameter;
+                this.wheel.width = this.wheel.height = this.wheelSelect.width = this.wheelSelect.height = this.swatchSelect.width = this.swatchSelect.height = this._math.diameter;
                 //
-                math.swatchLength = Math.floor((math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * math.RADIANS) * 2);
-                math.swatchPosition = Math.round(math.radius - (math.swatchLength/2))+this.strokeWidth* Math.sin(45 * math.RADIANS);
+                this._math.swatchLength = Math.floor((this._math.radius - this.rimWidth - this.strokeWidth*4) * Math.sin(45 * this._math.RADIANS) * 2);
+                this._math.swatchPosition = Math.round(this._math.radius - (this._math.swatchLength/2))+this.strokeWidth* Math.sin(45 * this._math.RADIANS);
                 //
-                //swhcvs.width = swhcvs.height = math.swatchLength; //TODO: Figure out why this breaks on WINDOWS ONLY
-                swhcvs.style.top = swhcvs.style.left = math.swatchPosition+'px';
+                this.swatch.style.top = this.swatch.style.left = this._math.swatchPosition+'px';
                 //Clearing wheel for redraw
-                        whlctx.clearRect(0, 0, math.diameter, math.diameter);
+                        whlctx.clearRect(0, 0, this._math.diameter, this._math.diameter);
                         ////////////////////////////////////////////////////////////////
                         //Drawing color wheel circle
                         whlctx.save();
                         whlctx.beginPath();
                         whlctx.moveTo(0,0);
-                        whlctx.lineTo(math.diameter,0);
-                        whlctx.lineTo(math.diameter,math.diameter);
-                        whlctx.lineTo(0,math.diameter);
+                        whlctx.lineTo(this._math.diameter,0);
+                        whlctx.lineTo(this._math.diameter,this._math.diameter);
+                        whlctx.lineTo(0,this._math.diameter);
                         whlctx.closePath();
                         whlctx.clip();