11 files changed, 1207 insertions, 799 deletions

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;
+                        this.component.dispatchEvent(dropEvent);
+                    }
+                }
+                this.component.application.ninja.componentBeingDragged = null;
+            }
+
+        }
+    },
+
+    captureDragend: {
+        value:function(e) {
+            this.component.element.classList.remove("dragging");
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 79b522ee..eb9ff3a9 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -22,7 +22,9 @@
                                                 "positionCollapser" : {"@" : "positionCollapser"},
                                                 "transformCollapser" : {"@" : "transformCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
-                                                "clickerMain" : {"#" : "clicker-main"}
+                                                "clickerMain" : {"#" : "clicker-main"},
+                                                "myLabel" : {"#" : "myLabel"},
+                                                "dragDrop" : {"@" : "DragDrop"}
                     }
                 },
                     "dtext1" : {
@@ -301,7 +303,7 @@
                                         "properties" : {
                                                 "element" : {"#" : "content-style"},
                                                 "myContent" : {"#":"content-style"},
-                                                "contentHeight" : 60,
+                                                "contentHeight" : 0,
                                                 "isLabelClickable" : true,
                                                 "clicker" : {"#" : "clicker-style"},
                                                 "isCollapsed" : true,
@@ -323,7 +325,7 @@
         <body>
     
                 <div data-montage-id="layer" class="container-layer">
-                        <div class="label-layer">
+                        <div class="label-layer" data-montage-id="myLabel">
                                 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
                                 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
                                 <div class="cssbutton button-lock"></div>
@@ -335,14 +337,14 @@
                                         <span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
                                 </div>
                                 <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
-                                        <div class="layout-table">
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">X</div>
-                                                        <div class="layout-cell"><div data-montage-id="position-x"></div></div>
+                                        <div class="layout-tablew">
+                                                <div class="container-row">
+                                                        <div class="cell-property">X</div>
+                                                        <div class="cell-value"><div data-montage-id="position-x"></div></div>
                                                 </div>
-                                                <div class="layout-row">
-                                                        <div class="layout-cell">Y</div>
-                                                        <div class="layout-cell"><div data-montage-id="position-y"></div></div>
+                                                <div class="container-row">
+                                                        <div class="cell-property">Y</div>
+                                                        <div class="cell-value"><div data-montage-id="position-y"></div></div>
                                                 </div>
                                         </div>
                                 </div>
@@ -351,26 +353,26 @@
                                         <span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
                                 </div>