Integrating Materials UI changes. Squashed commit of the following:

commit 89ccb55130e67c4516e616ccc56d2a649a2b9160
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jun 27 14:20:01 2012 -0700

    Position Materials Editor popup and change buttons' text color.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 89bca82adc781f4913f8d302a49a8baa907631c5
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jun 27 12:00:51 2012 -0700

    Support deleting and editing custom materials.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 5be5160c4786beb70e8ad4d75562adb135718c6c
Merge: 1d9d9f6 2ebf3e3
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jun 27 11:11:37 2012 -0700

    Merge branch 'refs/heads/ninja-internal' into WebGLMaterials

    Conflicts:
    	js/data/panels-data.js

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 1d9d9f6e66ea7585f07ed461cebba99e71f65de0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jun 26 22:01:22 2012 -0700

    "Save as" support to duplicate material with modified settings. Also removed Add button and disabled Reset button for now.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit bf1037508dbc686f2884765344832f906cbf06d0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jun 26 17:23:31 2012 -0700

    Added UI for duplicating and deleting materials in the Materials Library.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 54930792f9c417df5f739831164aa1f96a41d67a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jun 26 14:29:17 2012 -0700

    Added preview of material in materials editor popup and fixed some styling.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

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
+    },
+