4 files changed, 136 insertions, 72 deletions

diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 5b0aaeac..dd0766df 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -11,7 +11,7 @@ exports.ComponentController = Montage.create(ElementController, {
 
     getProperty: {
         value: function(el, prop) {
-            var component = el.controller || this.application.ninja.currentDocument.model.getComponentFromElement(el);
+            var component = el.controller;
 
             switch(prop) {
                 case "id":
@@ -34,7 +34,7 @@ exports.ComponentController = Montage.create(ElementController, {
 
     setProperty: {
         value: function(el, p, value) {
-            var component = el.controller || this.application.ninja.currentDocument.model.getComponentFromElement(el);
+            var component = el.controller;
 
             switch(p) {
                 case "id":
diff --git a/js/document/templates/app/main.js b/js/document/templates/app/main.js
index a406abdb..fbd2e138 100644
--- a/js/document/templates/app/main.js
+++ b/js/document/templates/app/main.js
@@ -8,12 +8,38 @@ var Montage = 			require("montage/core/core").Montage,
     Template =                  require("montage/ui/template").Template,
     TemplateCreator =   require("tools/template/template-creator").TemplateCreator;
 
+
+//var njmodelGet = function njmodelGet() {
+//    return (this.hasOwnProperty("_model") ? this._model: document.modelGenerator.call(this));
+//};
+//
+//Object.defineProperty(Object.prototype, "_model", {
+//    enumerable: false,
+//    value: null,
+//    writable: true
+//});
+//
+//Object.defineProperty(Object.prototype, "elementModel", {
+//    configurable: true,
+//    get: njmodelGet,
+//    set: function() {
+//    }
+//});
+
 exports.Main = Montage.create(Component, {
 
     hasTemplate: {
         value: false
     },
 
+    componentToInsert: {
+        value: null
+    },
+
+    firstDrawCallback: {
+        value: null
+    },
+
     /**
      * Adding window hooks to callback into this object from Ninja.
      */
@@ -24,6 +50,12 @@ exports.Main = Montage.create(Component, {
             window.addComponent = function(element, data, callback) {
                 var component;
 
+                if(!self.firstDrawCallback) {
+                    self.firstDrawCallback = {};
+                    self.firstDrawCallback.callback = data.firstDraw.cb;
+                    self.firstDrawCallback.context = data.firstDraw.ctx;
+                }
+
                 component = require.async(data.path)
                     .then(function(component) {
                         var componentRequire = component[data.name];
@@ -34,6 +66,9 @@ exports.Main = Montage.create(Component, {
                         componentInstance.needsDraw = true;
                         componentInstance.ownerComponent = self;
 
+                        self.componentToInsert = componentInstance;
+                        componentInstance.addEventListener("firstDraw", self, false);
+
                         callback(componentInstance, element);
                     })
                     .end();
@@ -46,16 +81,15 @@ exports.Main = Montage.create(Component, {
             //
             var templateEvent = document.createEvent("CustomEvent");
             templateEvent.initCustomEvent("mjsTemplateReady", false, true);
-            document.body.dispatchEvent(templateEvent);
-                        
-                        
-            // Dispatch event when this template has loaded.
-            /*
-            var newEvent = document.createEvent( "CustomEvent" );
-            newEvent.initCustomEvent( "userTemplateDidLoad", false, true );
-            document.body.dispatchEvent( newEvent );
-            */
+        }
+    },
+
+    handleFirstDraw: {
+        value: function() {
+            this.firstDrawCallback.callback.call(this.firstDrawCallback.context, this.componentToInsert);
 
+            this.componentToInsert.removeEventListener("firstDraw", this, false);
+            this.componentToInsert = null;
         }
     }
 });
\ No newline at end of file
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 6e9513f2..d7329ac7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -24,6 +24,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             return this._currentDocument;
         },
         set : function(value) {
+            // If it's the same document, do nothing.
             if (value === this._currentDocument) {
                 return;
             }
@@ -35,6 +36,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._currentDocument = value;
 
             if(!value) {
+                this._boolCacheArrays = false;
+                this.clearTimelinePanel();
+                this._boolCacheArrays = true;
                 this.enablePanel(false);
             } else if(this._currentDocument.currentView === "design") {
                 this._boolCacheArrays = false;
@@ -43,9 +47,40 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
                 // Rebind the document events for the new document context
                 this._bindDocumentEvents();
-
-                // TODO: Fix the init function so that it can be called here instead of when container changes
-                // this.initTimelineForDocument();
+                
+                // Initialize the timeline for the document.
+                this.initTimelineForDocument();
+            }
+        }
+    },
+    
+    _currentSelectedContainer: {
+        value: null
+    },
+    currentSelectedContainer: {
+        get: function() {
+            return this._currentSelectedContainer;
+        },
+        set: function(newVal) {
+            if(this._currentSelectedContainer !== newVal) {
+                this._currentSelectedContainer = newVal;
+                if (this._ignoreNextContainerChange === true) {
+                    this._ignoreNextContainerChange = false;
+                    return;
+                }
+                this.application.ninja.currentDocument.setLevel = true;
+                
+                if(this._currentDocument.currentView === "design") {
+                    this._boolCacheArrays = false;
+                    this.clearTimelinePanel();
+                    this._boolCacheArrays = true;
+    
+                    // Rebind the document events for the new document context
+                    this._bindDocumentEvents();
+                    
+                    // Initialize the timeline for the document.
+                    this.initTimelineForDocument();
+                }
             }
         }
     },
@@ -170,27 +205,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
-    
-    _currentSelectedContainer: {
-        value: null
-    },
-    currentSelectedContainer: {
-        get: function() {
-                return this._currentSelectedContainer;
-        },
-        set: function(newVal) {
-            if(this._currentSelectedContainer !== newVal) {
-                    this._currentSelectedContainer = newVal;
 
-                this._boolCacheArrays = false;
-                this.clearTimelinePanel();
-                this._boolCacheArrays = true;
-
-                // TODO: Fix the function so that we can remove this call here.
-                this.initTimelineForDocument();
-            }