12 files changed, 455 insertions, 172 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 567e4455..9bbea4c9 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -63,17 +63,19 @@ 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
             });
             //Initiliazing views and hiding
-                if (this.model.views.design.initialize(document.getElementById("iframeContainer"))) {
+                if (this.model.views.design.initialize(this.model.parentContainer)) {
                         //Hiding iFrame, just initiliazing
                         this.model.views.design.hide();
                 } else {
@@ -96,16 +98,20 @@ 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.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});
-                }.bind(this));
+                }.bind(this), template);
             } else {
                 //TODO: Identify default view (probably code)
             }
@@ -123,6 +129,40 @@ exports.HtmlDocument = Montage.create(Component, {
             //Setting opacity to be viewable after load
                         this.model.views.design.iframe.style.opacity = 1;
         }
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
+        closeDocument: {
+                value: function () {
+                        //
+                        this.model.close(null, this.handleCloseDocument.bind(this));
+                }
+        },
+        ////////////////////////////////////////////////////////////////////
+        //
+        handleCloseDocument: {
+                value: function (success) {
+                        //TODO: Add logic for handling success or failure
+                        //
+                        this.application.ninja.documentController._documents.splice(this.uuid, 1);
+                        //
+                        NJevent("closeDocument", this.model.file.uri);
+                        //TODO: Delete object here
+                }
+        },
+    ////////////////////////////////////////////////////////////////////
+        //
+    saveAppState: {
+        value: function () {
+                //TODO: Import functionality
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
+    restoreAppState: {
+        value: function () {
+                //TODO: Import functionality
+        }
     }
     ////////////////////////////////////////////////////////////////////
     ////////////////////////////////////////////////////////////////////
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 746922ad..5f2a5893 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -62,55 +62,154 @@ exports.BaseDocumentModel = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
         //
+    fileTemplate: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
+    parentContainer: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
         views: {
         value: null
     },
     ////////////////////////////////////////////////////////////////////
         //
         switchViewTo: {
-        value: function () {
+        value: function (view) {
                 //
         }
     },
     ////////////////////////////////////////////////////////////////////
-        //
+        //TODO: Add API to allow other browser support
         browserPreview: {
         value: function (browser) {
-                //
-                switch (browser) {
-                        case 'chrome':
-                                break;
-                        default:
-                                break;
-                }
+                //Generating URL for document
+                var url = this.application.ninja.coreIoApi.rootUrl + this.file.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1];
+                //TODO: Add logic to prompt user to save (all) before preview
+                this.saveAll(function (result) {
+                        //Currently only supporting current browser (Chrome, obviously)
+                        switch (this.browser) {
+                                case 'chrome':
+                                        window.open(this.url);
+                                        break;
+                        default:
+                                        window.open(this.url);
+                                        break;
+                        }
+                }.bind({browser: browser, url: url}));
         }
     },
     ////////////////////////////////////////////////////////////////////
         //
+        getStyleSheets: {
+                value: function () {
+                        //
+                        var styles = [];
+                //
+                for (var k in this.views.design.iframe.contentWindow.document.styleSheets) {
+                        if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode && this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute) {
+                        if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute('data-ninja-template') === null) {
+                                styles.push(this.views.design.iframe.contentWindow.document.styleSheets[k]);
+                        }
+                }
+                }
+                //
+                return styles;
+                }
+        },
+    ////////////////////////////////////////////////////////////////////
+        //
         save: {
-        value: function () {
+        value: function (callback) {
+                //
+                if (this.needsSave) {
+                        //Save
+                } else {
+                        //Ignore command
+                }
                 //
+                if (this.currentView === this.views.design) {
+                //
+                        this.application.ninja.ioMediator.fileSave({
+                                mode: 'html',
+                                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