15 files changed, 147 insertions, 212 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index d18599d6..bac722cd 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -43,7 +43,7 @@
                     "data": {
                         "boundObject": {"@": "materialsProperties"},
                         "boundObjectPropertyPath": "objectAtCurrentIteration",
-                        "oneway": false
+                        "oneway": true
                     }
                 },
                 "listeners": [
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index bd10f7a5..a4f758cf 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -625,6 +625,11 @@ exports.MaterialsPopup = Montage.create(Component, {
                     }
                 ]
     },
+
+    materialsProperties: {
+        serializable: true,
+        value: null
+    },
     
     _materialsData: {
                 enumerable: true,
@@ -641,7 +646,7 @@ exports.MaterialsPopup = Montage.create(Component, {
             },
         set: function(data) {
             this._materialsData = data;
-            if(this.materialsProperties)
+            if(this.materialsProperties && data.length)
             {
                 this.materialsProperties.needsDraw = true;
             }
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b23da749..6358a0e0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -721,7 +721,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = this._layerEditable.value;
                         this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value;
                         this.needsDraw = true;
-                        this.application.ninja.documentController.activeDocument.needsSave = true;
+                        this.application.ninja.documentController.activeDocument.model.needsSave = true;
                 }
         },
         handleAddStyleClick: {
@@ -749,7 +749,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = newVal;
                         this.layerName = newVal;
                         this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal;
-                        this.application.ninja.documentController.activeDocument.needsSave = true;
+                        this.application.ninja.documentController.activeDocument.model.needsSave = true;
                         this.needsDraw = true;
                 }
         },
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d1cab096..c382c9a7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -110,7 +110,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this._selectedLayerID = newVal;
                 this._captureSelection = true;
                 if (this.currentLayerSelected !== false) {
-                        this.selectLayer(selectIndex, true);
+                        this.selectLayer(selectIndex, false);
                 }
                 if (this.currentLayersSelected !== false) {
                         this.selectLayers(this.currentLayersSelected);
@@ -994,7 +994,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.arrLayers.splice(myIndex, 0, thingToPush);
 
             }
-            this.selectLayer(myIndex);
+            this.selectLayer(myIndex, false);
         }
     },
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index efeeba00..2c15a99c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -568,7 +568,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.nextKeyframe += 1;
             }
 
-            this.application.ninja.documentController.activeDocument.needsSave = true;
+            this.application.ninja.documentController.activeDocument.model.needsSave = true;
         }
     },
 
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             keyframeString += " }";
             // set the keyframe string as the new rule
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
-            this.application.ninja.documentController.activeDocument.needsSave = true;
+            this.application.ninja.documentController.activeDocument.model.needsSave = true;
         }
     },
 
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index 4169423b..e028d1db 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -7,8 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage     = require("montage/core/core").Montage,
     Component   = require("montage/ui/component").Component,
     NJUtils     = require("js/lib/NJUtils").NJUtils;
-
-var PIData              = require("js/data/pi/pi-data").PiData;
+    ClassUUID   = require("js/components/core/class-uuid").ClassUuid,
+    PIData      = require("js/data/pi/pi-data").PiData;
 
 String.prototype.capitalizeFirstChar = function() {
     return this.charAt(0).toUpperCase() + this.slice(1);
@@ -278,7 +278,7 @@ exports.ComponentsPanel = Montage.create(Component, {
             that = this;
             element = this.makeComponent(component.component);
 
-            this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
+            this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
 
                 //var pos = that.getStageCenter();
 
@@ -295,21 +295,13 @@ exports.ComponentsPanel = Montage.create(Component, {
                     }
                 }
                 
-                instance.addEventListener('firstDraw', that, false);
-
-                that.application.ninja.currentDocument.setComponentInstance(instance, element);
+                that.application.ninja.currentDocument.model.setComponentInstance(instance, element);
 
                 that.application.ninja.elementMediator.addElements(element, styles);
             });
 
         }
     },
-    
-    handleFirstDraw: {
-        value: function (e) {
-                NJevent("addComponentFirstDraw");
-        }
-    },
 
     makeComponent: {
         value: function(name) {
@@ -346,7 +338,7 @@ exports.ComponentsPanel = Montage.create(Component, {
                     break;
                 case "select":
                     el = document.application.njUtils.make("select", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Select");
+                    document.application.njUtils.createModelForComponent(el, "SelectInput");
                     break;
                 case "radioButton":
                     el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
@@ -366,7 +358,7 @@ exports.ComponentsPanel = Montage.create(Component, {