7 files changed, 160 insertions, 64 deletions

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
deleted file mode 100755
index a958575e..00000000
--- a/js/panels/Materials/Materials.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="ISO-8859-1"?>
-<tree id="Materials">
-    <folder id="ninjaMaterials" label="Ninja Materials">
-              <leaf id="UberMaterial" label="Uber" />
-        <leaf id="BumpMetalMaterial" label="Bump Metal" />
-        <leaf id="LinearGradientMaterial" label="Linear Gradient" />
-        <leaf id="RadialGradientMaterial" label="Radial Gradient" />
-        <leaf id="FlatMaterial" label="Flat" />
-    </folder>
-    <folder id="customMaterials" label="Custom Materials">
-        <leaf id="CheckerBoard" label="CheckerBoard" />
-        <leaf id="ShinyMetal" label="Shiny Metal" />
-    </folder>
-</tree>
\ No newline at end of file
diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
new file mode 100644
index 00000000..f06ab6c8
--- /dev/null
+++ b/js/panels/Materials/materials-data.json
@@ -0,0 +1,43 @@
+{
+    "label": "materials",
+    "children": [
+        {
+            "label": "Ninja Materials",
+            "children": [
+                {
+                    "label": "Uber",
+                    "id" : "UberMaterial"
+                },
+                {
+                    "label": "Bump Metal",
+                    "id" : "BumpMetalMaterial"
+                },
+                {
+                    "label": "Linear Gradient",
+                    "id" : "LinearGradientMaterial"
+                },
+                {
+                    "label": "Radial Gradient",
+                    "id" : "RadialGradientMaterial"
+                },
+                {
+                    "label": "Flat",
+                    "id" : "FlatMaterial"
+                }
+            ]
+        },
+        {
+            "label": "Custom Materials",
+            "children": [
+                {
+                    "label": "Checker Board",
+                    "id" : "CheckerBoard"
+                },
+                {
+                    "label": "Shiny Metal",
+                    "id" : "ShinyMetal"
+                }
+            ]
+        }
+    ]
+}
\ 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 fe17d0f8..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
@@ -46,10 +46,39 @@
                     }
                 ]
              },
-             "materialInfo": {
-                 "module": "js/panels/Materials/materials-popup.reel",
-                 "name": "MaterialsPopup"
-             },
+            "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",
@@ -65,9 +94,9 @@
         <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" class="nj-skinned">Add</button>
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 bb550598..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,53 +4,31 @@ 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,
-    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);
-        }
-    },
-
-    willDraw: {
+    _hasFocus: {
         enumerable: false,
-        value: function() {
-
-        }
+        value: false
     },
-    
-    draw: {
-        enumerable: false,
-        value: function() {
 
-        }
+    didCreate: {
+        value: function() {
+            this.materialsData = MaterialsData;
+        }
     },
 
-    _loadXMLDoc: {
-        value:function(dname) {
-            if (window.XMLHttpRequest) {
-                xhttp = new XMLHttpRequest();
-            }
-            xhttp.open("GET", dname, false);
+    prepareForDraw: {
+        value : function() {
+            this.eventManager.addEventListener("showMaterialPopup", this, false);