8 files changed, 121 insertions, 42 deletions

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/document/views/design.js b/js/document/views/design.js
index 4c91ff39..c7aab1d7 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -160,17 +160,24 @@ 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;}';
+                        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
@@ -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 {
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..8a3dbd41
--- /dev/null
+++ b/js/io/templates/files/animation.txt
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<div class="ninja-content-wrapper">
+        
+        <div class="ninja-banner">
+        
+                <!-- Created with Motorola Mobility Ninja -->
+                <!-- Ninja-Banner Dimensions@@@ -->
+        
+                <style type="text/css">
+                        .ninja-content-wrapper {}
+                        .ninja-banner {}
+                </style>
+
+        </div>
+
+</div>
\ No newline at end of file
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 {}
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 7a905fc6..8346c75e 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'};
@@ -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,14 +218,20 @@ exports.IoMediator = Montage.create(Component, {
     //TODO: Expand to allow more templates, clean up variables
     parseNinjaTemplateToHtml: {
         enumerable: false,
-        value: function (template) {
+        value: function (template, ninjaWrapper) {