3 files changed, 252 insertions, 258 deletions

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index a5362615..d53cb795 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -30,7 +30,8 @@ POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
 .materials_popup {
-    width:400px;
+    width:auto;
+    min-width: 300px;
     font-size: 12px;
     overflow: hidden;
     background: #494949;
@@ -56,6 +57,7 @@ POSSIBILITY OF SUCH DAMAGE.
 .mp_preview {
     height: 100px;
     text-align: center;
+    margin: 20px 0 10px 0;
 }
 
 .mp_property
@@ -83,7 +85,19 @@ POSSIBILITY OF SUCH DAMAGE.
 .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
@@ -98,9 +112,20 @@ POSSIBILITY OF SUCH DAMAGE.
     position: relative;
 }
 
+.mp_property .gradientpicker
+{
+    top: 0;
+}
+
+.mp_property .gradientpicker .type
+{
+    display: none;
+}
+
 .mp_properties_list
 {
    padding-bottom: 8px;
+    padding-right: 20px;
 }
 
 .mp_properties_list > .mp_property > .colortoolbar
@@ -128,13 +153,28 @@ POSSIBILITY OF SUCH DAMAGE.
   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 b377fa2d..db53e0e9 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -51,6 +51,21 @@ POSSIBILITY OF SUCH DAMAGE.
                     "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": {
@@ -103,7 +118,10 @@ POSSIBILITY OF SUCH DAMAGE.
                     "element": {"#": "materials_popup"},
                     "okButton": {"@": "okButton"},
                     "cancelButton": {"@": "cancelButton"},
-                    "materialTitle": {"#": "mp_title"}
+                    "saveAsButton": {"@": "saveAsButton"},
+                    "resetButton": {"@": "resetButton"},
+                    "materialTitle": {"#": "mp_title"},
+                    "previewCanvas": {"#": "mp_preview_canvas"}
                 }
             }
         }
@@ -115,15 +133,19 @@ POSSIBILITY OF SUCH DAMAGE.
         <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 7c5493c6..0d0435a4 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -30,7 +30,11 @@ POSSIBILITY OF SUCH DAMAGE.
 
 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,
+    ShapesController = require("js/controllers/elements/shapes-controller").ShapesController;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
@@ -46,11 +50,35 @@ exports.MaterialsPopup = Montage.create(Component, {
         serializable: true
     },
 
+    saveAsButton: {
+        value: null,
+        serializable: true
+    },
+
+    resetButton: {
+        value: null,
+        serializable: true