21 files changed, 1216 insertions, 432 deletions

diff --git a/.gitignore b/.gitignore
index 42e99c16..685a3d27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ js/io/ui/cloudpopup.reel/.sass-cache/5fd824121af95f6044b06681535cf0639ffb5db3/cl
 scss/.sass-cache/
 js/helper-classes/RDGE/src/tools/compiler.jar
 js/panels/Timeline/TimelinePanel.reel/scss/compass_app_log.txt
+
+.sass-cache
\ No newline at end of file
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..a4f957cf 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,12 @@ 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);
         }
     },
 
@@ -56,6 +62,41 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
     handleClick:{
         value:function(ev){
             this.selectKeyframe();
+            ev.stopPropagation();
         }
-    }
+    },
+    
+        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.html b/js/panels/Timeline/Layer.reel/Layer.html
index 9288d718..c7e7b575 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -19,7 +19,6 @@
                                                 "dynamicLayerTag" : {"@": "dtext2"},
                                                 "mainCollapser" : {"@" : "mainCollapser"},
                                                 "positionCollapser" : {"@" : "positionCollapser"},
-                                                "transformCollapser" : {"@" : "transformCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
                                                 "clickerMain" : {"#" : "clicker-main"},
                                                 "myLabel" : {"#" : "myLabel"}
@@ -180,60 +179,6 @@
                             }
                         }
                                 },
-                                "dtext_skew_x" : {
-                    "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-                    "properties": {
-                        "element": {"#": "skew-x"},
-                        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
-                        "value" : 0
-                    },
-                        "bindings": {
-                            "value": {
-                                "boundObject": {"@": "owner"},
-                                "boundObjectPropertyPath": "dtextSkewX",
-                                "oneway": false
-                            }
-                        }
-                                },
-                                "dtext_skew_y" : {
-                    "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-                    "properties": {
-                        "element": {"#": "skew-y"},
-                        "maxValue" : 100,
-                        "minValue" : 0,
-                        "acceptableUnits" : "%",
-                        "units" : "%",
-                        "value" : 0
-                    },
-                        "bindings": {
-                            "value": {
-                                "boundObject": {"@": "owner"},
-                                "boundObjectPropertyPath": "dtextSkewY",
-                                "oneway": false
-                            }
-                        }
-                                },
-                                "dtext_rotate" : {
-                    "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-                    "properties": {
-                        "element": {"#": "rotation"},
-                        "maxValue" : 360,
-                        "minValue" : -360,
-                        "acceptableUnits" : "degrees",
-                        "units" : "degrees",
-                        "value" : 0
-                    },
-                        "bindings": {
-                            "value": {
-                                "boundObject": {"@": "owner"},
-                                "boundObjectPropertyPath": "dtextRotate",
-                                "oneway": false
-                            }
-                        }
-                                },
                                         
                                 "mainCollapser" : {
                                         "prototype" : "js/panels/timeline/Collapser",
@@ -275,26 +220,6 @@
                                         }
                                 },
                                         
-                                "transformCollapser" : {
-                                        "prototype" : "js/panels/timeline/Collapser",
-                                        "properties" : {
-                                                "element" : {"#" : "content-transform"},
-                                                "myContent" : {"#":"content-transform"},
-                                                "contentHeight" : 60,
-                                                "isLabelClickable" : true,
-                                                "clicker" : {"#" : "clicker-transform"},