Squashed commit of the following:

commit 0285afe3d4bd458a51f11241f13ea6ffdb0283ed
Merge: 2f9f5e3 16d06ba
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 19 10:54:25 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit 2f9f5e369eb96f6c81b5e4bcbe09b418825e2864
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jul 18 17:15:19 2012 -0700

    Fixed selection bounds not drawing in nested tags.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit b0a3507f9d27579ad511c69314a09136d7f7c6a0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jul 18 11:07:44 2012 -0700

    Layout info needs to redraw if stage is updated.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 63c5e0bf52c33706ba597cb69f7794e287bd0f06
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jul 17 15:40:54 2012 -0700

    Per feedback from QE, we are still going to draw tool feedback on each mouse move so the selection bounds are not out of sync with the elements.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 0599a742092b985c4002977e501e3b457173f1d9
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jul 17 15:28:25 2012 -0700

    Fixed grid not drawing correctly when switching documents and when adding/removing elements.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit fd9410606ee6358910d65b2cb5f71812fd44a7c4
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jul 17 11:36:09 2012 -0700

    Updated drawing feedback to handle matrix 2d values entered via CSS Panel.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 559c16c7ac8c9f40b94a011a6f932d4f97df66a7
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 17:14:28 2012 -0700

    IKNinja-751 - Selection boundary doesn't follow the transform applied in the CSS Panel.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit e2da5340159db5cd6f75bf6c9b7eb9cbf959e5cd
Merge: 7cc5de3 5146f22
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 15:36:28 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit 7cc5de39e41b4220f53c91b15b0cf0ed53e0b0f6
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 14:52:06 2012 -0700

    Check if ownerDocument.defaultValue is null.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 5ae97995a28a4b06fb7f8703eb8090ea16d88acd
Merge: d17974d 0ede302
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 09:27:22 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit d17974d77273bb635311cb6466f4427cf4d9e5d4
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 16 08:45:05 2012 -0700

    Pass in selectedElements array directly to drawUtils when drawing selection bounds instead of creating a duplicate array.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 0b1ea3144cb3e2c1d272f60da32423d0604ace3b
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Fri Jul 13 14:03:40 2012 -0700

    Fixed line tool not drawing the width and height info.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit b9c70e8d9ae324aa21fa5490edc71d8503bcefbc
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Fri Jul 13 12:42:25 2012 -0700

    Used cached offsetWidth and offsetHeight.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 9e17ac7124745ba745014efe149b31dee4fe658f
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 16:25:41 2012 -0700

    Converting tabs to spaces … again!

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 351726c951bb73c28f0e15ea1ab32e85cc735688
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 16:14:31 2012 -0700

    Tabs should be 4 spaces.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 250c419aa2dbcb10f012817ee7039aca77cb2518
Merge: 3f8d61a 2880e1d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 16:08:31 2012 -0700

    Merge branch 'refs/heads/ninja-mqg734-master' into StageToolDrawingOptimizations

commit 3f8d61a676da3992947ed9a2ed0e449780fcfbe0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 15:53:44 2012 -0700

    Rotate tool was not working immediately after switching selection and selection bounds were not drawing after resizing canvases.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit e2e1f81e3b6917e1032e1b99b79c266937f3bb25
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Thu Jul 12 12:15:59 2012 -0700

    Single draw cycle for stage updates and tool drawings.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 95a90b4c95ee3163c97bea317144366674e49ade
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jun 18 11:46:38 2012 -0700

    Single draw cycle for the stage and layout.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 21966b1515d80d2161a14e5a19bc66f3f49a92ce
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Fri Jun 15 13:33:14 2012 -0700

    Cache element offsets, including offsetParent.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 80c563c8ba06149691c6c1e754dd9a5e43bc7d4b
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Jul 9 17:30:00 2012 -0700

    Open materials editor popup next to PI button.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

