6 files changed, 41 insertions, 8 deletions

diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index 4e64b2e8..630dcd4b 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -33,6 +33,11 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
         value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'}
     },
 
+    chipBtn: {
+        serializable: true,
+        value: null
+    },
+
     changeDelegate: {
         value: function(event) {
             this.color = event._event.color;
@@ -60,7 +65,7 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
                 this.icon.style.display = "none";
             }
 
-            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset};
+            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, nocolor: true, offset: this.offset};
             this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
 
         }
@@ -80,9 +85,13 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
                     b = colorObj.value.b;
                     a = colorObj.value.a;
                     css = colorObj.css;
+                    this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
+                } else {
+                    mode = "nocolor";
+                    this.chipBtn.color(mode, null);
+
                 }
 
-                this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
                 this.chipBtn.addEventListener("change", this, false);
             }
         }
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index f1523d87..7721d32d 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -489,6 +489,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             if(currentDocument) {
                 currentDocument.serializeDocument();
 
+                this.application.ninja.selectionController._selectionContainer = null;
+                currentDocument.model.views.design.propertiesPanel.clear();
                 currentDocument.model.views.design.hide();
             }
 
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 5c23dcf7..7a3a66f5 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -30,7 +30,7 @@ exports.BodyController = Montage.create(ElementController, {
         value: function(el, p) {
             switch(p) {
                 case "background" :
-                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", true, true));
+                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color", false, true));
                 case "border":
                     return 0;
                 case "height":
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 2ccb82d1..44f1a5e8 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -64,6 +64,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     },
     ////////////////////////////////////////////////////////////////////
         //
+    propertiesPanel: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
         initialize: {
         value: function (parent) {
                 //Creating iFrame for view
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 6d41cd53..80d1b406 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -280,7 +280,7 @@ exports.Ninja = Montage.create(Component, {
             this.currentDocument = event.detail;
 
             if(this.currentDocument.documentRoot) {
-                this.application.ninja.currentSelectedContainer = this.currentDocument.documentRoot;
+                this.currentSelectedContainer = this.currentDocument.documentRoot;
             } else {
                 alert("The current document has not loaded yet");
                 return;
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 4d048472..eb362796 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -46,7 +46,7 @@ exports.Properties = Montage.create(Component, {
 
     prepareForDraw: {
         value : function() {
-
+            this.eventManager.addEventListener("openDocument", this, false);
             this.eventManager.addEventListener("selectionChange", this, false);
 
             // This will be a toggle option
@@ -54,8 +54,6 @@ exports.Properties = Montage.create(Component, {
                 this.eventManager.addEventListener( "elementChanging", this, false);
             }
 
-            this.eventManager.addEventListener("openDocument", this, false);
-
             this.elementId.element.addEventListener("blur", this, false);
             this.elementId.element.addEventListener("focus", this, false);
             this.elementId.element.addEventListener("keyup", this, false);
@@ -70,6 +68,9 @@ exports.Properties = Montage.create(Component, {
         value: function() {
             this.eventManager.addEventListener( "elementChange", this, false);
 
+            // Save a reference of the pi inside the document view to be able to clear
+            this.application.ninja.currentDocument.model.views.design.propertiesPanel = this;
+
             // Display the default document root PI
             this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
@@ -165,6 +166,15 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
+    clear: {
+        value: function() {
+            this.elementName.value = "";
+            this.elementId.value = "";
+            this.elementClass.value = "";
+            this.customPi = null;
+        }
+    },
+
     displayElementProperties: {
         value: function (el) {
             var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument;
@@ -210,9 +220,16 @@ exports.Properties = Montage.create(Component, {
                 this.displayCustomProperties(el, el.elementModel.pi);
             }
 
+            // Root element color chip
             if(isRoot) {
                 var backgroundChip = this.customSections[0].content.controls["background"];
-                if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background");
+                var rootBackgroundColor = ElementsMediator.getProperty(el, "background");
+
+                if(rootBackgroundColor) {
+                    backgroundChip.color = rootBackgroundColor;
+                } else {
+                    backgroundChip.color = null;
+                }
             }
 
                         var previousInput = this.application.ninja.colorController.colorModel.input;