6 files changed, 55 insertions, 50 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index 143b1598..eaf56146 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 },
@@ -402,7 +403,16 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             //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 re-written, the best way to initialize the document is to listen for the DOM tree being modified
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 0a950658..2922edf9 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -521,7 +521,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
 
                                                 if (!elt.elementModel)
                                                 {
-                            NJUtils.makeElementModel2(elt);
+                            NJUtils.makeModelFromElement(elt);
                                                 }
                                                 elt.elementModel.isIn2DSnapCache = true;
                                         }
@@ -588,7 +588,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
 
                                         if (!elt.elementModel)
                                         {
-                                                NJUtils.makeElementModel2(elt);
+                                                NJUtils.makeModelFromElement(elt);
                                         }
                                         elt.elementModel.isIn2DSnapCache = true;
                                 }
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 887743c5..e16715a4 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -113,8 +113,8 @@ exports.NJUtils = Object.create(Object.prototype, {
     },
 
     ///// Element Model creation for existing elements based on element type.
-    ///// TODO: find a different place for this function and return different element models based on type.
-    makeElementModel2: {
+    ///// TODO: Selection and model should be based on the element type
+    makeModelFromElement: {
         value: function(el) {
             this.makeElementModel(el, "Div", "block", false);
         }
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 51923f08..127f73e1 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -463,7 +463,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
     getColor: {
         value: function(el, isFill) {
             if(!el.elementModel) {
-                NJUtils.makeElementModel2(el);
+                NJUtils.makeModelFromElement(el);
             }
             return el.elementModel.controller["getColor"](el, isFill);
         }
@@ -624,7 +624,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
     getColor2: {
         value: function(el, prop, mutator) {
             if(!el.elementModel) {
-                NJUtils.makeElementModel2(el);
+                NJUtils.makeModelFromElement(el);
             }
 
             return this.getColor(el, (prop === "background"));
@@ -636,7 +636,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
     get3DProperty: {
         value: function(el, prop) {
             if(!el.elementModel) {
-                NJUtils.makeElementModel2(el);
+                NJUtils.makeModelFromElement(el);
             }
             return el.elementModel.controller["get3DProperty"](el, prop);
         }
@@ -645,7 +645,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
     get3DProperties: {
         value: function(el) {
             if(!el.elementModel) {
-                NJUtils.makeElementModel2(el);
+                NJUtils.makeModelFromElement(el);
             }
 //            var mat = this.getMatrix(el);
 //            var dist = this.getPerspectiveDist(el);
@@ -658,7 +658,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
     getMatrix: {
         value: function(el) {
             if(!el.elementModel) {
-                NJUtils.makeElementModel2(el);
+                NJUtils.makeModelFromElement(el);
             }
             return el.elementModel.controller["getMatrix"](el);
         }
@@ -667,7 +667,7 @@ exports.ElementMediator = Montage.create(NJComponent, {
     getPerspectiveDist: {
         value: function(el) {
             if(!el.elementModel) {
-                NJUtils.makeElementModel2(el);
+                NJUtils.makeModelFromElement(el);
             }
             return el.elementModel.controller["getPerspectiveDist"](el);
         }
diff --git a/js/stage/layout.js b/js/stage/layout.js
index 56bb70bf..a94dd10c 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -53,36 +53,38 @@ exports.Layout = Montage.create(Component, {
             this.ctx.lineWidth = this.ctxLineWidth;
             this.ctx.fillStyle = this.drawFillColor;
 
-            this.eventManager.addEventListener("elementAdded", this, false);
+//            this.eventManager.addEventListener("elementAdded", this, false);
             this.eventManager.addEventListener("elementDeleted", this, false);
 
             this.eventManager.addEventListener("selectionChange", this, false);
 
             this.eventManager.addEventListener("deleteSelection", this, false);
-
-//            this.addEventListener("change@stage.appModel.layoutView", this.handleLayoutView, false);
-
         }
     },
 
-    handleLayoutView: {
+    handleOpenDocument: {
         value: function() {
-            console.log(this.stage.appModel.layoutView);
+            // Initial elements to draw is the entire node list
+            this.elementsToDraw = this.application.ninja.documentController.activeDocument._liveNodeList;
+
+            // Draw the elements and the 3d info
+            this.draw();
+            this.draw3DInfo(false);
         }
     },
 
+    // No need to keep track of the added elements. We now have a live node list of the dom
     handleElementAdded: {
         value: function(event) {
-            this.domTree.push(event.detail);
-
-            this.draw();
-            this.draw3DInfo(false);
+            // this.domTree.push(event.detail);
+            // this.draw();
+            // this.draw3DInfo(false);
         }
     },
 
     handleElementDeleted: {
         value: function(event) {
-            this.domTree.splice(this.domTree.indexOf(event.detail), 1);
+            //this.domTree.splice(this.domTree.indexOf(event.detail), 1);
         }
     },
 
@@ -96,8 +98,13 @@ exports.Layout = Montage.create(Component, {
 
     handleSelectionChange: {
         value: function(event) {
-            this.elementsToDraw = [];
+            // Make an array copy of the line node list which is not an array like object
+            this.domTree = Array.prototype.slice.call(this.application.ninja.documentController.activeDocument._liveNodeList, 0);
+
+            // Clear the elements to draw
+            this.elementsToDraw.length = 0;
 
+            // Draw the non selected elements
             if(!event.detail.isDocument) {
                 var tmp = event.detail.elements.map(function(element){ return element._element});
 
@@ -111,13 +118,15 @@ exports.Layout = Montage.create(Component, {
             this.draw(); // Not a reel yet :)
             this.draw3DInfo(false);
 
-
+            // Clear the domTree cop