15 files changed, 263 insertions, 20 deletions

diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js
index 33f9b3a7..613bef4b 100755
--- a/js/panels/Panel.reel/Panel.js
+++ b/js/panels/Panel.reel/Panel.js
@@ -125,7 +125,10 @@ exports.Panel = Montage.create(Component, {
                 require.async(this.modulePath)
                     .then(function(panelContent) {
                         var componentRequire = panelContent[that.moduleName];
-                        that.panelContent.content = componentRequire.create();
+                        var componentInstance = componentRequire.create();
+
+                        componentInstance.ownerComponent = that.ownerComponent;
+                        that.panelContent.content = componentInstance;
                     })
                     .end();
             }
diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html
index 251e86e4..d3673105 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer.reel/PanelContainer.html
@@ -62,6 +62,13 @@
                 }
             },
 
+            "panel_6": {
+                "prototype": "js/panels/Panel.reel",
+                "properties": {
+                    "element": {"#": "panel_6"}
+                }
+            },
+
             "owner": {
                 "module": "js/panels/PanelContainer.reel",
                 "name": "PanelContainer",
@@ -74,7 +81,8 @@
                     "panel_2":          {"@": "panel_2"},
                     "panel_3":          {"@": "panel_3"},
                     "panel_4":          {"@": "panel_4"},
-                    "panel_5":          {"@": "panel_5"}
+                    "panel_5":          {"@": "panel_5"},
+                    "panel_6":          {"@": "panel_6"}
                 },
                 "listeners": [
                     {
@@ -104,6 +112,7 @@
             <article data-montage-id="panel_3"></article>
             <article data-montage-id="panel_4"></article>
             <article data-montage-id="panel_5"></article>
+            <article data-montage-id="panel_6"></article>
                 </article>
     </section>
 </body>
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js
index c40bbc21..8d1d6a5e 100755
--- a/js/panels/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer.reel/PanelContainer.js
@@ -45,6 +45,7 @@ exports.PanelContainer = Montage.create(Component, {
                 this['panel_'+i].minHeight= p.minHeight;
                 this['panel_'+i].maxHeight = p.maxHeight;
                 this['panel_'+i].flexible = p.flexible;
+                this['panel_'+i].collapsed = p.collapsed;
                 this['panel_'+i].modulePath = p.modulePath;
                 this['panel_'+i].moduleName = p.moduleName;
                 this['panel_'+i].disabled = true;
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 5234b43d..1b7132b9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -185,8 +185,8 @@
                                 <div class="layer-master">Master Layer
                                         <div class="tl-configbutton" data-montage-id="tl-configbutton">
                                                 <div class="tl-dropdown">
-                                                                                        <div class="checkable checked" data-montage-id="checkable_relative">Use relative positioning</div>
-                                                                                        <div class="checkable" data-montage-id="checkable_absolute">Use absolute positioning</div>
+                                                                                        <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div>
+                                                                                        <div class="checkable checked" data-montage-id="checkable_absolute">Use absolute positioning</div>
                                                                                         <div class="nj-divider divider-horizontal"></div>
                                                         <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
                                                 </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7ee0ca16..7fb57396 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -6,10 +6,7 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var Layer = require("js/panels/Timeline/Layer.reel").Layer;
-var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
 var nj = require("js/lib/NJUtils").NJUtils;
-var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
@@ -280,6 +277,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _scrollTracks: {
         value: false
     },
+    useAbsolutePosition:{
+        value:true
+    },
     /* === END: Models === */
     /* === BEGIN: Draw cycle === */
     prepareForDraw:{
@@ -1167,7 +1167,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         this.handleCheckableClick(event);
                 }
                 this.checkable_absolute.classList.remove("checked");
-                // TODO: Use relative positioning
+            this.useAbsolutePosition = false;
         }
     },
     handleAbsoluteClick: {
@@ -1176,7 +1176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         this.handleCheckableClick(event);
                 }
                 this.checkable_relative.classList.remove("checked");
-                // TODO: Use absolute positioning.
+            this.useAbsolutePosition = true;
         }
     },
     handleCheckableClick: {
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 145b03ef..aacddd3b 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -548,6 +548,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     handleNewTween:{
         value:function (ev) {
             if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) {
+                var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+                this.application.ninja.timeline.selectLayer(selectedIndex, false);
                 this.insertTween(ev.offsetX);
             } else {
                 this.splitTween(ev);
@@ -557,6 +559,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     insertTween:{
         value:function (clickPos) {
+            var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+                        this.application.ninja.timeline.selectLayer(selectedIndex, true);
+
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickPos;
             this.trackDuration = currentMillisec;
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index e4fb42b3..7dcd397c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -6,7 +6,6 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var Tween = exports.Tween = Montage.create(Component, {
 
@@ -186,7 +185,7 @@ var Tween = exports.Tween = Montage.create(Component, {
 
     setAbsoluteTweenProperties:{
         value:function (eventDetail) {