56 files changed, 4530 insertions, 1815 deletions

diff --git a/.gitignore b/.gitignore
index 42e99c16..10388811 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cl
 scss/.sass-cache/
 js/helper-classes/RDGE/src/tools/compiler.jar
 js/panels/Timeline/TimelinePanel.reel/scss/compass_app_log.txt
+
+.sass-cachejs/panels/Timeline/Span.reel/scss/compass_app_log.txt
diff --git a/css/ninja.css b/css/ninja.css
index 4d2de3ee..d98aa513 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -677,7 +677,9 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
 
 .toolOptionsSpacer { margin-right: 9px; }
 
-.toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; }
+.toolColorChipCtrl { width: 16px; height: 16px; border: 1px #000 solid; }
+
+.toolColorChipContainer { background: url(../../../../../images/colorpanel/transparent.png) repeat; width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px #777 solid; }
 
 .toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; }
 
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;
                         }
-                        
+                        //