8 files changed, 67 insertions, 38 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 0a91ae29..48ceb21b 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -95,11 +95,14 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         value: function (request) {
                 //TODO: Check if frameId is proper
                 if (this._hackRootFlag && request.parentFrameId !== -1) {
-                        //TODO: Optimize creating string
-                        //console.log(request);
-                        //console.log(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1], request.url);
-                                //return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-1]};
-                                return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/'))[1]};
+                        //Checking for proper URL redirect (from different directories)
+                        if (request.url.indexOf('js/document/templates/banner') !== -1) {
+                                        return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/banner/'))[1]};
+                                } else if (request.url.indexOf('js/document/templates/html')  !== -1) {
+                                        return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/html/'))[1]};
+                                } else {
+                                        //Error, not a valid folder
+                                }
                         }
                 }
     },
@@ -683,8 +686,9 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
             }
 
             if(needsRule) {
-                rule = sc.addRule('body{}');
+                rule = sc.addRule('.ninja-body{}');
                 sc.setStyles(rule, styles);
+                sc.addClass(docRoot, "ninja-body");
             }
         }
     }
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 7e1f1806..9bbea4c9 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -100,15 +100,14 @@ exports.HtmlDocument = Montage.create(Component, {
                         this._document = this.model.views.design.document;
                         //TODO: Remove usage, seems as not needed
                                 if (template && template.type === 'banner') {
-                                        //this.documentRoot = this.model.views.design.document.body;
-                                        this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-banner')[0];
+                                        this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-content')[0];
                                 } else {
                                         this.documentRoot = this.model.views.design.document.body;
                                 }
                         //TODO: Why is this needed?
-                        this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
+                        this._liveNodeList = this.documentRoot.getElementsByTagName('*');
                         //Initiliazing document model
-                        document.application.njUtils.makeElementModel(this.model.views.design.document.body, "Body", "body");
+                        document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
                         //Adding observer to know when template is ready
                         this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
                                 this._observer.observe(this.model.views.design.document.head, {childList: true});
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 2cd82f51..91ef06de 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -27,8 +27,6 @@
                                 margin: 0;
                         padding: 0;
                                 position: absolute;
-                                -webkit-transform-style: preserve-3d;
-                                -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                         }
 
             html {
@@ -40,10 +38,6 @@
                 height: 100%;
                 background: #666;
             }
-                        
-                        ninjaloadinghack {
-                                display: none;
-                        }
 
                         .active-element-outline {
                         outline: #adff2f solid 2px;
@@ -53,16 +47,29 @@
                                 -webkit-transition: all 450ms linear !important;
                         }
                         
-                        ninja-banner {
+                        ninjaloadinghack {
+                                display: none;
+                        }
+                        
+                        ninja-viewport, ninja-content {
                                 display: block;
-                                margin: 0;
-                                padding: 0;
-                                border: 0;
-                                position: absolute;
-                                overflow: visible;
-                                top: 50%;
-                                left: 50%;
-                                background: #FFF;
+                margin: 0;
+                padding: 0;
+                border: 0;
+                position: absolute;
+                overflow: visible;
+                top: 0;
+                left: 0;
+                background: transparent;
+                        }
+                        
+                        ninja-viewport {
+                background: #FFF;
+                }
+                        
+                        ninja-content {
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                         }
         </style>
         
@@ -87,8 +94,15 @@
         </head>
 
         <body>
+                
                 <ninjaloadinghack></ninjaloadinghack>
-                <ninja-banner></ninja-banner>
+        
+        <ninja-viewport>
+                    
+                    <ninja-content></ninja-content>
+                    
+        </ninja-viewport>
+        
         </body>
 
 </html>
\ No newline at end of file
diff --git a/js/document/views/design.js b/js/document/views/design.js
index e838dd49..4c91ff39 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -159,8 +159,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     insertBannerContent: {
         value: function (e) {
                 //Getting first element in DOM (assumes it's root)
-                var banner = this._bodyFragment.getElementsByTagName('*')[1],
-                        ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0];
+                //TODO: Ensure wrapper logic is proper
+                var banner = this._bodyFragment.getElementsByTagName('*')[2],
+                        ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0];
                 //Copying attributes to maintain same properties as the banner root
                         for (var n in banner.attributes) {
                                 if (banner.attributes[n].value) {
@@ -168,7 +169,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                                 }
                         }
                         //Adjusting margin per size of document
-                        this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
+                        //this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
+                        this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
                         //Setting content in template
                 ninjaBanner.innerHTML = banner.innerHTML;
                 //Garbage collection
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 22446403..8c338f84 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -358,9 +358,13 @@ exports.ViewUtils = Montage.create(Component, {
             {
                 pt = this.childToParent( pt, child );
 
-                if (child === this._stageElement)  break;
+//                if (child === this._stageElement)  break;
+//                child = child.offsetParent;
 
+                if (child === this._stageElement)  break;
+                if (child === this._rootElement)  break;
                 child = child.offsetParent;
+                if (child === this._rootElement)  break;
             }
 
             /////////////////////////////////////////////////////////
diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt
index fdafe4f6..33b45e53 100755
--- a/js/io/templates/files/banner.txt
+++ b/js/io/templates/files/banner.txt
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 
-<div class="ninja-banner">
+<div class="ninja-content-wrapper">
         
         <!-- Created with Motorola Mobility Ninja -->
         
         <!-- Ninja-Banner Dimensions@@@ -->
-                
+