12 files changed, 49 insertions, 104 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index f84c6e80..cc984609 100644
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -5,6 +5,7 @@
  </copyright> */
 
 .bread_crumb{
+    background-color: #282828;
     border-style: double;
     height: 26px;
 }
diff --git a/js/components/tree.reel/tree.js b/js/components/tree.reel/tree.js
index 9c1b07e4..7084ba99 100644
--- a/js/components/tree.reel/tree.js
+++ b/js/components/tree.reel/tree.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;
 var Component = require("montage/ui/component").Component;
-var nj = require("js/lib/NJUtils.js").NJUtils;
+var nj = require("js/lib/NJUtils").NJUtils;
 
 exports.Tree = Montage.create(Component, {
 
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index d462bc98..afd298c9 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -7,7 +7,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,
     cssShorthandMap  = require("js/panels/CSSPanel/css-shorthand-map").CSS_SHORTHAND_MAP,
-    nj               = require("js/lib/NJUtils.js").NJUtils;
+    nj               = require("js/lib/NJUtils").NJUtils;
 
 /*
 
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index 89292ad8..e3b14bf7 100644
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -4,6 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
+// Todo: This shoudl be converted to a module
 var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 
diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js
index 25b12093..55b7e49a 100644
--- a/js/helper-classes/RDGE/GLSubpath.js
+++ b/js/helper-classes/RDGE/GLSubpath.js
@@ -4,6 +4,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
+// Todo: This shoudl be converted to a module
 var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 465533cd..90015f5a 100644
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -94,9 +94,16 @@ exports.Ninja = Montage.create(Component, {
         }
     },
 
+    _didDraw: {
+        value: false
+    },
+    
     didDraw: {
         value: function() {
-            NJevent("appLoaded");
+            if(!this._didDraw) {
+                NJevent("appLoaded");
+                this._didDraw = true;
+            }
         }
     },
 
@@ -163,12 +170,6 @@ exports.Ninja = Montage.create(Component, {
         }
     },
 
-    handleLivePreview: {
-        value: function(event) {
-
-        }
-    },
-
     executeLivePreview: {
         value: function() {
             var background, overflow, transitionStopRule;
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/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};
                         }