9 files changed, 26 insertions, 25 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 df1a25a8..10097805 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -469,9 +469,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
 
     // Bind all document-specific events (pass in true to unbind)
-    _bindDocumentEvents:{
-        value:function (boolUnbind) {
-            var arrEvents = ["elementAdded", "elementDeleted", "selectionChange"],
+    _bindDocumentEvents : {
+        value: function(boolUnbind) {
+            var arrEvents = ["deleteLayerClick",
+                             "newLayer",
+                             "deleteLayer",
+                             "elementAdded",
+                             "elementsRemoved",
+                             "selectionChange"],
                 i,
                 arrEventsLength = arrEvents.length;
 
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 27828c3c..5410c77c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -169,7 +169,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, {
             } else if(event.target.id === "elementClass") {
                 if(this.application.ninja.selectedElements.length) {
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi");
-                    console.log(this.application.ninja.selectedElements[0]._element.className);
                 } else {
                     ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
                 }
@@ -138,8 +137,8 @@ exports.Properties = Montage.create(Component, {
 
     handleElementChanging: {
         value: function(event) {
-//            this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left"));
-//            this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top"));
+//            this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "left"));
+//            this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "top"));
         }
     },
 
@@ -148,23 +147,22 @@ exports.Properties = Montage.create(Component, {
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
                 // TODO - This should only update the properties that were changed.
-                var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0];
+                var el = this.application.ninja.selectedElements[0];
                 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
                 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
 
-                if(this.threeD.inGlobalMode)
-                {
+                if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
                     this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D");
                     this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D");
                     this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
                     this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
                     this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
+                }