4 files changed, 74 insertions, 21 deletions

diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js
index 17fa553c..c3e8033b 100755
--- a/js/document/mediators/template.js
+++ b/js/document/mediators/template.js
@@ -334,7 +334,9 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
             var webgltag, webgllibtag, webglrdgetag, mjstag, mjslibtag, matchingtags = [],
                 scripts = template.file.content.document.getElementsByTagName('script'),
                 libsobserver = {montage: false, canvas: false, montageCopied: null, canvasCopied: null, callback: libCopyCallback, dispatched: false};
-            
+            //TODO: Clean up, this is messy
+            if (mJsSerialization) libsobserver.montage = true;
+            if (template.webgl && template.webgl.length > 1) libsobserver.canvas = true;
             //
             for (var i in scripts) {
                 if (scripts[i].getAttribute) {
@@ -378,7 +380,6 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                     if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'RDGE') {
                         rdgeDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase();
                         rdgeVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version;
-                        libsobserver.canvas = true;
                         this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, rdgeDirName, function(result) {libsobserver.canvasCopied = result; this.libCopied(libsobserver);}.bind(this));
                     } else {
                         //TODO: Error handle no available library to copy
@@ -505,7 +506,6 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                     if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'Montage') {
                         mjsDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase();
                         mjsVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version;
-                        libsobserver.montage = true;
                         this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, mjsDirName, function(result) {libsobserver.montageCopied = result; this.libCopied(libsobserver);}.bind(this));
                         
                         
@@ -589,7 +589,11 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                 cleanHTML = cleanHTML.replace(/ninja-content/gi, 'div');
             }
             //
-            return this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), ''));
+            if (libsobserver.montage || libsobserver.canvas) {
+                return {content: this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), '')), libs: true};
+            } else {
+                    return {content: this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), '')), libs: false};
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
@@ -614,7 +618,7 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                                     if (observer.callback && !observer.dispatched) observer.callback(false);
                                     observer.dispatched = true;
                             }
-                    } else if (observer.canvas && observer.canvasCopied) {
+                    } else if (observer.canvas) {
                             //
                             if (observer.canvasCopied) {
                                     if (observer.callback && !observer.dispatched) observer.callback(true);
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 27f7d43f..0957145a 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -99,11 +99,20 @@ exports.BaseDocumentModel = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
         //TODO: Add API to allow other browser support
         browserPreview: {
-        value: function (browser) {
+        value: function (browser, screen, context) {
+                //Making call to show feedback screen
+                if (screen) screen.show(context);
                 //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(null,function (result) {
+                this.saveAll(null,function (success) {
+                        //Making call to show feedback screen
+                        if (screen) screen.hide(context);
+                        //TODO: Add error handling logic
+                        if (!success) {
+                                console.log('Error!');
+                                return;
+                        }
                         //Currently only supporting current browser (Chrome, obviously)
                         switch (this.browser) {
                                 case 'chrome':
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index c5ec951e..c9e10896 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -152,29 +152,38 @@ exports.IoMediator = Montage.create(Component, {
         }
     },
     ////////////////////////////////////////////////////////////////////
-    //
+    //TODO: Optimize
     fileSave: {
         value: function (doc, callback, libCopyCallback) {
             //
-            var contents, save;
+            var content, parsedDoc, save;
             //
             switch (doc.mode) {
                 case 'html':
                     //Getting content from function to properly handle saving assets (as in external if flagged)
                     if (doc.template && (doc.template.type === 'banner' || doc.template.type === 'animation')) {
-                        contents = this.tmplt.parseNinjaTemplateToHtml(doc, true, libCopyCallback);
+                        parsedDoc = this.tmplt.parseNinjaTemplateToHtml(doc, true, libCopyCallback);
                     } else {
-                        contents = this.tmplt.parseNinjaTemplateToHtml(doc, false, libCopyCallback);
+                        parsedDoc = this.tmplt.parseNinjaTemplateToHtml(doc, false, libCopyCallback);
                     }
                     break;
                 default:
-                    contents = doc.content;
+                    content = doc.content;
                     break;
             }
-            //Making call to save file
-            save = this.fio.saveFile({ uri: doc.file.uri, contents: contents });
-            //Checking for callback
-            if (callback) callback(save);
+            if (parsedDoc) {
+                //Making call to save file
+                save = this.fio.saveFile({uri: doc.file.uri, contents: parsedDoc.content});
+                //Checking for callback
+                if (callback) callback(save);
+                //
+                if (!parsedDoc.libs && libCopyCallback) libCopyCallback(true); 
+            } else {
+                    //Making call to save file
+                save = this.fio.saveFile({uri: doc.file.uri, contents: content});
+                //Checking for callback
+                if (callback) callback(save);
+            }
         }
     },
     ////////////////////////////////////////////////////////////////////
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index a12270a0..38f5efcf 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -4,10 +4,11 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component   = require("montage/ui/component").Component,
-    UndoManager = require("montage/core/undo-manager").UndoManager,
-    AppData     = require("js/data/appdata").AppData;
+var Montage =           require("montage/core/core").Montage,
+    Component =         require("montage/ui/component").Component,
+    UndoManager =       require("montage/core/undo-manager").UndoManager,
+    AppData =           require("js/data/appdata").AppData,
+    Popup =             require("js/components/popup.reel").Popup;
 
 var matrix = require("js/lib/math/matrix");
 var NjUtils = require("js/lib/NJUtils").NJUtils;
@@ -195,14 +196,44 @@ exports.Ninja = Montage.create(Component, {
     
     
     ////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
         //TODO: Expand method to allow other browsers for preview
     executeChromePreview: {
         value: function () {
-                this.currentDocument.model.browserPreview('chrome');
+                //TODO: Make into proper component
+                this.saveOperationScreen = {};
+                this._saveOperationPopup = {};
+                //Show
+                this.saveOperationScreen.show = function (ctxt) {
+                        //
+                        ctxt._saveOperationPopup.blackout = document.createElement('div');
+                        ctxt._saveOperationPopup.blackout.style.width = '100%';
+                        ctxt._saveOperationPopup.blackout.style.height = '100%';
+                        ctxt._saveOperationPopup.blackout.style.background = 'rgba(0,0,0,0.8)'; //'-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,0.8) 80%)';
+                        ctxt.application.ninja.popupManager.addPopup(ctxt._saveOperationPopup.blackout);
+                };
+                //Hide
+                this.saveOperationScreen.hide = function (ctxt) {
+                        ctxt.application.ninja.popupManager.removePopup(ctxt._saveOperationPopup.blackout);
+                };
+                //
+                this.currentDocument.model.browserPreview('chrome', this.saveOperationScreen, this);
         }
     },
         ////////////////////////////////////////////////////////////////////
         
+        //TODO: Make into proper component
+        _saveOperationPopup: {
+                value: null
+        },
+        //TODO: Make into proper component
+        saveOperationScreen: {
+                value: null
+        },
+        
+        ////////////////////////////////////////////////////////////////////
+        ////////////////////////////////////////////////////////////////////
+        
         
     handleResize: {
         value: function() {