3 files changed, 104 insertions, 74 deletions

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 07488da1..fe88ebf6 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
@@ -23,7 +23,7 @@
     width: 97%;
 }
 
-#ml_buttons button {
+#ml_buttons .nj-skinned{
   height: 22px;
   overflow: hidden;
   display: block;
@@ -31,17 +31,17 @@
   margin: 0px 1px;
 }
 
-#materialsLibraryPanel-ml_add_btn {
+#ml_add_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_copy_btn {
+#ml_copy_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_delete_btn {
+#ml_delete_btn {
     float: right;
     width: 60px;
 }
\ 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 6ba4ac75..4e41512f 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,10 +10,75 @@
         <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
-             "materialInfo": {
-                 "module": "js/panels/Materials/materials-popup.reel",
-                 "name": "MaterialsPopup"
+            "addButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_add_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "copyButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_copy_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "deleteButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_delete_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
              },
+            "materialInfo": {
+                "module": "js/panels/Materials/materials-popup.reel",
+                "name": "MaterialsPopup"
+            },
+            "materialsController" : {
+                "module": "js/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "label",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "materialsData"
+                    }
+                }
+            },
+            "materialsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "materials_library_tree"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "materialsController"},
+                    "showRoot": false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
+            },
             "owner": {
                 "module": "js/panels/Materials/materials-library-panel.reel",
                 "name": "MaterialsLibraryPanels",
@@ -29,14 +94,14 @@
         <body>
 
         <div id="materials_library_panel" class="materials_library_panel">
-            <div id="ml_tree_holder">
-                <ul id="materials_library_tree"></ul>
-            </div>
+            <section id="ml_tree_holder" class="animationsLibrary">
+                <div id="materials_library_tree"></div>
+            </section>
             <hr />
             <div id="ml_buttons">
-                <button id="ml_add_btn">Add</button>
-                <button id="ml_copy_btn">Copy</button>
-                <button id="ml_delete_btn">Delete</button>
+                <button id="ml_add_btn" class="nj-skinned">Add</button>
+                <button id="ml_copy_btn" class="nj-skinned">Copy</button>
+                <button id="ml_delete_btn" class="nj-skinned">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 b16c4376..2176c6d5 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
@@ -4,76 +4,35 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Tree = require("js/components/tree.reel").Tree,
-    Button = require("js/components/button.reel").Button,
-    MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
-    PopupMananger =             require("js/components/popup-manager.reel").PopupMananger,
+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;
 
-exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+exports.MaterialsLibraryPanel = Montage.create(Component, {
 
-    _hasFocus: {
-        enumerable: false,
-        value: false
+    materialsData: {
+        value: null
     },
-    
-    prepareForDraw: {
-        enumerable: false,
-        value: function() {
-            var treeHolderDiv = document.getElementById("materials_library_tree");
-            var materialsTree = Tree.create();
-            materialsTree.element = treeHolderDiv;
-            materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml");
-            materialsTree.needsDraw = true;
-
-            materialsTree.addEventListener("change", this, true);
 
-            var addButton = Button.create();
-            addButton.element = document.getElementById("ml_add_btn");
-            addButton.label = "Add";
-            addButton.needsDraw = true;
-            addButton.addEventListener("action", this, true);
-
+    _hasFocus: {