9 files changed, 265 insertions, 45 deletions

diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
index 9c8946c4..7a31e7fd 100644
--- a/js/components/editable.reel/editable.js
+++ b/js/components/editable.reel/editable.js
@@ -120,7 +120,7 @@ exports.Editable = Montage.create(Component, {
                 }
                 
                 if(this.stopOnBlur) {
-                    console.log('adding mousedown event listener');
+                    //console.log('adding mousedown event listener');
                     ///// Simulate blur on editable node by listening to the doc
                     document.addEventListener('mouseup', this, false);
                 }
@@ -189,7 +189,7 @@ exports.Editable = Montage.create(Component, {
     handleKeydown : {
         value : function(e) {
             var k = e.keyCode;
-            console.log('keyCode:  ' + k);
+            //console.log('keyCode:  ' + k);
         }
     },
     ///// Text input has changed values
@@ -204,7 +204,7 @@ exports.Editable = Montage.create(Component, {
     },
     handleMouseup : {
         value : function(e) {
-            console.log('handle mouse down');
+            //console.log('handle mouse down');
             ///// Listen for simulated blur event
             if(this.stopOnBlur && e._event.target !== this._element) {
                 this.blur();
@@ -213,7 +213,7 @@ exports.Editable = Montage.create(Component, {
     },
     handleEvent : {
         value : function(e) {
-            console.log("event type : " + e._event.type);
+            //console.log("event type : " + e._event.type);
             ///// If configured, start on specified event
             if(e._event.type === this.startOnEvent) {
                 this.start();
diff --git a/js/components/hintable.reel/hintable.js b/js/components/hintable.reel/hintable.js
index 5ed46b3c..cbfe2d9b 100644
--- a/js/components/hintable.reel/hintable.js
+++ b/js/components/hintable.reel/hintable.js
@@ -90,10 +90,10 @@ exports.Hintable = Montage.create(Editable, {
     hintNext : {
         value : function(e) {
             if(e) { e.preventDefault(); }
-                console.log('next1');
+                //console.log('next1');
             
             if(this._matchIndex < this.matches.length - 1) {
-                console.log('next');
+                //console.log('next');
                 ++this._matchIndex;
                 this.hint = this._getHintDifference();
             }
@@ -102,9 +102,9 @@ exports.Hintable = Montage.create(Editable, {
     hintPrev : {
         value : function(e) {
             if(e) { e.preventDefault(); }
-                console.log('prev1');
+                //console.log('prev1');
             if(this._matchIndex !== 0) {
-                console.log('prev');
+                //console.log('prev');
                 --this._matchIndex;
                 this.hint = this._getHintDifference();
             }
@@ -135,7 +135,7 @@ exports.Hintable = Montage.create(Editable, {
                 /// revert to old value
                 this.value = (this._preEditValue);
                 this._sendEvent('revert');
-                console.log('reverting');
+                //console.log('reverting');
                 
             }
         }
@@ -180,7 +180,7 @@ exports.Hintable = Montage.create(Editable, {
             
             var val = this.value,
                  matches, hint;
-            console.log('val = "' + val + '"');
+            //console.log('val = "' + val + '"');
             //// Handle auto-suggest if configured
             if(this.hints instanceof Array) {
 
diff --git a/js/panels/Timeline/DragDrop.js b/js/panels/Timeline/DragDrop.js
new file mode 100644
index 00000000..55ee3ab4
--- /dev/null
+++ b/js/panels/Timeline/DragDrop.js
@@ -0,0 +1,136 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Composer = require("montage/ui/composer/composer").Composer;
+
+exports.DragDropComposer = Montage.create(Composer, {
+
+    draggable: {
+        value: true
+    },
+
+    droppable: {
+        value: true
+    },
+
+    identifier: {
+        value: "generic"
+    },
+
+    _dragover: {
+        value: false
+    },
+
+    load: {
+        value: function() {
+            //TODO: to make this work even better check to see if this is a component or not
+            //right now it does not support data-montage id's
+            this.element.addEventListener("mouseover", this, true);
+            this.element.addEventListener("mouseout", this, true);
+            this.component.element.addEventListener("dragenter", this, true);
+            this.component.element.addEventListener("dragleave", this, true);
+            this.component.element.addEventListener("dragend", this, true);
+            this.component.element.addEventListener("drop", this, true);
+            this.component.element.addEventListener("dragover", this, true);
+            this.component.element.addEventListener("dragstart", this, true);
+        }
+    },
+
+    unload: {
+        value: function() {
+            this.element.removeEventListener("mouseover", this, true);
+            this.element.removeEventListener("mouseout", this, true);
+            this.component.element.removeEventListener("dragenter", this, true);
+            this.component.element.removeEventListener("dragleave", this, true);
+            this.component.element.removeEventListener("dragend", this, true);
+            this.component.element.removeEventListener("drop", this, true);
+            this.component.element.removeEventListener("dragover", this, true);
+            this.component.element.removeEventListener("dragstart", this, true);
+        }
+    },
+
+    captureMouseover: {
+        value: function(e) {
+            if(this.draggable) {
+                this.component.element.draggable = true;
+            }
+        }
+    },
+
+    captureMouseout: {
+        value: function(e) {
+            this.component.element.draggable = false;
+        }
+    },
+
+    /* ------ Drag Drop Events ------- */
+
+    // This Function will determine what is being moved
+    captureDragstart: {
+        value:function(e) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('Text', this.identifier);
+            this.component.element.classList.add("dragging");
+            this.component.application.ninja.componentBeingDragged = this.component;
+        }
+    },
+
+    captureDragenter: {
+        value: function(e) {
+
+        }
+    },
+
+    captureDragover: {
+        value:function(e) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            if (!this._dragover) {
+                this._dragover = true;
+                this.component.element.classList.add("dragOver");
+            }
+        }
+    },
+
+    captureDragleave: {
+        value: function(e) {
+            if (this._dragover) {
+                this._dragover = false;
+                this.component.element.classList.remove("dragOver");
+            }
+        }
+    },
+
+    captureDrop: {
+        value:function(e) {
+            e.stopPropagation(); // Stops some browsers from redirecting.
+            e.preventDefault();
+            if (this._dragover) {
+                this._dragover = false;
+                this.component.element.classList.remove("dragOver");
+                if (this.identifier === e.dataTransfer.getData("Text")) {
+                    if(this.component.application.ninja.componentBeingDragged !== this.component) {
+                        dropEvent = document.createEvent("CustomEvent");
+                        dropEvent.initCustomEvent("dropped", true, false, null);
+                        dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged;
+                        dropEvent.droppedComponent = this.component;
+