8 files changed, 379 insertions, 17 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 88314c8b..9c8d4434 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -151,7 +151,6 @@ var Montage = require("montage/core/core").Montage,
 
         // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
         _isToggling: {
-                serializable: true,
                 value: true
         },
         isToggling: {
@@ -179,7 +178,6 @@ var Montage = require("montage/core/core").Montage,
         
         prepareForDraw: {
                 value: function() {
-
                         // Get the original value of the overflow property:
                         this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
                         if (this.isCollapsed === false) {
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..f7259d29 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
     prepareForDraw:{
         value:function(){
             this.element.addEventListener("click", this, false);
+            
+                        // Drag and drop event handlers
+                        this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
+                        this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
+                        this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
+                        this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
+                        
+
+            
+            
+            
         }
     },
 
@@ -57,5 +68,29 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         value:function(ev){
             this.selectKeyframe();
         }
-    }
+    },
+    
+        handleMouseover: {
+                value: function(event) {
+                        this.element.draggable = true;
+                }
+        },
+        handleMouseout: {
+                value: function(event) {
+                        this.element.draggable = false;
+                }
+        },
+        handleDragstart: {
+                value: function(event) {
+                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;
+            event.dataTransfer.setData('Text', 'Keyframe');
+            this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID;
+                }
+        },
+        handleDragend: {
+                value: function(event) {
+                        this.parentComponent.isDragging = false;
+                }
+        }
+    
 });
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b23da749..34c300df 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -471,7 +471,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.dtextScaleX = this.layerData.dtextScaleX;
             this.dtextScaleY = this.layerData.dtextScaleY;
             this.dtextRotate = this.layerData.dtextRotate;
-            this._isFirstDraw = this.layerData._isFirstDraw;
+            //this._isFirstDraw = this.layerData._isFirstDraw;
             this.layerTag = this.layerData.layerTag;
             this.isVisible = this.layerData.isVisible;
             this.isAnimated = this.layerData.isAnimated;
@@ -545,6 +545,9 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
                         this.element.addEventListener("drop", this.handleDrop.bind(this), false);
+                        
+
+
         }
     },
     draw: {
@@ -570,7 +573,33 @@ var Layer = exports.Layer = Montage.create(Component, {
                         }
                         this._isFirstDraw = false;
                         this.layerData._isFirstDraw = false;
+                        
+                        if (this.isMainCollapsed === false) {
+                                        this.mainCollapser.myContent.style.height = "auto";
+                                        this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass);
+                                        this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass);
+
+                        }
+                        if (this.isPositionCollapsed === false) {
+                                        this.positionCollapser.myContent.style.height = "auto";
+                                        this.positionCollapser.myContent.classList.remove(this.positionCollapser.collapsedClass);
+                                        this.positionCollapser.clicker.classList.remove(this.positionCollapser.collapsedClass);
+                        }
+                        if (this.isTransformCollapsed === false) {
+                                        this.transformCollapser.myContent.style.height = "auto";
+                                        this.transformCollapser.myContent.classList.remove(this.transformCollapser.collapsedClass);
+                                        this.transformCollapser.clicker.classList.remove(this.transformCollapser.collapsedClass);
+                        }
+                        if (this.isStyleCollapsed === false) {
+                                        this.styleCollapser.myContent.style.height = "auto";
+                                        this.styleCollapser.myContent.classList.remove(this.styleCollapser.collapsedClass);
+                                        this.styleCollapser.clicker.classList.remove(this.styleCollapser.collapsedClass);
+                        }
+                        
                 }
+                
+
+                
         }
     },
         /* End: Draw cycle */
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..8ddc81cd 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -31,6 +31,7 @@
                         "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
                         "container_layers" : {"#" : "container-layers"},
+                        "container_tracks" : {"#" : "container-tracks"},
                         "timeline_disabler" : {"#" : "timeline-disabler"},
                         "checkable_relative" : {"#" : "checkable_relative"},
                         "checkable_absolute" : {"#" : "checkable_absolute"},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d1cab096..1ce627b7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -177,7 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (val) {
             this._masterDuration = val;
-            this.timebar.style.width = (this._masterDuration / 12) + "px";
+            var intDur = Math.round(val/12),
+                        strWidth = intDur + "px";
+            this.timebar.style.width = strWidth;
         }
     },
 
@@ -329,6 +331,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     useAbsolutePosition:{
         value:true
     },
+    _currentDocumentUuid: {
+        value: false
+    },
+    _ignoreSelectionChanges: {
+        value: false
+    },
     /* === END: Models === */
     /* === BEGIN: Draw cycle === */
     prepareForDraw:{
@@ -344,6 +352,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
             this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
+            //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
             this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
             
             // Bind the handlers for the config menu
@@ -584,6 +593,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.drawTimeMarkers();
             // Document switching
             // Check to see if we have saved timeline information in the currentDocument.
+            //console.log("TimelinePanel.initTimelineForDocument");
+