2 files changed, 164 insertions, 33 deletions

diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index a98fca60..405f57da 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -163,7 +163,7 @@
                     "element": {"#": "stageMode"}
                 },
                 "bindings" : {
-                    "livePreview": {"<<->": "@appModel.livePreview"}
+                    "livePreview": {"<->": "@appModel.livePreview"}
                 }
             },
 
@@ -246,7 +246,7 @@
                     "element":{"#" : "breadCrumbComponent"}
                 },
                 "bindings" : {
-                    "container": {"<-": "@owner.currentSelectedContainer"},
+
                     "currentDocument": {"<-": "@documentList.selectedObjects.0"}
                 }
             },
@@ -291,9 +291,7 @@
             "selectionController": {
                 "prototype": "js/controllers/selection-controller",
                 "bindings" : {
-                    "selectionContainer": {"<-": "@owner.currentSelectedContainer"},
-                    "currentDocument": {"<-": "@documentList.selectedObjects.0"},
-                    "selectedElements": {"<-": "@documentList.selectedObjects.0.model.selection"}
+                    "currentDocument": {"<-": "@documentList.selectedObjects.0"}
                 }
             },
 
@@ -310,7 +308,7 @@
                     "selectObjectsOnAddition": true
                 },
                 "bindings": {
-                    "content": {"<<->": "@documentController.documents"}
+                    "content": {"<->": "@documentController.documents"}
                 }
             },
 
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 38f5efcf..61cd2487 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -15,22 +15,172 @@ var NjUtils = require("js/lib/NJUtils").NJUtils;
 
 exports.Ninja = Montage.create(Component, {
 
-    ninjaVersion: {
-        value: null
+    // SERIALIZABLE Properties
+    //////////////////////////////
+    rulerTop: {
+        value: null,
+        serializable: true
+    },
+
+    rulerLeft: {
+        value: null,
+        serializable: true
+    },
+
+    appModel: {
+        value: null,
+        serializable: true
     },
 
     toolsData: {
-        value: null
+        value: null,
+        serializable: true
     },
 
-    appData: {
-        value: AppData
+    toolsList: {
+        value: null,
+        serializable: true
+    },
+
+    toolsProperties: {
+        value: null,
+        serializable: true
+    },
+
+    stage: {
+        value: null,
+        serializable: true
+    },
+
+    elementMediator: {
+        value: null,
+        serializable: true
+    },
+
+    dragDropMediator: {
+        value: null,
+        serializable: true
+    },
+
+    undocontroller: {
+        value: null,
+        serializable: true
+    },
+
+    selectionController: {
+        value: null,
+        serializable: true
+    },
+
+    documentController: {
+        value: null,
+        serializable: true
+    },
+
+    popupManager: {
+        value: null,
+        serializable: true
+    },
+
+    colorController: {
+        value: null,
+        serializable: true
+    },
+
+    stylesController: {
+        value: null,
+        serializable: true
+    },
+
+    presetsController: {
+        value: null,
+        serializable: true
+    },
+
+    filePickerController: {
+        value: null,
+        serializable: true
+    },
+
+    newFileController: {
+        value: null,
+        serializable: true
+    },
+
+    coreIoApi: {
+        value: null,
+        serializable: true
+    },
+
+    documentBar: {
+        value: null,
+        serializable: true
+    },
+
+    editorViewOptions: {
+        value: null,
+        serializable: true
+    },
+
+    ioMediator: {
+        value: null,
+        serializable: true
+    },
+
+    timeline: {
+        value: null,
+        serializable: true
+    },
+
+    mainMenuController: {
+        value: null,
+        serializable: true
+    },
+
+    codeEditorController: {
+        value: null,
+        serializable: true
+    },
+
+    rightPanelContainer: {
+        value: null,
+        serializable: true
+    },
+
+    panelSplitter: {
+        value: null,
+        serializable: true
+    },
+
+    timelineSplitter: {
+        value: null,
+        serializable: true
+    },
+
+    toolsSplitter: {
+        value: null,
+        serializable: true
+    },
+
+    optionsSplitter: {
+        value: null,
+        serializable: true
     },
 
     documentList: {
+        value: null,
+        serializable: true
+    },
+    //////////////////////////////
+
+    ninjaVersion: {
         value: null
     },
 
+    appData: {
+        value: AppData
+    },
+
     currentDocument: {
         get: function() {
             if(this.documentList.selectedObjects) {
@@ -147,21 +297,6 @@ exports.Ninja = Montage.create(Component, {
         value: []
     },
 
-    _currentSelectedContainer: {
-        value: null
-    },
-
-    currentSelectedContainer: {
-        get: function() {
-            return this._currentSelectedContainer;
-        },
-        set: function(value) {
-            if(value !== this._currentSelectedContainer) {
-                this._currentSelectedContainer = value;
-            }
-        }
-    },
-
     templateDidLoad: {
         value: function() {