From cbcc9dcadaf62b3b0aef380f022bf6c365785627 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 2 Feb 2012 10:36:05 -0800
Subject: Tree Controller - Initial add

---
 js/controllers/tree-controller.js | 219 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 js/controllers/tree-controller.js

diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js
new file mode 100644
index 00000000..45e4c4ba
--- /dev/null
+++ b/js/controllers/tree-controller.js
@@ -0,0 +1,219 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/**
+ @module montage/ui/controller/tree-controller
+ @requires montage/core/core
+ @requires montage/ui/controller/object-controller
+ @requires montage/core/event/mutable-event
+ */
+var Montage = require("montage").Montage,
+    ObjectController = require("montage/ui/controller/object-controller").ObjectController,
+    ArrayController = require("montage/ui/controller/array-controller").ArrayController,
+    MutableEvent = require("montage/core/event/mutable-event").MutableEvent;
+/**
+    TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical
+    collection of objects, and managing user selection within that collection.
+    You can assign a TreeController instance as the <code>contentProvider</code> property for a TreeView object.
+    @class module:montage/ui/controller/tree-controller.TreeController
+    @classdesc
+    @extends module:montage/ui/controller/object-controller.ObjectController
+*/
+var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
+
+    rootKey : {
+        value: null
+    },
+
+    branchKey : {
+        value: 'children'
+    },
+
+    _root : {
+        value : null
+    },
+    root : {
+        get: function() {
+            return this._root;
+        },
+        set: function(value) {
+            this._root = value;
+
+            this.initArrayControllers();
+        }
+    },
+
+    rootController: {
+        value: null
+    },
+
+    initArrayControllers : {
+        value: function() {
+            var self = this;
+
+            ///// Declare function to initialize controller for each node
+            ///// that is a branch
+
+            function initController(array, depth) {
+                var controller = Montage.create(ArrayController, {
+                    content            : { value: array },
+                    delegate           : { value: self },
+                    isSelectionEnabled : { value: true }});
+
+                if(depth === 0) {
+                    self.rootController = controller;
+                }
+
+                self.branchControllers.push({
+                    depth      : depth,
+                    controller : controller
+
+                });
+            }
+
+            ///// Recursive function that finds all branch nodes and initializes
+            ///// an array controller
+
+            function walk(node, init, depth) {
+                var children = node[self.branchKey];
+
+                if(children) {
+                    //init(children, depth);
+
+                    children.forEach(function(child) {
+                        walk(child, init, ++depth);
+                    });
+
+                    node['treeNodeType'] = 'branch';
+                } else {
+                    node['treeNodeType'] = 'leaf';
+                }
+            }
+
+            walk(this._root, initController, 0);
+
+        }
+    },
+
+    /**
+        @private
+     */
+    _selectedIndexes: {
+        value: null,
+        enumerable: false
+    },
+
+   /**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    selectedIndexes: {
+        get: function() {
+
+        },
+        set: function(value) {
+
+        }
+    },
+
+    lazyLoad : {
+        value: false
+    },
+
+    branchControllers: {
+        value: []
+    },
+
+    addBranchController : {
+        value: function(controller) {
+            if(this.delegate) {
+                controller.delegate = this.delegate;
+            }
+
+            this.branchControllers.push(controller);
+        }
+    },
+
+    /**
+     @private
+     */
+    _content: {
+        enumerable: false,
+        value: null
+    },
+    /**
+        The content managed by the TreeController.
+        @type {Function}
+        @default {String} null
+    */
+    content: {
+        get: function() {
+            return this._content;
+        },
+        set: function(value) {
+            if (this._content === value) {
+                return;
+            }
+
+            this._content = value;
+
+            //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course
+            this.selectedObjects = null;
+
+            if (this.rootKey) {
+                if (value[this.rootKey]) {
+                    this.root = value[this.rootKey];
+                } else {
+                    console.log('No root key found in content data');
+                }
+            } else {
+                this.root = value;
+            }
+
+
+        }
+    },
+
+    addObjects : {
+        value: function() {
+
+            var objects = Array.prototype.slice.call(arguments),
+                i,
+                objectCount = objects.length,
+                selectedContentIndexes, firstIndex;
+
+            for (i = 0; i < objectCount; i++) {
+                this.content.push(objects[i]);
+            }
+
+            if (this.selectObjectsOnAddition) {
+                selectedContentIndexes = [];
+                firstIndex = this.content.length-objectCount;
+                for (i = 0; i < objectCount; i++) {
+                    selectedContentIndexes[i] = firstIndex++;
+                }
+                this.selectedContentIndexes = selectedContentIndexes;
+                this.selectedObjects = objects;
+            }
+
+            if (this.clearFilterFunctionOnAddition) {
+                this.filterFunction = null;
+            }
+
+            if (this.automaticallyOrganizeObjects) {
+                this.organizeObjects();
+            }
+
+        }
+    },
+
+    insertChildBefore : { value : function() {} },
+
+    insertChildAfter : { value : function() {} }
+
+
+
+});
-- 
cgit v1.2.3


From 5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 2 Feb 2012 14:58:21 -0800
Subject: Tree Controller - Clean out unused code

---
 js/controllers/tree-controller.js | 48 ++++++---------------------------------
 1 file changed, 7 insertions(+), 41 deletions(-)

diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js
index 45e4c4ba..2b2e910c 100644
--- a/js/controllers/tree-controller.js
+++ b/js/controllers/tree-controller.js
@@ -53,37 +53,15 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
         value: function() {
             var self = this;
 
-            ///// Declare function to initialize controller for each node
-            ///// that is a branch
-
-            function initController(array, depth) {
-                var controller = Montage.create(ArrayController, {
-                    content            : { value: array },
-                    delegate           : { value: self },
-                    isSelectionEnabled : { value: true }});
-
-                if(depth === 0) {
-                    self.rootController = controller;
-                }
-
-                self.branchControllers.push({
-                    depth      : depth,
-                    controller : controller
-
-                });
-            }
-
             ///// Recursive function that finds all branch nodes and initializes
-            ///// an array controller
+            ///// sets the tree node type to "branch" or "leaf"
 
             function walk(node, init, depth) {
-                var children = node[self.branchKey];
-
-                if(children) {
-                    //init(children, depth);
+                var branch = node[self.branchKey];
 
-                    children.forEach(function(child) {
-                        walk(child, init, ++depth);
+                if(branch) {
+                    branch.forEach(function(node) {
+                        walk(node, init, ++depth);
                     });
 
                     node['treeNodeType'] = 'branch';
@@ -92,7 +70,7 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
                 }
             }
 
-            walk(this._root, initController, 0);
+            walk(this._root, 0);
 
         }
     },
@@ -119,10 +97,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
         }
     },
 
-    lazyLoad : {
-        value: false
-    },
-
     branchControllers: {
         value: []
     },
@@ -160,7 +134,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
 
             this._content = value;
 
-            //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course
             this.selectedObjects = null;
 
             if (this.rootKey) {
@@ -173,7 +146,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
                 this.root = value;
             }
 
-
         }
     },
 
@@ -208,12 +180,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
             }
 
         }
-    },
-
-    insertChildBefore : { value : function() {} },
-
-    insertChildAfter : { value : function() {} }
-
-
+    }
 
 });
-- 
cgit v1.2.3


From 984d65c818969ea3bef57ade9cbf5fc50d9a2316 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 11:43:01 -0800
Subject: Tree Components - Adding the tree components

---
 js/components/treeview/branch.reel/branch.css      |  16 +++
 js/components/treeview/branch.reel/branch.html     | 142 ++++++++++++++++++++
 js/components/treeview/branch.reel/branch.js       |  48 +++++++
 js/components/treeview/leaf.reel/leaf.css          |   4 +
 js/components/treeview/leaf.reel/leaf.html         |  38 ++++++
 js/components/treeview/leaf.reel/leaf.js           |  44 +++++++
 .../treeview/ninja-branch.reel/ninja-branch.css    |  34 +++++
 .../treeview/ninja-branch.reel/ninja-branch.html   | 145 +++++++++++++++++++++
 .../treeview/ninja-branch.reel/ninja-branch.js     | 131 +++++++++++++++++++
 .../treeview/ninja-leaf.reel/ninja-leaf.css        |  22 ++++
 .../treeview/ninja-leaf.reel/ninja-leaf.html       |  38 ++++++
 .../treeview/ninja-leaf.reel/ninja-leaf.js         |  41 ++++++
 js/components/treeview/tree-node.js                | 103 +++++++++++++++
 js/components/treeview/treeview.reel/treeview.css  |   3 +
 js/components/treeview/treeview.reel/treeview.html |  50 +++++++
 js/components/treeview/treeview.reel/treeview.js   | 129 ++++++++++++++++++
 16 files changed, 988 insertions(+)
 create mode 100644 js/components/treeview/branch.reel/branch.css
 create mode 100644 js/components/treeview/branch.reel/branch.html
 create mode 100644 js/components/treeview/branch.reel/branch.js
 create mode 100644 js/components/treeview/leaf.reel/leaf.css
 create mode 100644 js/components/treeview/leaf.reel/leaf.html
 create mode 100644 js/components/treeview/leaf.reel/leaf.js
 create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.css
 create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.html
 create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.js
 create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.css
 create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.html
 create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.js
 create mode 100644 js/components/treeview/tree-node.js
 create mode 100644 js/components/treeview/treeview.reel/treeview.css
 create mode 100644 js/components/treeview/treeview.reel/treeview.html
 create mode 100644 js/components/treeview/treeview.reel/treeview.js

