17 files changed, 300 insertions, 179 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 0fd13be2..d88059ab 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -99,7 +99,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
                         //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/montage-web/'))[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]};
                         }
                 }
     },
@@ -244,20 +244,20 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
         }
     },
         
+        
+        
+        ////////////////////////////////////////////////////////////////////
+        //
     createNewFile:{
         value:function(newFileObj){
-            //console.log(newFileObj);//contains the template uri and the new file uri
+            //
             if(!newFileObj) return;
-            this.application.ninja.ioMediator.fileNew(newFileObj.newFilePath, newFileObj.fileTemplateUri, this.openNewFileCallback.bind(this));
-
-            if((newFileObj.fileExtension !== ".html") && (newFileObj.fileExtension !== ".htm")){//open code view
-
-                } else {
-                //open design view
-                }
+            //
+            this.application.ninja.ioMediator.fileNew(newFileObj.newFilePath, newFileObj.fileTemplateUri, this.openNewFileCallback.bind(this), newFileObj.template);
         }
     },
-
+        ////////////////////////////////////////////////////////////////////
+        
     /**
      * Public method
      * doc contains:
@@ -374,6 +374,12 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
     },
     openWebDocument: {
         value: function(doc) {
+                var template, dimensions;
+                if (doc.content.body.indexOf('Ninja-Banner Dimensions@@@') !== -1) {
+                        dimensions = (doc.content.body.split('Ninja-Banner Dimensions@@@'))[1].split('-->')[0].split('x');
+                        dimensions = {width: parseInt(dimensions[0]), height: parseInt(dimensions[1])};
+                        template = {type: 'banner', size: dimensions};
+                }
             // TODO: HACKS to remove
                         this.documentHackReference = doc;
             document.getElementById("iframeContainer").style.overflow = "hidden";
@@ -382,7 +388,7 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
                                 case 'html':
                                         //Open in designer view
                     this._hackRootFlag = false;
-                    Montage.create(Document).init(doc, this, this._onOpenDocument, 'design');
+                    Montage.create(Document).init(doc, this, this._onOpenDocument, 'design', template);
                                         break;
                                 default:
                                         //Open in code view
diff --git a/js/document/document-html.js b/js/document/document-html.js
index e00333f0..7e1f1806 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -63,13 +63,14 @@ exports.HtmlDocument = Montage.create(Component, {
         ////////////////////////////////////////////////////////////////////
         //
     init: {
-        value:function(file, context, callback, view, template) { //TODO: Add template support logic
+        value:function(file, context, callback, view, template) {
                 //Storing callback data for loaded dispatch
                 this.loaded.callback = callback;
                 this.loaded.context = context;
             //Creating instance of HTML Document Model
             this.model = Montage.create(HtmlDocumentModel,{
                 file: {value: file},
+                fileTemplate: {value: template},
                 parentContainer: {value: document.getElementById("iframeContainer")}, //Saving reference to parent container of all views (should be changed to buckets approach
                 views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic
             });
@@ -97,8 +98,13 @@ exports.HtmlDocument = Montage.create(Component, {
                 this.model.views.design.render(function () {
                         //TODO: Identify and remove usage of '_document'
                         this._document = this.model.views.design.document;
-                                //TODO: Remove usage, seems as not needed
-                        this.documentRoot = this.model.views.design.document.body;
+                        //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];
+                                } else {
+                                        this.documentRoot = this.model.views.design.document.body;
+                                }
                         //TODO: Why is this needed?
                         this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
                         //Initiliazing document model
@@ -106,7 +112,7 @@ exports.HtmlDocument = Montage.create(Component, {
                         //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});
-                }.bind(this));
+                }.bind(this), template);
             } else {
                 //TODO: Identify default view (probably code)
             }
diff --git a/js/document/models/base.js b/js/document/models/base.js
index ebfb73b8..0f58e75c 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -62,6 +62,11 @@ exports.BaseDocumentModel = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
         //
+    fileTemplate: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
     parentContainer: {
         value: null
     },
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
new file mode 100755
index 00000000..2cd82f51
--- /dev/null
+++ b/js/document/templates/banner/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+ 
+ 
+<!-- 
+        NOTE(s):
+        All elements in the head of the document to be exclude from I/O
+        must set the 'data-ninja-template'
+        data-ninja-template="true"
+-->
+<html>
+
+        <head>
+        
+        <style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
+                * {
+                        -webkit-transition-duration: 0s !important;
+                        -webkit-animation-duration: 0s !important;
+                        -webkit-animation-name: none !important;
+                        }
+                        
+                        body {
+                                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 {
+                overflow: scroll;
+            }
+
+            html, body {
+                width: 100%;
+                height: 100%;
+                background: #666;
+            }
+                        
+                        ninjaloadinghack {
+                                display: none;
+                        }
+
+                        .active-element-outline {