39 files changed, 1277 insertions, 657 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 4d450208..f085f6be 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -212,6 +212,10 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
 
+.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
+
+.montage-editor { padding: 0px; word-wrap: normal; }
+
 .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; }
 
 .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; }
@@ -888,49 +892,34 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 /*width: 26px;*/
 /*opacity: 0.7;*/
 /*}*/
-/*//  Selection Tool Options  */
-/*.topAlignUp {*/
-/*@include background-pos(8,2,26px,23px);*/
-/*}*/
-/*.rightAlignUp {*/
-/*@include background-pos(9,2,26px,23px);*/
-/*}*/
-/*.bottomAlignUp {*/
-/*@include background-pos(10,2,26px,23px);*/
-/*}*/
-/*.verticalLeftUp {*/
-/*@include background-pos(11,2,26px,23px);*/
-/*}*/
-/*.verticalCenterUp {*/
-/*@include background-pos(12,2,26px,23px);*/
-/*}*/
-/*.verticalRightUp {*/
-/*@include background-pos(13,2,26px,23px);*/
-/*}*/
-/*.distRightUp {*/
-/*@include background-pos(0,3,26px,23px);*/
-/*}*/
-/*.distLeftUp {*/
-/*@include background-pos(14,2,26px,23px);*/
-/*}*/
-/*.distCenterUp {*/
-/*@include background-pos(2,3,26px,23px);*/
-/*}*/
-/*.distTopUp {*/
-/*@include background-pos(1,3,26px,23px);*/
-/*}*/
-/*.distBottomUp {*/
-/*@include background-pos(3,3,26px,23px);*/
-/*}*/
-/*.distVCenterUp {*/
-/*@include background-pos(15,2,26px,23px);*/
-/*}*/
-/*.bucketToolUp {*/
-/*@include background-pos(11,0,26px,23px);*/
-/*}*/
-/*.pencilToolUp {*/
-/*@include background-pos(9,1,26px,23px);*/
-/*}*/
+.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.pencilToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
 .blueDiv { background: blue; opacity: 0.2; }
 
 ::-webkit-scrollbar { width: 11px; height: 11px; }
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 6f7d098f..e221df68 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -86,8 +86,12 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         //
     handleAppLoaded: {
         value: function() {
-            //Checking for app not to be loaded via http/https to add app only listener
-            if (window.location.protocol !== 'http:' && window.location.protocol !== 'https:') {
+            //Checking for app to be loaded through extension
+            var check;
+            if (chrome && chrome.app) {
+                check = chrome.app.getDetails();
+            }
+            if (check !== null) {
                 //Adding an intercept to resources loaded to ensure user assets load from cloud simulator
                 chrome.webRequest.onBeforeRequest.addListener(this.handleWebRequest.bind(this), {urls: ["<all_urls>"]}, ["blocking"]);
             }
diff --git a/js/document/html-document.js b/js/document/html-document.js
index c5293386..8798b407 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -168,13 +168,13 @@ exports.HTMLDocument = Montage.create(TextDocument, {
     glData: {
         get: function()
                 {
-                        var elt = this.iframe;
                         var elt = this.iframe.contentWindow.document.getElementById("UserContent");
                         this._glData = null;
                         if (elt)
                         {
-                                this._glData = new Array();
-                                this.collectGLData( elt,  this._glData );
+                                var cdm = new CanvasDataManager();
+                                this._glData = [];
+                                cdm.collectGLData( elt,  this._glData );
                         }
                                 
                         return this._glData
@@ -182,37 +182,12 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 
         set: function(value)
                 {
-                        var nWorlds = value.length;
-                        for (var i=0;  i<nWorlds;  i++)
+                        var elt = this.iframe.contentWindow.document.getElementById("UserContent");
+                        if (elt)
                         {
-                                var importStr = value[i];
-                                var startIndex = importStr.indexOf( "id: " );
-                                if (startIndex >= 0)
-                                {
-                                        var endIndex = importStr.indexOf( "\n", startIndex );
-                                        if (endIndex > 0)
-                                        {
-                                                var id = importStr.substring( startIndex+4, endIndex );
-                                                var canvas = this.iframe.contentWindow.document.getElementById( id );
-                                                if (canvas)
-                                                {
-                                                        if (!canvas.elementModel)
-                                                        {
-                                                                NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
-                                                        }
-                                                                
-                                                        if (canvas.elementModel)
-                                                        {
-                                                                if (canvas.elementModel.shapeModel.GLWorld)
-                                    canvas.elementModel.shapeModel.GLWorld.clearTree();
-
-                                                                var world = new GLWorld( canvas );
-                                                                canvas.elementModel.shapeModel.GLWorld = world;
-                                                                world.import( importStr );
-                                                        }
+                                console.log( "load canvas data: " + value );
+                                var cdm = new CanvasDataManager();
+                                cdm.loadGLData(elt,  value);