23 files changed, 1790 insertions, 882 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..675176e9 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,13 +11,32 @@ exports.ElementController = Montage.create(Component, {
 
     addElement: {
         value: function(el, styles) {
+                // Updated to use new methods in TimelinePanel. JR.
+                var insertionIndex = this.application.ninja.timeline.getInsertionIndex();
+                if (insertionIndex === false) {
+                        this.application.ninja.currentSelectedContainer.appendChild(el);
+                } else {
+                        if (insertionIndex === 0) {
+                                this.application.ninja.currentSelectedContainer.appendChild(el);
+                        } else {
+                    var element = this.application.ninja.timeline.arrLayers[insertionIndex].layerData.stageElement;
+                    element.parentNode.insertBefore(el, element.nextSibling);
+                        }
+                }
+                
+            if(styles) {
+                this.application.ninja.stylesController.setElementStyles(el, styles);
+            }
+                
+                /*
+                        // Old methods. Kept for reference. Delete if not needed. JR.
             if(this.application.ninja.timeline.currentLayerSelected) {
                 var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID);
 
                 if(selectedLayerIndex === 0) {
                     this.application.ninja.currentSelectedContainer.appendChild(el);
                 } else {
-                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0];
+                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.stageElement;
                     element.parentNode.insertBefore(el, element.nextSibling);
                 }
             } else {
@@ -27,6 +46,7 @@ exports.ElementController = Montage.create(Component, {
             if(styles) {
                 this.application.ninja.stylesController.setElementStyles(el, styles);
             }
+            */
         }
     },
 
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 06514076..9c8a9ac4 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -524,9 +524,9 @@ exports.ElementMediator = Montage.create(Component, {
             length = layersDraggedArray.length;
 
             for(var i=0; documentRoot.children[i]; i++) {
-                if(documentRoot.children[i] === layerDroppedAfter.layerData.elementsList[0]) {
+                if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) {
                     if(length >0){
-                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0], documentRoot.children[i]);
+                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]);
                     }
 
                     /* Will require for Multiple Drag n Drop */
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..52302319 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,12 +31,18 @@ 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);
         }
     },
 
     draw:{
         value:function(){
-            this.element.style.left = (this.position - 3) + "px";
+            this.element.style.left = (this.position - 6) + "px";
         }
     },
 
@@ -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/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index ff5dae7a..36166c1c 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,11 +6,13 @@
 
 .tween_keyframe{
     position: absolute;
-    height: 16px;
-    width: 5px;
+    height: 10px;
+    width: 10px;
+    top: 3px;
     background-color: white;
     z-index: 23;
-    border-radius: 3px;
+    border-radius: 2px;
+    -webkit-transform: rotate(45deg);