5 files changed, 444 insertions, 198 deletions

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index 6071f3c6..9acd24ac 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'),
@@ -160,7 +160,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: true, 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 +263,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/controllers/color-controller.js b/js/controllers/color-controller.js
index 3165988d..2a6fe9bd 100755
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -254,7 +254,12 @@ exports.ColorController = Montage.create(Component, {
                                 gradient.css = css;
                                 //
                                 arr = css.split('from(');
-                                arr = arr[1].split('),');
+                                //
+                                if (arr.length > 1) {
+                                        arr = arr[1].split('),');
+                                } else {
+                                        arr = (css.split(css.split('color-stop(')[0])[1]).split('),');
+                                }
                                 //
                                 for (i=0; arr[i]; i++) {
                                         arr[i] = arr[i].replace(/ color-stop\(/i, "");
@@ -264,14 +269,20 @@ exports.ColorController = Montage.create(Component, {
                                                 arr[i] = arr[i].replace(/\)\)/i, "");
                                         }
                                         //
-                                        if (i === 0) {
+                                        if (i === 0 && arr[i].indexOf('color-stop') === -1) {
                                                 arr[i] = {css: arr[i], percent: 0};
                                         } else if (i === arr.length-1) {
-                                                arr[i] = {css: arr[i], percent: 100};
+                                                temp = arr[i].split(', rgb');
+                                                if (temp.length > 1) {
+                                                        arr[i] = {css: 'rgb'+temp[1].replace(/\)\)/i, ""), percent: Math.round(parseFloat(temp[0])*100)};
+                                                } else {
+                                                        arr[i] = {css: arr[i], percent: 100};
+                                                }
                                         } else {
                                                 //
                                                 if (arr[i].indexOf('rgb') >= 0 && arr[i].indexOf('rgba') < 0) {
                                                         temp = arr[i].split(', rgb');
+                                                        temp[0] = temp[0].replace(/color\-stop\(/gi, '');
                                                         arr[i] = {css: 'rgb'+temp[1], percent: Math.round(parseFloat(temp[0])*100)};
                                                 } else if (arr[i].indexOf('rgba') >= 0) {
                                                 temp = arr[i].split(', rgba');
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index 596580b4..d3b6fed7 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -52,7 +52,7 @@
                                 
                                 </div>
                         
-                        <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
+                        <div class="cp_pu_hex">#<input data-montage-id="input_hex" class="cp_pu_hottext_hex" maxlength="6" /></div>
                         
                         <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
                         <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index 192c62fb..179dc02c 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -60,7 +60,7 @@ exports.ColorPanelPopup = Montage.create(Component, {
         value: function () {
                 //
                 this._components = null;
-                this._components = {wheel: null, combo: null};
+                this._components = {wheel: null, combo: null, gradient: null};
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -129,44 +129,73 @@ exports.ColorPanelPopup = Montage.create(Component, {
     draw: {
         value: function() {
                 //
-                this.drawPalette(this.defaultPalette);
+                if (!this.props || (this.props && this.props.palette)) {
+                        //
+                        this.btnPalette.addEventListener('click', function () {
+                                        this.popupSwitchInputTo(this.palettes);
+                                }.bind(this), true);
+                        //
+                        this.drawPalette(this.defaultPalette);
+                } else {
+                        this.btnPalette.style.display = 'none';
+                }
                 //
-                if (!this.colorManager.gradient) {
-                        this.drawGradient(this.defaultGradient);
+                if (!this.props || (this.props && this.props.gradient)) {
+                        //
+                        this.btnGradient.addEventListener('click', function () {
+                                        this.popupSwitchInputTo(this.gradients);
+                                }.bind(this), true);
+                        //
+                        if (!this.colorManager.gradient) {
+                                this.drawGradient(this.defaultGradient);
+                        }
+                } else {
+                        this.btnGradient.style.display = 'none';
                 }
                 //
-                this.application.ninja.colorController.colorView.addButton('hexinput', this.element.getElementsByClassName('cp_pu_hottext_hex')[0]);
+                this.application.ninja.colorController.colorView.addButton('hexinput', this.inputHex);
                 //
                 this._components.combo.slider.needsDraw = true;
                 this._components.combo.hottext.needsDraw = true;
-                        //
-                        this.element.getElementsByClassName('cp_pu_nocolor')[0].addEventListener('click', function () {
-                                this.setNoColor();
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_palettes')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.palettes);
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_wheel')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.wheel);
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_gradients')[0].addEventListener('click', function () {
-                                this.popupSwitchInputTo(this.gradients);
-                }.bind(this), true);
-                //
-                this.element.getElementsByClassName('cp_pu_images')[0].style.opacity = .2;//TODO: Remove, visual feedback for disable button
-                this.element.getElementsByClassName('cp_pu_images')[0].addEventListener('click', function () {
-                                //this.popupSwitchInputTo(this.images);
-                }.bind(this), true);
+                //
+                if (!this.props || (this.props && this.props.nocolor)) {
+                                //
+                                this.btnNocolor.addEventListener('click', function () {
+                                        this.setNoColor();
+                                }.bind(this), true);
+                } else {
+                        this.btnNocolor.style.display = 'none';
+                }
                 //
-                this.application.ninja.colorController.colorView.addButton('current', this.element.getElementsByClassName('cp_pu_color_current')[0]);
+                if (!this.props || (this.props && this.props.wheel)) {