20 files changed, 174 insertions, 324 deletions

diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js
index ad0236c6..50b3624c 100755
--- a/js/components/layout/document-entry.reel/document-entry.js
+++ b/js/components/layout/document-entry.reel/document-entry.js
@@ -121,8 +121,8 @@ exports.DocumentEntry = Montage.create(Component, {
             if(event._event.target.nodeName === "IMG") {
                 this.application.ninja.documentController.closeFile(this.application.ninja.documentController._findDocumentByUUID(this._uuid));
             } else {
-                if(!this._document.isActive) {
-                    this.application.ninja.stage.stageView.switchDocument(this.application.ninja.documentController._findDocumentByUUID(this._uuid));
+                if(!this.active) {
+                    this.application.ninja.documentController.switchDocuments(this.application.ninja.currentDocument, this.application.ninja.documentController._findDocumentByUUID(this._uuid));
                 }
             }
         }
diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html
index 84a6d34e..a329f646 100755
--- a/js/components/layout/tool-button.reel/tool-button.html
+++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -16,6 +16,10 @@
                 "prototype": "js/components/layout/tool-button.reel",
                 "properties": {
                     "element": {"#": "toolBarButton"}
+                },
+                "bindings": {
+                    "selected": {"<<->": "@owner.data.selected"},
+                    "subselected": {"<-": "@owner.data.subtools.selected"}
                 }
             }
         }
diff --git a/js/components/layout/tool-button.reel/tool-button.js b/js/components/layout/tool-button.reel/tool-button.js
index 6cea0dc3..6008c4ec 100755
--- a/js/components/layout/tool-button.reel/tool-button.js
+++ b/js/components/layout/tool-button.reel/tool-button.js
@@ -48,19 +48,8 @@ exports.ToolButton = Montage.create(Component, {
             this.element.addEventListener("mousedown", this, false);
             this.element.addEventListener("dblclick", this, false);
 
-            Object.defineBinding(this, "selected", {
-              boundObject: this.data,
-              boundObjectPropertyPath: "selected",
-              oneway: false
-            });
-
             if(this.data.container) {
                 this.element.title = this.data.subtools[this._subselected].toolTip;
-                Object.defineBinding(this, "subselected", {
-                    boundObject: this.data.subtools,
-                    boundObjectPropertyPath: "selected",
-                    oneway: true
-                });
             }
 
             this.element.classList.add(this.data.id)
diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html
index d5c33624..df603bf8 100755
--- a/js/components/layout/tools-list.reel/tools-list.html
+++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -16,11 +16,7 @@
                     "element": {"#": "toolbutton"}
                 },
                 "bindings": {
-                    "data": {
-                        "boundObject": {"@": "repetition1"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration",
-                        "oneway": true
-                    }
+                    "data": {"<-": "@repetition1.objectAtCurrentIteration"}
                 }
             },
 
@@ -30,11 +26,7 @@
                     "element": {"#": "groupLine"}
                 },
                 "bindings": {
-                    "condition": {
-                        "boundObject": {"@": "repetition1"},
-                        "boundObjectPropertyPath": "objectAtCurrentIteration.lastInGroup",
-                        "oneway": true
-                    }
+                    "condition": {"<-": "@repetition1.objectAtCurrentIteration.lastInGroup"}
                 }
             },
 
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index cf46e73e..f1523d87 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -177,8 +177,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         value: function(event) {
             var saveAsSettings = event._event.settings || {};
             if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
-                saveAsSettings.fileName = this.activeDocument.name;
-                saveAsSettings.folderUri = this.activeDocument.uri.substring(0, this.activeDocument.uri.lastIndexOf("/"));
+                saveAsSettings.fileName = this.activeDocument.model.file.name;
+                saveAsSettings.folderUri = this.activeDocument.model.file.uri.substring(0, this.activeDocument.model.file.uri.lastIndexOf("/"));
                 saveAsSettings.callback = this.saveAsCallback.bind(this);
                 this.application.ninja.newFileController.showSaveAsDialog(saveAsSettings);
             }
@@ -454,58 +454,54 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     // Open document callback
     _onOpenDocument: {
         value: function(doc){
-
+            var currentDocument;
             if(this.activeDocument) {
                 // There is a document currently opened
+                currentDocument = this.activeDocument;
 
-
-
-                //this.application.ninja.stage.stageView.showCodeViewBar(false);
                 //this.application.ninja.stage.stageView.restoreAllPanels();
-
-                //
-                /*
-                if(this.activeDocument.currentView === "design"){
-                    this.activeDocument.saveAppState();
-                    this.activeDocument.container.parentNode.style["display"] = "none";
-                    this.application.ninja.stage.hideCanvas(true);
-                    this.application.ninja.stage.stageView.hideRulers();
-                }
-
-                this.activeDocument.container.style["display"] = "none";
-                */
-
-                /*
-                this.activeDocument.container.style["display"] = "block";
-                                if(this.activeDocument.currentView === "design"){
-                                    this.activeDocument.container.parentNode.style["display"] = "block";
-                                    this.activeDocument.restoreAppState();
-                                }else{
-                                    //hide the iframe when switching to code view
-                                    document.getElementById("iframeContainer").style.display = "none";
-                                }
-
-                */
-                // hide current document
             } else {
                 // There is no document opened
 
-                // Set the active document
-                this.activeDocument = doc;
+                // Show the rulers
+                // TODO: Move this indo design view
+                this.application.ninja.stage.stageView.showRulers();
 
                 // Show the canvas
                 this.application.ninja.stage.hideCanvas(false);
+            }
 
-                // Show the rulers
-                // TODO: Move this indo design view
-                this.application.ninja.stage.stageView.showRulers();
+            // Set the active document
+            this.activeDocument = doc;
+
+            // Initialize the documentRoot styles
+            this.initializeRootStyles(doc.documentRoot);
+            // Flag to stop stylesheet dirty event
+            this._hackInitialStyles = false;
+
+            this.switchDocuments(currentDocument, doc, true);
+        }
+    },
 
-                // Initialize the documentRoot styles
-                this.initializeRootStyles(doc.documentRoot);
-                // Flag to stop stylesheet dirty event
-                this._hackInitialStyles = false;
+    switchDocuments: {
+        value: function(currentDocument, newDocument, didCreate) {
 
-                NJevent("onOpenDocument", doc);
+            if(currentDocument) {
+                currentDocument.serializeDocument();
+
+                currentDocument.model.views.design.hide();