9 files changed, 733 insertions, 349 deletions

diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 53573baf..c6d664cf 100755
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -198,7 +198,6 @@ exports.ColorController = Montage.create(Component, {
     handleChange: {
         enumerable: true,
         value: function (e) {
-
                 //
             var actionEvent, color, input = e._event.input, panelMode, mode = e._event.mode;
             if (this.colorView) {
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 87e93465..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,25 +60,33 @@ 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);
             
+            this.eventManager.addEventListener("addComponentFirstDraw", this, false);
         }
     },
     
-   
+    handleAddComponentFirstDraw: {
+        value: function (e) {
+                //TODO: Add logic to reparse the document for dynamically added styles
+                //console.log(e);
+        }
+    },
     
                         
                         
                         
-                                        
-    ////////////////////////////////////////////////////////////////////
+
+////////////////////////////////////////////////////////////////////
         //
     handleWebRequest: {
         value: function (request) {
                 //TODO: Check if frameId is proper
                 if (this._hackRootFlag && request.parentFrameId !== -1) {
                         //TODO: Optimize creating string
+                        //console.log(request);
                         //console.log(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1], request.url);
                                 //return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-1]};
                                 return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/montage-html/'))[1]};
@@ -103,6 +110,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     },
         ////////////////////////////////////////////////////////////////////
 
+
         
         
         
@@ -172,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) {
@@ -372,7 +391,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
                     nextDocumentIndex = closeDocumentIndex - 1;
                 }
                 this.application.ninja.stage.stageView.switchDocument(this._documents[nextDocumentIndex]);
-                if(typeof this.activeDocument.stopVideos !== "undefined"){doc.stopVideos();}
+                if(typeof doc.stopVideos !== "undefined"){doc.stopVideos();}
                 this._removeDocumentView(doc.container);
             }else if(this._documents.length === 0){
                 if(typeof this.activeDocument.pauseAndStopVideos !== "undefined"){
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 83450d0f..d902e4a1 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -11,43 +11,48 @@ exports.ComponentController = Montage.create(ElementController, {
 
     getProperty: {
         value: function(el, prop) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(prop) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (prop === "width" || prop === "height")) {
-                        return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                        return component[prop];
                     } else {
                         return ElementController.getProperty(el, prop, true);
                     }
                 default:
-                    return this.application.ninja.currentDocument.getComponentFromElement(el)[prop];
+                    return component[prop];
             }
         }
     },
 
     setProperty: {
         value: function(el, p, value) {
+            var component = el.controller || this.application.ninja.currentDocument.getComponentFromElement(el);
+
             switch(p) {
                 case "id":
                 case "class":
+                case "-webkit-transform-style":
                 case "left":
                 case "top":
                 case "width":
                 case "height":
                     if(el.nodeName === "IMG" && (p === "width" || p === "height")) {
-                        this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                        component[p] = value;
                     } else {
                         ElementController.setProperty(el, p, value);
                     }
                     break;
                 default:
                     if(p === "min" || p === "max") value = parseFloat(value);
-
-                    this.application.ninja.currentDocument.getComponentFromElement(el)[p] = value;
+                    component[p] = value;
                     break;
 
             }
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 9f00604f..2ac84452 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js