3 files changed, 213 insertions, 51 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index 9a7755e6..76436732 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -23,6 +23,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 
     _document: { value: null, enumerable: false },
     _documentRoot: { value: null, enumerable: false },
+    _liveNodeList: { value: null, enumarable: false },
     _stageBG: { value: null, enumerable: false },
     _window: { value: null, enumerable: false },
     _styles: { value: null, enumerable: false },
@@ -53,6 +54,11 @@ exports.HTMLDocument = Montage.create(TextDocument, {
     },
 
 
+    //drawUtils state
+    _gridHorizontalSpacing: {value:0},
+    _gridVerticalSpacing: {value:0},
+    //end - drawUtils state
+
 
     // GETTERS / SETTERS
 
@@ -71,6 +77,16 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         set: function(value) { this._savedTopScroll = value}
     },
 
+    gridHorizontalSpacing:{
+        get: function() { return this._gridHorizontalSpacing; },
+        set: function(value) { this._gridHorizontalSpacing = value}
+    },
+
+    gridVerticalSpacing:{
+        get: function() { return this._gridVerticalSpacing; },
+        set: function(value) { this._gridVerticalSpacing = value}
+    },
+
     selectionExclude: {
         get: function() { return this._selectionExclude; },
         set: function(value) { this._selectionExclude = value; }
@@ -152,51 +168,26 @@ 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
+                        return this._glData;
                 },
 
         set: function(value)
                 {
-                        var nWorlds = value.length;
-                        for (var i=0;  i<nWorlds;  i++)
+                        var elt = this.documentRoot;
+                        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);
                         }
                 }
     },
@@ -377,29 +368,63 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         value: function(event){
                 //TODO: Clean up, using for prototyping save
                 this._templateDocument = {};
+                this._templateDocument.html = this.iframe.contentWindow.document;
                 this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");
                 this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
                 //TODO: Remove, also for prototyping
                 this.application.ninja.documentController._hackRootFlag = true;
                 //
-            //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
             this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
             this.stageBG.onclick = null;
             this._document = this.iframe.contentWindow.document;
             this._window = this.iframe.contentWindow;
             //
-            if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
+            for (var k in this._document.styleSheets) {
+                if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) {
+                        this._document.styleSheets[k].ownerNode.setAttribute('data-ninja-template', 'true');
+                }
+            }
             //
+            if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
+            //Inserting user's document into template
             this._templateDocument.head.innerHTML = this._userDocument.content.head;
             this._templateDocument.body.innerHTML = this._userDocument.content.body;
-
-            // Adding a handler for the main user document reel to finish loading.
+            //TODO: Use querySelectorAll
+            var scripttags = this._templateDocument.html.getElementsByTagName('script'), webgldata;
+            //
+            for (var w in scripttags) {
+                if (scripttags[w].getAttribute) {
+                        if (scripttags[w].getAttribute('data-ninja-webgl') !== null) {
+                                //TODO: Add logic to handle more than one data tag
+                                webgldata = JSON.parse((scripttags[w].innerHTML.replace("(", "")).replace(")", ""));
+                        }
+                }
+            }
+            //
+            if (webgldata) {
+                for (var n=0; webgldata.data[n]; n++) {
+                        webgldata.data[n] = unescape(webgldata.data[n]);
+                }
+                this._templateDocument.webgl = webgldata.data;
+            }
+            
+            
+            //Adding a handler for the main user document reel to finish loading
             this._document.body.addEventListener("userTemplateDidLoad",  this.userTemplateDidLoad.bind(this), false);
 
-            
+            // Live node list of the current loaded document
+            this._liveNodeList = this.documentRoot.getElementsByTagName('*');
+
+            // TODO Move this to the appropriate location
+            var len = this._liveNodeList.length;
+
+            for(var i = 0; i < len; i++) {
+                NJUtils.makeModelFromElement(this._liveNodeList[i]);
+            }
+
             /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
 
-            //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified
+            //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified
             setTimeout(function () {
                 
                 
@@ -408,8 +433,80 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                 if(this._document.styleSheets.length > 1) {
-                                        this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
-                                        this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
+                                        //Checking all styleSheets in document
+                                        for (var i in this._document.styleSheets) {
+                                                //If rules are null, assuming cross-origin issue
+                                                if(this._document.styleSheets[i].rules === null) {
+                                                        //TODO: Revisit URLs and URI creation logic, very hack right now
+                                                        var fileUri, cssUrl, cssData, tag, query;
+                                                        if (this._document.styleSheets[i].href.indexOf('js/document/templates/montage-html') !== -1) {
+                                                                //Getting the url of the CSS file
+                                                                cssUrl = this._document.styleSheets[i].href.split('js/document/templates/montage-html')[1];
+                                                                //Creating the URI of the file (this is wrong should not be splitting cssUrl)
+                                                                fileUri = this.application.ninja.coreIoApi.cloudData.root+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+cssUrl.split('/')[1];
+                                                                //Loading the data from the file
+                                                                cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
+                                                                //Creating tag with file content
+                                                                tag = this.iframe.contentWindow.document.createElement('style');
+                                                                tag.setAttribute('type', 'text/css');
+                                                                tag.setAttribute('data-ninja-uri', fileUri);
+                                                                tag.set