1 files changed, 737 insertions, 211 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 9bf51e60..b3f4318a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,295 +1,821 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var TimelineController = require("js/panels/Timeline/TimelineController").TimelineController;
+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 TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-    tmpImg: { value: null},
+    hasTemplate:{
+        value:true
+    },
 
-    templateDidLoad: {
-        value: function() {
-            /*
-            this.tmpImg = document.createElement("img");
-            this.tmpImg.width = 1879;
-            this.tmpImg.height = 440;
-            this.tmpImg.src = "images/timeline/timeline.png";
-            */
-        }
+    /* === BEGIN: Models === */
+    _arrLayers:{
+        value:[]
     },
 
-    prepareForDraw: {
-        value: function() {
-            this.element.style.background = "url('images/timeline/timeline.png')";
-            this.element.style.width = "100%";
-            this.element.style.height = "400px";
-            this.element.style.backgroundPosition = "-5px -40px";
+    arrLayers:{
+        get:function () {
+            return this._arrLayers;
+        },
+        set:function (newVal) {
+            this._arrLayers = newVal;
         }
     },
 
-    init : {
-        value : function()
-        {
-            this.buildTimelineView();
+    _layerRepetition:{
+        value:null
+    },
 
+    layerRepetition:{
+        get:function () {
+            return this._layerRepetition;
+        },
+        set:function (newVal) {
+            this._layerRepetition = newVal;
         }
     },
 
-    breadCrumbContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
+    _currentLayerNumber:{
+        value:0
     },
 
-    controlsContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
+    currentLayerNumber:{
+        get:function () {
+            return this._currentLayerNumber;
+        },
+        set:function (newVal) {
+            if (newVal !== this._currentLayerNumber) {
+                this._currentLayerNumber = newVal;
+            }
+        }
     },
 
-    timelineGutter:{
-        value:null,
-        writable:true,
-        enumerable:true
+    currentLayerSelected:{
+        value: null
     },
 
-    userLayerContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
+    currentTrackSelected:{
+        value: null
     },
 
-    currentLayerNumber:{
-        value:1,
-        writable:true,
-        enumerable:true
-    },
-
-    newLayerButton:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
-
-    deleteLayerButton:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
-
-    newFolderButton:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
-
-    buildTimelineView : {
-        value:function(){
-            var timeline = document.getElementById("timelinePanel");
-
-            var mainTimelineContainer = document.createElement("div");
-            mainTimelineContainer.style.backgroundColor = "#000000";
-            mainTimelineContainer.style.width = "100%";
-            mainTimelineContainer.style.height = "100%";
-            mainTimelineContainer.style.overflow = "visible";
-
-            timeline.appendChild(mainTimelineContainer);
-
-            this.breadCrumbContainer = document.createElement("div");
-            this.breadCrumbContainer.style.width = "100%";
-            this.breadCrumbContainer.style.height = "20px";
-            this.breadCrumbContainer.style.backgroundColor = "#111111";
+    millisecondsOffset:{
+        value:1000
+    },
 
-            var timeControllerContainer = document.createElement("div");
-            timeControllerContainer.style.width = "auto";
-            timeControllerContainer.style.height = "20px";
-            timeControllerContainer.style.backgroundColor = "#000000";
+    _arrTracks:{
+        serializable:true,
+        value:[]
+    },
 
-            this.controlsContainer = document.createElement("div");
-            this.controlsContainer.style.width = "200px";
-            this.controlsContainer.style.height = "20px";
-            this.controlsContainer.style.backgroundColor = "#440000";
-            this.controlsContainer.style.float = "left";
-            this.controlsContainer.innerText = "Timeline Controller";
+    arrTracks:{
+        serializable:true,
+        get:function () {
+            return this._arrTracks;
+        },
+        set:function (newVal) {
+            this._arrTracks = newVal;
+        }
+    },
 
-            var timeContainer = document.createElement("div");
-            timeContainer.style.width = "inherit";
-            timeContainer.style.height = "20px";
-            timeContainer.style.backgroundColor = "#880000";
-            timeContainer.style.float = "left";
-            timeContainer.innerText = "Time markers";
+    _trackRepetition:{
+        serializable:true,
+        value:null
+    },
 
-            timeControllerContainer.appendChild(this.controlsContainer);
-            timeControllerContainer.appendChild(timeContainer);
+    trackRepetition:{
+        serializable:true,
+        get:function () {
+            return this._trackRepetition;
+        },
+        set:function (newVal) {
+            this._trackRepetition = newVal;
+        }
+    },
 
-            var masterLayerContainer = document.createElement("div");
-            masterLayerContainer.style.width = "100%";
-            masterLayerContainer.style.height = "20px";
-            masterLayerContainer.style.backgroundColor = "#111111";
-            masterLayerContainer.style.border = "solid";
-            masterLayerContainer.style.borderWidth = "thin";
-            masterLayerContainer.style.borderColor = "#333333";
-            masterLayerContainer.innerText = "MASTER Layer";
+    _selectedKeyframes:{
+        value:[]
+    },
 
-            this.userLayerContainer = document.createElement("div");
-            this.userLayerContainer.style.width = "100%";
+    selectedKeyframes:{
+        serializable:true,