1 files changed, 387 insertions, 228 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 9bf51e60..45899648 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,295 +1,454 @@
-/* <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 Track = require("js/panels/Timeline/Track.reel").Track;
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-    tmpImg: { value: null},
+        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;
+                }
+        },
+        
+        _layerRepetition: {
+                value: null
+        },
+        layerRepetition: {
+                get: function() {
+                        return this._layerRepetition;
+                },
+                set: function(newVal) {
+                        this._layerRepetition = newVal;
+                }
+        },
+        
+    currentLayerNumber:{ 
+        value:0
+    },
 
-    templateDidLoad: {
-        value: function() {
-            /*
-            this.tmpImg = document.createElement("img");
-            this.tmpImg.width = 1879;
-            this.tmpImg.height = 440;
-            this.tmpImg.src = "images/timeline/timeline.png";
-            */
-        }
+    millisecondsOffset:{
+        value:5000
     },
 
-    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";
-        }
+    // Track model
+    _arrTracks: {
+        serializable: true,
+        value: []
+    },
+    arrTracks: {
+        serializable: true,
+        get: function() {
+                return this._arrTracks;
+        },
+        set: function(newVal) {
+                this._arrTracks = newVal;
+        }
+    },
+    _trackRepetition: {
+        serializable: true,
+        value: null
+    },
+    trackRepetition : {
+        serializable: true,
+        get: function() {
+                return this._trackRepetition;
+        },
+        set: function(newVal) {
+                this._trackRepetition = newVal;
+        }
     },
 
-    init : {
-        value : function()
-        {
-            this.buildTimelineView();
+    _selectedKeyframes:{
+        value:[]
+    },
 
+    selectedKeyframes:{
+        serializable: true,
+        get: function() {
+            return this._selectedKeyframes;
+        },
+        set: function(value){
+            this._selectedKeyframes = value;
         }
     },
 
-    breadCrumbContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
 
-    controlsContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
+        /* === END: Models === */
+        
+        /* === BEGIN: Draw cycle === */
 
-    timelineGutter:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
+    prepareForDraw: {
+        value: function() {
 
-    userLayerContainer:{
-        value:null,
-        writable:true,
-        enumerable:true
-    },
+            this.eventManager.addEventListener("deleteLayerClick", this, false);
+            this.eventManager.addEventListener("newLayer", this, false);
+            this.eventManager.addEventListener("deleteLayer", this, false);
 
-    currentLayerNumber:{
-        value:1,
-        writable:true,
-        enumerable:true
+            this.initTimelineView();
+        }
     },
-
-    newLayerButton:{
-        value:null,
-        writable:true,
-        enumerable:true
+    _isLayer: {
+        value: false
     },
 
-    deleteLayerButton:{
-        value:null,
-        writable:true,
-        enumerable:true
+    willDraw: {
+        value: function() {
+                if (this._isLayer) {
+                
+                        this.insertLayer();
+                        this._isLayer = false;
+                }
+        }
     },
 
-    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";
-
-            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";
-            this.controlsContainer.style.float = "left";
-            this.controlsContainer.innerText = "Timeline Controller";
-
-            var timeContainer = document.createElement("div");
-            timeContainer.style.width = "inherit";
-            timeContainer.style.height = "20px";
+    
+    /* === END: Draw cycle === */