42 files changed, 769 insertions, 1825 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6071f3c6..f912eb51 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -43,7 +43,7 @@ exports.GradientPicker = Montage.create(Component, {
         get: function() {return this._mode;},
         set: function(value) {
                 //
-                this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
                 //
             this._mode = value;
             //
@@ -132,7 +132,7 @@ exports.GradientPicker = Montage.create(Component, {
         value: function(data, silent) {
                 if (this.application.ninja.colorController.colorPopupManager) {
                         //Hiding any open popups (of gradient buttons)
-                        this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                        this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
                         //Creating stop elements
                         var stop = document.createElement('div'),
                                 holder = document.createElement('div'),
@@ -147,6 +147,7 @@ exports.GradientPicker = Montage.create(Component, {
                                 stop.addEventListener('mouseup', this, false);
                                 //Storing refereces to buttons and actual stop container
                                 button.stop = stop;
+                                tooltip.stop = stop;
                                 stop.button = button;
                                 //Adding stop to container
                                 this.trackChips.appendChild(stop);
@@ -160,7 +161,7 @@ exports.GradientPicker = Montage.create(Component, {
                                 //Initialing button with color data
                                 button.color(data.color.mode, data.color.value);
                                 //Button popup data
-                                button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: true, gradient: false, image: false, offset: -84, panel: true};
+                                button.props = {side: 'top', align: 'center', nocolor: false, wheel: true, palette: false, gradient: false, image: false, offset: -84, gradientPopup: true, history: false};
                                 //Listening for color events from button
                                 button.addEventListener('change', this, false);
                                 //Dispatching event depending on type of mode
@@ -263,7 +264,7 @@ exports.GradientPicker = Montage.create(Component, {
                 //
                 this._updating = true;
                 //
-                this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
+                this.application.ninja.colorController.colorPopupManager.hideGradientChipPopup();
                 //
                 if (e._event.y > this._trackData.y+70 || e._event.y < this._trackData.y) {
                         this.removeStop(this.currentStop);
diff --git a/js/components/layout/stage-mode.reel/stage-mode.js b/js/components/layout/stage-mode.reel/stage-mode.js
index cb42276b..b772d688 100755
--- a/js/components/layout/stage-mode.reel/stage-mode.js
+++ b/js/components/layout/stage-mode.reel/stage-mode.js
@@ -9,17 +9,17 @@ var Montage = require("montage/core/core").Montage,
 
 exports.StageMode = Montage.create(Component, {
 
-    _livePreview: {
+    _chromePreview: {
         value: null
     },
 
-    livePreview: {
+    chromePreview: {
         get: function() {
-            return this._livePreview;
+            return this._chromePreview;
         },
         set: function(value) {
-            if(value !== this._livePreview) {
-                this._livePreview = value;
+            if(value !== this._chromePreview) {
+                this._chromePreview = value;
                 this.needsDraw = true;
             }
         }
@@ -46,7 +46,7 @@ exports.StageMode = Montage.create(Component, {
 
     handleClick: {
         value: function(event) {
-            this.livePreview = !this.livePreview;
+            this.chromePreview = !this.chromePreview;
         }
     }
 });
\ No newline at end of file
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js
index 1af128af..d1f97260 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -74,7 +74,7 @@ var BrushProperties = exports.BrushProperties = Montage.create(ToolProperties, {
             Object.getPrototypeOf(BrushProperties).draw.call(this);
 
             if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
-                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this._fillColorCtrl.props = {side: 'top', align: 'left', wheel: true, palette: true, gradient: true, image: false, nocolor: true, offset: 8};
                 this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
 
                 this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.js b/js/components/tools-properties/fill-properties.reel/fill-properties.js
index ef1699af..11dec294 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.js
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.js
@@ -60,7 +60,7 @@ var FillProperties = exports.FillProperties = Montage.create(ToolProperties, {
             Object.getPrototypeOf(FillProperties).draw.call(this);
 
             if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
-                this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                this._fillColorCtrl.props = {side: 'top', align: 'left', wheel: true, palette: true, gradient: true, image: false, nocolor: true, offset: 8};
                 this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
 
                 this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
index 25823d11..9ae7c5bc 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.js
@@ -100,7 +100,7 @@ var InkBottleProperties = exports.InkBottleProperties = Montage.create(ToolPrope
 
             if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {