2 files changed, 47 insertions, 11 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 79b522ee..ef98bdd5 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -22,7 +22,8 @@
                                                "positionCollapser" : {"@" : "positionCollapser"},
                                                "transformCollapser" : {"@" : "transformCollapser"},
                                                "styleCollapser" : {"@" : "styleCollapser"},
-                                                "clickerMain" : {"#" : "clicker-main"}
+                                                "clickerMain" : {"#" : "clicker-main"},
+                                                "myLabel" : {"#" : "myLabel"}
                    }
                },
                    "dtext1" : {
@@ -301,7 +302,7 @@
                                        "properties" : {
                                                "element" : {"#" : "content-style"},
                                                "myContent" : {"#":"content-style"},
-                                                "contentHeight" : 60,
+                                                "contentHeight" : 0,
                                                "isLabelClickable" : true,
                                                "clicker" : {"#" : "clicker-style"},
                                                "isCollapsed" : true,
@@ -314,7 +315,34 @@
                                                        "oneway" : false
                                                }
                                        }
-                                }
+                                },
+                    "DragDrop": {
+                        "module": "js/panels/Timeline/DragDrop.js",
+                        "name": "DragDropComposer",
+                        "properties": {
+                            "element": {"#": "myLabel"},
+                            "component": {"@": "owner"}
+                        },
+                        "listeners": [
+                            {
+                                "type": "dragStart",
+                                "listener": {"@": "owner"}
+                            },
+                            {
+                                "type": "dropHover",
+                                "listener": {"@": "owner"}
+                            },
+                            {
+                                "type": "dropped",
+                                "listener": {"@": "owner"}
+                            },
+                            {
+                                "type": "dropEnd",
+                                "listener": {"@": "owner"}
+                            }
+                        ]
+                    }
                                
                                
            }
@@ -323,7 +351,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>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 238ddae9..bddfcd3e 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -499,15 +499,15 @@ var Layer = exports.Layer = Montage.create(Component, {
            // Add event listeners to add and delete style buttons
-            this.buttonAddStyle.identifier = "addStyle";
+            this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false);
-            this.buttonAddStyle.addEventListener("click", this, false);
+            this.buttonDeleteStyle.addEventListener("click", this.handleDeleteStyleClick.bind(this), false);
-            
-            this.buttonDeleteStyle.identifier = "deleteStyle";
-            this.buttonDeleteStyle.addEventListener("click", this, false);
            
            // Add mousedown listener to set isActive
            this.element.addEventListener("mousedown", this, false);
            this.element.addEventListener("click", this, false);
+            
+                        // Drag and drop event hanlders
+                        this.element.addEventListener("dropped", this, false);
        }
    },
@@ -574,6 +574,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                                newEvent = document.createEvent("CustomEvent");
                        
                        this.isStyleCollapsed = false;
+                        this.layerData.isStyleCollapsed = false;
+                        this.triggerOutgoingBinding();
                        
                        newEvent.initCustomEvent("layerEvent", false, true);
                        newEvent.layerEventLocale = "styles";
@@ -604,7 +606,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                        // Set up the event info and dispatch the event
                        newEvent.styleSelection = mySelection;
-                        //defaultEventManager.dispatchEvent(newEvent);
+                        defaultEventManager.dispatchEvent(newEvent);
                }
        },
@@ -624,7 +627,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                                        newEvent.layerID = this.layerID;
                                        newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID;
                                        newEvent.styleSelection = selectedIndex;
-                                        //defaultEventManager.dispatchEvent(newEvent);
+                                        defaultEventManager.dispatchEvent(newEvent);
                                        
                                        // Delete the style from the view
                                        this.arrLayerStyles.splice(selectedIndex, 1);
@@ -783,6 +786,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                        this.triggerOutgoingBinding();
                }
        },
+        handleDropped : {
+                value: function(event) {
+                        console.log('wheeee!  WWEWWEWWWWEEEEEEEEE')
+                }
+        },
        /* End: Event handlers */
        
        /* Begin: Logging routines */