9 files changed, 46 insertions, 31 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index ecf0f9cd..2a3fc068 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -520,9 +520,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
                 this.inComputedStyleMode = false; // No computed styles mode for multiple items
                 
                 ///// if multiple items are selected, then show common rules
-                var elements = items.map(function(item) {
-                    return item._element;
-                });
+                var elements = Array.prototype.slice.call(this.application.ninja.selectedElements, 0);
                 
                 ///// show toolbar, but hide computed style button
                 this.sections.styles.toolbar.style.display = '';
@@ -538,7 +536,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
                 this.sections.styles.statusMsg.classList.add('nj-css-panel-hide');
                 this.sections.styles.showComputedEl.classList.remove('nj-css-panel-hide');// .style.display = '';
                 this.sections.styles.toolbar.style.display = '';
-                this.showStylesForElement(items[0]._element, null);
+                this.showStylesForElement(items[0], null);
             } else {
                 this.sections.styles.statusMsg.classList.add('nj-css-panel-hide');
                 this._inMultiSelectMode = false;
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 3505393c..e990551b 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -302,7 +302,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
-                NJevent("elementAdding", {"el": element, "data":styles});
+                that.application.ninja.elementMediator.addElements(element, styles);
             });
 
         }
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/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 2b308d9a..7339139f 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -162,7 +162,7 @@ var Tween = exports.Tween = Montage.create(Component, {
                 
             if (event.detail.source && event.detail.source !== "tween") {
                 // check for correct element selection
-                if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) {
+                if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) {
                     console.log("Wrong element selected for this keyframe track");
                 } else {
                     // update tweenedProperties and tell containing track to update CSS rule
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js
index 6a16da54..92437cfd 100644
--- a/js/panels/presets/animations-presets.reel/animations-presets.js
+++ b/js/panels/presets/animations-presets.reel/animations-presets.js
@@ -23,6 +23,6 @@ exports.AnimationsLibrary = Montage.create(Component, {
     handleNodeActivation: {
         value: function(presetData) {
             this.application.ninja.presetsController.applyPreset(presetData);
-        }
-    }
+        }
+        }
 });
diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js
index 6a28e069..5f10bbe3 100644
--- a/js/panels/presets/style-presets.reel/style-presets.js
+++ b/js/panels/presets/style-presets.reel/style-presets.js
@@ -23,12 +23,12 @@ exports.StylesLibrary = Montage.create(Component, {
     handleNodeActivation: {
         value: function(presetData) {
             this.application.ninja.presetsController.applyPreset(presetData, true);
-        }
+            }
     },
     handleDragEnd : {
         value: function(sourceObject) {
             console.log(sourceObject);
         }
-    }
+        }
 
 });
diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js
index ace38dbb..4ca2a662 100644
--- a/js/panels/presets/transitions-presets.reel/transitions-presets.js
+++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js
@@ -23,6 +23,6 @@ exports.TransitionsLibrary = Montage.create(Component, {
     handleNodeActivation: {
         value: function(presetData) {
             this.application.ninja.presetsController.applyPreset(presetData);
-        }
-    }
+        }
+        }
 });
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 40e9b86a..d5acd503 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -87,7 +87,7 @@ exports.Properties = Montage.create(Component, {
                 this.displayStageProperties();
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
-                    this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]);
                 } else {
                     this.displayGroupProperties(this.application.ninja.selectedElements);
                 }
@@ -120,7 +120,6 @@ exports.Properties = Montage.create(Component, {