8 files changed, 517 insertions, 55 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..5afff6e6 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,39 @@ 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');
+            
+            // Get my index in my track's tween array
+            var i = 0,
+                tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
+                myIndex = null;
+            for (i = 0; i < tweenRepetitionLength; i++) {
+                if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
+                        myIndex = i;
+                }
+            }
+            this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
+                }
+        },
+        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..c213cb70 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 */
@@ -839,6 +868,9 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleDragleave: {
                 value: function(event) {
+                        if (this.parentComponent.parentComponent.draggingType !== "layer") {
+                                return;
+                        }
                         this.element.classList.remove("dragOver");
                 }
         },
@@ -846,10 +878,14 @@ var Layer = exports.Layer = Montage.create(Component, {
                 value: function(event) {
                         this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Layer');
+            this.parentComponent.parentComponent.draggingType = "layer";
                 }
         },
         handleDragover: {
                 value: function(event) {
+                        if (this.parentComponent.parentComponent.draggingType !== "layer") {
+                                return;
+                        }
                         event.preventDefault();
                         this.element.classList.add("dragOver");
                         event.dataTransfer.dropEffect = "move";
@@ -859,6 +895,9 @@ var Layer = exports.Layer = Montage.create(Component, {
         
         handleDrop : {
                 value: function(event) {
+                        if (this.parentComponent.parentComponent.draggingType !== "layer") {
+                                return;
+                        }
                         event.stopPropagation();
                         this.element.classList.remove("dragOver");
                         if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..5c957619 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -20,6 +20,7 @@
                         "track_container": {"#": "right_inside"},
                         "timeline_leftpane" : {"#" : "leftpane_inside"},
                         "layer_tracks": {"#": "layer_tracks"},
+                        "layout_tracks": {"#": "layout_tracks"},