3 files changed, 47 insertions, 25 deletions

diff --git a/js/ninja.reel/ninja.css b/js/ninja.reel/ninja.css
index 99fa9a4f..83c0e569 100644..100755
--- a/js/ninja.reel/ninja.css
+++ b/js/ninja.reel/ninja.css
@@ -7,5 +7,3 @@
 .main {
     padding: 100px;
 }
-
-
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 706c8243..1393b4b9 100644..100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -216,6 +216,11 @@
                 "name": "ElementMediator"
             },
 
+            "ioMediator": {
+                "module": "js/mediators/io-mediator",
+                "name": "IoMediator"
+            },
+
             "undocontroller1": {
                 "module": "js/controllers/undo-controller",
                 "name": "UndoController"
@@ -223,11 +228,19 @@
 
             "selectionController1": {
                 "module": "js/controllers/selection-controller",
-                "name": "SelectionController"
+                "name": "SelectionController",
+                "bindings" : {
+                    "selectionContainer": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "currentSelectedContainer",
+                        "oneway": true
+                    }
+                }
+
             },
 
             "documentController1": {
-                "module": "js/io/document/document-controller",
+                "module": "js/controllers/document-controller",
                 "name": "DocumentController"
             },
 
@@ -250,20 +263,32 @@
             },
 
             "filePickerController": {
-                "module": "js/components/ui/FilePicker/file-picker-controller",
+                "module": "js/io/ui/file-picker/file-picker-controller",
                 "name": "FilePickerController"
             },
 
             "newFileController": {
-                "module": "js/io/workflow/newFileDialog/new-file-workflow-controller",
+                "module": "js/io/ui/new-file-dialog/new-file-workflow-controller",
                 "name": "NewFileWorkflowController"
             },
+            
+            "coreIoApi1": {
+                "module": "js/io/system/coreioapi",
+                "name": "CoreIoApi"
+            },
+
+            "mainMenuController": {
+                "module": "js/controllers/main-menu-controller",
+                "name": "MainMenuController"
+            },
 
             "owner": {
                 "module": "js/ninja.reel",
                 "name": "Ninja",
                 "properties": {
                     "element":              {"#": "main"},
+                    "rulerTop":                 {"#": "rulerTop"},
+                    "rulerLeft":                {"#": "rulerLeft"},
                     "appModel":             {"@": "appModel"},
                     "toolsData":            {"@": "toolsData1"},
                     "toolsList":            {"@": "toolsList1"},
@@ -271,6 +296,7 @@
                     "stage":                {"@": "stage1"},
                     "settings":             {"@": "settings1"},
                     "elementMediator":      {"@": "elementMediator"},
+                    "dragDropMediator":     {"@": "dragDropMediator"},
                     "undocontroller":       {"@": "undocontroller1"},
                     "selectionController":  {"@": "selectionController1"},
                     "documentController":   {"@": "documentController1"},
@@ -279,10 +305,13 @@
                     "stylesController":     {"@": "stylesController"},
                     "filePickerController": {"@": "filePickerController"},
                     "newFileController":    {"@": "newFileController"},
-                    "documentBar":          {"@": "documentBar"}
+                    "coreIoApi":                {"@": "coreIoApi1"},
+                    "documentBar":          {"@": "documentBar"},
+                    "ioMediator":           {"@": "ioMediator"},
+                    "timeline":             {"@": "timeline"},
+                    "mainMenuController":   {"@": "mainMenuController"}
                 }
             }
-
         }
     </script>
 
@@ -334,9 +363,6 @@
                             <section id="rulerLeft"></section>
                             <section id="stageAndScenesContainer"></section>
                         </section>
-
-                        <section id="sceneBar" style="display: none;"></section>
-
                         <section id="stateBar">
                             <section id="documentBarContainer">
                                 <div id="documentBar" class="documentBar"><a href="#">HTML</a></div>
@@ -344,13 +370,10 @@
                         </section>
 
                         <section id="timelineResizer" class="timelineResizer resizeBar"></section>
-
-                        <section id="bottomPanelContainer" class="panelContainer">
-
                             <section id="breadCrumbTrail">
                                 <div id="breadCrumbComponent"></div>
                             </section>
-
+                        <section id="bottomPanelContainer" class="panelContainer">
                             <section id="timelinePanel" class="panel">
                                 <div id="timelinePanelComponent"></div>
                             </section>
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 469d38f7..6efeef8a 100644..100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -60,11 +60,18 @@ exports.Ninja = Montage.create(Component, {
             this.eventManager.addEventListener( "onOpenDocument", this, false);
 
             this.addEventListener("change@appModel.livePreview", this.executeLivePreview, false);
+            this.addEventListener("change@appModel.chromePreview", this.executeChromePreview, false);
             this.addEventListener("change@appModel.debug", this.toggleDebug, false);
 
             NJevent("appLoading");
         }
     },
+    
+    executeChromePreview: {
+        value: function () {
+                this.application.ninja.documentController.activeDocument.livePreview();
+        }
+    },
 
     handleResize: {
         value: function() {
@@ -102,6 +109,9 @@ exports.Ninja = Montage.create(Component, {
     didDraw: {
         value: function() {
             if(!this._didDraw) {
+                if (!this.application.ninja.coreIoApi.ioServiceDetected) {
+                        var check = this.application.ninja.coreIoApi.cloudAvailable();
+                }
                 NJevent("appLoaded");
                 this._didDraw = true;
             }
@@ -158,19 +168,10 @@ exports.Ninja = Montage.create(Component, {
 
             this.appModel.show3dGrid = this.currentDocument.draw3DGrid;
 
-            this.currentDocument._document.body.addEventListener("userTemplateDidLoad",  this.userTemplateDidLoad.bind(this), false);
-
-
             NJevent("openDocument");
         }
     },
 
-    userTemplateDidLoad: {
-        value: function(){
-            this.currentSelectedContainer = this.currentDocument.documentRoot;
-        }
-    },
-
     executeLivePreview: {
         value: function() {
             var background, overflow, transitionStopRule;
@@ -186,7 +187,7 @@ exports.Ninja = Montage.create(Component, {
                 transitionStopRule = "*"
             }
 
-            this.currentDocument.documentRoot.elementModel.controller.setProperty(this.currentDocument.documentRoot, "background", background);
+            this.currentDocument.documentRoot.elementModel.controller.setProperty(this.currentDocument.documentRoot, "body-background", background);
             this.currentDocument.documentRoot.elementModel.controller.setProperty(this.currentDocument.documentRoot, "overflow", overflow);
             this.currentDocument.documentRoot.elementModel.controller.changeSelector(this.currentDocument.documentRoot, "transitionStopRule", transitionStopRule);