2 files changed, 67 insertions, 3 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 6e7d410c..2e0bf7dd 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -19,7 +19,7 @@
                         "element": {"#": "timeline_panel"},
                         "user_layers": {"#": "user_layers"},
                         "track_container": {"#": "right_inside"},
-                        "timeline_leftpane" : {"#" : "timeline_leftpane"},
+                        "timeline_leftpane" : {"#" : "leftpane_inside"},
                         "layer_tracks": {"#": "layer_tracks"},
                         "master_track": {"#": "master_track"},
                         "time_markers" : {"#": "timeline_markers"},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index fd297fd3..0ba49c44 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -289,6 +289,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     createLayerTemplate:{
         value:function () {
             var returnObj = {};
+            
             returnObj.layerData = {};
             returnObj.layerData.layerName = null;
             returnObj.layerData.layerID = null;
@@ -297,6 +298,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             returnObj.layerData.isTransformCollapsed = true;
             returnObj.layerData.isStyleCollapsed = true;
             returnObj.layerData.arrLayerStyles = [];
+            returnObj.layerData.arrLayerStyles = [];
             returnObj.layerData.elementsList = [];
             returnObj.layerData.deleted = false;
             returnObj.layerData.isSelected = false;
@@ -312,6 +314,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             return returnObj;
         }
     },
+    
+    // Create an array of style objects for an element, for use
+    // in creating a new layer
+    createLayerStyles : {
+        value: function(ptrElement) {
+                // TODO: Create logic to loop through 
+                // CSS properties on element and build 
+                // array of layer styles for return.
+                // Right now this method just returns an array of one bogus style.
+                
+                var returnArray = [],
+                        newStyle = {}, 
+                        styleID = "1@0"; // format: layerID + "@" + style counter
+                        
+            newStyle.styleID = styleID;
+                        newStyle.whichView = "propval";
+                        newStyle.editorProperty = "top";
+                        newStyle.editorValue = 0;
+                        newStyle.ruleTweener = false;
+                        newStyle.isSelected = false;
+                        
+                        returnArray.push(newStyle);
+                        
+                        return returnArray;
+                
+        }
+    },
+    
+    // Create an array of style track objects for an element, for use
+    // in creating a new layer
+    createStyleTracks : {
+        value: function(ptrElement) {
+                // TODO: Create logic to loop through 
+                // CSS properties on element and build 
+                // array of layer styles for return.
+                // Right now this method just returns an array of one bogus style.
+                
+                var returnArray = [];
+                        
+                        returnArray.push("1");
+                        
+                        return returnArray;
+                
+        }
+    },
 
     // Bind all document-specific events (pass in true to unbind)
     _bindDocumentEvents:{
@@ -342,7 +389,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function () {
             this.layout_tracks = this.element.querySelector(".layout-tracks");
             this.layout_markers = this.element.querySelector(".layout_markers");
-            this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
+            this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
@@ -448,6 +495,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             // Clear the repetitions
             if (this.arrLayers.length > 0) {
                 this.arrLayers = [];
+                this.arrLayers.length = 0;
             }
         }
     },
@@ -569,7 +617,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    timelineLeftPaneClick:{
+    timelineLeftPaneMousedown:{
         value:function (event) {
             var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
             if (ptrParent !== false) {
@@ -677,6 +725,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 thingToPush.layerData.layerID = this.currentLayerNumber;
                 thingToPush.parentElementUUID = this.hashKey;
                 thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+                
+                // Are there styles to add?
+                thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
+                thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
 
                 if (this._openDoc) {
                     ele.uuid = nj.generateRandom();
@@ -862,6 +914,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 } else {
                     this.arrLayers[i].layerData.isSelected = false;
                 }
+                
+                this.triggerLayerBinding(i);
             }
 
             this.layerRepetition.selectedIndexes = [layerIndex];
@@ -1019,6 +1073,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             }
         }
     },
+    // Trigger the layer/track data binding
+    triggerLayerBinding : {
+        value: function(intIndex) {
+                if (this.arrLayers[intIndex].layerData.triggerBinding === true) {
+                        this.arrLayers[intIndex].layerData.triggerBinding = false;
+                } else {
+                        this.arrLayers[intIndex].layerData.triggerBinding = true;
+                }
+        }
+    },
     /* === END: Controllers === */
 
     /* === BEGIN: Logging routines === */