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>

1 files changed, 106 insertions, 227 deletions

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: {
+        value: null,
+        serializable: true
+    },
+
         // Material Properties
     _materialName: {
         enumerable: true,
@@ -65,6 +92,12 @@ exports.MaterialsPopup = Montage.create(Component, {
 
                     }
                                         break;
+                case "Save As...":
+                    this.saveAs();
+                    break;
+                case "Reset":
+                    this.reset();
+                    break;
                         }
 
             // Notify Materials Library to close popup
@@ -72,6 +105,28 @@ exports.MaterialsPopup = Montage.create(Component, {
                 }
         },
 
+    saveAs:
+    {
+        value: function()
+        {
+            console.log("Save As...");
+            var materialCopy = prompt("Save material as", this._materialName + "_Copy");
+
+            if (materialCopy)
+            {
+                this.materialsLibraryRef.duplicateMaterial(materialCopy);
+            }
+        }
+    },
+
+    reset:
+    {
+        value: function()
+        {
+            console.log("Reset");
+        }
+    },
+
         revertToOriginalValues:
         {
                 value: function()
@@ -195,6 +250,7 @@ exports.MaterialsPopup = Montage.create(Component, {
                                         this._material.setProperty( this._propNames[index],  value );
                                 }
 
+                var obj, matArray, matTypeArray, nMats, iMat, world;
                                 if (this._useSelection)
                                 {
                                         console.log( "apply to selection" );
@@ -206,25 +262,38 @@ exports.MaterialsPopup = Montage.create(Component, {
                                                 for (var iObj=0;  iObj<nObjs;  iObj++)
                                                 {
                                                         var canvas = selection[iObj];
-                                                        var obj;
                                                         if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
                                                         if (obj)
                                                         {
-                                                                var matArray = obj._materialArray;
-                                                                var matTypeArray = obj._materialTypeArray;
-                                                                var nMats = matArray.length;
-                                                                for (var iMat=0;  iMat<nMats;  iMat++)
+                                                                matArray = obj._materialArray;
+                                                                matTypeArray = obj._materialTypeArray;
+                                                                nMats = matArray.length;
+                                                                for (iMat=0;  iMat<nMats;  iMat++)
                                                                 {
                                                                         if (matTypeArray[iMat] === this._whichMaterial)
                                                                                 matArray[iMat].setProperty( this._propNames[index], value );
                                                                 }
-                                                                var world = obj.getWorld();
+                                                                world = obj.getWorld();
                                                                 if (world)
                                                                         world.restartRenderLoop();
                                                         }
                                                 }
                                         }
                                 }
+
+                // Update preview material
+                obj = this.previewShape;
+                matArray = obj._materialArray;
+                matTypeArray = obj._materialTypeArray;
+                nMats = matArray.length;
+                for (iMat=0;  iMat<nMats;  iMat++)
+                {
+                    if (matTypeArray[iMat] === "fill")
+                        matArray[iMat].setProperty( this._propNames[index], value );
+                }
+                world = obj.getWorld();
+                if (world)
+                    world.restartRenderLoop();
                         }
                 }
         },
@@ -286,8 +355,13 @@ exports.MaterialsPopup = Montage.create(Component, {
                 enumerable: false,
                 value: function() {
             this.cancelButton.addEventListener("action", this, true);
-
             this.okButton.addEventListener("action", this, true);
+            this.saveAsButton.addEventListener("action", this, true);
+            this.resetButton.addEventListener("action", this, true);
+
+            if (!this.previewCanvas.getAttribute( "data-RDGE-id" )) {
+                this.previewCanvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() );
+            }
         }
     },
         ////////////////////////////////////////////////////////////////////
@@ -295,7 +369,23 @@ exports.MaterialsPopup = Montage.create(Component, {
         didDraw: {
                 enumerable: false,
                 value: function() {
-           this.materialTitle.innerHTML = this._materialName;
+
+            var world;