1 files changed, 150 insertions, 114 deletions

diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index 4667f2b4..fba196e4 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,69 +27,77 @@ 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) {
+                        if(!this.popupHitCheck(this._popupBase, e)) {
+                                this.hideColorPopup();
+                        }
+                } else if (!this._popupBase && this._popupChipBase) {
+                        if(!this.popupHitCheck(this._popupChipBase, e)) {
+                                this.hideColorChipPopup();
+                        }
+                } else if (this._popupBase && this._popupChipBase) {
+                        if(!this.popupHitCheck(this._popupBase, e) && !this.popupHitCheck(this._popupChipBase, e)) {
+                                this.hideColorPopup();
+                        }
+                }
             }.bind(this));
             ////////////////////////////////////////////////////////////
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
-    _popupPanel: {
-        enumerable: false,
-        value: {}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    _popupChip: {
-        enumerable: false,
-        value: {}
+    popupHitCheck: {
+                value: function (element, e) {
+                        //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 {
+                        return true;
+                }
+            } else {
+                    return false;
+            }
+                }  
     },
     ////////////////////////////////////////////////////////////////////
     //
     _popupBase: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     _popupChipBase: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
-        enumerable: false,
         value: null
     },
     ////////////////////////////////////////////////////////////////////
     //
     colorManager: {
-        enumerable: true,
         get: function() {
             return this._colorManager;
         },
@@ -96,27 +105,18 @@ exports.ColorPopupManager = Montage.create(Component, {
                 this._colorManager = value;
         }
     },
-    
-    
-    
-    //TODO: Remove, figure out offset bug
-    _hackOffset: {
-        enumerable: true,
-        value: false
-    },
-    
-    
+    ////////////////////////////////////////////////////////////////////
+    //
     _colorPopupDrawing: {
         enumerable: true,
         value: false
     },
+    ////////////////////////////////////////////////////////////////////
+    //
         _colorChipPopupDrawing: {
         enumerable: true,
         value: false
     },
-    
-    
-    
     ////////////////////////////////////////////////////////////////////
     //TODO: Remove and use montage's built in component
     showColorPopup: {
@@ -125,7 +125,7 @@ exports.ColorPopupManager = Montage.create(Component, {
                 if (this._colorPopupDrawing) {
                         return;
                 }
-                if (this._popupPanel.opened) {
+                if (this._popupBase && this._popupBase.opened) {
                         //Toogles if called and opened
                         this.hideColorPopup();
                 } else {
@@ -143,15 +143,8 @@ exports.ColorPopupManager = Montage.create(Component, {
                         //
                         this._popupBase = ColorPanelPopup.create();
                         this._popupBase.element = popup;
-                        this._popupBase.props = {x: x, y: y, side: side, align: align};
+                        this._popupBase.props = {x: x, y: y, side: side, align: align, wheel: true, palette: true, gradient: true, image: true, nocolor: true, history: true};
                         this._popupBase.colorManager = this.colorManager;
-                        //TODO: Remove
-                        if (this._hackOffset) {
-                                this._popupBase.hack = {x: 53, y: 235};
-                        } else {
-                                this._hackOffset = true;
-                                this._popupBase.hack = {x: 0, y: 0};
-                        }
                         //
                         this._popupBase.addEventListener('change', this, false);
                         this._popupBase.addEventListener('changing', this, false);
@@ -166,9 +159,9 @@ exports.ColorPopupManager = Montage.create(Component, {
     hideColorPopup: {
         enumerable: true,
         value: function () {
-                if (this._popupPanel.opened) {
+                if (this._popupBase && this._popupBase.opened) {
                         //