33 files changed, 2383 insertions, 1007 deletions

diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 803770db..08e87bf0 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -146,7 +146,11 @@ exports.Hintable = Montage.create(Editable, {
         },
         set: function(str) {
             var node = this._getFirstTextNode();
-            node.textContent = str;
+            if (node.textContent !== str) {
+                node.textContent = str;
+            }
+            
+            //node.innerText = str;
         }
     },
 
@@ -331,4 +335,4 @@ exports.Hintable = Montage.create(Editable, {
         distinct: true
     }
     
-});
\ No newline at end of file
+});
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 01e132d7..53588f68 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -14,13 +14,32 @@ exports.ElementController = Montage.create(Component, {
         
                 if (el.getAttribute) el.setAttribute('data-ninja-node', 'true');
                 
+                // 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 {
@@ -30,6 +49,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 1d5e9ade..1d188dbf 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..b91027b6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,24 +31,32 @@ 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 - 5) + "px";
         }
     },
 
     deselectKeyframe:{
         value:function(){
             this.element.classList.remove("keyframeSelected");
+            this.element.style.left = (this.position - 5) + "px";
         }
     },
 
     selectKeyframe:{
         value:function(){
             this.element.classList.add("keyframeSelected");
+            this.element.style.left = (this.position - 6) + "px";
             this.parentComponent.selectTween();
         }
     },
@@ -56,6 +64,42 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {