12 files changed, 158 insertions, 47 deletions

diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 0ca6c417..604b22d0 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -19,6 +19,14 @@ exports.BodyController = Montage.create(ElementController, {
             el.elementModel.props3D.matrix3d = mat;
             el.elementModel.props3D.perspectiveDist = dist;
 
+            if(this.application.ninja.currentDocument.model.views.design._template) {
+                if(!MathUtils.isIdentityMatrix(mat)) {
+                    el.parentNode.style.backgroundColor = "transparent";
+                } else {
+                    el.parentNode.style.removeProperty("background-color");
+                }
+            }
+
             this.application.ninja.stage.updatedStage = true;
 
             if(update3DModel) {
@@ -32,7 +40,11 @@ exports.BodyController = Montage.create(ElementController, {
             switch(p) {
                 case "background" :
                 case "background-color":
-                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
+                    if(this.application.ninja.currentDocument.model.views.design._template) {
+                        return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el.parentNode, "background-color"));
+                    } else {
+                        return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color"));
+                    }
                 case "border":
                     return 0;
                 case "height":
@@ -51,7 +63,11 @@ exports.BodyController = Montage.create(ElementController, {
             switch(p) {
                 case "background":
                 case "background-color":
-                    this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
+                    if(this.application.ninja.currentDocument.model.views.design._template) {
+                        this.application.ninja.stylesController.setElementStyle(el.parentNode, "background-color", value);
+                    } else {
+                        this.application.ninja.stylesController.setElementStyle(el, "background-color", value);
+                    }
                     break;
                 case "overflow":
                 case "width":
diff --git a/js/document/helpers/url-parser.js b/js/document/helpers/url-parser.js
index 5e71d148..7bded27d 100755
--- a/js/document/helpers/url-parser.js
+++ b/js/document/helpers/url-parser.js
@@ -53,7 +53,7 @@ exports.UrlParser = Montage.create(Component, {
                 //Getting file URI (not URL since we must load through I/O API)
                         var css = {}, file;
                         css.cssUrl =  href.split(this.application.ninja.coreIoApi.rootUrl)[1];
-                        css.fileUri = this.application.ninja.coreIoApi.cloudData.root + css.cssUrl;
+                        css.fileUri = this.application.ninja.coreIoApi.cloudData.root + unescape(css.cssUrl);
                         //Loading data from CSS file
                         file = this.application.ninja.coreIoApi.readFile({uri: css.fileUri});
                         //Checking for file to be writable on disk
diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js
index c5b46c3a..f43b1a2c 100755
--- a/js/document/mediators/template.js
+++ b/js/document/mediators/template.js
@@ -158,6 +158,15 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                     ninjaContentTagDoc.removeAttribute('style');
                     ninjaContentTagDoc.removeAttribute('data-ninja-style');
                 }
+                // TODO - clean up into single method
+                ninjaContentTagMem = template.document.getElementsByTagName('ninja-viewport')[0], ninjaContentTagDoc = template.file.content.document.getElementsByTagName('ninja-viewport')[0];
+                if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') !== null) {
+                    ninjaContentTagDoc.setAttribute('style', ninjaContentTagMem.getAttribute('data-ninja-style'));
+                    ninjaContentTagDoc.removeAttribute('data-ninja-style');
+                } else if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') === null) {
+                    ninjaContentTagDoc.removeAttribute('style');
+                    ninjaContentTagDoc.removeAttribute('data-ninja-style');
+                }
             } else {
                 if (template.body && template.body.getAttribute('data-ninja-style') !== null) {
                     template.file.content.document.body.setAttribute('style', template.body.getAttribute('data-ninja-style'));
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44c61617..d5c5c6c4 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -281,6 +281,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
                         //Getting style and link tags in document
             var htags = this.document.getElementsByTagName('html'),
+                bannerWrapper,
                 userStyles,
                 stags = this.document.getElementsByTagName('style'),
                 ltags = this.document.getElementsByTagName('link'), i, orgNodes,
@@ -326,6 +327,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
             //TODO: Verify appropiate location for this operation
                 if (this._template && this._template.type === 'banner') {
                         this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0];
+                bannerWrapper = this.documentRoot.parentNode;
                 } else {
                         this.documentRoot = this.document.body;
                 }
@@ -349,6 +351,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                     this.documentRoot.setAttribute('data-ninja-style', userStyles);
                 }
             }
+            if(bannerWrapper) {
+                if(userStyles = bannerWrapper.getAttribute('style')) {
+                    bannerWrapper.setAttribute('data-ninja-style', userStyles);
+                }
+            }
                 //Making callback if specified
                 if (this._callback) this._callback();
         }
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 8ddd0d52..87151964 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -630,6 +630,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 value: function ()
                 {
             this.application.ninja.stage.clearGridCanvas();
+            this.drawStageOutline();
                         if (!this.isDrawingGrid()) return;
 
                         var saveContext = this.getDrawingSurfaceElement();
@@ -701,21 +702,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         this._lineColor = saveColor;
                         this._drawingContext.lineWidth = saveLineWidth;
 
-            if(this.application.ninja.currentDocument.model.documentRoot.id !== "UserContent") {
-                // draw an outline around the body
-                var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
-                var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
-    //            glmat4.multiply( tMat, stageMat, stageMat);
-                pt0 = [0, 0, 0];
-                pt1 = [0, height, 0];
-                delta = [width, 0, 0];
-                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
-                pt0 = [0, 0, 0];
-                pt1 = [width, 0, 0];
-                delta = [0, height, 0];
-                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
-            }
-
                         // draw the lines
                         this.redrawGridLines();
 
@@ -738,15 +724,11 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                 var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
                                 for (var i = 0; i < nLines; i++) {
                                         // transform the points from working plane space to world space
-                                        //var t0 = mat.multiply(p0),
-                                        //      t1 = mat.multiply(p1);
                                         var t0 = glmat4.multiplyVec3( mat, p0, [] ),
                                                 t1 = glmat4.multiplyVec3( mat, p1, [] );
 
                                         // transform from world space to global screen space
                                         if (this._sourceSpaceElt) {
-//                                              t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt);
-//                                              t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt);
                                                 t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat);
                                                 t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat);
                                         }
@@ -764,9 +746,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                         line.setVisibility(vis);
 
                                         // increment the points to the next position
-//                                      p0 = p0.add(d); p0[3] = 1.0;
                                         p0 = vecUtils.vecAdd(4, p0, d); p0[3] = 1.0;
-//                                      p1 = p1.add(d); p1[3] = 1.0;
                                         p1 = vecUtils.vecAdd(4, p1, d); p1[3] = 1.0;
                                 }