20 files changed, 549 insertions, 295 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 4be0767a..7795a74d 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -483,6 +483,8 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
 
             if(!this.webTemplate) {
                 this._showCurrentDocument();
+            } else {
+                this.application.ninja.stage.stageView.showRulers();
             }
 
             this.webTemplate = false;
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index fbbb7c6e..14aeae24 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -12,6 +12,17 @@ exports.BodyController = Montage.create(ElementController, {
     // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat"
     set3DProperties: {
         value: function(el, props, update3DModel) {
+            var dist = props["dist"], mat = props["mat"];
+            this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true);
+
+            el.elementModel.props3D.matrix3d = mat;
+            el.elementModel.props3D.perspectiveDist = dist;
+
+            this.application.ninja.stage.updatedStage = true;
+
+            if(update3DModel) {
+                this._update3DProperties(el, mat, dist);
+            }
         }
     },
 
@@ -40,5 +51,45 @@ exports.BodyController = Montage.create(ElementController, {
                 return dist;
             }
         }
+    },
+
+    getMatrix: {
+        value: function(el) {
+            if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d)
+            {
+                return el.elementModel.props3D.matrix3d.slice(0);
+            }
+            else
+            {
+                var mat;
+
+                if (el)
+                {
+                    mat = this.application.ninja.stylesController.getMatrixFromElement(el, true);
+                    if (!mat) {
+                        mat = Matrix.I(4);
+                    }
+
+                    var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
+                    if (zoom)
+                    {
+                        zoom = Number(zoom);
+                        if (zoom != 1)
+                        {
+                            var zoomMat = Matrix.create(  [
+                                [ zoom,    0,    0, 0],
+                                [    0, zoom,    0, 0],
+                                [    0,    0, zoom, 0],
+                                [    0,    0,    0, 1]
+                            ] );
+                            glmat4.multiply( zoomMat, mat, mat );
+                        }
+                    }
+                }
+
+                el.elementModel.props3D.matrix3d = mat;
+                return mat;
+            }
+        }
     }
 });
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 3dbf96ce..9d083dd8 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -207,16 +207,16 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                         var elt = this.documentRoot;
                         if (elt)
                         {
+                                /*
+                                // Use this code to test the runtime version of WebGL
+                                var cdm = new NinjaCvsRt.CanvasDataManager();
+                                cdm.loadGLData(elt,  value,  null );
+                                */
+
+                                // /*
                                 var nWorlds= value.length;
                                 for (var i=0;  i<nWorlds;  i++)
                                 {
-                                        /*
-                                        // Use this code to test the runtime version of WebGL
-                                        var cdm = new NinjaCvsRt.CanvasDataManager();
-                                        cdm.loadGLData(elt,  value,  null );
-                                        */
-
-                                        // /*
                                         // get the data for the next canvas
                                         var importStr = value[i];
 
@@ -228,7 +228,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                         {
                                                 // JSON format.  pull off the
                                                 importStr = importStr.substr( index+1 );
-                                                jObj = jObj = JSON.parse( importStr );
+                                                jObj = JSON.parse( importStr );
                                                 id = jObj.id;
                                         }
                                         else
@@ -281,8 +281,8 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                                         }
                                                 }
                                         }
-                                        // */
                                 }
+                                // */
                         }
                 }
     },
diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css
index 08e39f22..e62a20a9 100755
--- a/js/document/templates/montage-web/default_html.css
+++ b/js/document/templates/montage-web/default_html.css
@@ -10,6 +10,15 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
     -webkit-animation-name: none !important;
 }
 
+body {
+    margin: 0;
+    padding: 0;
+
+    position: absolute;
+    -webkit-transform-style: preserve-3d;
+    -webkit-perspective: 1400px;
+}
+
 .active-element-outline {
     outline: #adff2f solid 2px;
 }
diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html
index 630794a4..caebc8d0 100755
--- a/js/document/templates/montage-web/index.html
+++ b/js/document/templates/montage-web/index.html
@@ -29,20 +29,10 @@
         }
         </script>
 
-        <style>
-            div {
-                width: 4000px;
-                height: 300px;
-                background: red;
-            }
-        </style>
-
         </head>
 
         <body>
-                
-                <!--<div>IPSUM</div>-->
-
+        <style></style>
         </body>
 
 </html>
\ No newline at end of file
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 7bd77c3a..88830964 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -583,17 +583,25 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         // get a point that lies on the plane
                         var ptOnPlane = MathUtils.getPointOnPlane(this._workingPlane);
 
+            // define the grid parameters
+            var width,
+                height,
+                nLines = 10;
+
+//            if(this.application.ninja.documentController.webTemplate) {
+            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+                width = this.application.ninja.currentDocument.documentRoot.scrollWidth;