5 files changed, 241 insertions, 2313 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 7fd5d918..6071f3c6 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -52,6 +52,11 @@ exports.GradientPicker = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    _trackData: {
+            value: {width: 0, x: 0, y: 0}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     prepareForDraw: {
         value: function() {
                 //
@@ -62,7 +67,7 @@ exports.GradientPicker = Montage.create(Component, {
     willDraw: {
         value: function() {
                 //Getting component views from layout
-                this.element._trackWidth = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText);
+                this._trackData.width = parseInt(getComputedStyle(this.trackChips).getPropertyCSSValue('width').cssText);
                 //TODO: Fix events and remove this hack
                 this.trackCover.addEventListener('mouseover', function () {
                                 if (!this._updating) {                  
@@ -83,13 +88,13 @@ exports.GradientPicker = Montage.create(Component, {
     //
     draw: {
         value: function() {
-                //
+                //Checking for mode to assign radio value
                 if (this.mode === 'linear') {
                         this.radioLinear.checked = 'true';
                 } else if (this.mode === 'radial') {
                         this.radioRadial.checked = 'true';
                 }
-                //
+                //Checkign for value to initialize stops
                 if (!this.value) {
                         this.addDefaultStops();
                         } else {
@@ -104,35 +109,17 @@ exports.GradientPicker = Montage.create(Component, {
     //
         didDraw: {
         value: function() {
-                        //
+                        //Adding event listener for stops
                         this.trackMain.addEventListener('click', this, false);
-                
-                
-                
-                
-                
-                ////////////////////////////////////////////////////////////
-                        ////////////////////////////////////////////////////////////
-                        //TODO: Determing a better way to get screen position
-                        var element = this.trackMain;
-                this.element._trackX = 0, this.element._trackY = 0;
-                //
-                        while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
-                        this.element._trackX += element.offsetLeft - element.scrollLeft;
-                        this.element._trackY += element.offsetTop - element.scrollTop;
-                        element = element.parentNode;
-                }
-                ////////////////////////////////////////////////////////////
-                ////////////////////////////////////////////////////////////
-                
-                //This is forever changing, not sure why
-                //console.log(this.element._trackX, this.element._trackY);
-                
-                
+                //Getting position of track
+                var point = webkitConvertPointFromNodeToPage(this.trackMain, new WebKitPoint(0, 0));
+                //Setting position of track to calculate movement
+                this._trackData.x = point.x;
+                this._trackData.y = point.y;    
         }
     },
     ////////////////////////////////////////////////////////////////////
-    //
+    //Default stops funtion (reset)
     addDefaultStops: {
         value: function() {
                 this.addStop({color: {mode: 'rgb', value: {r: 255, g: 255, b: 255, a: 1, css: 'rgb(255, 255, 255)'}}, percent: 0}, true);
@@ -223,24 +210,10 @@ exports.GradientPicker = Montage.create(Component, {
                         } else if (percent>100) {
                                 percent = 100;
                         }
-                        
-                        
-                        
-                        
-                        ////////////////////////////////////////////////////////////
-                        ////////////////////////////////////////////////////////////
-                        //TODO: toggling visibility because of a browser bug
-                        stop.style.visibility = 'hidden'; //TODO: To be removed
-                        var adj = (parseInt(getComputedStyle(stop).getPropertyCSSValue('width').cssText)*percent/100)/this.element._trackWidth;
+                        //
+                        var adj = (parseInt(getComputedStyle(stop).getPropertyCSSValue('width').cssText)*percent/100)/this._trackData.width;
                         stop.style.left = Math.round(percent-Math.round(adj*100))+'%';
                         stop.button.stopPosition = percent;
-                        stop.style.visibility = 'visible'; //TODO: To be removed
-                        ////////////////////////////////////////////////////////////
-                        ////////////////////////////////////////////////////////////
-                        
-                        
-                        
-                        
                 } catch (e) {
                         //TEMP
                 }
@@ -292,15 +265,15 @@ exports.GradientPicker = Montage.create(Component, {
                 //
                 this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
                 //
-                if ((e._event.y+this.hack.y) > this.element._trackY+70 || (e._event.y+this.hack.y) < this.element._trackY) {
+                if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) {
                         this.removeStop(this.currentStop);
                 }
                 //
-                if (this.currentStop.button.stopPosition !== Math.round(((e._event.x+this.hack.x)-(this.element._trackX-23))/this.element._trackWidth*100)) {
+                if (this.currentStop.button.stopPosition !== Math.round((e._event.x-this._trackData.x)/this._trackData.width*100)) {
                         this.trackCover.style.display = 'block';
                 }
                 //
-                this.positionStop(this.currentStop, Math.round(((e._event.x+this.hack.x)-(this.element._trackX-23))/this.element._trackWidth*100));
+                this.positionStop(this.currentStop, Math.round((e._event.x-this._trackData.x)/this._trackData.width*100));
         }
     },
     ////////////////////////////////////////////////////////////////////
diff --git a/js/helper-classes/3D/StageLine.js b/js/helper-classes/3D/StageLine.js
index b86673d1..23e8cf5b 100755
--- a/js/helper-classes/3D/StageLine.js
+++ b/js/helper-classes/3D/StageLine.js
@@ -184,138 +184,183 @@ var StageLine = exports.StageLine = Object.create(Object.prototype, {
     },
 
         doCoplanarIntersection: {
-        value: function( plane )
-        {
-            // get the boundary points for the plane
-            var boundaryPts = plane.getBoundaryPoints();
-            var planeEq = plane.getPlaneEq();
-
-            if (plane.isBackFacing())
-            {
-                var tmp;
-                tmp = boundaryPts[0];  boundaryPts[0] = boundaryPts[3];  boundaryPts[3] = tmp;
-                tmp = boundaryPts[1];  boundaryPts[1] = boundaryPts[2];  boundaryPts[2] = tmp;
-            }
-
-            var pt0 = this.getPoint0(),
-                    pt1 = this.getPoint1();
-
-            // keep a couple flags to prevent counting crossings twice in edge cases
-            var gotEnter = false,
-                    gotExit = false;
-
-            var bp1 = boundaryPts[3];
-            for (var i=0;  i<4;  i++)
-            {
-                var bp0 = bp1;
-                bp1 = boundaryPts[i];
-                var vec = vecUtils.vecSubtract(3, bp1, bp0);
-                var nrm = vecUtils.vecCross(3, vec, planeEq);
-                nrm[3] = -vecUtils.vecDot(3, bp0, nrm);
-
-                var d0 = vecUtils.vecDot(3, nrm, pt0) + nrm[3],
-                        d1 = vecUtils.vecDot(3, nrm, pt1) + nrm[3];
-
+                value: function( plane )
+                {
+                        // get the boundary points for the plane
+                        var boundaryPts = plane.getBoundaryPoints();
+                        var planeEq = plane.getPlaneEq();
+
+                        if (plane.isBackFacing())
+                        {
+                                var tmp;
+                                tmp = boundaryPts[0];  boundaryPts[0] = boundaryPts[3];  boundaryPts[3] = tmp;
+                                tmp = boundaryPts[1];  boundaryPts[1] = boundaryPts[2];  boundaryPts[2] = tmp;
+                        }
+
+                        var pt0 = this.getPoint0(),
+                                pt1 = this.getPoint1();
+
+                        // keep a couple flags to prevent counting crossings twice in edge cases
+                        var gotEnter = false,
+                                        gotExit = false;
+
+                        var bp1 = boundaryPts[3];
+                        for (var i=0;  i<4;  i++)
+                        {
+                                var bp0 = bp1;
+                                bp1 = boundaryPts[i];
+                                var vec = vecUtils.vecSubtract(3, bp1, bp0);
+                                var nrm = vecUtils.vecCross(3, vec, planeEq);
+                                nrm[3] = -vecUtils.vecDot(3, bp0, nrm);
+
+                                var d0 = vecUtils.vecDot(3, nrm, pt0) + nrm[3],
+                                                d1 = vecUtils.vecDot(3, nrm, pt1) + nrm[3];
+