From 77c0f0b369d431f6824906c91753b934f749c5d8 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 11:15:27 -0700
Subject: Finalizing open for new banner templates

Moving to implement save.
---
 js/document/views/design.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

(limited to 'js')

diff --git a/js/document/views/design.js b/js/document/views/design.js
index 4c91ff39..48c91aad 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -160,16 +160,23 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     	value: function (e) {
     		//Getting first element in DOM (assumes it's root)
     		//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
+    		var wrapper =	this._bodyFragment.getElementsByTagName('*')[1],
+    			banner =	this._bodyFragment.getElementsByTagName('*')[2],
+    			ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0],
+    			ninjaWrapper = this.document.body.getElementsByTagName('ninja-viewport')[0];
+    		//Copying attributes to maintain same properties as the banner wrapper
+			for (var n in wrapper.attributes) {
+				if (wrapper.attributes[n].value) {
+					ninjaWrapper.setAttribute(wrapper.attributes[n].name, wrapper.attributes[n].value);
+				}
+			}
+			//Copying attributes to maintain same properties as the banner content
 			for (var n in banner.attributes) {
 				if (banner.attributes[n].value) {
 					ninjaBanner.setAttribute(banner.attributes[n].name, banner.attributes[n].value);
 				}
 			}
 			//Adjusting margin per size of document
-			//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;
@@ -204,7 +211,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     		//Removing event, only needed on initial load
     		this._observer.body.disconnect();
     		this._observer.body = null;
-    		//Removing loading container
+    		//Removing loading container (should be removed)
     		this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
    			//Getting style and link tags in document
             var stags = this.document.getElementsByTagName('style'),
@@ -218,8 +225,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 				for (i = 0; i < ltags.length; i++) {
 					//
 					if (ltags[i].href) {
-						//TODO: Verify this works for tags in body as well (working in head)
-						this.document.head.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]) || this.document.body.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]);
+						//Inseting <style> right above of <link> to maintain hierarchy
+						try {
+							this.document.head.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i])
+						} catch (e) {
+							this.document.body.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]);
+						}
 						//Disabling tag once it has been reloaded
 						ltags[i].setAttribute('disabled', 'true');
 					} else {
-- 
cgit v1.2.3


From 3ce003c8d99f0043d460b5833c9e5e6bf6a9f0a7 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 11:24:05 -0700
Subject: Adding animation sub-category to new file

Adding animation sub-category to template in new file.
---
 js/io/templates/descriptor.json     | 17 +++++++++++++----
 js/io/templates/files/animation.txt | 18 ++++++++++++++++++
 js/mediators/io-mediator.js         |  2 +-
 3 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100755 js/io/templates/files/animation.txt

(limited to 'js')

diff --git a/js/io/templates/descriptor.json b/js/io/templates/descriptor.json
index 0b2b70e5..9c9c4ac8 100644
--- a/js/io/templates/descriptor.json
+++ b/js/io/templates/descriptor.json
@@ -13,7 +13,7 @@
 		"name":"Template",
 		"uri":"/template",
 		"type":"directory",
-        "children":["js/io/templates/files/banner.txt"]
+        "children":["js/io/templates/files/banner.txt", "js/io/templates/files/animation.txt"]
 	},
 	
 	"js/io/templates/files/html.txt":{
@@ -90,7 +90,7 @@
 		"uri":"js/io/templates/files/banner.txt",
 		"type":"file",
         "fileExtension":".html",
-        "children":["120x600", "160x600", "200x200", "250x250", "300x250", "336x280", "550x400"]
+        "children":["120x600", "160x600", "200x200", "250x250", "300x250", "336x280"]
 	},
     
     "120x600":{
@@ -123,8 +123,17 @@
         "uri": "336x280",
         "type":"file"
     },
