1 files changed, 65 insertions, 50 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 534f77c7..a25a05df 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -48,41 +48,22 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// bind the document to prop w/ setter. The setter calls to find
     ///// the stage and default css files.
 
-    handleAppLoaded : {
-        value: function() {
-            ///// Bind app's activeDocument property to
-            ///// styles controller's _activeDocument property
-
-//            Object.defineBinding(this, "activeDocument", {
-//                boundObject: this.application.ninja,
-//                boundObjectPropertyPath: "currentDocument",
-//                oneway: true
-//            });
-        }
-    },
-
-    deserializedFromTemplate : {
-        value: function() {
-            this.eventManager.addEventListener( "appLoaded", this, false);
-        },
-        enumerable : false
-    },
     ///// Active document gets automatically set when the 
     ///// document controller changes it
-    _activeDocument : {
+    _currentDocument : {
         value : null,
         enumerable : false
     },
     
-    activeDocument : {
+    currentDocument : {
         get : function() {
-            return this._activeDocument;
+            return this._currentDocument;
         },
         set : function(document) {
             ///// If the document is null set default stylesheets to null
 
             if(!document || document.currentView === "code") {
-                this._activeDocument   = null;
+                this._currentDocument   = null;
                 this._stageStylesheet  = null;
                 this.defaultStylesheet = null;
                 this.userStyleSheets   = [];
@@ -91,7 +72,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
 
             ///// setting document via binding
-            this._activeDocument = document;
+            this._currentDocument = document;
             
             ///// Stage stylesheet should always be found
             this._stageStylesheet  = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
@@ -103,6 +84,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 return sheet !== this._stageStylesheet;
             }, this);
 
+            this.initializeRootStyles();
+
             NJevent('styleSheetsReady', this);
         },
         enumerable : false
@@ -129,10 +112,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                     return false;
                 }
                 //check that the document has a design view
-                else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){
+                else if(this._currentDocument.model && this._currentDocument.model.views && this._currentDocument.model.views.design){
                     ///// Use the last stylesheet in the document as the default
 
-                    var sheets = this._activeDocument.model.views.design.document.styleSheets,
+                    var sheets = this._currentDocument.model.views.design.document.styleSheets,
                         lastIndex = sheets.length-1;
 
                     ///// If the only sheet is the stage stylesheet, this will be true
@@ -148,7 +131,41 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
         }
     },
-    
+
+    initializeRootStyles: {
+        value: function() {
+            var styles = {},
+                needsRule = false,
+                rule;
+
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "width", false, false) == null) {
+                styles['width'] = '100%';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "height", false, false) == null) {
+                styles['height'] = '100%';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform", false, false) == null) {
+                styles['-webkit-transform'] = 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform-style", false, false) == null) {
+                styles['-webkit-transform-style'] = 'preserve-3d';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "background-color", false, false) == null) {
+                styles['background-color'] = "transparent";
+                needsRule = true;
+            }
+
+            if(needsRule) {
+                rule = this.addRule('.ninja-body{}');
+                this.setStyles(rule, styles);
+                this.addClass(this.currentDocument.model.documentRoot, "ninja-body");
+            }
+        }
+    },
     /* ----------------- Rule methods ----------------- */
     
     ///// Add Rule
@@ -538,7 +555,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 return true;
             }
 
-            var doc = document || this._activeDocument;
+            var doc = document || this._currentDocument;
             ///// TODO: somehow cache the number of elements affected
             ///// by the rule, because querySelectorAll() is expensive
             return !!(doc.querySelectorAll(rule.selectorText).length > 1);
@@ -887,7 +904,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     getAnimationRuleWithName : {
         value: function(name, document) {
-            var doc = document || this._activeDocument.model.views.design.document,
+            var doc = document || this._currentDocument.model.views.design.document,
                 animRules = this.getDocumentAnimationRules(doc),
                 rule, i;
 
@@ -909,7 +926,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     getDocumentAnimationRules : {
         value: function(document) {
-            var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets,
+            var sheets = (document) ? document.styleSheets : this._currentDocument.model.views.design.document.styleSheets,
                 rules = [];
 
             nj.toArray(sheets).forEach(function(sheet) {
@@ -1229,9 +1246,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 }
             }
             if(isNaN(dist)) {
-                dist = null;
+                return "none";
+            } else {
+                return dist;
             }
-            return dist;
         }
     },
 
@@ -1272,7 +1290,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     createStylesheet : {
         value: function(id, document) {
-            var doc = document || this._activeDocument.model.views.design.document,
+            var doc = document || this._currentDocument.model.views.design.document,
                 sheetElement, sheet;
             
             sheetElement = nj.make('style', {
@@ -1329,15 +1347,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     getSheetFromElement : {
         value : function(element, context) {
-            var doc = context || this._activeDocument.model.views.design.document,
+            var doc = context || this._currentDocument.model.views.design.document,
                 el  = (typeof element === 'string') ? nj.$(element, doc) : element;
                 
             if(el && el.sheet) {
                 return el.sheet;
             }
-            
-            return;
-            
         }
     },
 
@@ -1363,7 +1378,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// If the sheet doesn't already exist in the list of modified