10 files changed, 205 insertions, 56 deletions

diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 839d0787..14aeae24 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -51,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/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 452d09f1..ea5fe4af 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,7 +11,18 @@ exports.ElementController = Montage.create(Component, {
 
     addElement: {
         value: function(el, styles) {
-            this.application.ninja.currentDocument.documentRoot.appendChild(el);
+            if(this.application.ninja.timeline.currentLayerSelected) {
+                var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID);
+
+                if(selectedLayerIndex === 0) {
+                    this.application.ninja.currentDocument.documentRoot.appendChild(el);
+                } else {
+                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0];
+                    element.parentNode.insertBefore(el, element.nextSibling);
+                }
+            } else {
+                this.application.ninja.currentDocument.documentRoot.appendChild(el);
+            }
             // Nested elements - TODO make sure the CSS is correct before nesting elements
             // this.application.ninja.currentSelectedContainer.appendChild(el);
             if(styles) {
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;
+                height = this.application.ninja.currentDocument.documentRoot.scrollHeight;
+            } else {
+                width = this.snapManager.getStageWidth();
+                height = this.snapManager.getStageHeight();
+            }
                         // get a matrix from working plane space to the world
                         var mat = this.getPlaneToWorldMatrix(zAxis, ptOnPlane);
-                        var tMat = Matrix.Translation( [0.5*this.snapManager.getStageWidth(), 0.5*this.snapManager.getStageHeight(),0] );
+                        var tMat = Matrix.Translation( [0.5*width, 0.5*height, 0] );
                         //mat = tMat.multiply(mat);
                         glmat4.multiply( tMat, mat, mat);
 
-                        // define the grid parameters
-                        var width = this.snapManager.getStageWidth(),
-                                height = this.snapManager.getStageHeight();
-                        var nLines = 10;
-
                         // the positioning of the grid may depend on the view direction.
                         var stage = this.snapManager.getStage();
                         var viewMat = this.viewUtils.getMatrixFromElement(stage);
@@ -643,6 +651,21 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         this._lineColor = saveColor;
                         this._drawingContext.lineWidth = saveLineWidth;
 
+            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+                // draw an outline around the body
+                var stagePt = MathUtils.getPointOnPlane([0,0,1,0]);
+                var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt);
+    //            glmat4.multiply( tMat, stageMat, stageMat);
+                pt0 = [0, 0, 0];
+                pt1 = [0, height, 0];
+                delta = [width, 0, 0];
+                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
+                pt0 = [0, 0, 0];
+                pt1 = [width, 0, 0];
+                delta = [0, height, 0];
+                this.drawGridLines(pt0, pt1, delta, stageMat, 2);
+            }
+
                         // draw the lines
                         this.redrawGridLines();
 
@@ -662,6 +685,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                                 var offset = this.viewUtils.getElementOffset(this._sourceSpaceElt);
                                 offset[2] = 0;
                                 this.viewUtils.setViewportObj(this._sourceSpaceElt);
+                var sourceSpaceMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
                                 for (var i = 0; i < nLines; i++) {
                                         // transform the points from working plane space to world space
                                         //var t0 = mat.multiply(p0),
@@ -671,8 +695,10 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 
                                         // transform from world space to global screen space
                                         if (this._sourceSpaceElt) {
-                                                t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt);
-                                                t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt);
+//                                              t0 = this.viewUtils.localToGlobal(t0, this._sourceSpaceElt);
+//                                              t1 = this.viewUtils.localToGlobal(t1, this._sourceSpaceElt);
+                                                t0 = this.viewUtils.localToGlobal2(t0, sourceSpaceMat);
+                                                t1 = this.viewUtils.localToGlobal2(t1, sourceSpaceMat);
                                         }
 
                                         // create a line from the endpoints
@@ -741,12 +767,27 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         this._drawingContext.lineWidth = 0.25;
 
                         // draw the lines
-                        var nLines = this._gridLineArray.length;
+            var line,
+                            nLines = this._gridLineArray.length;
+            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+                            nLines = this._gridLineArray.length-4;
+            }
+
                         for (var i = 0; i < nLines; i++) {
-                                var line = this._gridLineArray[i];
+                                line = this._gridLineArray[i];
                                 this.drawIntersectedLine(line, this._drawingContext);
                         }
 
+            if(this.application.ninja.currentDocument.documentRoot.id !== "UserContent") {
+                this._lineColor = "red";
+                i = nLines;
+                nLines += 4;
+                for (; i < nLines; i++) {
+                    line = this._gridLineArray[i];
+                    this.drawIntersectedLine(line, this._drawingContext);
+                }
+            }
+
                         this.popState();
                 }
         },
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 7fc492a5..f4bfc12b 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -1617,7 +1617,11 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                                         if (x > y) {
                                                 if (x > z) {