2 files changed, 153 insertions, 193 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index d133f100..5cc8dbea 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -67,19 +67,11 @@ exports.Layout = Montage.create(Component, {
             return this._currentDocument;
         },
         set : function(value) {
-            if (value === this._currentDocument) {// || value.getProperty("currentView") !== "design") {
-                return;
-            }
-
-            drawUtils._eltArray.length = 0;
-            drawUtils._planesArray.length = 0;
-
-            this._currentDocument = value;
-
-            if(!value) {
-
-            } else if(this._currentDocument.currentView === "design") {
-                this.elementsToDraw = this._currentDocument.model.documentRoot.childNodes;
+            if (value !== this._currentDocument) {
+                this._currentDocument = value;
+                if(this._currentDocument && this._currentDocument.currentView === "design") {
+                    this.elementsToDraw = Array.prototype.slice.call(this._currentDocument.model.documentRoot.childNodes, 0);
+                }
             }
         }
     },
@@ -113,17 +105,6 @@ exports.Layout = Montage.create(Component, {
             this.ctx = this.canvas.getContext("2d");
             this.ctx.lineWidth = this.ctxLineWidth;
             this.ctx.fillStyle = this.drawFillColor;
-
-            this.eventManager.addEventListener("selectionChange", this, false);
-            this.eventManager.addEventListener("elementsRemoved", this, false);
-        }
-    },
-
-    // Redraw stage only once after all deletion is completed
-    handleElementsRemoved: {
-        value: function(event) {
-            this.draw();
-            this.draw3DInfo(false);
         }
     },
 
@@ -131,13 +112,16 @@ exports.Layout = Montage.create(Component, {
         value: function(event) {
             var containerIndex;
 
+            // Clear the elements to draw
+            this.elementsToDraw.length = 0;
+
             if(this.currentDocument === null){
                 return;
             }
 
             if(this.currentDocument.currentView === "design"){
-                // Make an array copy of the line node list which is not an array like object
-                this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
+                // Make an array copy of the live node list which is not an array like object
+                this.domTree = this.currentDocument.model.views.design.getLiveNodeList(true);
                 // Index of the current container
                 containerIndex = this.domTree.indexOf(this.currentDocument.model.domContainer);
 
@@ -149,8 +133,6 @@ exports.Layout = Montage.create(Component, {
                     this.domTree = Array.prototype.slice.call(this.domTree[containerIndex].childNodes, 0);
                 }
             }
-            // Clear the elements to draw
-            this.elementsToDraw.length = 0;
 
             // Draw the non selected elements
             if(!event.detail.isDocument) {
@@ -161,9 +143,6 @@ exports.Layout = Montage.create(Component, {
                 this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0);
             }
 
-            this.draw(); // Not a reel yet
-            this.draw3DInfo(false);
-
             // Clear the domTree copy
             this.domTree.length = 0;
         }
@@ -171,8 +150,6 @@ exports.Layout = Montage.create(Component, {
 
     draw: {
         value: function() {
-            this.clearCanvas();
-
             // TODO Bind the layoutview mode to the current document
             // var mode  = this.application.ninja.currentDocument.layoutMode;
             if(this.layoutView === "layoutOff") return;
@@ -184,21 +161,6 @@ exports.Layout = Montage.create(Component, {
         }
     },
 
-    draw3DInfo: {
-        value: function(updatePlanes) {
-            if(updatePlanes) {
-                drawUtils.updatePlanes();
-                this.application.ninja.stage.stageDeps.snapManager._isCacheInvalid = true;
-            }
-
-            if(this.stage.appModel.show3dGrid) {
-                this.application.ninja.stage.stageDeps.snapManager.updateWorkingPlaneFromView();
-            }
-            drawUtils.drawWorkingPlane();
-            drawUtils.draw3DCompass();
-        }
-    },
-
     clearCanvas: {
         value: function() {
             this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 7c587989..7ac64976 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -29,10 +29,10 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage =   require("montage/core/core").Montage,
+var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component,
     drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
-    vecUtils =  require("js/helper-classes/3D/vec-utils").VecUtils;
+    vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 
 exports.Stage = Montage.create(Component, {
 
@@ -46,8 +46,20 @@ exports.Stage = Montage.create(Component, {
     drawNow: { value : false },
     switchedFromCodeDoc: { value : false },
 
+    drawLayout: { value : false },
+    updatePlanes: { value : false },
+    draw3DInfo: { value : false },
+
     // TO REVIEW
-    zoomFactor: {value : 1 },
+    zoomFactor: {
+        get: function() {
+            if (this._viewport && this._viewport.style && this._viewport.style.zoom) {
+                return Number(this._viewport.style.zoom);
+            } else {
+                return 1;
+            }
+        }
+    },
 
     _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
     _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
@@ -85,7 +97,21 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._resizeCanvases = value;
             if(value) {
-                this.needsDraw = true;
+                // TODO GET THE SCROLL SIZE FROM THE CSS -- 11 px
+                this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this._gridCanvas.width = this.bindingView.width = this.element.offsetWidth - 11;
+                this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this._gridCanvas.height =  this.bindingView.height = this.element.offsetHeight - 11;// - 26 - 26;
+
+                if(this.currentDocument) {
+                    if(this.currentDocument.currentView === "design") {
+                        this.drawLayout = true;
+                        this.updatePlanes = true;
+                        this.draw3DInfo = true;
+                        this.needsDrawSelection = true;
+                    }
+                    if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
+                        this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
+                    }
+                }
             }
         }
     },
@@ -99,6 +125,44 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._updatedStage = value;
             if(value) {
+                if(this.currentDocument) {
+                    if(this.currentDocument.currentView === "design") {
+                        this.drawLayout = true;
+                        this.updatePlanes = true;
+                        this.draw3DInfo = true;
+                        this.needsDrawSelection = true;
+                    }
+                    if(this.currentDocument.model && this.currentDocument.model.documentRoot) {
+                        this.currentDocument.model.documentRoot.elementModel.setProperty("offsetCache", false);
+                    }