1 files changed, 559 insertions, 222 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 9bf51e60..a0e2376a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,295 +1,632 @@
-/* <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 TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+// var Track = require("js/panels/Timeline/Track.reel").Track;
 
-    tmpImg: { value: null},
+var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-    templateDidLoad: {
-        value: function() {
-            /*
-            this.tmpImg = document.createElement("img");
-            this.tmpImg.width = 1879;
-            this.tmpImg.height = 440;
-            this.tmpImg.src = "images/timeline/timeline.png";
-            */
+    hasTemplate: {
+        value: true
+    },
+   
+    /* === BEGIN: Models === */
+   
+    // Layer models: arrays for the data and repetition,  current layer number,
+    _arrLayers : {
+        value: []
+    },
+    arrLayers: {
+        get: function() {
+            return this._arrLayers;
+        },
+        set: function(newVal) {
+            this._arrLayers = newVal;
         }
     },
-
-    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";
+   
+    _layerRepetition: {
+        value: null
+    },
+    layerRepetition: {
+        get: function() {
+            return this._layerRepetition;
+        },
+        set: function(newVal) {
+            this._layerRepetition = newVal;
         }
     },
+   
+    currentLayerNumber:{
+        value:0
+    },
 
-    init : {
-        value : function()
-        {
-            this.buildTimelineView();
+    millisecondsOffset:{
+        value:5000
+    },
 
+    // Track model
+    _arrTracks: {
+        serializable: true,
+        value: []
+    },
+    arrTracks: {
+        serializable: true,
+        get: function() {
+            return this._arrTracks;
+        },
+        set: function(newVal) {
+            this._arrTracks = newVal;
         }
     },
-
-    breadCrumbContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
+    _trackRepetition: {
+        serializable: true,
+        value: null
     },
-
-    controlsContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
+    trackRepetition : {
+        serializable: true,
+        get: function() {
+            return this._trackRepetition;
+        },
+        set: function(newVal) {
+            this._trackRepetition = newVal;
+        }
     },
 
-    timelineGutter:{
-        value:null,
-        writable:true,
-        enumerable:true
+    _selectedKeyframes:{
+        value:[]
     },
 
-    userLayerContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
+    selectedKeyframes:{
+        serializable:true,
+        get:function () {
+            return this._selectedKeyframes;
+        },
+        set:function (newVal) {
+            this._selectedKeyframes = newVal;
+        }
     },
 
-    currentLayerNumber:{
-        value:1,
-        writable:true,
-        enumerable:true
-    },
 
-    newLayerButton:{
-        value:null,
-        writable:true,
-        enumerable:true
+    /* === END: Models === */
+   
+    /* === BEGIN: Draw cycle === */
+
+    prepareForDraw: {
+        value: function() {
+
+            this.eventManager.addEventListener("deleteLayerClick", this, false);
+            this.eventManager.addEventListener("newLayer", this, false);
+            this.eventManager.addEventListener("deleteLayer", this, false);
+            this.eventManager.addEventListener( "layerBinding", this, false);
+            this.eventManager.addEventListener("elementAdded", this, false);
+            this.eventManager.addEventListener("elementDeleted", this, false);
+            this.eventManager.addEventListener("deleteSelection", this, false);
+            this.hashInstance=this.createLayerHashTable();
+            this.hashTrackInstance=this.createTrackHashTable();
+            this.initTimelineView();
+        }
+    },
+    _isLayer: {
+        value: false
     },
 
-    deleteLayerButton:{
-        value:null,
-        writable:true,
-        enumerable:true
+    _isLayerAdded:{
+        value:false
     },
 
-    newFolderButton:{
-        value:null,
-        writable:true,
-        enumerable:true
+    addButtonClicked:{
+        value: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";
-
-            var timeControllerContainer = document.createElement("div");
-            timeControllerContainer.style.width = "auto";
-            timeControllerContainer.style.height = "20px";
-            timeControllerContainer.style.backgroundColor = "#000000";
-
-            this.controlsContainer = document.createElement("div");
-            this.controlsContainer.style.width = "200px";
-            this.controlsContainer.style.height = "20px";
-            this.controlsContainer.style.backgroundColor = "#440000";
+    willDraw: {
+        value: function() {
+            if (this._isLayer) {
+                this.addButtonClicked=false;
+                this._isElementAdded=true;
+                NJevent('newLayer',this)
+                this._isLayer = false;
+                this.addButtonClicked=true;
+            }