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>

7 files changed, 297 insertions, 255 deletions

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
index a5d8997b..fde82d3d 100644
--- a/js/panels/Materials/materials-data.json
+++ b/js/panels/Materials/materials-data.json
@@ -101,6 +101,11 @@
                     "id" : "Z-Invert"
                 }
             ]
+        },
+        {
+            "label": "Custom Materials",
+            "children": [
+            ]
         }
     ]
 }
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
index bed3acfe..b5d36108 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
@@ -15,6 +15,12 @@
     margin: 4px 0 4px 0;
 }
 
+.materials_library_panel .ml_tree_holder {
+    height: 200px;
+    min-height: 200px;
+    max-height: 200px;
+    overflow-y: scroll;
+}
 
 .ml_buttons {
     clear:both;
@@ -30,9 +36,19 @@
     cursor: pointer;
     margin: 0 1px;
     float: left;
+    width: 40px;
+}
+
+.ml_buttons .ml_duplicate_btn {
     width: 60px;
 }
 
-.ml_buttons .nj-skinned:last-child {
+.ml_buttons .ml_delete_btn {
+    width: 50px;
     float: right;
+}
+
+.ml_buttons .nj-skinned:hover,
+.ml_buttons .nj-skinned:active {
+    color: white;
 }
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index 6fa54495..3adb2108 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -10,12 +10,12 @@
         <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
-            "addButton": {
+            "duplicateButton": {
                 "prototype": "montage/ui/button.reel",
                 "properties": {
-                    "element": {"#": "ml_add_btn"},
-                                        "enabled": false
-                },
+                    "element": {"#": "ml_duplicate_btn"},
+                                        "enabled": true
+               },
                 "listeners": [
                     {
                         "type": "action",
@@ -23,11 +23,10 @@
                     }
                 ]
              },
-            "copyButton": {
+            "editButton": {
                 "prototype": "montage/ui/button.reel",
                 "properties": {
-                    "element": {"#": "ml_copy_btn"},
-                                        "enabled": false
+                    "element": {"#": "ml_edit_btn"}
                },
                 "listeners": [
                     {
@@ -82,7 +81,9 @@
                 "prototype": "js/panels/Materials/materials-library-panel.reel[MaterialsLibraryPanels]",
                 "properties": {
                     "element": {"#": "materials_library_panel"},
-                    "_materialInfo": {"@": "materialInfo"}
+                    "_materialInfo": {"@": "materialInfo"},
+                    "materialsController": {"@": "materialsController"},
+                    "deleteButton": {"@": "deleteButton"}
                 }
             }
         }
@@ -92,14 +93,14 @@
         <body>
 
         <div data-montage-id="materials_library_panel" class="materials_library_panel">
-            <section data-montage-id="ml_tree_holder" class="animationsLibrary">
+            <section data-montage-id="ml_tree_holder" class="ml_tree_holder">
                 <div data-montage-id="materials_library_tree"></div>
             </section>
             <hr />
             <div data-montage-id="ml_buttons" class="ml_buttons">
-                <button data-montage-id="ml_add_btn" class="nj-skinned">Add</button>
-                <button data-montage-id="ml_copy_btn" class="nj-skinned">Copy</button>
-                <button data-montage-id="ml_delete_btn" class="nj-skinned">Delete</button>
+                <button data-montage-id="ml_duplicate_btn" class="nj-skinned ml_duplicate_btn">Duplicate</button>
+                <button data-montage-id="ml_edit_btn" class="nj-skinned ml_edit_btn">Edit</button>
+                <button data-montage-id="ml_delete_btn" class="nj-skinned ml_delete_btn">Delete</button>
             </div>
         </div>
 
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index cf0d4e93..cd933ea6 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -7,14 +7,36 @@ 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,
     MaterialsData = require("js/panels/Materials/materials-data.json"),
-    Popup = require("montage/ui/popup/popup.reel").Popup;
+    Popup = require("montage/ui/popup/popup.reel").Popup,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel,
+    LeafNode = require("js/components/treeview/ninja-leaf.reel").Leaf;
 
 exports.MaterialsLibraryPanel = Montage.create(Component, {
 
+    deleteButton: {
+        value: null
+    },
+
     materialsData: {
         value: null
     },
 
+    materialId: {
+        value: null
+    },
+
+    selectedMaterialNode: {
+        value: null
+    },
+
+    customMaterialsBranch: {
+        value: null
+    },
+
+    customMaterialsCounter: {
+        value: 2
+    },
+
     _hasFocus: {
         enumerable: false,
         value: false
@@ -36,21 +58,32 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         value:function(event) {