1 files changed, 215 insertions, 812 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 44129743..9bf51e60 100755
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1,892 +1,295 @@
+/* <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 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 TimelineController = require("js/panels/Timeline/TimelineController").TimelineController;
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-    hasTemplate:{
-        value:true
-    },
-
-    /* === BEGIN: Models === */
-    _arrLayers:{
-        value:[]
-    },
-
-    arrLayers:{
-        get:function () {
-            return this._arrLayers;
-        },
-        set:function (newVal) {
-            this._arrLayers = newVal;
-        }
-    },
-
-    _layerRepetition:{
-        value:null
-    },
+    tmpImg: { value: null},
 
-    layerRepetition:{
-        get:function () {
-            return this._layerRepetition;
-        },
-        set:function (newVal) {
-            this._layerRepetition = newVal;
+    templateDidLoad: {
+        value: function() {
+            /*
+            this.tmpImg = document.createElement("img");
+            this.tmpImg.width = 1879;
+            this.tmpImg.height = 440;
+            this.tmpImg.src = "images/timeline/timeline.png";
+            */
         }
     },
 
-    _currentLayerNumber:{
-        value:0
-    },
-
-    currentLayerNumber:{
-        get:function () {
-            return this._currentLayerNumber;
-        },
-        set:function (newVal) {
-            if (newVal !== this._currentLayerNumber) {
-                this._currentLayerNumber = 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";
         }
     },
 
-    currentLayerSelected:{
-        value: null
-    },
-
-    currentTrackSelected:{
-        value: null
-    },
-
-    millisecondsOffset:{
-        value:1000
-    },
-
-    _arrTracks:{
-        serializable:true,
-        value:[]
-    },
+    init : {
+        value : function()
+        {
+            this.buildTimelineView();
 
-    arrTracks:{
-        serializable:true,
-        get:function () {
-            return this._arrTracks;
-        },
-        set:function (newVal) {
-            this._arrTracks = newVal;
         }
     },
 
-    _trackRepetition:{
-        serializable:true,
-        value:null
+    breadCrumbContainer:{
+        value:null,
+        writable:true,
+        enumerable:true
     },
 
-    trackRepetition:{
-        serializable:true,
-        get:function () {
-            return this._trackRepetition;
-        },
-        set:function (newVal) {
-            this._trackRepetition = newVal;
-        }
+    controlsContainer:{
+        value:null,
+        writable:true,
+        enumerable:true
     },
 
-    _selectedKeyframes:{
-        value:[]
+    timelineGutter:{
+        value:null,
+        writable:true,
+        enumerable:true
     },
 
-    selectedKeyframes:{
-        serializable:true,
-        get:function () {
-            return this._selectedKeyframes;
-        },
-        set:function (newVal) {
-            this._selectedKeyframes = newVal;
-        }
+    userLayerContainer:{
+        value:null,
+        writable:true,
+        enumerable:true
     },
 
-    _isLayer:{
-        value:false
-    },
-
-    _firstTimeLoaded:{
-        value:true,
-        writable:true
+    currentLayerNumber:{
+        value:1,
+        writable:true,
+        enumerable:true
     },
 
-    _arrLayersNonEmpty:{
-        value:true,
-        writable:true
+    newLayerButton:{
+        value:null,
+        writable:true,
+        enumerable:true
     },
 
-    _captureSelection:{
-        value:false,
-        writable: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.eventManager.addEventListener("selectionChange", this, true);
-            this.hashInstance = this.createLayerHashTable();
-            this.hashTrackInstance = this.createTrackHashTable();
-            this.hashLayerNumber = this.createLayerNumberHash();
-            this.hashElementMapToLayer = this.createElementMapToLayer();
-            this.initTimelineView();
-        }
+    deleteLayerButton:{
+        value:null,
+        writable:true,
+        enumerable:true
     },
 
-    willDraw:{
-        value:function () {
-            if (this._isLayer) {
-                this.insertLayer();
-                this._isLayer = false;
-            }
-        }
-    },
-    /* === END: Draw cycle === */
-
-    /* === BEGIN: Controllers === */
-    initTimelineView:{
-        value:function () {
-            this.layout_tracks = this.element.querySelector(".layout-tracks");
-            this.layout_markers = this.element.querySelector(".layout_markers");
-
+    newFolderButton:{
+        value:null,
+        writable:true,
+        enumerable:true