2 files changed, 30 insertions, 11 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a1e320c4..033d0f79 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -318,7 +318,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                              "newLayer",
                              "deleteLayer",
                              "elementAdded",
-                             "elementDeleted",
+                             "elementsRemoved",
                              "selectionChange"],
                 i,
                 arrEventsLength = arrEvents.length;
@@ -826,7 +826,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 for(var index=0;index<arrLayerLength;index++){
                                       if(this.arrLayers[index].layerData.layerID===dLayer[hashVariable].layerID){
                                           dLayer[hashVariable].deleted = true;
-                                          ElementMediator.deleteElements(dLayer[hashVariable].elementsList);
+                                          ElementMediator.removeElements(dLayer[hashVariable].elementsList);
                                           this.arrLayers.splice(index, 1);
                                           break;
                                       }
@@ -861,18 +861,37 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    handleElementDeleted:{
+    handleElementsRemoved:{
         value:function (event) {
             var length,lengthVal;
             this.deleteElement = event.detail;
-            lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1;
-            for (length = lengthVal ;length >= 0 ;length--) {
-                if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) {
-                    this.currentLayerSelected.layerData.elementsList.splice(length, 1);
-                    break;
+
+            // Handling deletion of multiple elements.
+            // TODO: Optimize this double array loop
+            if(Array.isArray(this.deleteElement)) {
+                this.deleteElement = Array.prototype.slice.call(this.deleteElement, 0);
+                lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1;
+                this.deleteElement.forEach(function(element) {
+                    for (length = lengthVal ;length >= 0 ;length--) {
+                        if (this.currentLayerSelected.layerData.elementsList[length] === element) {
+                            this.currentLayerSelected.layerData.elementsList.splice(length, 1);
+                            break;
+                        }
+                        //length--;
+                    }
+                }, this);
+            } else {
+                lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1;
+                for (length = lengthVal ;length >= 0 ;length--) {
+                    if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) {
+                        this.currentLayerSelected.layerData.elementsList.splice(length, 1);
+                        break;
+                    }
+                    //length--;
                 }
-                //length--;
             }
+
+
         }
     },
 
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index 129b9771..067285ae 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -10,12 +10,12 @@
     height: 100%;
 }
 .maintimeline{
-    border-style: double;
     -webkit-box-flex: 1;
     display: -webkit-box;
-    -webkit-box-orient: horizontal
+    -webkit-box-orient: horizontal;
     height : 100%;
     position: relative;
+    margin-top:1px;
 }
 .leftinside{
     height: 100%;