Merge branch 'refs/heads/TimelineUberjd' into TimelineUber

Conflicts:
	js/panels/Timeline/Layer.reel/Layer.js

Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

2 files changed, 63 insertions, 53 deletions

diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 52a6daa2..51d74cb2 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -186,6 +186,9 @@
                 "properties": {
                     "element": {"#": "stageAndScenesContainer"},
                     "appModel":     {"@": "appModel"}
+                },
+                "bindings": {
+                    "activeDocument": {"<-": "@documentController1.activeDocument"}
                 }
             },
 
@@ -263,11 +266,7 @@
             "selectionController1": {
                 "prototype": "js/controllers/selection-controller",
                 "bindings" : {
-                    "selectionContainer": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "currentSelectedContainer",
-                        "oneway": true
-                    }
+                    "selectionContainer": {"<-": "@owner.currentSelectedContainer"}
                 }
             },
 
@@ -287,7 +286,10 @@
             },
 
             "stylesController": {
-                "prototype": "js/controllers/styles-controller"
+                "prototype": "js/controllers/styles-controller",
+                "bindings": {
+                    "activeDocument": {"<-": "@documentController1.activeDocument"}
+                }
             },
 
             "presetsController": {
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index cf7c6cf4..d0eb1557 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -134,10 +134,21 @@ exports.Ninja = Montage.create(Component, {
         value: []
     },
 
-    currentSelectedContainer: {
+    _currentSelectedContainer: {
         value: null
     },
 
+    currentSelectedContainer: {
+        get: function() {
+            return this._currentSelectedContainer;
+        },
+        set: function(value) {
+            if(value !== this._currentSelectedContainer) {
+                this._currentSelectedContainer = value;
+            }
+        }
+    },
+
     templateDidLoad: {
         value: function() {
             this.ninjaVersion = window.ninjaVersion.ninja.version;
@@ -152,33 +163,39 @@ exports.Ninja = Montage.create(Component, {
 
             this.application.ninja = this;
 
-            this.toolsData.selectedTool = this.toolsData.defaultToolsData[0];
-            this.toolsData.defaultSubToolsData = this.toolsData.defaultToolsData[7].subtools;
-            this.toolsData.selectedSubTool = this.toolsData.defaultToolsData[7].subtools[1];
+            this.toolsData.selectedTool = this.toolsData.defaultToolsData[this.application.ninja.toolsData.selectionToolIndex];
+            this.toolsData.defaultSubToolsData = this.toolsData.defaultToolsData[this.application.ninja.toolsData.shapeToolIndex].subtools;
+            this.toolsData.selectedSubTool = this.toolsData.defaultToolsData[this.application.ninja.toolsData.shapeToolIndex].subtools[1];
             this.toolsData.selectedToolInstance = this.toolsList[this.toolsData.selectedTool.action];
 
             this.setupGlobalHelpers();
 
             window.addEventListener("resize", this, false);
 
-            this.eventManager.addEventListener( "selectTool", this, false);
-            this.eventManager.addEventListener( "selectSubTool", this, false);
-            this.eventManager.addEventListener( "onOpenDocument", this, false);
+            this.eventManager.addEventListener("selectTool", this, false);
+            this.eventManager.addEventListener("selectSubTool", this, false);
+            this.eventManager.addEventListener("onOpenDocument", this, false);
+            this.eventManager.addEventListener("onSwitchDocument", 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);
+            this.addPropertyChangeListener("appModel.livePreview", this.executeLivePreview, false);
+            this.addPropertyChangeListener("appModel.chromePreview", this.executeChromePreview, false);
+            this.addPropertyChangeListener("appModel.debug", this.toggleDebug, false);
 
             NJevent("appLoading");
         }
     },
     
+    
+    ////////////////////////////////////////////////////////////////////
+        //TODO: Expand method to allow other browsers for preview
     executeChromePreview: {
         value: function () {
-                this.application.ninja.documentController.activeDocument.livePreview();
+                this.application.ninja.documentController.activeDocument.model.browserPreview('chrome');
         }
     },
-
+        ////////////////////////////////////////////////////////////////////
+        
+        
     handleResize: {
         value: function() {
             this.stage.resizeCanvases = true;
@@ -262,8 +279,8 @@ exports.Ninja = Montage.create(Component, {
         value: function(event) {
             this.currentDocument = event.detail;
 
-            if(this.currentDocument.documentRoot) {
-                this.application.ninja.currentSelectedContainer = this.currentDocument.documentRoot;
+            if(this.currentDocument.model.documentRoot) {
+                this.currentSelectedContainer = this.currentDocument.model.documentRoot;
             } else {
                 alert("The current document has not loaded yet");
                 return;
@@ -274,24 +291,40 @@ exports.Ninja = Montage.create(Component, {
         }
     },
 
+    handleOnSwitchDocument: {
+        value: function() {
+            this.currentDocument = this.documentController.activeDocument;
+
+            if(this.currentDocument.model.documentRoot) {
+                this._currentSelectedContainer = this.selectionController._selectionContainer = this.currentDocument.model.documentRoot;
+            }
+
+            NJevent("switchDocument");
+        }
+    },
+
     executeLivePreview: {
         value: function() {
             var background, overflow, transitionStopRule;
             this.stage.hideCanvas(this.appModel.livePreview);
 
+            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
             if(this.appModel.livePreview) {
-                background =  "#000000";
-                overflow = "hidden";
+//                background =  "#000000";
+//                overflow = "hidden";
                 transitionStopRule = "nj-css-garbage-selector";
             } else {
-                background =  "#808080";
-                overflow = "visible";
+//                background =  "#808080";
+//                overflow = "visible";
                 transitionStopRule = "*"
             }
 
-            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);
+            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
+//            this.currentDocument.model.documentRoot.elementModel.controller.setProperty(this.currentDocument.model.documentRoot, "body-background", background);
+//            this.currentDocument.model.documentRoot.elementModel.controller.setProperty(this.currentDocument.model.documentRoot, "overflow", overflow);
+//            this.currentDocument.model.documentRoot.elementModel.controller.changeSelector(this.currentDocument.model.documentRoot, "transitionStopRule", transitionStopRule);
+
+            this.application.ninja.stylesController._stageStylesheet.rules[0].selectorText = transitionStopRule;
 
             this._toggleWebGlAnimation(this.appModel.livePreview);
         }
@@ -300,7 +333,7 @@ exports.Ninja = Montage.create(Component, {
     // Turn on WebGL animation during preview
     _toggleWebGlAnimation: {
         value: function(inLivePreview) {
-            var glCanvases = this.currentDocument.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
+            var glCanvases = this.currentDocument.model.views.design.iframe.contentWindow.document.querySelectorAll('[data-RDGE-id]'),
                 glShapeModel;
             if(glCanvases) {
                 for(var i = 0, len = glCanvases.length; i<len; i++) {
@@ -337,31 +370,6 @@ exports.Ninja = Montage.create(Component, {
         }
     },
 
-    _handleAppLoaded: {
-        value: function(event){
-
-            /*
-            Object.defineBinding(docBar, "type", {
-                boundObject: DocumentManagerModule.DocumentManager,
-                boundObjectPropertyPath: "activeDocument.documentType"
-            });
-
-            Object.defineBinding(docBar, "currentView", {
-                boundObject: DocumentManagerModule.DocumentManager,
-                boundObjectPropertyPath: "activeDocument.currentView",
-                oneway: false
-            });
-
-            Object.defineBinding(docBar, "zoomFactor", {
-                boundObject: DocumentManagerModule.DocumentManager,
-                boundObjectPropertyPath: "activeDocument.zoomFactor",
-                oneway: false
-            });