10 files changed, 718 insertions, 439 deletions

diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 8e000b19..c6d664cf 100755
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -227,14 +227,14 @@ exports.ColorController = Montage.create(Component, {
                 //
                 this.fill = color;
                 //
-                if(e._event.wasSetByCode && mode !== 'nocolor') return;
+                if(e._event.wasSetByCode) return;
                 //
                 this.setColor(mode, color, true);
             } else if (input === 'stroke') {
                 //
                 this.stroke = color;
                 //
-                if(e._event.wasSetByCode && mode !== 'nocolor') return;
+                if(e._event.wasSetByCode) return;
 
                 this.setColor(mode, color, false);
             }
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index d5556fa8..ddaeb061 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -38,13 +38,12 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             return this._activeDocument;
         },
         set: function(doc) {
-            if(!!this._activeDocument) this._activeDocument.isActive = false;
-
+            if(!!this._activeDocument){ this._activeDocument.isActive = false;}
             this._activeDocument = doc;
             if(!!this._activeDocument){
-
                 if(this._documents.indexOf(doc) === -1) this._documents.push(doc);
                 this._activeDocument.isActive = true;
+
                 if(!!this._activeDocument.editor){
                     this._activeDocument.editor.focus();
                 }
@@ -61,6 +60,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             this.eventManager.addEventListener("executeSaveAs", this, false);
             this.eventManager.addEventListener("executeSaveAll", this, false);
             this.eventManager.addEventListener("executeFileClose", this, false);
+            this.eventManager.addEventListener("executeFileCloseAll", this, false);
 
             this.eventManager.addEventListener("styleSheetDirty", this, false);
             
@@ -71,7 +71,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     handleAddComponentFirstDraw: {
         value: function (e) {
                 //TODO: Add logic to reparse the document for dynamically added styles
-                console.log(e);
+                //console.log(e);
         }
     },
     
@@ -180,6 +180,17 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         }
     },
     ////////////////////////////////////////////////////////////////////
+    handleExecuteFileCloseAll:{
+            value: function(event) {
+                var i=0;
+                if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
+                    while(this._documents.length > 0){
+                        this.closeDocument(this._documents[this._documents.length -1].uuid);
+                    }
+                }
+            }
+        },
+        ////////////////////////////////////////////////////////////////////
     //
     fileSaveResult: {
         value: function (result) {
diff --git a/js/controllers/elements/canvas-controller.js b/js/controllers/elements/canvas-controller.js
index b5df3911..b8894c18 100755
--- a/js/controllers/elements/canvas-controller.js
+++ b/js/controllers/elements/canvas-controller.js
@@ -34,12 +34,12 @@ exports.CanvasController = Montage.create(ElementController, {
             }
         }
     },
-        
-   setProperties: {
-       value: function(el, props, index) {
-           for(var p in props) {
-               el.elementModel.controller.setProperty(el, p, props[p][index]);
-           }
-       }
+
+    setProperties: {
+        value: function(element, properties) {
+            for(var property in properties) {
+                this.setProperty(element, property, properties[property]);
+            }
+        }
     }
 });
\ No newline at end of file
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 260ee8a0..d902e4a1 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -16,6 +16,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(prop) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
@@ -38,6 +39,7 @@ exports.ComponentController = Montage.create(ElementController, {
             switch(p) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index b35251ad..35a543ac 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -5,22 +5,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    NJComponent =   require("js/lib/nj-base").NJComponent;
+    Component = require("montage/ui/component").Component;
 
-var ElementController = exports.ElementController = Montage.create(NJComponent, {
+exports.ElementController = Montage.create(Component, {
 
     addElement: {
         value: function(el, styles) {
             this.application.ninja.currentDocument.documentRoot.appendChild(el);
-            // Nested elements -
-            // TODO make sure the CSS is correct before nesting elements
+            // Nested elements - TODO make sure the CSS is correct before nesting elements
             // this.application.ninja.currentSelectedContainer.appendChild(el);
-            this.application.ninja.stylesController.setElementStyles(el, styles);
+            if(styles) {
+                this.application.ninja.stylesController.setElementStyles(el, styles);
+            }
         }
     },
 
+    // Remove the element from the DOM and clear the GLWord.
     removeElement: {
         value: function(el) {
+            if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) {
+                el.elementModel.shapeModel.GLWorld.clearTree();
+            }
             el.parentNode.removeChild(el);
         }
     },
@@ -42,10 +47,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     },
 
     setProperties: {
-        value: function(el, props, index) {
-            for(var p in props) {
-                this.application.ninja.stylesController.setElementStyle(el, p, props[p][index]);
-            }
+        value: function(element, properties) {
+            for(var property in properties) {
+                this.application.ninja.stylesController.setElementStyle(element, property, properties[property]);
+        }
         }
     },
 
@@ -60,37 +65,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     // borderSide : "top", "right", "bottom", or "left"
     getColor: {
         value: function(el, isFill, borderSide) {
-            var colorObj,
-                color,
-                image;
+            var colorObj, color, image;
 
             // Return cached value if one exists
-            if(isFill)
-            {
+            if(isFill) {
+                if(el.elementModel.fill) {