3 files changed, 163 insertions, 232 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 943d9bcb..2de03e91 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -6,7 +6,8 @@
  </copyright> */
 
 .materials_popup {
-    width:400px;
+    width:auto;
+    min-width: 300px;
     font-size: 12px;
     overflow: hidden;
     background: #494949;
@@ -32,6 +33,7 @@
 .mp_preview {
     height: 100px;
     text-align: center;
+    margin: 20px 0 10px 0;
 }
 
 .mp_property
@@ -59,7 +61,19 @@
 .mp_property .hottext,
 .mp_property .hottextInput
 {
-    width: 30px;
+    width: 23px;
+}
+
+.mp_property .hottext
+{
+    color: white;
+    background: none;
+}
+
+.mp_property .hottextInput
+{
+    color: black;
+    background: white;
 }
 
 .mp_property .button
@@ -76,7 +90,8 @@
 
 .mp_properties_list
 {
-   padding-bottom: 8px;
+    padding-bottom: 8px;
+    padding-right: 20px;
 }
 
 .mp_properties_list > .mp_property > .colortoolbar
@@ -104,13 +119,28 @@
   display: block;
   cursor: pointer;
 }
+.mp_buttons button:hover,
+.mp_buttons button:active {
+    color: white;
+}
 
 .mp_buttons .mp_cancel_btn {
     float: left;
     width: 60px;
 }
 
+.mp_buttons .mp_saveAs_btn {
+    float: right;
+    width: 60px;
+}
+
 .mp_buttons .mp_ok_btn {
     float: right;
     width: 30px;
+    margin-left:4px;
+}
+
+.materials_popup .mp_reset_btn {
+    float: right;
+    margin-right: 8px;
 }
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index bac722cd..c2f3af4e 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -27,6 +27,21 @@
                     "label": "Cancel"
                 }
             },
+            "saveAsButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "mp_saveAs_btn"},
+                    "label": "Save As..."
+                }
+            },
+            "resetButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "mp_reset_btn"},
+                    "label": "Reset",
+                    "enabled": false
+                }
+            },
             "eventDelegator": {
                 "prototype": "montage/core/event/action-event-listener",
                 "properties": {
@@ -79,7 +94,10 @@
                     "element": {"#": "materials_popup"},
                     "okButton": {"@": "okButton"},
                     "cancelButton": {"@": "cancelButton"},
-                    "materialTitle": {"#": "mp_title"}
+                    "saveAsButton": {"@": "saveAsButton"},
+                    "resetButton": {"@": "resetButton"},
+                    "materialTitle": {"#": "mp_title"},
+                    "previewCanvas": {"#": "mp_preview_canvas"}
                 }
             }
         }
@@ -91,15 +109,19 @@
         <div data-montage-id="materials_popup" class="materials_popup">
             <div data-montage-id="mp_title" class="mp_title">Material Name</div>
             <hr />
-                <div data-montage-id="mp_preview" class="mp_preview">Preview Pane</div>
+                <div data-montage-id="mp_preview" class="mp_preview">
+                <canvas data-montage-id="mp_preview_canvas" width="200" height="100"/>
+            </div>
             <hr />
             <div data-montage-id="mp_properties_list" class="mp_properties_list">
                 <div data-montage-id="mp_property" class="mp_property"></div>
             </div>
+            <button data-montage-id="mp_reset_btn" class="mp_reset_btn nj-skinned"></button>
             <hr />
             <div data-montage-id="mp_buttons" class="mp_buttons">
                 <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button>
                 <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button>
+                <button data-montage-id="mp_saveAs_btn" class="mp_saveAs_btn nj-skinned"></button>
             </div>
         </div>
         </body>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 40f07509..3f702459 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -6,7 +6,10 @@ 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,
-    MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    MaterialsModel = require("js/models/materials-model").MaterialsModel,
+    NJUtils = require("js/lib/NJUtils").NJUtils,
+    World = require("js/lib/drawing/world").World,
+    Rectangle = require("js/lib/geom/rectangle").Rectangle;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
@@ -22,11 +25,35 @@ exports.MaterialsPopup = Montage.create(Component, {
         serializable: true
     },
 
+    saveAsButton: {
+        value: null,
+        serializable: true
+    },
+
+    resetButton: {
+        value: null,
+        serializable: true
+    },
+
+    materialsLibraryRef: {
+        value: null
+    },
+
     materialTitle: {
         value: null,
         serializable: true
     },
 
+    previewCanvas: {
+        value: null,
+        serializable: true
+    },
+
+    previewShape: {
+