12 files changed, 164 insertions, 132 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..f6b850b2 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -145,18 +145,19 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         value: function(event) {
                 //
                 if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
-                        //
-                        this.activeDocument.model.save(this.testCallback.bind(this)); //this.fileSaveResult.bind(this)
+                        //Currently we don't need a callback handler
+                        //this.activeDocument.model.save(this.saveExecuted.bind(this));
+                        this.activeDocument.model.save();
                 } else {
-                        //Error:
+                        //Error: cloud not available and/or no active document
                 }
                 }
     },
-    testCallback: {
+    ////////////////////////////////////////////////////////////////////
+        //
+    saveExecuted: {
         value: function (value) {
-                console.log(value);
-            //TODO: Move this to the model.save()
-            this.activeDocument.model.needsSave = false;
+                //File saved, any callbacks or events should go here
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -489,6 +490,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/document-html.js b/js/document/document-html.js
index 0037c94d..983da966 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -139,7 +139,11 @@ exports.HtmlDocument = Montage.create(Component, {
             //this.gridVerticalSpacing = this.application.ninja.stage.drawUtils.gridVerticalSpacing;
 
             // Serialize the current scroll position
-            // TODO: Implement
+            this.model.scrollLeft = this.application.ninja.stage._scrollLeft;
+            this.model.scrollTop = this.application.ninja.stage._scrollTop;
+            this.model.userContentLeft = this.application.ninja.stage._userContentLeft;
+            this.model.userContentTop = this.application.ninja.stage._userContentTop;
+
 
             // Serialize the selection
             this.model.selection = this.application.ninja.selectedElements.slice(0);
@@ -163,7 +167,10 @@ exports.HtmlDocument = Montage.create(Component, {
             //this.application.ninja.stage.drawUtils.gridVerticalSpacing = this.gridVerticalSpacing;
 
             // Deserialize the current scroll position
-            // TODO: Implement
+            this.application.ninja.stage._scrollLeft = this.model.scrollLeft;
+            this.application.ninja.stage._scrollTop = this.model.scrollTop;
+            this.application.ninja.stage._userContentLeft = this.model.userContentLeft;
+            this.application.ninja.stage._userContentTop = this.model.userContentTop;
 
             this.application.ninja.selectedElements = this.model.selection.slice(0);
 
diff --git a/js/document/models/base.js b/js/document/models/base.js
index df341b2f..c99e36c7 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -151,7 +151,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
                                 head: this.views.design.iframe.contentWindow.document.head,
                                 body: this.views.design.iframe.contentWindow.document.body,
                                 mjsTemplateCreator: this.views.design.iframe.contentWindow.mjsTemplateCreator
-                        }, callback.bind(this));
+                        }, this.handleSaved.bind({callback: callback, model: this}));
                 } else {
                         //TODO: Add logic to save code view data
                 }
@@ -180,7 +180,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
                                 head: this.views.design.iframe.contentWindow.document.head,
                                 body: this.views.design.iframe.contentWindow.document.body,
                                 mjsTemplateCreator: this.views.design.iframe.contentWindow.mjsTemplateCreator
-                        }, callback.bind(this));
+                        }, this.handleSaved.bind({callback: callback, model: this}));
                 } else {
                         //TODO: Add logic to save code view data
                 }
@@ -190,7 +190,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
         //
         saveAs: {
-        value: function () {
+        value: function (callback) {
                 //
                 if (this.needsSave) {
                         //Save current file on memory
@@ -201,6 +201,18 @@ exports.BaseDocumentModel = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
         //
+        handleSaved: {
+                value: function (result) {
+                        //
+                        if (result.status === 204) {
+                                this.model.needsSave = false;
+                        }
+                        //
+                        if (this.callback) this.callback(result);
+                }
+        },
+    ////////////////////////////////////////////////////////////////////
+        //
         close: {
         value: function (view, callback) {
                 //Outcome of close (pending on save logic)
diff --git a/js/document/models/html.js b/js/document/models/html.js
index 67457863..a97b4b5a 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -28,6 +28,23 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
         value: false
     },
     ////////////////////////////////////////////////////////////////////
+    //
+    scrollLeft: {
+        value: null
+    },
+
+    scrollTop: {