diff --git a/js/components/treeview/branch.reel/branch.css b/js/components/treeview/branch.reel/branch.css
new file mode 100644
index 00000000..5998e0f0
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.css
@@ -0,0 +1,16 @@
+.treeRoot > .branch > ul {
+    margin-top: 0;
+}
+.branch > .branch-label {
+    font-weight: bold;
+    cursor: pointer;
+}
+.branch ul {
+    list-style: none;
+}
+.branch ul {
+    padding-left: 30px;
+}
+.branch .collapse {
+    display: none;
+}
\ No newline at end of file
diff --git a/js/components/treeview/branch.reel/branch.html b/js/components/treeview/branch.reel/branch.html
new file mode 100644
index 00000000..31a4cf18
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="branch.css" rel="stylesheet" type="text/css" />
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/components/treeview/branch.reel",
+            "name" : "Branch",
+            "properties" : {
+                "element" : {"#" : "branch"},
+                "label" : { "@" : "textComponent" },
+                "branchList": {"#" : "branchList"},
+                "arrayController": {"@": "arrayController" },
+                "repetition": {"@": "repetition"},
+                "leafComponent": {"@": "leaf"},
+                "branchComponent": {"@": "branch"}
+            }
+        },
+
+        "textComponent" : {
+            "module" : "montage/ui/dynamic-text.reel",
+            "name" : "DynamicText",
+            "properties" : {
+                "element" : { "#" : "label" }
+            },
+            "bindings" : {
+                "value" : {
+                    "boundObject" : {"@": "owner"},
+                    "boundObjectPropertyPath": "_labelText",
+                    "oneway": true
+                }
+            }
+        },
+
+        "arrayController": {
+            "module": "montage/ui/controller/array-controller",
+            "name": "ArrayController",
+            "bindings": {
+                "content": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "childNodes"
+                }
+            }
+        },
+
+        "leaf": {
+            "module": "js/components/treeview/leaf.reel",
+            "name": "Leaf",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "branch": {
+            "module": "js/components/treeview/branch.reel",
+            "name": "Branch",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "repetition": {
+            "module": "montage/ui/repetition.reel",
+            "name": "Repetition",
+            "properties": {
+                "element": { "#": "branchList" },
+                "contentController": {"@": "arrayController" }
+            }
+        },
+
+        "substitution": {
+            "module": "montage/ui/substitution.reel",
+            "name": "Substitution",
+            "properties": {
+                "element": {"#": "treeItem"},
+                "switchComponents": {
+                    "leaf": {"@": "leaf"},
+                    "branch": {"@": "branch"}
+
+                }
+            },
+            "bindings": {
+                "switchValue": {
+                    "boundObject": {"@": "repetition"},
+                    "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
+                    "oneway": true
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="branch" class="branch">
+        <span id="label" class="branch-label"></span>
+
+        <ul id="branchList">
+            <li id="treeItem"></li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/branch.reel/branch.js b/js/components/treeview/branch.reel/branch.js
new file mode 100644
index 00000000..892da71a
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.js
@@ -0,0 +1,48 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var Branch = exports.Branch = Montage.create(TreeNode, {
+    hasTemplate:{
+        value:true
+    },
+    repetition:{
+        value: null
+    },
+    prepareForDraw : {
+        value: function() {
+            this.label._element.addEventListener('click', this, false);
+
+            this.treeView.contentController.addBranchController(this.arrayController);
+        }
+    },
+    draw:{
+        value: function () {
+
+            if (this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            } else {
+                console.log("Label key unknown");
+            }
+
+        }
+    },
+    handleClick : {
+        value: function(e) {
+            e.preventDefault();
+            this.toggleExpand();
+
+        }
+    },
+    collapseClass : {
+        value: 'collapse'
+    }
+
+
+});
diff --git a/js/components/treeview/leaf.reel/leaf.css b/js/components/treeview/leaf.reel/leaf.css
new file mode 100644
index 00000000..fea5a2c4
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.css
@@ -0,0 +1,4 @@
+.leaf > .leaf-label {
+    opacity: 0.8;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/js/components/treeview/leaf.reel/leaf.html b/js/components/treeview/leaf.reel/leaf.html
new file mode 100644
index 00000000..991a4323
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link href="leaf.css" rel="stylesheet" type="text/css" />
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/components/treeview/leaf.reel",
+                "name" : "Leaf",
+                "properties" : {
+                    "element" : {"#" : "leaf"},
+                    "label" : { "@" : "textComponent" }
+                }
+            },
+            "textComponent" : {
+                "module" : "montage/ui/dynamic-text.reel",
+                "name" : "DynamicText",
+                "properties" : {
+                    "element" : { "#" : "label" }
+                },
+                "bindings" : {
+                    "value" : {
+                        "boundObject" : {"@": "owner"},
+                        "boundObjectPropertyPath": "_labelText",
+                        "oneway": true
+                    }
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <div id="leaf" class="leaf">
+        <span id="label" class="leaf-label"></span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/leaf.reel/leaf.js b/js/components/treeview/leaf.reel/leaf.js
new file mode 100644
index 00000000..3a63f5ed
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.js
@@ -0,0 +1,44 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Leaf = Montage.create(TreeNode, {
+    hasTemplate: {
+        value: true
+    },
+    deserializedFromTemplate : {
+        value: function() {
+            //console.log('Leaf deserialized.');
+        }
+    },
+    templateDidLoad : {
+        value: function() {
+            //debugger;
+            console.log('Leaf\'s template did load.');
+            this.needsDraw = true;
+        }
+    },
+    prepareForDraw: {
+        value : function() {
+            console.log('Leafs prepare for draw.', this.labelKey);
+        }
+    },
+    draw : {
+        value : function() {
+            if(this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            } else {
+                console.log("Label key unknown");
+            }
+
+        }
+    }
+
+
+});
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
new file mode 100644
index 00000000..698fcd21
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -0,0 +1,34 @@
+.treeRoot > .branch > ul {
+    margin-top: 0;
+}
+.branch ul {
+    list-style: none;
+    padding-left: 0;
+}
+.branch .nj-collapser {
+    -webkit-transition: height 0.14s cubic-bezier(.44,.19,0,.99);
+}
+.branch .branchCollapser ul {
+    width: 100%;
+}
+.treeRoot .branch .branch-label {
+    border-bottom: 1px solid #505050;
+    cursor: pointer;
+    padding: 3px 0 4px;
+    background-repeat: no-repeat;
+    background-position: 3px 2px;
+    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+    font-weight: bold;
+    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+}
+
+/* First Level */
+.branch .branch .branch-label {
+    padding-left: 25px;
+}
+
+/* Second Level */
+.branch .branch .branch .branch-label {
+    padding-left: 45px;
+    background-position: 25px;
+}
\ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html
new file mode 100644
index 00000000..6e239855
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="ninja-branch.css" rel="stylesheet" type="text/css" />
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/components/treeview/ninja-branch.reel",
+            "name" : "Branch",
+            "properties" : {
+                "element" : {"#" : "branch"},
+                "label" : { "@" : "textComponent" },
+                "branchList": {"#" : "branchList"},
+                "arrayController": {"@": "arrayController" },
+                "repetition": {"@": "repetition"},
+                "leafComponent": {"@": "leaf"},
+                "branchComponent": {"@": "branch"},
+                "collapser": {"#": "branchCollapser" }
+            }
+        },
+
+        "textComponent" : {
+            "module" : "montage/ui/dynamic-text.reel",
+            "name" : "DynamicText",
+            "properties" : {
+                "element" : { "#" : "label" }
+            },
+            "bindings" : {
+                "value" : {
+                    "boundObject" : {"@": "owner"},
+                    "boundObjectPropertyPath": "_labelText",
+                    "oneway": true
+                }
+            }
+        },
+
+        "arrayController": {
+            "module": "montage/ui/controller/array-controller",
+            "name": "ArrayController",
+            "bindings": {
+                "content": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "childNodes"
+                }
+            }
+        },
+
+        "leaf": {
+            "module": "js/components/treeview/ninja-leaf.reel",
+            "name": "Leaf",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "branch": {
+            "module": "js/components/treeview/ninja-branch.reel",
+            "name": "Branch",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "repetition": {
+            "module": "montage/ui/repetition.reel",
+            "name": "Repetition",
+            "properties": {
+                "element": { "#": "branchList" },
+                "contentController": {"@": "arrayController" }
+            }
+        },
+
+        "substitution": {
+            "module": "montage/ui/substitution.reel",
+            "name": "Substitution",
+            "properties": {
+                "element": {"#": "treeItem"},
+                "switchComponents": {
+                    "leaf": {"@": "leaf"},
+                    "branch": {"@": "branch"}
+
+                }
+            },
+            "bindings": {
+                "switchValue": {
+                    "boundObject": {"@": "repetition"},
+                    "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
+                    "oneway": true
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="branch" class="branch">
+        <div id="label" class="branch-label"></div>
+        <div id="branchCollapser" class="branchCollapser">
+            <ul id="branchList">
+                <li id="treeItem"></li>
+            </ul>    
+        </div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js
new file mode 100644
index 00000000..6b9ebb10
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js
@@ -0,0 +1,131 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var Branch = exports.Branch = Montage.create(TreeNode, {
+    hasTemplate:{
+        value:true
+    },
+    repetition:{
+        value: null
+    },
+    prepareForDraw : {
+        value: function() {
+            this.collapser.removeAttribute('id');
+            this.label._element.addEventListener('click', this, false);
+            
+            if(this.hideLabel) {
+                this.label.element.style.display = "none";
+            }
+
+            this.treeView.contentController.addBranchController(this.arrayController);
+        }
+    },
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            e.stopPropagation(); 
+            
+            ///// Remove Transition
+            this._removeTransition = true;
+            this.collapser.removeEventListener('webkitTransitionEnd', this, false);
+            
+            //// If it's an expand transition, restore height to auto
+            if(this.isExpanded) {
+                this._switchToAuto = true;
+            }
+            
+            this.needsDraw = true;
+
+        }
+    },
+    templateDidLoad: {
+        value: function() {
+            this.arrayController.delegate = this.treeView.contentController;
+        }
+    },
+    willDraw : {
+        value: function() {
+            if(this._doCollapse && this._step === 0) {
+                this.branchHeight = window.getComputedStyle(this.collapser).height;
+            }
+        }
+    },
+    draw:{
+        value: function () {
+
+            if (this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            }
+            
+            if(this._doCollapse) {
+                if (this._step === 0) {                    
+                    this.collapser.style.height = this.branchHeight;
+                    this.collapser.style.position = "relative";
+                    this.collapser.style.overflow = 'hidden';
+                    this.collapser.childNodes[1].style.bottom = '0px';
+                    this.collapser.childNodes[1].style.position = 'absolute';
+                    this._step = 1;
+                    this.needsDraw = true;
+                } else if (this._step === 1) {
+                    this.collapser.classList.add(this.collapseClass);
+                    this._step = 2;
+                    this.needsDraw = true;
+                } else {
+                    this.collapser.style.height = '0px';
+                    this._doCollapse = false;
+                    this._step = 0;
+                }
+            } else if(this._doExpand) {
+                this.collapser.style.height = this.branchHeight;
+                
+                this._doExpand = false;
+            }
+            if(this._switchToAuto) {
+                this.collapser.childNodes[1].style.position = 'static';
+                this.collapser.style.height = 'auto';                    
+                this._switchToAuto = false;
+            }
+            
+            if(this._removeTransition) {
+                this.collapser.classList.remove(this.collapseClass);
+                this._removeTransition = false;
+            }
+
+        }
+    },
+    _step : {
+        value : 0
+    },
+    handleClick : {
+        value: function(e) {
+            this.toggleExpand();
+        }
+    },
+    expand : {
+        value: function() {
+            this.collapser.addEventListener('webkitTransitionEnd', this, false);
+            this.needsDraw = this._doExpand = true;
+        }
+    },
+    collapse : {
+        value: function() {
+            this.needsDraw = this._doCollapse = true;            
+        }
+    },
+    branchHeight: {
+        value: null,
+        enumberable: false
+    },
+    collapseClass : {
+        value: 'nj-collapser',
+        enumberable: false
+    }
+
+
+});
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
new file mode 100644
index 00000000..0ad10c4c
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -0,0 +1,22 @@
+.treeRoot .leaf-label {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQzcwMEU1RjQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQzcwMEU2MDQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRDNzAwRTVENDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRDNzAwRTVFNDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BUcaK3QAAANFJREFUeNqMULEOREAQdYjvuE%2FYWlSUQqKQ7A%2FsD6n0SoVCFHpRa0SllvgFlpvzZO9OcfGSnbx9M%2FNmMpp2Dw96VVX9L%2FJ93wRrmkZJIKrZcRyK%2Bs25p5%2BU8pK4KCakMAzxL4oCJIqivu8Nw0DDu25ZFtW3ritIkiS0tGVZtm1%2F6rZtu4yr67osSyJBEJx3ybKsbVukOecU4zh2XRfKMAzTNJmYpWxgPM%2BzEIIxRrzrOs%2FzdMyVvyAxTdPxAJFzv%2BeBbz8cfN93kDzPb55ZewkwAF0Ddf6ATSsHAAAAAElFTkSuQmCC);
+    background-position: 3px center;
+    background-repeat: no-repeat;
+    border-bottom: 1px solid #505050;
+    cursor: pointer;
+    padding: 3px 0 4px;
+}
+/* First level */
+.branch .leaf-label {
+    padding-left: 25px;
+}
+/* Second level */
+.branch .branch .leaf-label {
+    background-position: 25px center;
+    padding-left: 45px;
+}
+/* Third level */
+.branch .branch .branch .leaf-label {
+    background-position: 45px center;
+    padding-left: 65px;
+}
\ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
new file mode 100644
index 00000000..0a8fdac0
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link href="ninja-leaf.css" rel="stylesheet" type="text/css" />
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/components/treeview/ninja-leaf.reel",
+                "name" : "Leaf",
+                "properties" : {
+                    "element" : {"#" : "leaf"},
+                    "label" : { "@" : "textComponent" }
+                }
+            },
+            "textComponent" : {
+                "module" : "montage/ui/dynamic-text.reel",
+                "name" : "DynamicText",
+                "properties" : {
+                    "element" : { "#" : "label" }
+                },
+                "bindings" : {
+                    "value" : {
+                        "boundObject" : {"@": "owner"},
+                        "boundObjectPropertyPath": "_labelText",
+                        "oneway": true
+                    }
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <div id="leaf" class="leaf">
+        <div id="label" class="leaf-label"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
new file mode 100644
index 00000000..bd566b26
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -0,0 +1,41 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Leaf = Montage.create(TreeNode, {
+    hasTemplate: {
+        value: true
+    },
+    templateDidLoad : {
+        value: function() {
+            this.needsDraw = true;
+        }
+    },
+    prepareForDraw: {
+        value : function() {
+            this.activationEvent = this.activationEvent || 'click';
+            this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);
+        }
+    },
+    handleNodeActivation: {
+        value: function(e) {
+            console.log(this.sourceObject);
+            this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);
+        }
+    },
+    draw : {
+        value : function() {
+            if(this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            }
+        }
+    }
+
+
+});
diff --git a/js/components/treeview/tree-node.js b/js/components/treeview/tree-node.js
new file mode 100644
index 00000000..689fc233
--- /dev/null
+++ b/js/components/treeview/tree-node.js
@@ -0,0 +1,103 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.TreeNode = Montage.create(Component, {
+    _labelText: {
+        value: "Default"
+    },
+    labelText : {
+        get: function() { return this._labelText; },
+        set: function(text) {
+            this._labelText = text;
+        }
+    },
+    treeView : {
+        value: null,
+        serializable: true
+    },
+    leafComponent: {
+        value: null,
+        serializable: true
+    },
+    branchKey : {
+        serializable: true,
+        value: null
+    },
+    labelKey : {
+        serializable: true,
+        value: null
+    },
+    _sourceObject : {
+        value : null
+    },
+    sourceObject : {
+        get : function() {
+            return this._sourceObject;
+        },
+        set : function(object) {
+            if(!object) {
+                return;
+            }
+            if(object[this.branchKey]) {
+                object[this.branchKey].forEach(function(node) {
+                    this.childNodes.push(node);
+                }, this);
+            }
+            this._sourceObject = object;
+        }
+    },
+    childNodes : {
+        distinct: true,
+        value: []
+    },
+    isExpanded : {
+        distinct: true,
+        value: true
+    },
+    _needsToggle : {
+        value: null
+    },
+    activationEvent : {
+        value: null
+    },
+    toggleExpand : {
+        value: function() {
+            if(this.isExpanded) {
+                this.collapse();
+                this.isExpanded = false;
+            } else {
+                this.expand();
+                this.isExpanded = true;
+            }
+        }
+    },
+    expand : {
+        value: function() {
+            if(this.collapseClass) {
+                this.branchList.classList.remove(this.collapseClass);
+            } else {
+                this.branchList.style.display = "block";
+            }
+
+        }
+    },
+    collapse : {
+        value: function() {
+            if(this.collapseClass) {
+                this.branchList.classList.add(this.collapseClass);
+            } else {
+                this.branchList.style.display = "none";
+            }
+
+        }
+    }
+
+
+
+});
diff --git a/js/components/treeview/treeview.reel/treeview.css b/js/components/treeview/treeview.reel/treeview.css
new file mode 100644
index 00000000..1e3965ef
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.css
@@ -0,0 +1,3 @@
+
+
+{}
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
new file mode 100644
index 00000000..3d5d75c4
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" href="treeview.css" type="text/css">
+        <script type="text/montage-serialization">
+        {
+            "owner" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : { "#" : "treeView"},
+                    "defaultBranchComponent" : { "@" : "defaultBranch"},
+                    "defaultLeafComponent" : { "@" : "defaultLeaf"},
+                    "scrollview" : { "@" : "scrollview"},
+                    "slot": {"@": "slot"}
+                }
+            },
+            "defaultBranch" : {
+                "module" : "js/components/treeview/branch.reel",
+                "name" : "Branch"
+            },
+            "defaultLeaf" : {
+                "module" : "js/components/treeview/presets-leaf.reel",
+                "name" : "Leaf"
+            },
+            "scrollview": {
+                "module": "montage/ui/scrollview.reel",
+                "name": "Scrollview",
+                "properties": {
+                    "element": {"#": "treeView"},
+                    "axis": "vertical"
+                 }
+            },
+            "slot": {
+                "module": "montage/ui/slot.reel",
+                "name": "Slot",
+                "properties": {
+                    "element": {"#": "rootBranch"}
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <div id="treeView" class="treeView">
+        <div id="rootBranch" class="treeRoot"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js
new file mode 100644
index 00000000..ebbfe685
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.js
@@ -0,0 +1,129 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.Treeview = Montage.create(Component, {
+
+    substitution      : { value : null },
+    data              : { value : null },
+
+    _hasBeenDeserialized: {
+        value: false,
+        enumerable: false
+    },
+
+    branchComponent : {
+        value: null,
+        serializable: true
+    },
+    leafComponent : {
+        value: null,
+        serializable: true
+    },
+
+    hasTemplate: {
+        value: true
+    },
+    templateDidLoad : {
+        value : function() {
+            this._initializeRootBranch();
+        }
+    },
+    _initializeRootBranch : {
+        value: function() {
+            var rootBranch;
+
+            ///// Get user-defined branch/leaf components or use defaults
+            this.branchComponent = this.branchComponent || this.defaultBranchComponent;
+
+            ///// Tell branch component what the label key is (defined in tree controller)
+            this.branchComponent.labelKey = this.contentController.labelKey;
+
+            ///// Tell branch component what the branch key is (so it can recursively generate branches)
+            this.branchComponent.branchKey = this.contentController.branchKey;
+
+            rootBranch = Montage.create(this.branchComponent);
+            rootBranch.hideLabel = !this.showRoot;
+            rootBranch.treeView = this;
+
+            this.slot.content = rootBranch;
+            rootBranch.sourceObject = this.contentController.root;
+            rootBranch.needsDraw = true;
+            this.needsDraw = true;
+
+        }
+    },
+    showRoot : {
+        value: null
+    },
+
+    _contentController: {
+        enumerable: false,
+        value: null
+    },
+
+    contentController: {
+        enumerable: false,
+        get: function() {
+            return this._contentController;
+        },
+        set: function(value) {
+            if (this._contentController === value) {
+                return;
+            }
+
+            if (this._contentController) {
+                Object.deleteBinding(this, "selectedIndexes");
+            }
+
+            this._contentController = value;
+
+            if (this._contentController) {
+
+                // And bind what we need from the new contentController
+                var selectedIndexesBindingDescriptor;
+
+                selectedIndexesBindingDescriptor = {
+                    boundObject: this._contentController,
+                    boundObjectPropertyPath: "selectedIndexes"
+                };
+
+                if (this._hasBeenDeserialized) {
+                    Object.defineBinding(this, "selectedIndexes", selectedIndexesBindingDescriptor);
+                } else {
+                    // otherwise we need to defer it until later; we haven't been deserialized yet
+                    if (!this._controllerBindingsToInstall) {
+                        this._controllerBindingsToInstall = {};
+                    }
+                    this._controllerBindingsToInstall.selectedIndexes = selectedIndexesBindingDescriptor;
+                }
+            }
+
+        }
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            var controllerBindingDescriptorsToInstall = this._controllerBindingsToInstall;
+
+            if (controllerBindingDescriptorsToInstall) {
+                for (var key in controllerBindingDescriptorsToInstall) {
+                    Object.defineBinding(this, key, controllerBindingDescriptorsToInstall[key]);
+                }
+                delete this._controllerBindingsToInstall;
+            }
+
+            this._hasBeenDeserialized = true;
+        }
+    },
+
+    selectedIndexes: {
+        enumerable: false,
+        value: null
+    }
+});
\ No newline at end of file
-- 
cgit v1.2.3


From 9d1c9d10436c0e0b38115b0025b40b1e838b1350 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Wed, 1 Feb 2012 16:50:59 -0800
Subject: Styles Controller - First stab at group styling

Split "createOverrideRule" into two methods --> now has createOverrideSelector. Also took first stab at creating a group style.
---
 js/controllers/styles-controller.js | 102 ++++++++++++++++++++++++++++++------
 1 file changed, 86 insertions(+), 16 deletions(-)

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index afd298c9..8fc90e7d 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -171,7 +171,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             if(argType === 'string') {
                 ruleText += '{' + declaration + '}';
             } else if(argType === 'object') {
-                ruleText += '{' + nj.cssFromObject(declaration) + '}';
+                ruleText += '{' + this.cssFromObject(declaration) + '}';
             }
             
             stylesheet.insertRule(ruleText, index);
@@ -199,25 +199,42 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             
             ///// Locally-scoped function to de-clutter variable declarations
             function getSelector(el, rule) {
-
                 return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
             }
 
             var selectorToOverride = getSelector.bind(this)(element, ruleToOverride),
-                tokens             = selectorToOverride.split(/\s/),
-                newClass           = this.generateClassName(element.nodeName),
-                lastToken, pseudoSplit, base, pseudo, newToken, newSelector, rule;
+                overrideData, rule;
+
+            ///// Get the overriding selector and className
+            overrideData = this.createOverrideSelector(selectorToOverride, element.nodeName);
+
+            ///// Create new rule with selector and insert it after the rule we're overriding
+            rule = this.addRule(overrideData.selector + ' { }', this.getRuleIndex(ruleToOverride)+1);
+            
+            return {
+                className : overrideData.className,
+                rule      : rule
+            };
+            
+        }
+    },
+
+    createOverrideSelector : {
+        value: function(selectorToOverride, classPrefix, className) {
+            var tokens = selectorToOverride.split(/\s/),
+                newClass = className || this.generateClassName(classPrefix, true),
+                lastToken, pseudoSplit, base, pseudo, newToken, newSelector;
 
             ///// Creating an overriding selector by replacing the last
             ///// class, attribute or type selector in passed-in rule's selector
-            
+
             ///// Grab the last token
             lastToken   = tokens[tokens.length-1];
             pseudoSplit = lastToken.split(':');
             ///// The last token can have pseudo class. Let's preserve it
             base   = pseudoSplit[0];
             pseudo = (pseudoSplit[1]) ? ':'+pseudoSplit[1] : '';
-            
+
             ///// Now, all we want to do is replace the last token with a
             ///// generated class name, except if the last token is an ID selector,
             ///// in which case we append the generated class name to the ID selector
@@ -231,18 +248,15 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 ///// Append the generated class
                 newToken += '.' + newClass + pseudo;
             }
-            
+
             ///// Now we can build the new selector by replacing the last token
             tokens[tokens.length-1] = newToken;
             newSelector = tokens.join(' ');
-            
-            rule = this.addRule(newSelector + ' { }', this.getRuleIndex(ruleToOverride)+1);
-            
+
             return {
                 className : newClass,
-                rule      : rule
+                selector  : newSelector
             };
-            
         }
     },
     
@@ -370,7 +384,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// from which an overriding rule can be created.
 
     getDominantRuleForGroup : {
-        value : function(elements, property) {
+        value : function(elements, property, forceOverride) {
             var selectorsToOverride = [],
                 commonRules, dominantRules, useImportant;
 
@@ -639,7 +653,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     },
     
     ///// Get Most Specific Selector For Element
-    ///// Given a selector+specificty array, find the most specific
+    ///// Given a selector+specificity array, find the most specific
     ///// selector for the passed-in element
     
     _getMostSpecificSelectorForElement : {
@@ -721,7 +735,11 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     ///// Calculate specificity
     ///// Returns the specificity value of passed-in selector
     ///// WARNING: Do not pass in grouped selectors!
-    ///// Helpful for determining precedence of style rules   
+    ///// Helpful for determining precedence of style rules
+    ///// Calculation javascript code courtesy of David Owens:
+    ///// http://gbradley.com/2009/10/02/css-specificity-in-javascript
+    ///// Used with author's permission
+
     calculateSpecificity : {
         value : function(selector) {
             var s   = selector.replace(/\([^\)]+\)/,''),
@@ -922,6 +940,43 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
         }
     },
+
+    setGroupStyles : {
+        value : function(elements, styles) {
+            var properties = Object.keys(styles),
+                newClass = this.generateClassName(null, true),
+                selectors;
+
+            ///// TODO: move this: Locally-scoped function to de-clutter variable declarations
+            function getSelector(el, rule) {
+                return this._getMostSpecificSelectorForElement(el, rule[this.CONST.SPECIFICITY_KEY]).selector;
+            }
+
+            selectors = elements.map(function(el) {
+                ///// for each element, we want to find the most specific selector
+                var matchingRules = this.getMatchingRules(el, true);
+
+                this.addClass(el, newClass);
+
+                if(matchingRules.length === 0) {
+                    return null;
+                }
+
+                var mostSpecificRule = matchingRules[0], // TODO: iterate over properties to find most specific
+                    selectorToOverride = getSelector.bind(this)(el, mostSpecificRule),
+                    override = this.createOverrideSelector(selectorToOverride, null, newClass);
+
+                return override.selector;
+
+            }, this);
+
+            selectors.filter(function(item) {
+                return item !== null;
+            });
+
+            this.addRule(selectors.join(', '), styles);
+        }
+    },
     
     ///// Get Element Style
     ///// Gets the style value that is currently applied to the element
@@ -1058,6 +1113,21 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         }
     },
 
+    ///// CSS From Object
+    ///// Returns css text from object with key/value pairs
+    ///// representing css styles
+
+    cssFromObject : {
+        value : function(obj) {
+            var cssText = '';
+            ///// For each key/value pair, create css text
+            for(var prop in obj) {
+                cssText += prop + ':' + obj[prop] + ';';
+            }
+            return cssText;
+        }
+    },
+
     /* ----------------- Element model (rule cache) related methods ----------------- */
 
     ///// Get Cached Rule For Property
-- 
cgit v1.2.3


From c83b0d9bf3f37ae8569e8afc51dbcba9ed003929 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 13:08:38 -0800
Subject: TreeController - moving the tree controller to the components
 directory

---
 js/components/controllers/tree-controller.js | 185 +++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 js/components/controllers/tree-controller.js

diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js
new file mode 100644
index 00000000..03ef7b9e
--- /dev/null
+++ b/js/components/controllers/tree-controller.js
@@ -0,0 +1,185 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/**
+ @module montage/ui/controller/tree-controller
+ @requires montage/core/core
+ @requires montage/ui/controller/object-controller
+ @requires montage/core/event/mutable-event
+ */
+var Montage = require("montage").Montage,
+    ObjectController = require("montage/ui/controller/object-controller").ObjectController,
+    ArrayController = require("montage/ui/controller/array-controller").ArrayController,
+    MutableEvent = require("montage/core/event/mutable-event").MutableEvent;
+/**
+    TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical
+    collection of objects, and managing user selection within that collection.
+    You can assign a TreeController instance as the <code>contentProvider</code> property for a TreeView object.
+    @class module:montage/ui/controller/tree-controller.TreeController
+    @classdesc
+    @extends module:montage/ui/controller/object-controller.ObjectController
+*/
+var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
+
+    rootKey : {
+        value: null
+    },
+
+    branchKey : {
+        value: 'children'
+    },
+
+    _root : {
+        value : null
+    },
+    root : {
+        get: function() {
+            return this._root;
+        },
+        set: function(value) {
+            this._root = value;
+
+            this.initArrayControllers();
+        }
+    },
+
+    rootController: {
+        value: null
+    },
+
+    initArrayControllers : {
+        value: function() {
+            var self = this;
+
+            ///// Recursive function that finds all branch nodes and initializes
+            ///// sets the tree node type to "branch" or "leaf"
+
+            function walk(node, init, depth) {
+                var branch = node[self.branchKey];
+
+                if(branch) {
+                    branch.forEach(function(node) {
+                        walk(node, init, ++depth);
+                    });
+
+                    node['treeNodeType'] = 'branch';
+                } else {
+                    node['treeNodeType'] = 'leaf';
+                }
+            }
+
+            walk(this._root, 0);
+
+        }
+    },
+
+    /**
+        @private
+     */
+    _selectedIndexes: {
+        value: null,
+        enumerable: false
+    },
+
+   /**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+   selectedIndexes: {
+       get: function() {
+           return this._selectedIndexes;
+       },
+       set: function(value) {
+           this._selectedIndexes = value;
+       }
+   },
+
+    branchControllers: {
+        value: []
+    },
+
+    addBranchController : {
+        value: function(controller) {
+            if(this.delegate) {
+                controller.delegate = this.delegate;
+            }
+
+            this.branchControllers.push(controller);
+        }
+    },
+
+    /**
+     @private
+     */
+    _content: {
+        enumerable: false,
+        value: null
+    },
+    /**
+        The content managed by the TreeController.
+        @type {Function}
+        @default {String} null
+    */
+    content: {
+        get: function() {
+            return this._content;
+        },
+        set: function(value) {
+            if (this._content === value) {
+                return;
+            }
+
+            this._content = value;
+
+            this.selectedObjects = null;
+
+            if (this.rootKey) {
+                if (value[this.rootKey]) {
+                    this.root = value[this.rootKey];
+                } else {
+                    console.log('No root key found in content data');
+                }
+            } else {
+                this.root = value;
+            }
+
+        }
+    },
+
+    addObjects : {
+        value: function() {
+
+            var objects = Array.prototype.slice.call(arguments),
+                i,
+                objectCount = objects.length,
+                selectedContentIndexes, firstIndex;
+
+            for (i = 0; i < objectCount; i++) {
+                this.content.push(objects[i]);
+            }
+
+            if (this.selectObjectsOnAddition) {
+                selectedContentIndexes = [];
+                firstIndex = this.content.length-objectCount;
+                for (i = 0; i < objectCount; i++) {
+                    selectedContentIndexes[i] = firstIndex++;
+                }
+                this.selectedContentIndexes = selectedContentIndexes;
+                this.selectedObjects = objects;
+            }
+
+            if (this.clearFilterFunctionOnAddition) {
+                this.filterFunction = null;
+            }
+
+            if (this.automaticallyOrganizeObjects) {
+                this.organizeObjects();
+            }
+
+        }
+    }
+
+});
-- 
cgit v1.2.3


From fa036c22a3f1e4862a121f478eb227f52578f8a0 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 6 Feb 2012 16:41:15 -0800
Subject: Attempt to fix initialization bug for snap-manager

---
 js/helper-classes/3D/snap-manager.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 8819f637..3af7d8cf 100644
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -9,14 +9,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 //      Class to do hit testing of objects in the html page
 ///////////////////////////////////////////////////////////////////////
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
-
-var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
-var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
-var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils;
-var HitRecord = require("js/helper-classes/3D/hit-record").HitRecord;
-var Snap2DRecord = require("js/helper-classes/3D/snap-2d-record").Snap2DRecord;
-var NJUtils = require("js/lib/NJUtils").NJUtils;
+    Component = require("montage/ui/component").Component,
+    viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils,
+    vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils,
+    drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils,
+    HitRecord = require("js/helper-classes/3D/hit-record").HitRecord,
+    Snap2DRecord = require("js/helper-classes/3D/snap-2d-record").Snap2DRecord,
+    NJUtils = require("js/lib/NJUtils").NJUtils;
 
 var SnapManager = exports.SnapManager = Montage.create(Component, {
 	///////////////////////////////////////////////////////////////////////
-- 
cgit v1.2.3


From 9dc2f9d72364bb3a8ddaef56eaf7d5c22b134e59 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 16:55:34 -0800
Subject: Styles Controller - Add code to remove cache items from history (not
 just nullifying them)

---
 js/controllers/styles-controller.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 8fc90e7d..6ba24aa6 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller