11 files changed, 182 insertions, 215 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css
index ff70b5b6..27d19e58 100644
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.css
@@ -400,7 +400,7 @@
 .nj-css-error:not(.nj-css-no-error) {
     background-repeat: no-repeat;
     background-position: 3px 2px;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAMtJREFUGJV1kM0KAXEUxc/SWh7MM0zJE3gQCxM2EpJ8bEiNjWHhBWYjYkUkRdQoGde5f2Q03PrV6ZzTrXuB0MgQiU0ba0U1/k3gwBYXoqj+WeKG2LaBgwxYJEbTixa7yMyLLPlLw6xATS9SXDWx25cZ7sYG1ep9b3OR8h3cTyUWtyMylnMNcqGn2WdbHQs94FqFnPtxg2r1NHsfkTx0EMiEG7IMpy2D0fSOPWbsgD/zzEtoik323hP75THTDvJpVHIW5I1t4aaEPe08AF+CuEXWXJtHAAAAAElFTkSuQmCC);
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAYAAABGbhwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMzYyMERFNTQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMzYyMERFNjQwNzMxMUUxQTREQ0IxQTRGNEI2MTE3RiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNjIwREUzNDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNjIwREU0NDA3MzExRTFBNERDQjFBNEY0QjYxMTdGIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bc4fwegAAAWpJREFUeNo8kLtLA0EQxr%2B9l3lcDAaCBsEqEOysBFEQsRAsRVCEpBREsbIUSxtBrAxEewsrK8VHQIhK%2FoIUUVJIQFFjYi65XDZ36%2Bz5GFgWZr75fjPDhBD4C%2BucjWgaphjQdTgK%2FfPi5a%2FGpPDtjEVjERyqKlag%2FlY8gHPsfzSwPbQgbDyfIs6vURa3EKK8Jf6jmhUy51yiWDlBUDED2NF0JKGQS3IPVn4ATXqIL0EYJgwD42YQG4quE45EggOtCwbWrUM1Ej%2F0jkXDAYaOtOa6iIH2YSQOBugPj4KN3aFdnIThkprynoeUYjtwIRO0hCLxiU3wp12odgl0AXhUa3VQ0xoWCqEApiNhEpFzt7Tm%2F4Tzo9kGvtq4UjNzqJB1mswURvNoqayP57V7KcB7HfZnE8v%2BHYtZtmiGcBzqQ1TSZUPP85HVlo1MfCaX94WPpSO83qwO6wbWCTtBQocoD70eDgZncw3Z%2BC3AAFMzlxlnnpevAAAAAElFTkSuQmCC);
     opacity: 0.5;
 }
 .nj-editing.nj-css-error {
diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index ae7e5c14..0c950ffd 100644
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -8,7 +8,7 @@ var cssPropertyNameList      = require("js/panels/CSSPanel/css-property-name-lis
     cssCompletionMap         = require("js/panels/CSSPanel/css-value-completion-map").cssValueCompletionMap,
     CSS_SHORTHAND_MAP        = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP,
     keyboardModule           = require("js/mediators/keyboard-mediator").Keyboard,
-    nj                       = require("js/lib/NJUtils.js").NJUtils;
+    nj                       = require("js/lib/NJUtils").NJUtils;
 
 
 
diff --git a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
index 0e1cf206..bb6f9de6 100644
--- a/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
+++ b/js/panels/CSSPanel/ComputedStyleSubPanel.reel/ComputedStyleSubPanel.js
@@ -6,7 +6,7 @@ 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,
-    nj        = require("js/lib/NJUtils.js").NJUtils;
+    nj        = require("js/lib/NJUtils").NJUtils;
 
 
 exports.ComputedStyleSubPanel = Montage.create(Component, {
diff --git a/js/panels/Color/colorchippopup.reel/colorchippopup.js b/js/panels/Color/colorchippopup.reel/colorchippopup.js
index 03e14b28..05bcb447 100644
--- a/js/panels/Color/colorchippopup.reel/colorchippopup.js
+++ b/js/panels/Color/colorchippopup.reel/colorchippopup.js
@@ -109,7 +109,7 @@ exports.ColorChipPopup = Montage.create(Component, {
                         this.cc_hexinput.labelFunction = this._hexLabel.bind(this);
                 this.cc_hexinput.inputFunction = this._hexInput.bind(this);
                         //
-                        if (this.application.ninja.colorController.colorView.currentChip && this.application.ninja.colorController.colorView.currentChip.colorValue.a) {
+                        if (this.application.ninja.colorController.colorView.currentChip && this.application.ninja.colorController.colorView.currentChip.colorValue && this.application.ninja.colorController.colorView.currentChip.colorValue.a) {
                                 this.combo.slider.value = Math.round(this.application.ninja.colorController.colorView.currentChip.colorValue.a*100);
                         } else {
                                 this.combo.slider.value = 100;
diff --git a/js/panels/Color/colorpopup-manager.js b/js/panels/Color/colorpopup-manager.js
index 943ec7e7..a4c9a8c2 100644
--- a/js/panels/Color/colorpopup-manager.js
+++ b/js/panels/Color/colorpopup-manager.js
@@ -161,11 +161,13 @@ exports.ColorPopupManager = Montage.create(Component, {
                         ////////////////////////////////////////////////////
                         //Creating popup from m-js component
                         var popup = document.createElement('div');
+                        document.body.appendChild(popup);
                         //
                         this._popupBase = ColorPanelPopup.create();
-                        this._popupBase.content = document.createElement('div');
+                        this._popupBase.element = popup;
                         this._popupBase.props = {x: x, y: y, side: side, align: align};
-                        
+                        this._popupBase.colorManager = this.colorManager;
+                        //TODO: Remove
                         if (this._hackOffset) {
                                 this._popupBase.hack = {x: 53, y: 235};
                         } else {
@@ -173,20 +175,10 @@ exports.ColorPopupManager = Montage.create(Component, {
                                 this._popupBase.hack = {x: 0, y: 0};
                         }
                         //
-                        document.body.appendChild(popup);
-                        document.body.appendChild(this._popupBase.content);
-                        //Setting color panel for reference when drawing
-                                //this._popupBase.colorPanel = this;
-                        this._popupBase.colorManager = this.colorManager;       
-                        //Setting up events
                         this._popupBase.addEventListener('change', this, false);
-                        this._popupBase.addEventListener('changing', this, false);      
-                        //TODO: Use m-js popup or check m-js fix of nested drawing components
-                        this._popupBase.element = popup;
-                                this._popupBase.needsDraw = true;
-                                //Adding drawn element to container
-                        this._popupBase.content.appendChild(this._popupBase.element);
-                        //Waiting for content to drawn before loading popup
+                        this._popupBase.addEventListener('changing', this, false);
+                        //
+                        this._popupBase.needsDraw = true;
                         this._popupBase.addEventListener('firstDraw', this, false);
                 }               
         }
@@ -286,41 +278,33 @@ exports.ColorPopupManager = Montage.create(Component, {
                         ////////////////////////////////////////////////////
                         //Creating popup from m-js component
                         var popup = document.createElement('div');
+                        document.body.appendChild(popup);
                         //
-                        this._popupChipBase = ColorChipPopup.create();
-                        this._popupChipBase.content = document.createElement('div');
                         this._popupChip.event = e._event;
-                        //
+                        this._popupChipBase = ColorChipPopup.create();
+                        this._popupChipBase.element = popup;
+                        this._popupChipBase.colorManager = this.colorManager;
                         if (e._event.srcElement.props) {
                                 this.colorChipProps = e._event.srcElement.props;
                         } else {
                                 this.colorChipProps = {side: 'top', align: 'center', wheel: true, palette: true, gradient: true, image: true, panel: false};
                         }
                         //
-                            if (!this.colorChipProps.panel) {
+                        if (!this.colorChipProps.panel) {
                                 this.hideColorPopup();
                             }
                         //
-                        document.body.appendChild(popup);
-                        document.body.appendChild(this._popupChipBase.content);
-                        //Setting color panel for reference when drawing
-                                //popupBase.colorPanel = this;
-                        this._popupChipBase.colorManager = this.colorManager;
-                        //
+                        this._popupChipBase.popupModes = {};
                         this._popupChipBase.popupModes.gradient = this.colorChipProps.gradient;
                         this._popupChipBase.popupModes.image = this.colorChipProps.image;
                         this._popupChipBase.popupModes.wheel = this.colorChipProps.wheel;
                         this._popupChipBase.popupModes.palette = this.colorChipProps.palette;
-                        this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor;                   
-                        //Setting up events
+                        this._popupChipBase.popupModes.nocolor = this.colorChipProps.nocolor;   
+                        //
                         this._popupChipBase.addEventListener('change', this, false);
-                        this._popupChipBase.addEventListener('changing', this, false);  
-                        //TODO: Use m-js popup or check m-js fix of nested drawing components
-                        this._popupChipBase.element = popup;
-                                this._popupChipBase.needsDraw = true;
-                                //Adding drawn element to container
-                        this._popupChipBase.content.appendChild(this._popupChipBase.element);
-                        //Waiting for content to drawn before loading popup
+                        this._popupChipBase.addEventListener('changing', this, false);
+                        //
+                        this._popupChipBase.needsDraw = true;
                         this._popupChipBase.addEventListener('firstDraw', this, false);
                 }
         }
@@ -354,14 +338,14 @@ exports.ColorPopupManager = Montage.create(Component, {
                 if (e._target._element.className === 'cpp_popup') {
                         this._popupBase.removeEventListener('firstDraw', this, false);
                         //Creating an instance of the popup and sending in created color popup content
-                                this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.content, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align});
+                                this._popupPanel.popup = this.application.ninja.popupManager.createPopup(this._popupBase.element, {x: this._popupBase.props.x, y: this._popupBase.props.y}, {side: this._popupBase.props.side, align: this._popupBase.props.align});
                                 //Displaying popup once it's drawn
                                 this._popupPanel.popup.addEventListener('firstDraw', this, false);
                                 //Hiding popup while it draws