1 files changed, 450 insertions, 296 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 45899648..1c44c89f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -2,43 +2,44 @@ 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 Track = require("js/panels/Timeline/Track.reel").Track;
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-        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
+    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
     },
 
     millisecondsOffset:{
@@ -47,50 +48,36 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     // Track model
     _arrTracks: {
-        serializable: true,
-        value: []
+        serializable: true,
+        value: []
     },
     arrTracks: {
-        serializable: true,
-        get: function() {
-                return this._arrTracks;
-        },
-        set: function(newVal) {
-                this._arrTracks = newVal;
-        }
+        serializable: true,
+        get: function() {
+            return this._arrTracks;
+        },
+        set: function(newVal) {
+            this._arrTracks = newVal;
+        }
     },
     _trackRepetition: {
-        serializable: true,
-        value: null
+        serializable: true,
+        value: null
     },
     trackRepetition : {
-        serializable: true,
-        get: function() {
-                return this._trackRepetition;
-        },
-        set: function(newVal) {
-                this._trackRepetition = newVal;
-        }
-    },
-
-    _selectedKeyframes:{
-        value:[]
-    },
-
-    selectedKeyframes:{
         serializable: true,
         get: function() {
-            return this._selectedKeyframes;
+            return this._trackRepetition;
         },
-        set: function(value){
-            this._selectedKeyframes = value;
+        set: function(newVal) {
+            this._trackRepetition = newVal;
         }
     },
 
 
-        /* === END: Models === */
-        
-        /* === BEGIN: Draw cycle === */
+    /* === END: Models === */
+   
+    /* === BEGIN: Draw cycle === */
 
     prepareForDraw: {
         value: function() {
@@ -98,46 +85,55 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             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
+        value: false
     },
 
-    willDraw: {
-        value: function() {
-                if (this._isLayer) {
-                
-                        this.insertLayer();
-                        this._isLayer = false;
-                }
-        }
+    _isLayerAdded:{
+        value:false
+    },
+
+    addButtonClicked:{
+        value:true
     },
 
+    willDraw: {
+        value: function() {
+            if (this._isLayer) {
+                this.addButtonClicked=false;
+                this._isElementAdded=true;
+                NJevent('newLayer',this)
+                this._isLayer = false;
+                this.addButtonClicked=true;
+            }
+        }
+    },
 
-    
     /* === END: Draw cycle === */
 
-        /* === BEGIN: Controllers === */
-        
-        // Initialize the timeline
+    /* === BEGIN: Controllers === */
+   
+    // Initialize the timeline
     initTimelineView : {
         value:function(){
-                
-                // Get some selectors for future use
-                this.layout_tracks = this.layer_tracks.querySelector(".layout-tracks");
-                this.layout_markers = this.element.querySelector(".layout_markers");
-
-                        // Add event handlers on the buttons.
-                        this.newlayer_button.identifier = "addLayer";
-                        this.newlayer_button.addEventListener("click", this, false);
-                        this.deletelayer_button.identifier = "deleteLayer";
-                        this.deletelayer_button.addEventListener("click", this, false);
-
+
+            // Add event handlers on the buttons.
+            this.newlayer_button.identifier = "addLayer";
+            this.newlayer_button.addEventListener("click", this, false);
+            this.deletelayer_button.identifier = "deleteLayer";
+            this.deletelayer_button.addEventListener("click", this, false);
+
+            // Simultaneous scrolling of the layer and tracks
+            this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);