3 files changed, 49 insertions, 5 deletions

diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index abad3736..34bb1fb5 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -104,9 +104,11 @@ exports.StageController = Montage.create(ElementController, {
                     el.elementModel.viewPort.style.setProperty(p, value);
                     break;
                 case "width":
+                    this.application.ninja.currentDocument.iframe.width = parseInt(value) + 1400;
                     el.elementModel.stageDimension.style.setProperty(p, value);
                     break;
                 case "height":
+                    this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400;
                     el.elementModel.stageDimension.style.setProperty(p, value);
                     break;
                 default:
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index d903d8ed..72a6def6 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -58,6 +58,22 @@
                 }
             },
 
+            "elementNameAttribute": {
+                "module": "montage/ui/textfield.reel",
+                "name": "Textfield",
+                "properties": {
+                    "element": {"#": "elementNameAttribute"},
+                    "readOnly": false
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "nameAttribute",
+                        "oneway": false
+                    }
+                }
+            },
+
 
             "PosSizeSection": {
                 "module": "js/panels/properties.reel/section.reel",
@@ -128,6 +144,7 @@
                     "element":              {"#": "propertiesPanel"},
                     "elementNameInput":     {"@": "elementNameInput1"},
                     "elementId":            {"@": "elementID"},
+                    "elementNameAttribute": {"@": "elementNameAttribute"},
                     "positionSize":         {"@": "PosSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
@@ -150,6 +167,10 @@
                 <label id="lblClass">Class:</label>
                 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
             </section>
+            <section class="fieldCol">
+                <label id="lblName">Name:</label>
+                <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
+            </section>
         </section>
         <section id="PosSize"></section>
         <section id="customSections">
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 1fa65075..eb9faa8b 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -25,6 +25,10 @@ exports.Properties = Montage.create(Component, {
         value: null
     },
 
+    nameAttribute: {
+        value: null
+    },
+
     customSections: {
         value: []
     },
@@ -72,6 +76,9 @@ exports.Properties = Montage.create(Component, {
 
             this.elementId.element.addEventListener("blur", this, false);
             this.elementId.element.addEventListener("keyup", this, false);
+
+            this.elementNameAttribute.element.addEventListener("blur", this, false);
+            this.elementNameAttribute.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -95,10 +102,18 @@ exports.Properties = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-            if(this.application.ninja.selectedElements.length) {
-                ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
-            } else {
-                ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+            console.log(event.target);
+            if(event.target.id === "elementID") {
+                if(this.application.ninja.selectedElements.length) {
+                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
+                } else {
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+                }
+            } else if(event.target.id === "elementNameAttribute") {
+                if(this.application.ninja.selectedElements.length) {
+                    //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
+                    this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
+                }
             }
         }
     },
@@ -106,7 +121,11 @@ exports.Properties = Montage.create(Component, {
     handleKeyup: {
         value: function(event) {
             if(event.keyCode === 13) {
-                this.elementId.element.blur();
+                if(event.target === "elementID") {
+                    this.elementId.element.blur();
+                } else if(event.target === "elementNameAttribute") {
+                    this.elementNameAttribute.element.blur();
+                }
             }      
         }
     },
@@ -164,6 +183,7 @@ exports.Properties = Montage.create(Component, {
             this.elementName = "Stage";
             this.elementId.value = stage.elementModel.id;
             this.elementClassName = "";
+            this.nameAttribute = "";
 
             this.positionSize.disablePosition = true;
             this.threeD.disableTranslation = true;
@@ -226,6 +246,7 @@ exports.Properties = Montage.create(Component, {
             this.elementName = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
             this.elementClassName = el.getAttribute("class");
+            this.nameAttribute = el.getAttribute("name") || "";
 
             this.positionSize.disablePosition = false;
             this.threeD.disableTranslation = false;