1 files changed, 349 insertions, 146 deletions

diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 4667f2b4..717e6fa2 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage =                   require("montage/core/core").Montage,
         Component =                     require("montage/ui/component").Component,
         ColorChipPopup =        require("js/panels/Color/colorchippopup.reel").ColorChipPopup,
-        ColorPanelPopup =       require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup;
+        ColorPanelPopup =       require("js/panels/Color/colorpanelpopup.reel").ColorPanelPopup,
+        ColorModel =        require("js/models/color-model").ColorModel;
 ////////////////////////////////////////////////////////////////////////
 //Exporting as ColorPopupManager
 exports.ColorPopupManager = Montage.create(Component, {
@@ -26,106 +27,125 @@ exports.ColorPopupManager = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     init: {
-        enumerable: false,
         value: function () {
                 ////////////////////////////////////////////////////////////
             //Closing popups on resize
             window.addEventListener('resize', function (e) {
                 this.application.ninja.colorController.colorPopupManager.hideColorPopup();
             }.bind(this));
-            //Storing limits of popup
-            var top, bottom, left, right; 
             //Closing popups if outside limits
             document.addEventListener('mousedown', function (e) {
-                //Checking for popup to be opened otherwise nothing happens
-                if (this._popupPanel.opened && this._popupPanel.popup && this._popupPanel.popup.element && !e._event.srcElement.inputType) {
-                        //Getting horizontal limits     
-                        left = parseInt(this._popupPanel.popup.element.style.left) + parseInt(this._popupPanel.popup.element.style.marginLeft);
-                        right = left + parseInt(this._popupPanel.popup.element.offsetWidth);
-                        //Getting vertical limits
-                        top = parseInt(this._popupPanel.popup.element.style.top) + parseInt(this._popupPanel.popup.element.style.marginTop);
-                        bottom = left + parseInt(this._popupPanel.popup.element.offsetHeight);
-                        //Checking click position in relation to limits
-                        if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) {
-                                //Hides popups since click is outside limits
-                                this.application.ninja.colorController.colorPopupManager.hideColorPopup();
-                        }
-                }
+                //
+                if (this._popupBase && !this._popupChipBase && !this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e)) {
+                                this.hideColorPopup();
+                        }
+                } else if (!this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupChipBase, e)) {
+                                this.hideColorChipPopup();
+                        }
+                } else if (this._popupBase && this._popupChipBase && !this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) {
+                                this.hideColorPopup();
+                        }
+                } else if (this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
+                                this.hideColorPopup();
+                        }
+                } else if (!this._popupBase && this._popupChipBase && this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupChipBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
+                                this.hideColorChipPopup();
+                        }
+                } else if (this._popupBase && !this._popupChipBase && this._popupGradientChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupGradientChipBase, e)) {
+                                this.hideColorPopup();
+                        }
+                }
             }.bind(this));
             ////////////////////////////////////////////////////////////
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
-    _popupPanel: {
-        enumerable: false,
-        value: {}
+    popupHitCheck: {
+                value: function (element, e) {
+                        //Prevent any action for button to handle toggling
+                        if (e._event.target.inputType || e._event.target.colorMode) return true;
+                        //Storing limits of popup 
+                        var top, bottom, left, right;
+                        //Checking for popup to be opened otherwise nothing happens
+                        if (element && element.opened && element.popup && element.popup.element) {
+                //Getting horizontal limits     
+                left = parseInt(element.popup.element.style.left) + parseInt(element.popup.element.style.marginLeft);
+                right = left + parseInt(element.popup.element.offsetWidth);
+                //Getting vertical limits
+                top = parseInt(element.popup.element.style.top) + parseInt(element.popup.element.style.marginTop);
+                bottom = left + parseInt(element.popup.element.offsetHeight);
+                //Checking click position in relation to limits
+                if ((e._event.clientX < left || e._event.clientX > right) || (e._event.clientY < top || e._event.clientY > bottom)) {
+                        //Hides popups since click is outside limits
+                        return false;
+                } else {
+                        //Keeps popup open since click inside area
+                        return true;
+                }
+            } else {
+                //Hides popups since element not detected
+                    return false;
+            }
+                }  
     },
     ////////////////////////////////////////////////////////////////////
     //
-    _popupChip: {
-        enumerable: false,
-        value: {}
+    _popupBase: {
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
-    _popupBase: {
-        enumerable: false,
+    _popupChipBase: {
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
-    _popupChipBase: {
-        enumerable: false,
+    _popupGradientChipBase: {
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     colorManager: {
-        enumerable: true,
-        get: function() {
-            return this._colorManager;
-        },
-        set: function(value) {
-                this._colorManager = value;
-        }
-    },
-    
-    
-    
-    //TODO: Remove, figure out offset bug
-    _hackOffset: {
-        enumerable: true,
-        value: false
+        get: function() {return this._colorManager;},
+        set: function(value) {this._colorManager = value;}
     },
-    
-    
+    ////////////////////////////////////////////////////////////////////
+    //
     _colorPopupDrawing: {
-        enumerable: true,
         value: false
     },
+    ////////////////////////////////////////////////////////////////////
+    //
         _colorChipPopupDrawing: {
-        enumerable: true,
         value: false
     },
-    
-    
-    
+    ////////////////////////////////////////////////////////////////////
+    //
+        _colorGradientPopupDrawing: {
+        value: false
+    },
     ////////////////////////////////////////////////////////////////////
     //TODO: Remove and use montage's built in component
     showColorPopup: {
-        enumerable: true,
         value: function (x, y, side, align) {
+                //Check to see if popup is drawing, avoids errors
                 if (this._colorPopupDrawing) {
                         return;
                 }
-                if (this._popupPanel.opened) {
+                //Check for toggling view
+                if (this._popupBase && this._popupBase.opened) {
                         //Toogles if called and opened
                         this.hideColorPopup();
                 } else {
@@ -137,21 +157,14 @@ exports.ColorPopupManager = Montage.create(Component, {
                                 this._hasinit = true;
                         }
                         ////////////////////////////////////////////////////
-                        //Creating popup from m-js component
+                        //Creating popup
                         var popup = document.createElement('div');