5 files changed, 23 insertions, 38 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d7329ac7..f7ab5117 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -53,6 +53,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             }
         }
     },
+
+    handleChange: {
+        value: function() {
+            if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+                this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
+            }
+        }
+    },
     
     _currentSelectedContainer: {
         value: null
@@ -405,13 +413,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
             document.addEventListener("click", this.handleDocumentClick.bind(this), false);
 
-
-            // Bind some bindings
-            Object.defineBinding(this, "currentSelectedContainer", {
-                boundObject:this.application.ninja,
-                boundObjectPropertyPath:"currentSelectedContainer",
-                oneway:true
-            });
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this);
 
         }
     },
@@ -512,7 +514,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         if (this._boolCacheArrays) {
                                 // ... but only if we're supposed to.
                         this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
-                        this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer;
+                        this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
                         this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
                         this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
                         this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
@@ -525,7 +527,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // Initialize the currentDocument for a new set of timeline data.
                         this.application.ninja.currentDocument.isTimelineInitialized = true;
                         this.application.ninja.currentDocument.tlArrLayers = [];
-                this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer;
+                this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
                 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
                 this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
                 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
@@ -669,7 +671,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
                                 // Information stored, but we're moving up or down in the breadcrumb.
                                 // Get the current selection and restore timeline info for its children.
-                var parentNode = this.application.ninja.currentSelectedContainer,
+                var parentNode = this.currentDocument.model.domContainer,
                         storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.temparrLayers = [];
                 
@@ -708,7 +710,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
                 //debugger;
                 if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
-//                      this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer;
+//                      this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer;
                 }
                 
                 // Are we only showing animated layers?
@@ -984,7 +986,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerName = newLayerName;
             thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">";
             thingToPush.layerData.layerID = this.currentLayerNumber;
-            thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+            thingToPush.parentElement = this.currentDocument.model.domContainer;
             thingToPush.layerData.isSelected = true;
             thingToPush.layerData._isFirstDraw = true;
             thingToPush.layerData.created = true;
@@ -1032,7 +1034,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerName = newLayerName;
             thingToPush.layerData.layerID = this.currentLayerNumber;
             thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
-            thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+            thingToPush.parentElement = this.currentDocument.model.domContainer;
             if (this.checkable_animated.classList.contains("checked")) {
                 thingToPush.layerData.isVisible = false;
             }
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index 0b453c4a..e6b7a6e3 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -292,8 +292,6 @@ exports.ComponentsPanel = Montage.create(Component, {
                         }
                     }
 
-//                    that.application.ninja.currentDocument.model.setComponentInstance(instance, element);
-
                     //that.application.ninja.elementMediator.addElements(element, styles);
                     ElementController.addElement(element, styles);
                 });
@@ -303,11 +301,6 @@ exports.ComponentsPanel = Montage.create(Component, {
 
     componentInstanceOnFirstDraw: {
         value: function(instance) {
-            // Temporary hack until the element model rework goes into place
-            // TODO: Remove this once we have the element model define property code in place.
-            if(!instance.element.elementModel) {
-                this.application.njUtils.makeModelFromElement(instance.element);
-            }
             this.application.ninja.elementMediator.addElements(instance.element);
         }
     },
@@ -319,75 +312,60 @@ exports.ComponentsPanel = Montage.create(Component, {
             switch(name) {
                 case "anchor":
                     el = document.application.njUtils.make("a", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Anchor");
                     el.setAttribute("href", "http://www.motorola.com");
                     el.innerHTML = "link";
                     break;
                 case "button":
                     el = document.application.njUtils.make(name, null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Button");
                     el.setAttribute("type", "button");
                     el.innerHTML = "Button";
                     break;
                 case "checkbox":
                     el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Checkbox");
                     el.setAttribute("type", "checkbox");
                     break;
                 case "imageComponent":
                     el = document.application.njUtils.make("image", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Image");
                     el.setAttribute("width", 200);
                     el.setAttribute("height", 200);
                     break;
                 case "numberInput":
                     el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Number Input");
                     el.setAttribute("type", "number");
                     break;
                 case "select":
                     el = document.application.njUtils.make("select", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "SelectInput");
                     break;
                 case "radioButton":
                     el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Radio Button");