2 files changed, 97 insertions, 57 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index ed1569d4..8f9d2870 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -9,7 +9,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage =           require("montage/core/core").Montage,
     TextDocument =      require("js/document/text-document").TextDocument,
     NJUtils =           require("js/lib/NJUtils").NJUtils,
-        GLWorld =                       require("js/lib/drawing/world").World;
+        GLWorld =                       require("js/lib/drawing/world").World,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.HTMLDocument = Montage.create(TextDocument, {
@@ -193,12 +194,9 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                         var elt = this.iframe.contentWindow.document.getElementById("UserContent");
                         //
                         if (elt) {
-                                this._glData = [];
-                                //if (path) {
-                                        //this.collectGLData(elt, this._glData, path);
-                                //} else {
-                                        this.collectGLData(elt, this._glData );
-                                //}
+                var matLib = MaterialsModel.exportMaterials();
+                                this._glData = [matLib];
+                                this.collectGLData(elt, this._glData );
                         } else {
                                 this._glData = null
                         }
@@ -219,29 +217,74 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                         */
 
                                         // /*
+                                        // get the data for the next canvas
                                         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 );
-                                                        if (id) {
-                                                                var canvas = this.findCanvasWithID( id, elt );
-                                                                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 index = importStr.indexOf( "webGL: " );
-                                                                                var useWebGL = (index >= 0)
-                                                                                var world = new GLWorld( canvas, useWebGL );
-                                                                                world.import( importStr );
-                                                                                this.buildShapeModel( canvas.elementModel, world );
-                                                                        }
+
+                                        // determine if it is the new (JSON) or old style format
+                                        var id = null;
+                                        var jObj = null;
+                                        var index = importStr.indexOf( ';' );
+                                        if ((importStr[0] === 'v') && (index < 24))
+                                        {
+                                                // JSON format.  pull off the
+                                                importStr = importStr.substr( index+1 );
+                                                jObj = jObj = JSON.parse( importStr );
+                                                id = jObj.id;
+                                        }
+                                        else
+                                        {
+                        // at this point the data could be either the materials library or
+                        // an old style world.  We can determine which by converting the string
+                        // to an object via JSON.parse.  That operation will fail if the string
+                        // is an old style world.
+                        var matLibStr = 'materialLibrary;';
+                        index = importStr.indexOf( matLibStr );
+                        if (index == 0)
+                        {
+                            importStr = importStr.substr( matLibStr.length );
+                            var matLibObj = JSON.parse( importStr );
+                            MaterialsModel.importMaterials( matLibObj );
+                        }
+                        else
+                        {
+                                                    var startIndex = importStr.indexOf( "id: " );
+                                                    if (startIndex >= 0) {
+                                                            var endIndex = importStr.indexOf( "\n", startIndex );
+                                                            if (endIndex > 0)
+                                                                    id = importStr.substring( startIndex+4, endIndex );
+                                                    }
+                        }
+                                        }
+
+                                        if (id != null)
+                                        {
+                                                var canvas = this.findCanvasWithID( id, elt );
+                                                if (canvas)
+                                                {
+                                                        if (!canvas.elementModel)
+                                                        {
+                                                                NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
+                                                        }
+                                                        if (canvas.elementModel)
+                                                        {
+                                                                if (canvas.elementModel.shapeModel.GLWorld)
+                                                                        canvas.elementModel.shapeModel.GLWorld.clearTree();
+
+                                                                if (jObj)
+                                                                {
+                                                                        var useWebGL = jObj.webGL;
+                                                                        var world = new GLWorld( canvas, useWebGL );
+                                                                        world.importJSON( jObj );
+                                                                }
+                                                                else
+                                                                {
+                                                                        var index = importStr.indexOf( "webGL: " );
+                                                                        var useWebGL = (index >= 0);
+                                                                        var world = new GLWorld( canvas, useWebGL );
+                                                                        world.import( importStr );
                                                                 }
+
+                                                                this.buildShapeModel( canvas.elementModel, world );
                                                         }
                                                 }
                                         }
@@ -265,7 +308,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 shapeModel.GLGeomObj                    = root;
                                 shapeModel.strokeSize                   = root._strokeWidth;
                                 shapeModel.stroke                               = root._strokeColor.slice();
-                                shapeModel.strokeMaterial               = root._strokeMaterial.dup();
+                                shapeModel.strokeMaterial               = root._strikeMaterial ? root._strokeMaterial.dup() : null;
                                 shapeModel.strokeStyle                  = "solid";
                                 //shapeModel.strokeStyleIndex
                                 //shapeModel.border
@@ -276,7 +319,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                         elementModel.selection = "Rectangle";
                         elementModel.pi = "RectanglePi";
                         shapeModel.fill                                 = root._fillColor.slice();
-                        shapeModel.fillMaterial                 = root._fillMaterial.dup();
+                        shapeModel.fillMaterial                 = root._fillMaterial ? root._fillMaterial.dup() : null;
                                                 shapeModel.tlRadius = root._tlRadius;
                                                 shapeModel.trRadius = root._trRadius;
                                                 shapeModel.blRadius = root._blRadius;
@@ -287,7 +330,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                         elementModel.selection = "Oval";
                         elementModel.pi = "OvalPi";
                         shapeModel.fill                                 = root._fillColor.slice();
-                        shapeModel.fillMaterial                 = root._fillMaterial.dup();
+                        shapeModel.fillMaterial                 = root._fillMaterial ? root._fillMaterial.dup() : null;
                                                 shapeModel.innerRadius = root._innerRadius;
                                                 break;
 
@@ -382,7 +425,8 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                 {
                         if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
                         {
-                                var data = elt.elementModel.shapeModel.GLWorld.export();
+                                var data = elt.elementModel.shapeModel.GLWorld.exportJSON();
+                                //var data = elt.elementModel.shapeModel.GLWorld.export();
                                 dataArray.push( data );
                         }
 
@@ -827,7 +871,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                 //TODO: Add logic to handle save before preview
                 this.application.ninja.documentController.handleExecuteSaveAll(null);
                 //Temp check for webGL Hack
-                if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 0) {
+                if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 1) {//TODO: Should be 0, temp hack fix
                         setTimeout(function () {window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);}.bind(this), 3500);
                 } else {
                         window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
@@ -850,6 +894,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 }
                         }
                 }
+                        //return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                         return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                 } else if (this.currentView === "code"){
                         //TODO: Would this get call when we are in code of HTML?
@@ -873,6 +918,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                 }
                         }
                 }
+                        //return {mode: 'html', document: this._userDocument, mjs: this._userComponents, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                         return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                 } else if (this.currentView === "code"){
                         //TODO: Would this get call when we are in code of HTML?
diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js
index 567f481c..019c675e 100644
--- a/js/document/templates/montage-html/main.reel/main.j