13 files changed, 70 insertions, 147 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 0c950ffd..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;
@@ -1691,7 +1689,7 @@ NJCSSStyle.prototype.styleChange = function() {
 NJCSSStyle.prototype.getUnits = function(val) {
     if(val.split(/\s/).length > 1) {
         return false;
-    } else if(/px|em|pt|in|cm|mm|ex|pc|%/.test(val)) {
+    } else if(/(px|em|pt|in|cm|mm|ex|pc|%)$/.test(val)) {
         return val.replace(/^.*(px|em|pt|in|cm|mm|ex|pc|%).*/, '$1');
     }
     return null;
@@ -1771,7 +1769,7 @@ NJCSSStyle.prototype.updateValue = function(newValue, bypassUndo) {
         this.styleChange();
         return true;
     }
-    
+
     var IMPORTANT_FLAG = ' !important',
         dec = this.njRule.declaration,        
         acceptAsValid = 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/Splitter.js b/js/panels/Splitter.js
index e92cb2dd..98ebb36a 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -94,7 +94,11 @@ exports.Splitter = Montage.create(Component, {
     handleClick : {
         value: function() {
             if (!this.disabled) {
-                this.panel.addEventListener("webkitTransitionEnd", this, false);
+                if(this.panel.element) {
+                    this.panel.element.addEventListener("webkitTransitionEnd", this, false);
+                } else {
+                    this.panel.addEventListener("webkitTransitionEnd", this, false);
+                }
                 this.collapsed = !this.collapsed;
                 this.needsDraw = true;
             }
@@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, {
 
     handleWebkitTransitionEnd: {
         value: function() {
-            this.panel.removeEventListener("webkitTransitionEnd", this, false);
+            if(this.panel.element) {
+                this.panel.element.removeEventListener("webkitTransitionEnd", this, false);
+            } else {
+                this.panel.removeEventListener("webkitTransitionEnd", this, false);
+            }
+
             this.application.ninja.stage.resizeCanvases = true;
         }
     },
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/drag-drop-composer.js b/js/panels/drag-drop-composer.js
index b36c8334..4791bd6d 100644
--- a/js/panels/drag-drop-composer.js
+++ b/js/panels/dr