1 files changed, 942 insertions, 648 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 033d0f79..70e04b4c 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, {
 
@@ -19,19 +16,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     /* === BEGIN: Models === */
     _arrLayers:{
-        serializable: true,
+        serializable:true,
         value:[]
     },
 
     arrLayers:{
-        serializable: true,
+        serializable:true,
         get:function () {
             return this._arrLayers;
         },
         set:function (newVal) {
             this._arrLayers = newVal;
             this.needsDraw = true;
-            this._cacheArrays();
+            this.cacheTimeline();
         }
     },
 
@@ -50,12 +47,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
 
     _layerRepetition:{
-        serializable: true,
+        serializable:true,
         value:null
     },
 
     layerRepetition:{
-        serializable: true,
+        serializable:true,
         get:function () {
             return this._layerRepetition;
         },
@@ -64,18 +61,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    _cacheArrays : {
-        value: function() {
-            if (this._boolCacheArrays) {
-                this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
-
-            }
-        }
-    },
-    
     // Set to false to skip array caching array sets in current document
-    _boolCacheArrays : {
-        value: true
+    _boolCacheArrays:{
+        value:true
     },
 
     _currentLayerNumber:{
@@ -89,93 +77,109 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         set:function (newVal) {
             if (newVal !== this._currentLayerNumber) {
                 this._currentLayerNumber = newVal;
-                this._setCurrentLayerNumber();
+                this.cacheTimeline();
             }
         }
     },
 
-    _setCurrentLayerNumber:{
-        value:function(){
-            if (this._boolCacheArrays) {
-                this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
-            }
-        }
+    _currentLayerSelected:{
+        value: false
     },
-
-    _hashKey:{
-            value:0
+    currentLayerSelected:{
+        get:function () {
+            return this._currentLayerSelected;
         },
+        set:function (newVal) {
+            this._currentLayerSelected = newVal;
+            this.cacheTimeline();
+        }
+    },
 
-    hashKey:{
+    _selectedLayerID:{
+        value:false
+    },
+    selectedLayerID:{
         get:function () {
-            return this._hashKey;
+            return this._selectedLayerID;
         },
         set:function (newVal) {
-            if (newVal !== this._hashKey) {
-                this._hashKey = newVal;
-                this._setHashKey();
+            if (newVal === false) {
+                // We are clearing the timeline, so just set the value and return.
+                this._selectedLayerID = newVal;
+                return;
+            }
+            if (newVal !== this._selectedLayerID) {
+                var selectIndex = this.getLayerIndexByID(newVal);
+                this._selectedLayerID = newVal;
+                this._captureSelection = true;
+                if (this.currentLayerSelected !== false) {
+                        this.selectLayer(selectIndex, true);
+                }
+                if (this.currentLayersSelected !== false) {
+                        this.selectLayers(this.currentLayersSelected);
+                }
+                if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) {
+                        this.selectLayers([]);
+                }
+                
             }
         }
     },
 
-    _setHashKey:{
-        value:function(){
-            if (this._boolCacheArrays) {
-                this.application.ninja.currentDocument.hashKey = this.hashKey;
-            }
+    _currentLayersSelected:{
+        value:[]
+    },
+    currentLayersSelected:{
+        get:function () {
+            return this._currentLayersSelected;
+        },
+        set:function (newVal) {
+            this._currentLayersSelected = newVal;
+            this.cacheTimeline();
         }
     },
-
-    _currentLayerSelected:{
-        value: null
+    
+    _currentSelectedContainer: {
+        value: null
     },
-    currentLayerSelected : {
+    currentSelectedContainer: {
         get: function() {
-                return this._currentLayerSelected;
+                return this._currentSelectedContainer;
         },
         set: function(newVal) {
-                this._currentLayerSelected = newVal;
-                this.application.ninja.currentDocument.tlCurrentLayerSelected = newVal;
+                this._currentSelectedContainer = newVal;
+                this.handleDocumentChange();
         }
     },
 
-    _selectedLayerID:{
-        value: false
-    },
-    selectedLayerID : {
-        get: function() {
-                return this._selectedLayerID;
-        },
-        set: function(newVal) {
-                if (newVal === false) {
-                        // We are clearing the timeline, so just set the value and return.
-                        this._selectedLayerID = newVal;
-                        return;
-                }
-                if (newVal !== this._selectedLayerID) {
-                        var selectIndex = this.getLayerIndexByID(newVal);
-                        this._selectedLayerID = newVal;
-                                this._captureSelection = true;
+    _millisecondsOffset:{
+        value:1000