-    "550x400":{
-        "name": "Animation Default",
+    
+    "js/io/templates/files/animation.txt":{
+		"name":"Animation",
+		"uri":"js/io/templates/files/animation.txt",
+		"type":"file",
+        "fileExtension":".html",
+        "children":["550x400"]
+	},
+	
+	"550x400":{
+        "name": "Default",
         "uri": "550x400",
         "type":"file"
     }
diff --git a/js/io/templates/files/animation.txt b/js/io/templates/files/animation.txt
new file mode 100755
index 00000000..33b45e53
--- /dev/null
+++ b/js/io/templates/files/animation.txt
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<div class="ninja-content-wrapper">
+	
+	<!-- Created with Motorola Mobility Ninja -->
+	
+	<!-- Ninja-Banner Dimensions@@@ -->
+	
+	<div class="ninja-banner">
+	
+		<style type="text/css">
+			.ninja-content-wrapper {}
+			.ninja-banner {}
+		</style>
+
+	</div>
+
+</div>
\ No newline at end of file
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 7a905fc6..696a69dc 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -77,7 +77,7 @@ exports.IoMediator = Montage.create(Component, {
                 //TODO: Improve template data injection
                 function parseTemplate (content, template) {
                 	//
-                	if (template.name.toLowerCase() === 'banner') {
+                	if (template.name.toLowerCase() === 'banner' || template.name.toLowerCase() === 'animation') {
                 		//Getting dimensions of banner
                 		var dimensions = template.id.split('x');
                 		dimensions = {width: String(dimensions[0])+'px', height: String(dimensions[1])+'px'};
-- 
cgit v1.2.3


From bffc9b2a4bd3480a6e369a36660ce402f7e16aba Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 12:01:37 -0700
Subject: File save for banner template

Adding file save for templates, completing I/O.
---
 js/document/models/base.js  |  2 ++
 js/mediators/io-mediator.js | 47 +++++++++++++++++++++++++++++++++++++--------
 2 files changed, 41 insertions(+), 8 deletions(-)

(limited to 'js')

diff --git a/js/document/models/base.js b/js/document/models/base.js
index 0f58e75c..5f2a5893 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -138,6 +138,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         			file: this.file,
         			webgl: this.webGlHelper.glData,
         			styles: this.getStyleSheets(),
+        			template: this.fileTemplate,
         			document: this.views.design.iframe.contentWindow.document,
         			head: this.views.design.iframe.contentWindow.document.head,
         			body: this.views.design.iframe.contentWindow.document.body
@@ -165,6 +166,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         			file: this.file,
         			webgl: this.webGlHelper.glData,
         			css: this.getStyleSheets(),
+        			template: this.fileTemplate,
         			document: this.views.design.iframe.contentWindow.document,
         			head: this.views.design.iframe.contentWindow.document.head,
         			body: this.views.design.iframe.contentWindow.document.body
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 696a69dc..aa2165c7 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -169,7 +169,11 @@ exports.IoMediator = Montage.create(Component, {
             switch (doc.mode) {
                 case 'html':
                     //Getting content from function to properly handle saving assets (as in external if flagged)
-                    contents = this.parseNinjaTemplateToHtml(doc);
+                    if (doc.template && (doc.template.type === 'banner' || doc.template.type === 'animation')) {
+                    	contents = this.parseNinjaTemplateToHtml(doc, true);
+                    } else {
+                    	contents = this.parseNinjaTemplateToHtml(doc);
+                    }
                     break;
                 default:
                     contents = doc.content;
@@ -214,7 +218,7 @@ exports.IoMediator = Montage.create(Component, {
     //TODO: Expand to allow more templates, clean up variables
     parseNinjaTemplateToHtml: {
         enumerable: false,
-        value: function (template) {
+        value: function (template, ninjaWrapper) {
             var regexRootUrl, rootUrl = this.application.ninja.coreIoApi.rootUrl + escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]));
             regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi');
             //Injecting head and body into old document
@@ -446,7 +450,11 @@ exports.IoMediator = Montage.create(Component, {
                     webglrdgetag.setAttribute('type', 'text/javascript');
                     webglrdgetag.setAttribute('src', rdgeDirName + '/rdge-compiled.js');
                     webglrdgetag.setAttribute('data-ninja-webgl-rdge', 'true');
-                    template.file.content.document.head.appendChild(webglrdgetag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webglrdgetag);
+                    } else {
+                    	template.file.content.document.head.appendChild(webglrdgetag);
+                    }
                 }
                 //
                 if (!webgllibtag) {
@@ -454,20 +462,32 @@ exports.IoMediator = Montage.create(Component, {
                     webgllibtag.setAttribute('type', 'text/javascript');
                     webgllibtag.setAttribute('src', rdgeDirName + '/canvas-runtime.js');
                     webgllibtag.setAttribute('data-ninja-webgl-lib', 'true');
-                    template.file.content.document.head.appendChild(webgllibtag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgllibtag);
+                    } else {
+                    	template.file.content.document.head.appendChild(webgllibtag);
+                    }
                 }
                 //
                 if (!webgltag) {
                     webgltag = template.file.content.document.createElement('script');
                     webgltag.setAttribute('data-ninja-webgl', 'true');
-                    template.file.content.document.head.appendChild(webgltag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgltag);
+                    } else {
+	                    template.file.content.document.head.appendChild(webgltag);
+	                }
                 }
                 //TODO: Remove this tag and place inside JS file
                 if (!webgljstag) {
                     webgljstag = template.file.content.document.createElement('script');
                     webgljstag.setAttribute('type', 'text/javascript');
                     webgljstag.setAttribute('data-ninja-webgl-js', 'true');
-                    template.file.content.document.head.appendChild(webgljstag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgljstag);
+                    } else {
+	                    template.file.content.document.head.appendChild(webgljstag);
+	                }
                 }
                 //TODO: Decide if this should be over-writter or only written on creation
                 var rootElement = 'document.body'; //TODO: Set actual root element
@@ -549,10 +569,15 @@ for (var m in template.mjs) {
 
 
 
-
+			
 
             //Cleaning URLs from HTML
-            var cleanHTML = template.file.content.document.documentElement.outerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+            var cleanHTML;
+            if (ninjaWrapper) {
+            	cleanHTML = template.file.content.document.body.innerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+            } else {
+            	cleanHTML = template.file.content.document.documentElement.outerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+      	    }
             //
             function parseNinjaRootUrl(url) {
                 if (url.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
@@ -561,6 +586,12 @@ for (var m in template.mjs) {
                     return url;
                 }
             }
+            //
+            if (ninjaWrapper) {
+            	cleanHTML = cleanHTML.replace(/ninja-viewport/gi, 'div');
+            	cleanHTML = cleanHTML.replace(/ninja-content/gi, 'div');
+            }
+            
             //
             return this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), ''));
         }
-- 
cgit v1.2.3


From 374ab6d8980b810a1c943b14a1aea07cb85389ad Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 13:26:07 -0700
Subject: Saving body attributes

---
 js/mediators/io-mediator.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'js')

diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index aa2165c7..8346c75e 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -224,8 +224,14 @@ exports.IoMediator = Montage.create(Component, {
             //Injecting head and body into old document
             template.file.content.document.head.innerHTML = template.head.innerHTML.replace(regexRootUrl, '');
             template.file.content.document.body.innerHTML = template.body.innerHTML.replace(regexRootUrl, '');
-            
-            
+            //Copying attributes to maintain same properties as the <body>
+			for (var n in template.body.attributes) {
+				if (template.body.attributes[n].value) {
+					//
+					template.file.content.document.body.setAttribute(template.body.attributes[n].name, template.body.attributes[n].value);
+				}				
+			}
+            //TODO: Add attribute copying for <HEAD> and <HTML>
             
             /*
 //Testing using montage clean up method
-- 
cgit v1.2.3


From 253b8803c71c88a6f87fb1caccd42fa081fc6eca Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 15 May 2012 14:17:41 -0700
Subject: Fixing scrollbar syncing, including pan tool, for banner templates.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/stage/stage.reel/stage.js | 17 +++++++++++------
 js/tools/PanTool.js          | 15 +++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

(limited to 'js')

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index dc6444ff..e66c5b7b 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -464,8 +464,8 @@ exports.Stage = Montage.create(Component, {
                 this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
                 this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
             } else {
-                this._scrollLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft;
-                this._scrollTop = this.application.ninja.currentDocument.documentRoot.scrollTop;
+                this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft;
+                this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop;
 
                 this.userContentLeft = -this._scrollLeft;
                 this.userContentTop = -this._scrollTop;
@@ -512,11 +512,16 @@ exports.Stage = Montage.create(Component, {
      */
     centerStage: {
         value: function() {
-            this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this._documentRoot.parentNode.offsetWidth)/2;
-            this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this._documentRoot.parentNode.offsetHeight)/2;
+            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
+                this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this._documentRoot.parentNode.offsetWidth)/2;
+                this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this._documentRoot.parentNode.offsetHeight)/2;
 
-            this._scrollLeft = this._iframeContainer.scrollLeft;
-            this._scrollTop = this._iframeContainer.scrollTop;
+                this._scrollLeft = this._iframeContainer.scrollLeft;
+                this._scrollTop = this._iframeContainer.scrollTop;
+            } else {
+                this._scrollLeft = this._userContentLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = 0;
+                this._scrollTop = this._userContentTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = 0;
+            }
         }
     },
 
diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js
index 132ac0b1..5cfeec75 100755
--- a/js/tools/PanTool.js
+++ b/js/tools/PanTool.js
@@ -148,8 +148,7 @@ exports.PanTool = Montage.create(toolBase,
 				delta = 10*event.wheelDelta/120;
 			//console.log( "delta: " + delta );
 
-            this.application.ninja.currentDocument.documentRoot.scrollLeft += delta;
-//            this.application.ninja.stage._scrollLeft += delta;
+            this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft += delta;
 
 			delta *= zoom;
            
@@ -330,8 +329,8 @@ exports.PanTool = Montage.create(toolBase,
                 var limitX = false;
                 var limitY = false;
 
-				var oldLeft = this.application.ninja.currentDocument.documentRoot.scrollLeft,
-					oldTop  = this.application.ninja.currentDocument.documentRoot.scrollTop,
+				var oldLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft,
+					oldTop  = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop,
                     newLeft = oldLeft - deltaGPt[0],
                     newTop = oldTop - deltaGPt[1];
                 if((newLeft < 0) || (newLeft > this._maxHorizontalScroll))
@@ -342,10 +341,10 @@ exports.PanTool = Montage.create(toolBase,
                 {
                     limitY = true;
                 }
-                this.application.ninja.currentDocument.documentRoot.scrollLeft -= deltaGPt[0];
-                this.application.ninja.currentDocument.documentRoot.scrollTop  -= deltaGPt[1];
-				deltaGPt[0] = oldLeft - this.application.ninja.currentDocument.documentRoot.scrollLeft;
-				deltaGPt[1] = oldTop  - this.application.ninja.currentDocument.documentRoot.scrollTop;
+                this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft -= deltaGPt[0];
+                this.application.ninja.currentDocument.model.views.design.document.body.scrollTop  -= deltaGPt[1];
+				deltaGPt[0] = oldLeft - this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft;
+				deltaGPt[1] = oldTop  - this.application.ninja.currentDocument.model.views.design.document.body.scrollTop;
 
 				gPt[0] -= deltaGPt[0];
 				gPt[1] -= deltaGPt[1];
-- 
cgit v1.2.3


From 08935db8b1eca984bd384ef2b8db8ebba9e50091 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 14:59:22 -0700
Subject: Fixing overflow on open for template documents

---
 js/document/views/design.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js')

diff --git a/js/document/views/design.js b/js/document/views/design.js
index 48c91aad..c7aab1d7 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -177,7 +177,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 				}
 			}
 			//Adjusting margin per size of document
-			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;}';
+			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-viewport {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
-- 
cgit v1.2.3


From 1ab2c2925fbf6186c8d9872392831f69c61d063d Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 15:11:26 -0700
Subject: Correcting location of Ninja meta data

Needs to be inside most child div.
---
 js/io/templates/files/animation.txt | 7 +++----
 js/io/templates/files/banner.txt    | 9 ++++-----
 2 files changed, 7 insertions(+), 9 deletions(-)

(limited to 'js')

diff --git a/js/io/templates/files/animation.txt b/js/io/templates/files/animation.txt
index 33b45e53..8a3dbd41 100755
--- a/js/io/templates/files/animation.txt
+++ b/js/io/templates/files/animation.txt
@@ -2,12 +2,11 @@
 
 <div class="ninja-content-wrapper">
 	
-	<!-- Created with Motorola Mobility Ninja -->
-	
-	<!-- Ninja-Banner Dimensions@@@ -->
-	
 	<div class="ninja-banner">
 	
+		<!-- Created with Motorola Mobility Ninja -->
+		<!-- Ninja-Banner Dimensions@@@ -->
+	
 		<style type="text/css">
 			.ninja-content-wrapper {}
 			.ninja-banner {}
diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt
index 33b45e53..f26accf6 100755
--- a/js/io/templates/files/banner.txt
+++ b/js/io/templates/files/banner.txt
@@ -2,12 +2,11 @@
 
 <div class="ninja-content-wrapper">
 	
-	<!-- Created with Motorola Mobility Ninja -->
-	
-	<!-- Ninja-Banner Dimensions@@@ -->
-	
 	<div class="ninja-banner">
-	
+		
+		<!-- Created with Motorola Mobility Ninja -->
+		<!-- Ninja-Banner Dimensions@@@ -->
+		
 		<style type="text/css">
 			.ninja-content-wrapper {}
 			.ninja-banner {}
-- 
cgit v1.2.3