From 193fcd30832f89c03cd80a76c675e3463d1b9336 Mon Sep 17 00:00:00 2001
From: Shannon Deminick <sdeminick@gmail.com>
Date: Sun, 2 Jun 2013 22:29:07 -1000
Subject: [PATCH] merged all new changes in... going to revert to the raw belle
 files after this and then move back to this revision so we have a clear
 picture of whats changed.

---
 .../umbraco/Views/common/tree.html            |   40 +-
 .../Views/directives/umb-leftcolumn.html      |   10 +-
 src/Umbraco.Web.UI/umbraco/Views/index.html   |  142 ---
 src/Umbraco.Web.UI/umbraco/js/app.js          |    2 +-
 src/Umbraco.Web.UI/umbraco/js/routes.js       |   23 +-
 .../umbraco/js/umbraco.controllers.js         | 1107 ++++++++---------
 .../umbraco/js/umbraco.directives.js          |  208 +++-
 .../umbraco/js/umbraco.filters.js             |   39 +-
 .../umbraco/js/umbraco.resources.js           |   18 +-
 .../umbraco/js/umbraco.services.js            |  151 ++-
 10 files changed, 854 insertions(+), 886 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI/umbraco/Views/index.html

diff --git a/src/Umbraco.Web.UI/umbraco/Views/common/tree.html b/src/Umbraco.Web.UI/umbraco/Views/common/tree.html
index 913a987010..79bfa1e082 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/common/tree.html
+++ b/src/Umbraco.Web.UI/umbraco/Views/common/tree.html
@@ -1,31 +1,19 @@
-<style>
-    
-    ul.umb-tree li ul li ul {
-        padding-left: 20px;
-    }
+<script type="text/ng-template"  id="tree_item_renderer.html">
+        <div ng-style="setTreePadding(node)">
+            <ins ng-class="{'icon-caret-right': !node.expanded, 'icon-caret-down': node.expanded}" 
+                 ng-click="getTreeChildren(node)"></ins>
 
-</style>
+            <i class="icon umb-tree-icon sprTree {{node.icon}}"></i>
 
-<script type="text/ng-template"  id="tree_item_renderer.html">
-    <div>
-        <ins ng-hide="node.hasChildren" style="background:none;width:18px;"></ins>
+            <a ng-href="#{{node.view}}">{{node.name}}</a>
+            <i class="umb-options" ng-click="showCon    textMenu(node, $event)"><i></i><i></i><i></i></i>
+        </div>
 
-        <ins ng-show="node.hasChildren"
-             ng-class="{'icon-caret-right': !node.expanded, 'icon-caret-down': node.expanded}" 
-             ng-click="getTreeChildren(node)"></ins>
-
-        <i class="{{node|umbTreeIconClass:'icon umb-tree-icon sprTree'}}" style="{{node|umbTreeIconImage}}">
-        </i>
-
-        <a ng-href="#{{node.view}}">{{node.name}}</a>
-        <i class="umb-options" ng-click="showContextMenu(node, $event)"><i></i><i></i><i></i></i>
-    </div>
-
-    <ul ng-class="{collapsed: !node.expanded}">
-        <li ng-repeat="node in node.children" 
-            ng-class="{current:node.id == selectedId}" 
-            ng-include="'tree_item_renderer.html'"></li>
-    </ul>
+        <ul ng-class="{collapsed: !node.expanded}">
+            <li ng-repeat="node in node.children" 
+                ng-class="{current:node.id == selectedId}" 
+                ng-include="'tree_item_renderer.html'"></li>
+        </ul>
 </script>
 
 
@@ -38,7 +26,7 @@
         </div>
 
         <ul>
-            <li class="file" ng-repeat="node in tree.nodes" 
+            <li class="file" ng-repeat="node in tree.children" 
              ng-class="{current:node.id == selectedId}" 
              ng-include="'tree_item_renderer.html'"></li>
         </ul>
diff --git a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html
index f7da039135..798acef770 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html
+++ b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html
@@ -27,8 +27,7 @@
 
     <!-- navigation container -->
     <div id="navigation" class="fill shadow umb-panel umb-modalcolumn"
-        ng-show="ui.showNavigation"
-        ng-animate="'slide'">
+       >
         <!-- the search -->
         <div id="search-form" ng-animate="'slide'">
             <div class="umb-panel-header">
@@ -63,10 +62,8 @@
 
         <!-- the tree -->
         <div id="tree" class="span5 umb-scrollable umb-panel" auto-scale="0" ng-animate="'slide'">
-            <div ng-include="'views/common/tree.html'"></div>
-        </div>
-
-
+            <umb-tree section="{{currentSection}}"></umb-tree>
+        </div>        
 
         <!-- The context menu -->
         <div id='contextMenu' class="umb-modalcolumn fill shadow umb-panel"
@@ -101,4 +98,5 @@
             </div>
         </div>
     </div>
+
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/Views/index.html b/src/Umbraco.Web.UI/umbraco/Views/index.html
deleted file mode 100644
index d48df9f8b2..0000000000
--- a/src/Umbraco.Web.UI/umbraco/Views/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
-<div ng-controller="MainController">
-    <div ng-show="authenticated" ng-cloak ng-animate="'fade'" id="layout" class="clearfix" ng-click="closeDialogs($event)">
-
-        <div id="leftcolumn" ng-controller="NavigationController" ng-mouseleave="hideSectionTree()">
-            <div id="applications" ng-class="{faded:ui.stickyNavigation}">
-                <ul class="sections">
-                    <li class="avatar">
-                        <a href="#" title="{{user.name}}">
-                            <img ng-src="{{user.avatar}}" />
-                        </a>
-                    </li>
-
-                    <li ng-repeat="section in sections">
-                        <a href="#/{{section.alias}}"
-                            ng-mouseenter="showSectionTree(section)"
-                            ng-click="openSection(section)"
-                            prevent-default>
-                            <i class="{{section.cssclass}}"></i><span>{{section.name}}</span>
-                        </a>
-                    </li>
-
-                    <li class="help">
-                        <a class="help" href="#/help">
-                            <img src="assets/img/applicationIcons/help.svg" style="height: 30px; width: 30px;" />
-                            <span>{{localization.app.help}}</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-            <!-- navigation container -->
-            <div id="navigation" class="fill shadow umb-panel umb-modalcolumn"
-                ng-show="ui.showNavigation"
-                ng-animate="'slide'">
-                <!-- the search -->
-                <div id="search-form" ng-animate="'slide'">
-                    <div class="umb-panel-header">
-                        <form class="form-search" ng-controller="SearchController">
-                            <i class="icon-search"></i>
-                            <input type="text"
-                                ng-model="ui.searchTerm"
-                                class="umb-search-field search-query"
-                                placeholder="{{localization.app.search.typeToSearch}}"
-                                on-blur="deActivateSearch()"
-                                on-keyup="performSearch(ui.searchTerm)">
-                        </form>
-                    </div>
-                </div>
-
-                <!-- Search results -->
-                <div id="search-results" class="umb-scrollable umb-panel" auto-scale="0"
-                    ng-show="ui.showSearchResults" ng-animate="'slide'">
-
-                    <h5>{{localization.app.search.searchResult}}</h5>
-
-                    <ul class="searchResults" ng-repeat="resultGroup in ui.searchResults">
-                        <li class="umb-icon-item" ng-class="{selected:$index==ui.selectedSearchResult}" ng-repeat="result in resultGroup.matches">
-                            <i class="icon umb-tree-icon sprTree {{result.icon}}" ng-show="$first"></i>
-                            <a ng-href="#{{result.view}}">{{result.name}}
-                                <small>{{result.path}}</small>
-                            </a>
-                            <i class="umb-options" ng-click="showContextMenu(result, $event)"><i></i><i></i><i></i></i>
-                        </li>
-                    </ul>
-                </div>
-
-                <!-- the tree -->
-                <div id="tree" class="span5 umb-scrollable umb-panel" auto-scale="0" ng-animate="'slide'">
-                    <div ng-include="'views/common/tree.html'"></div>
-                </div>
-
-
-
-                <!-- The context menu -->
-                <div id='contextMenu' class="umb-modalcolumn fill shadow umb-panel"
-                    ng-show="ui.showContextMenu" ng-animate="'slide'">
-
-                    <div class='umb-panel-header'>
-                        <h1>{{menuTitle}}</h1>
-                    </div>
-
-                    <div class='umb-panel-body'>
-                        <ul class="umb-actions">
-                            <li class="action" ng-class="{sep:action.seperator}" ng-repeat="action in contextMenu">
-                                <a prevent-default
-                                    ng-click="showContextDialog(currentNode,action,currentSection)">
-                                    <i class="icon icon-{{action.cssclass}}"></i>
-                                    <span class="menu-label">{{action.name}}</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-
-                </div>
-
-                <!-- Tree dialogs -->
-                <div id="dialog" class='umb-modalcolumn fill shadow umb-panel'
-                    ng-show="ui.showContextMenuDialog" ng-animate="'slide'">
-                    <div class='umb-panel-header'>
-                        <h1>{{dialogTitle}}</h1>
-                    </div>
-                    <div class='umb-panel-body'>
-                    </div>
-                </div>
-            </div>
-
-
-
-        </div>
-
-
-        <section id="contentwrapper">
-            <div id="contentcolumn">
-                <div ng-view></div>
-            </div>
-        </section>
-    </div>
-
-    <!-- Login screen -->
-    <div id="login" ng-show="!authenticated" ng-animate="'slide'" ng-cloak>
-        <div class="form" ng-cloak>
-            <h1>Happy {{today}}!, log in below</h1>
-            <div class="control-group">
-                <input type="text" ng-model="login" class="input-xlarge" placeholder="Enter your username" />
-            </div>
-            <div class="control-group">
-                <input type="password" ng-model="password" class="input-xlarge" placeholder="Enter your password" />
-            </div>
-            <input type="button" ng-click="signin()" class="btn" value="Login" />
-        </div>
-    </div>
-
-    <!-- notifications -->
-    <div id='speechbubble' class='umb-notification' ng-cloak>
-        <ul>
-            <li ng-repeat="notification in notifications" class="alert alert-block alert-{{notification.type}}">
-                <strong>{{notification.headline}}:</strong>{{notification.message}}<a class='close' ng-click="removeNotification($index)" prevent-default href='#'>&times;</a>
-            </li>
-        </ul>
-    </div>
-</div>
diff --git a/src/Umbraco.Web.UI/umbraco/js/app.js b/src/Umbraco.Web.UI/umbraco/js/app.js
index 0006384857..db113732a5 100644
--- a/src/Umbraco.Web.UI/umbraco/js/app.js
+++ b/src/Umbraco.Web.UI/umbraco/js/app.js
@@ -1,4 +1,4 @@
-/*! umbraco - v0.0.1-SNAPSHOT - 2013-05-28
+/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03
  * http://umbraco.github.io/Belle
  * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick;
  * Licensed MIT
diff --git a/src/Umbraco.Web.UI/umbraco/js/routes.js b/src/Umbraco.Web.UI/umbraco/js/routes.js
index 696bed75f8..adb48e851d 100644
--- a/src/Umbraco.Web.UI/umbraco/js/routes.js
+++ b/src/Umbraco.Web.UI/umbraco/js/routes.js
@@ -1,17 +1,14 @@
-define(['angular', 'app'], function(angular, app) {
+define([
+  'app'
+  ], function(app) {
 
     return app.config(function ($routeProvider) {
         $routeProvider
         .when('/:section', {
-            templateUrl: function (rp) {
-                //$log.log(rp.section);
-                return "views/common/dashboard.html";
-            }
+            templateUrl: "views/common/dashboard.html"
         })
         .when('/:section/:method', {
             templateUrl: function(rp) {
-                //$log.log(rp.section);
-
                 if (!rp.method)
                     return "views/common/dashboard.html";
                 
@@ -20,21 +17,13 @@ define(['angular', 'app'], function(angular, app) {
         })
         .when('/:section/:method/:id', {
             templateUrl: function(rp) {
-                //$log.log(rp.section);
-
-                if (!rp.method)
+                if (!rp.method) 
                     return "views/common/dashboard.html";
                 
                 return 'views/' + rp.section + '/' + rp.method + '.html';
             }
         })
-        .otherwise({
-            redirectTo: function (rp) {
-                //$log.log(rp.section);
-
-                return '/content'
-            }
-        });
+        .otherwise({ redirectTo: '/content' });
     }).config(function ($locationProvider) {
     //$locationProvider.html5Mode(false).hashPrefix('!'); //turn html5 mode off
     // $locationProvider.html5Mode(true);         //turn html5 mode on
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js
index ade25187ec..1e0990d61a 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.controllers.js
@@ -1,643 +1,632 @@
 'use strict';
-/*! umbraco - v0.0.1-SNAPSHOT - 2013-05-28
+/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03
  * http://umbraco.github.io/Belle
  * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick;
  * Licensed MIT
  */
 
-define(['angular', 'app'], function (angular, app) {
+define(['app', 'angular'], function (app, angular) {
+//Handles the section area of the app
+angular.module('umbraco').controller("NavigationController", 
+    function ($scope, $window, $log, tree, section, $rootScope, $routeParams, dialog) {
+    
+    $scope.currentSection = $routeParams.section;
+    $scope.selectedId = $routeParams.id;
+    $scope.sections = section.all();
 
-   
-    //Handles the section area of the app
-    angular.module('umbraco').controller("NavigationController",
-        function ($scope, $window, $log, tree, section, $rootScope, $routeParams, dialog, $q) {
-            loadTree($routeParams.section);
+    $scope.ui.mode = setMode;
+    $scope.ui.mode("default-onload");
 
-            $scope.currentSection = $routeParams.section;
-            $scope.selectedId = $routeParams.id;
-            $scope.sections = section.all();
+    $scope.$on("treeOptionsClick", function(ev, node){
+            $scope.showMenu(node, ev);
+    });
 
-            $scope.ui.mode = setMode;
-            $scope.ui.mode("default-onload");
+    $scope.openSection = function (selectedSection) {
+        //reset everything
+        if($scope.ui.stickyNavigation){
+            $scope.ui.mode("default-opensection");
+            section.setCurrent(selectedSection.alias);
+            $scope.currentSection = selectedSection.alias;
+            $scope.showSectionTree(selectedSection);
+        }
+    };
 
-            $scope.openSection = function (selectedSection) {
-                //reset everything
-                if ($scope.ui.stickyNavigation) {
-                    $scope.ui.mode("default-opensection");
-                    section.setCurrent(selectedSection.alias);
-                    $scope.currentSection = selectedSection.alias;
-                    $scope.showSectionTree(selectedSection);
-                }
-            };
+    $scope.showSectionTree = function (section) {
+        if(!$scope.ui.stickyNavigation){
+            $("#search-form input").focus();
+            $scope.currentSection = section.alias;
+            $scope.ui.mode("tree");
+        }
+    };
 
-            $scope.showSectionTree = function (section) {
-                if (!$scope.ui.stickyNavigation) {
-                    $("#search-form input").focus();
-                    loadTree(section.alias);
-                    $scope.ui.mode("tree");
-                }
-            };
+    $scope.hideSectionTree = function () {
+        if(!$scope.ui.stickyNavigation){
+            $scope.ui.mode("default-hidesectiontree");
+        }
+    };
 
-            $scope.hideSectionTree = function () {
-                if (!$scope.ui.stickyNavigation) {
-                    $scope.ui.mode("default-hidesectiontree");
-                }
-            };
+    $scope.showMenu = function (node, event) {
+        $log.log("testing the show meny");
 
-            $scope.showContextMenu = function (item, ev) {
-                if (ev != undefined && item.defaultAction && !ev.altKey) {
-                    //hack for now, it needs the complete action object to, so either include in tree item json
-                    //or lookup in service...
-                    var act = {
-                        alias: item.defaultAction,
-                        name: item.defaultAction
+        if(event != undefined && node.defaultAction && !event.altKey){
+            //hack for now, it needs the complete action object to, so either include in tree item json
+            //or lookup in service...
+            var act = {
+                        alias: node.defaultAction,
+                        name: node.defaultAction
                     };
-                    $scope.showContextDialog(item, act);
-                } else {
-                    $scope.contextMenu = tree.getActions(item, $scope.section);
-                    $scope.currentNode = item;
-                    $scope.menuTitle = item.name;
-                    $scope.selectedId = item.id;
-                    $scope.ui.mode("menu");
-                }
-            };
+             $scope.showContextDialog(node, act);
+       }else{
+            $scope.contextMenu = tree.getActions({node: node, section: $scope.section});
+            $scope.currentNode = node;
+            $scope.menuTitle = node.name;
+            $scope.selectedId = node.id;
+            $scope.ui.mode("menu");
+        }
+    };
 
-            $scope.hideContextMenu = function () {
-                $scope.selectedId = $routeParams.id;
-                $scope.contextMenu = [];
-                $scope.ui.mode("tree");
-            };
+    $scope.hideContextMenu = function () {
+        $scope.selectedId = $routeParams.id;
+        $scope.contextMenu = [];
+        $scope.ui.mode("tree");
+    };
 
-            $scope.showContextDialog = function (item, action) {
-                $scope.ui.mode("dialog");
+    $scope.showContextDialog = function (item, action) {
+        $scope.ui.mode("dialog");
 
-                $scope.currentNode = item;
-                $scope.dialogTitle = action.name;
+        $scope.currentNode = item;
+        $scope.dialogTitle = action.name;
 
-                var templateUrl = "views/" + $scope.currentSection + "/" + action.alias + ".html";
-                var d = dialog.append({ container: $("#dialog div.umb-panel-body"), scope: $scope, template: templateUrl });
-            };
+        var templateUrl = "views/" + $scope.currentSection + "/" + action.alias + ".html";
+        var d = dialog.append({container: $("#dialog div.umb-panel-body"), scope: $scope, template: templateUrl });
+    };    
 
-            $scope.hideContextDialog = function () {
-                $scope.showContextMenu($scope.currentNode, undefined);
-            };
+    $scope.hideContextDialog = function () {
+        $scope.showContextMenu($scope.currentNode, undefined);
+    };    
 
-            $scope.hideNavigation = function () {
-                $scope.ui.mode("default-hidenav");
-            };
+    $scope.hideNavigation = function () {
+        $scope.ui.mode("default-hidenav");
+    };
 
-            //$scope.setTreePadding = function (item) {
-            //    return { 'padding-left': (item.level * 20) + "px" };
-            //};
+    function loadTree(section) {
+        $scope.currentSection = section;
+        
+    }
 
-            $scope.getTreeChildren = function (node) {
-                if (node.expanded) {
-                    node.expanded = false;
-                    node.children = [];
-                }
-                else {
-                    tree.getChildren(node, $scope.currentSection)
-                        .then(function (data) {
-                            node.children = data;
-                            node.expanded = true;
-                        }, function (reason) {
-                            alert(reason);
-                            return;
-                        });
-                }
-            };
+    //function to turn navigation areas on/off
+    function setMode(mode){
 
-            function loadTree(section) {
-                $scope.currentSection = section;
-
-                //NOTE: We use .when here because getTree may return a promise or
-                // simply a cached value.
-                $q.when(tree.getTree($scope.currentSection))
-                    .then(function (data) {
-                        //set the data once we have it
-                        $scope.tree = data;
-                    }, function (reason) {
-                        alert(reason);
-                        return;
-                    });
+            switch(mode)
+            {
+            case 'tree':
+                $scope.ui.showNavigation = true;
+                $scope.ui.showContextMenu = false;
+                $scope.ui.showContextMenuDialog = false;
+                $scope.ui.stickyNavigation = false;
+                break;
+            case 'menu':
+                $scope.ui.showNavigation = true;
+                $scope.ui.showContextMenu = true;
+                $scope.ui.showContextMenuDialog = false;
+                $scope.ui.stickyNavigation = true;
+                break;
+            case 'dialog':
+                $scope.ui.stickyNavigation = true;
+                $scope.ui.showNavigation = true;
+                $scope.ui.showContextMenu = false;
+                $scope.ui.showContextMenuDialog = true;
+                break;
+            case 'search':
+                $scope.ui.stickyNavigation = false;
+                $scope.ui.showNavigation = true;
+                $scope.ui.showContextMenu = false;
+                $scope.ui.showSearchResults = true;
+                $scope.ui.showContextMenuDialog = false;
+                break;      
+            default:
+                $scope.ui.showNavigation = false;
+                $scope.ui.showContextMenu = false;
+                $scope.ui.showContextMenuDialog = false;
+                $scope.ui.showSearchResults = false;
+                $scope.ui.stickyNavigation = false;
+                break;
             }
-
-            //function to turn navigation areas on/off
-            function setMode(mode) {
-
-                switch (mode) {
-                    case 'tree':
-                        $scope.ui.showNavigation = true;
-                        $scope.ui.showContextMenu = false;
-                        $scope.ui.showContextMenuDialog = false;
-                        $scope.ui.stickyNavigation = false;
-                        break;
-                    case 'menu':
-                        $scope.ui.showNavigation = true;
-                        $scope.ui.showContextMenu = true;
-                        $scope.ui.showContextMenuDialog = false;
-                        $scope.ui.stickyNavigation = true;
-                        break;
-                    case 'dialog':
-                        $scope.ui.stickyNavigation = true;
-                        $scope.ui.showNavigation = true;
-                        $scope.ui.showContextMenu = false;
-                        $scope.ui.showContextMenuDialog = true;
-                        break;
-                    case 'search':
-                        $scope.ui.stickyNavigation = false;
-                        $scope.ui.showNavigation = true;
-                        $scope.ui.showContextMenu = false;
-                        $scope.ui.showSearchResults = true;
-                        $scope.ui.showContextMenuDialog = false;
-                        break;
-                    default:
-                        $scope.ui.showNavigation = false;
-                        $scope.ui.showContextMenu = false;
-                        $scope.ui.showContextMenuDialog = false;
-                        $scope.ui.showSearchResults = false;
-                        $scope.ui.stickyNavigation = false;
-                        break;
-                }
-            }
-        });
+    }
+});
 
 
-    angular.module('umbraco').controller("SearchController", function ($scope, search, $log) {
+angular.module('umbraco').controller("SearchController", function ($scope, search, $log) {
 
-        var currentTerm = "";
-        $scope.deActivateSearch = function () {
-            currentTerm = "";
-        };
+    var currentTerm = "";
+    $scope.deActivateSearch = function(){
+       currentTerm = ""; 
+    };
 
-        $scope.performSearch = function (term) {
-            if (term != undefined && term != currentTerm) {
-                if (term.length > 3) {
-                    $scope.ui.selectedSearchResult = -1;
-                    $scope.ui.mode("search");
+    $scope.performSearch = function (term) {
+        if(term != undefined && term != currentTerm){
+            if(term.length > 3){
+                $scope.ui.selectedSearchResult = -1;
+                $scope.ui.mode("search");
 
-                    currentTerm = term;
-                    $scope.ui.searchResults = search.search(term, $scope.currentSection);
+                currentTerm = term;
+                $scope.ui.searchResults = search.search(term, $scope.currentSection);
 
-                } else {
-                    $scope.ui.searchResults = [];
-                }
-            }
-        };
+            }else{
+                $scope.ui.searchResults = [];
+            }
+        }
+    };    
 
-        $scope.hideSearch = function () {
-            $scope.ui.mode("default-hidesearch");
-        };
+    $scope.hideSearch = function () {
+       $scope.ui.mode("default-hidesearch");
+    };
 
-        $scope.iterateResults = function (direction) {
-            if (direction == "up" && $scope.ui.selectedSearchResult < $scope.ui.searchResults.length)
-                $scope.ui.selectedSearchResult++;
-            else if ($scope.ui.selectedSearchResult > 0)
-                $scope.ui.selectedSearchResult--;
-        };
+    $scope.iterateResults = function (direction) {
+       if(direction == "up" && $scope.ui.selectedSearchResult < $scope.ui.searchResults.length) 
+            $scope.ui.selectedSearchResult++;
+        else if($scope.ui.selectedSearchResult > 0)
+            $scope.ui.selectedSearchResult--;
+    };
 
-        $scope.selectResult = function () {
-            $scope.showContextMenu($scope.ui.searchResults[$scope.ui.selectedSearchResult], undefined);
-        };
+    $scope.selectResult = function () {
+        $scope.showContextMenu($scope.ui.searchResults[$scope.ui.selectedSearchResult], undefined);
+    };
+});
+
+
+angular.module('umbraco').controller("DashboardController", function ($scope, $routeParams) {
+    $scope.name = $routeParams.section;
+});
+
+
+//handles authentication and other application.wide services
+angular.module('umbraco').controller("MainController", 
+    function ($scope, notifications, $routeParams, userFactory, localizationFactory) {
+    
+    //also be authed for e2e test
+    var d = new Date();
+    var weekday = new Array("Super Sunday", "Manic Monday", "Tremendous Tuesday", "Wonderfull Wednesday", "Thunder Thursday", "Friendly Friday", "Shiny Saturday");
+    $scope.today = weekday[d.getDay()];
+
+    $scope.ui = {
+        showTree: false,
+        showSearchResults: false,
+        mode: undefined
+    };
+
+
+    $scope.signin = function () {
+        $scope.authenticated = userFactory.authenticate($scope.login, $scope.password);
+
+        if($scope.authenticated){
+            $scope.user = userFactory.getCurrentUser();
+            $scope.localization = localizationFactory.getLabels($scope.user.locale);
+        }
+    };
+
+    $scope.signout = function () {
+        userFactory.signout();
+        $scope.authenticated = false;
+    };
+    
+
+    //subscribes to notifications in the notification service
+    $scope.notifications = notifications.current;
+    $scope.$watch('notifications.current', function (newVal, oldVal, scope) {
+        if (newVal) {
+            $scope.notifications = newVal;
+        }
     });
 
-
-    angular.module('umbraco').controller("DashboardController", function ($scope, $routeParams) {
-        $scope.name = $routeParams.section;
+    //subscribes to auth status in $user
+    $scope.authenticated = userFactory.authenticated;
+    $scope.$watch('userFactory.authenticated', function (newVal, oldVal, scope) {
+        if (newVal) {
+            $scope.authenticated = newVal;
+        }
     });
 
+    $scope.removeNotification = function(index) {
+        notifications.remove(index);
+    };
 
-    //handles authentication and other application.wide services
-    angular.module('umbraco').controller("MainController",
-        function ($scope, notifications, $routeParams, userFactory, localizationFactory) {
+    $scope.closeDialogs = function(event){
+        if($scope.ui.stickyNavigation && $(event.target).parents(".umb-modalcolumn").size() == 0){ 
+            $scope.ui.mode("default-closedialogs");
+        }
+    };
 
-            //also be authed for e2e test
-            var d = new Date();
-            var weekday = new Array("Super Sunday", "Manic Monday", "Tremendous Tuesday", "Wonderfull Wednesday", "Thunder Thursday", "Friendly Friday", "Shiny Saturday");
-            $scope.today = weekday[d.getDay()];
+    if (userFactory.authenticated) {
+        $scope.signin();
+    }
+});
 
-            $scope.ui = {
-                showTree: false,
-                showSearchResults: false,
-                mode: undefined
-            };
+//used for the media picker dialog
+angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController", function ($scope, mediaFactory) {	
+	
+	$scope.$on("treeNodeSelect", function(event, args){
+		$(args.event.target.parentElement).find("i").attr("class", "icon umb-tree-icon sprTree icon-check blue");
+		$scope.select(args.node);
+	});
+});
+//used for the macro picker dialog
+angular.module("umbraco").controller("Umbraco.Dialogs.MacroPickerController", function ($scope, macroFactory) {	
+	$scope.macros = macroFactory.all(true);
+	$scope.dialogMode = "list";
+
+	$scope.configureMacro = function(macro){
+		$scope.dialogMode = "configure";
+		$scope.dialogData.macro = macroFactory.getMacro(macro.alias);
+	};
+});
+//used for the media picker dialog
+angular.module("umbraco").controller("Umbraco.Dialogs.MediaPickerController", function ($scope, mediaFactory) {	
+	$scope.images = mediaFactory.rootMedia();
+});
+angular.module("umbraco").controller("Umbraco.Common.LegacyController", 
+	function($scope, $routeParams){
+		$scope.legacyPath = decodeURI($routeParams.p);
+	});
+angular.module('umbraco').controller("Umbraco.Editors.ContentCreateController", function ($scope, $routeParams,contentTypeFactory) {	
+	$scope.allowedTypes  = contentTypeFactory.getAllowedTypes($scope.currentNode.id);	
+});
+angular.module("umbraco").controller("Umbraco.Editors.ContentEditController", function ($scope, $routeParams, contentFactory, notifications) {
+	
+	if($routeParams.create)
+		$scope.content = contentFactory.getContentScaffold($routeParams.parentId, $routeParams.doctype);
+	else
+		$scope.content = contentFactory.getContent($routeParams.id);
 
 
-            $scope.signin = function () {
-                $scope.authenticated = userFactory.authenticate($scope.login, $scope.password);
+	$scope.saveAndPublish = function (cnt) {
+		cnt.publishDate = new Date();
+		contentFactory.publishContent(cnt);
 
-                if ($scope.authenticated) {
-                    $scope.user = userFactory.getCurrentUser();
-                    $scope.localization = localizationFactory.getLabels($scope.user.locale);
-                }
-            };
+		notifications.success("Published", "Content has been saved and published");
+	};
 
-            $scope.signout = function () {
-                userFactory.signout();
-                $scope.authenticated = false;
-            };
+	$scope.save = function (cnt) {
+		cnt.updateDate = new Date();
 
+		contentFactory.saveContent(cnt);
+		notifications.success("Saved", "Content has been saved");
+	};
+	
+});
+angular.module("umbraco").controller("Umbraco.Editors.CodeMirrorController", function ($scope, $rootScope) {
+    require(
+        [
+            'css!../lib/codemirror/js/lib/codemirror.css',
+            'css!../lib/codemirror/css/umbracoCustom.css',
+            'codemirrorHtml'
+        ],
+        function () {
 
-            //subscribes to notifications in the notification service
-            $scope.notifications = notifications.current;
-            $scope.$watch('notifications.current', function (newVal, oldVal, scope) {
-                if (newVal) {
-                    $scope.notifications = newVal;
-                }
+            var editor = CodeMirror.fromTextArea(
+                                    document.getElementById($scope.model.alias), 
+                                    {
+                                        mode: CodeMirror.modes.htmlmixed, 
+                                        tabMode: "indent"
+                                    });
+
+            editor.on("change", function(cm) {
+                $rootScope.$apply(function(){
+                    $scope.model.value = cm.getValue();   
+                });
             });
 
-            //subscribes to auth status in $user
-            $scope.authenticated = userFactory.authenticated;
-            $scope.$watch('userFactory.authenticated', function (newVal, oldVal, scope) {
-                if (newVal) {
-                    $scope.authenticated = newVal;
-                }
-            });
-
-            $scope.removeNotification = function (index) {
-                notifications.remove(index);
-            };
-
-            $scope.closeDialogs = function (event) {
-                if ($scope.ui.stickyNavigation && $(event.target).parents(".umb-modalcolumn").size() == 0) {
-                    $scope.ui.mode("default-closedialogs");
-                }
-            };
-
-            if (userFactory.authenticated) {
-                $scope.signin();
-            }
-
-            /*
-                else{    
-                    $scope.$on('$viewContentLoaded', function() {
-                        $scope.signin();
-                    });
-                }*/
         });
+});
+//this controller simply tells the dialogs service to open a mediaPicker window
+//with a specified callback, this callback will receive an object with a selection on it
+angular.module('umbraco').controller("Umbraco.Editors.ContentPickerController", function($rootScope, $scope, dialog, $log){
+    $scope.openContentPicker =function(value){
+            var d = dialog.contentPicker({scope: $scope, callback: populate});
+    };
 
-
-    //used for the macro picker dialog
-    angular.module("umbraco").controller("Umbraco.Dialogs.MacroPickerController", function ($scope, macroFactory) {
-        $scope.macros = macroFactory.all(true);
-        $scope.dialogMode = "list";
-
-        $scope.configureMacro = function (macro) {
-            $scope.dialogMode = "configure";
-            $scope.dialogData.macro = macroFactory.getMacro(macro.alias);
-        };
-    });
-    //used for the media picker dialog
-    angular.module("umbraco").controller("Umbraco.Dialogs.MediaPickerController", function ($scope, mediaFactory) {
-        $scope.images = mediaFactory.rootMedia();
-    });
-    angular.module("umbraco").controller("Umbraco.Common.LegacyController",
-        function ($scope, $routeParams) {
-            $scope.legacyPath = decodeURI($routeParams.p);
-        });
-    angular.module('umbraco').controller("Umbraco.Editors.ContentCreateController", function ($scope, $routeParams, contentTypeFactory) {
-        $scope.allowedTypes = contentTypeFactory.getAllowedTypes($scope.currentNode.id);
-    });
-    angular.module("umbraco").controller("Umbraco.Editors.ContentEditController", function ($scope, $routeParams, contentFactory, notifications) {
-
-        if ($routeParams.create)
-            $scope.content = contentFactory.getContentScaffold($routeParams.parentId, $routeParams.doctype);
-        else
-            $scope.content = contentFactory.getContent($routeParams.id);
-
-
-        $scope.saveAndPublish = function (cnt) {
-            cnt.publishDate = new Date();
-            contentFactory.publishContent(cnt);
-
-            notifications.success("Published", "Content has been saved and published");
-        };
-
-        $scope.save = function (cnt) {
-            cnt.updateDate = new Date();
-
-            contentFactory.saveContent(cnt);
-            notifications.success("Saved", "Content has been saved");
-        };
-
-    });
-    angular.module("umbraco").controller("Umbraco.Editors.CodeMirrorController", function ($scope, $rootScope) {
-        require(
-            [
-                'css!../lib/codemirror/js/lib/codemirror.css',
-                'css!../lib/codemirror/css/umbracoCustom.css',
-                'codemirrorHtml'
-            ],
-            function () {
-
-                var editor = CodeMirror.fromTextArea(
-                                        document.getElementById($scope.model.alias),
-                                        {
-                                            mode: CodeMirror.modes.htmlmixed,
-                                            tabMode: "indent"
-                                        });
-
-                editor.on("change", function (cm) {
-                    $rootScope.$apply(function () {
-                        $scope.model.value = cm.getValue();
-                    });
-                });
-
-            });
-    });
-    angular.module("umbraco").controller("Umbraco.Editors.DatepickerController", function ($rootScope, $scope, notifications, $timeout) {
-        require(
-            [
-                'views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.js'
-            ],
-            function () {
-                var pickerId = $scope.model.alias;
+    function populate(data){
+        $scope.model.value = data.selection;    
+    }
+});
+angular.module("umbraco").controller("Umbraco.Editors.DatepickerController", function ($rootScope, $scope, notifications, $timeout) {
+    require(
+        [
+            'views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.js',
+            'css!/belle/views/propertyeditors/umbraco/datepicker/bootstrap.datepicker.css'
+        ],
+        function () {
+            //The Datepicker js and css files are available and all components are ready to use.
 
-                $("#" + pickerId).datepicker({
-                    format: "dd/mm/yyyy",
-                    autoclose: true
-                }).on("changeDate", function (e) {
-                    $scope.model.value = e.date;
-                });
-            }
-        );
-    });
-    angular.module("umbraco").controller("Umbraco.Editors.GoogleMapsController", function ($rootScope, $scope, notifications, $timeout) {
-        require(
-            [
-                'async!http://maps.google.com/maps/api/js?sensor=false'
-            ],
-            function () {
-                //Google maps is available and all components are ready to use.
-                var valueArray = $scope.model.value.split(',');
-                var latLng = new google.maps.LatLng(valueArray[0], valueArray[1]);
+            // Get the id of the datepicker button that was clicked
+            var pickerId = $scope.model.alias;
+
+            // Open the datepicker and add a changeDate eventlistener
+            $("#" + pickerId).datepicker({
+                format: "dd/mm/yyyy",
+                autoclose: true
+            }).on("changeDate", function (e) {
+                // When a date is clicked the date is stored in model.value as a ISO 8601 date
+                $scope.model.value = e.date.toISOString();
+            });
+        }
+    );
+});
 
-                var mapDiv = document.getElementById($scope.model.alias + '_map');
-                var mapOptions = {
-                    zoom: $scope.model.config.zoom,
-                    center: latLng,
-                    mapTypeId: google.maps.MapTypeId[$scope.model.config.mapType]
-                };
+angular.module("umbraco").controller("Umbraco.Editors.GoogleMapsController", function ($rootScope, $scope, notifications, $timeout) {
+    require(
+        [
+            'async!http://maps.google.com/maps/api/js?sensor=false'
+        ],
+        function () {
+            //Google maps is available and all components are ready to use.
+            var valueArray = $scope.model.value.split(',');
+            var latLng = new google.maps.LatLng(valueArray[0], valueArray[1]);
+            
+            var mapDiv = document.getElementById($scope.model.alias + '_map');
+            var mapOptions = {
+                zoom: $scope.model.config.zoom,
+                center: latLng,
+                mapTypeId: google.maps.MapTypeId[$scope.model.config.mapType]
+            };
 
-                var map = new google.maps.Map(mapDiv, mapOptions);
-                var marker = new google.maps.Marker({
-                    map: map,
-                    position: latLng,
-                    draggable: true
+            var map = new google.maps.Map(mapDiv, mapOptions);
+            var marker = new google.maps.Marker({
+                map: map,
+                position: latLng,
+                draggable: true
+            });
+            
+             
+            google.maps.event.addListener(marker, "dragend", function(e){
+                var newLat = marker.getPosition().lat();
+                var newLng = marker.getPosition().lng();
+            
+                //here we will set the value
+                $scope.model.value = newLat + "," + newLng;
+
+                //call the notication engine
+                $rootScope.$apply(function () {
+                    notifications.warning("Your dragged a marker to", $scope.model.value);
                 });
-
-
-                google.maps.event.addListener(marker, "dragend", function (e) {
-                    var newLat = marker.getPosition().lat();
-                    var newLng = marker.getPosition().lng();
-
-                    //here we will set the value
-                    $scope.model.value = newLat + "," + newLng;
-
-                    //call the notication engine
-                    $rootScope.$apply(function () {
-                        notifications.warning("Your dragged a marker to", $scope.model.value);
-                    });
-                });
-
-                //hack to hook into tab switching for map resizing
-                $('a[data-toggle="tab"]').on('shown', function (e) {
-                    google.maps.event.trigger(map, 'resize');
-                })
-
-
-            }
-        );
-    });
-    'use strict';
-    //this controller simply tells the dialogs service to open a mediaPicker window
-    //with a specified callback, this callback will receive an object with a selection on it
-    angular.module("umbraco").controller("Umbraco.Editors.GridController", function ($rootScope, $scope, dialog, $log, macroFactory) {
-        //we most likely will need some iframe-motherpage interop here
-
-        //we most likely will need some iframe-motherpage interop here
-        $scope.openMediaPicker = function () {
-            var d = dialog.mediaPicker({ scope: $scope, callback: renderImages });
-        };
-
-        $scope.openPropertyDialog = function () {
-            var d = dialog.property({ scope: $scope, callback: renderProperty });
-        };
-
-        $scope.openMacroDialog = function () {
-            var d = dialog.macroPicker({ scope: $scope, callback: renderMacro });
-        };
-
-        function renderProperty(data) {
-            $scope.currentElement.html("<h1>boom, property!</h1>");
-        }
-
-        function renderMacro(data) {
-            $scope.currentElement.html(macroFactory.renderMacro(data.macro, -1));
-        }
-
-        function renderImages(data) {
-            var list = $("<ul class='thumbnails'></ul>")
-            $.each(data.selection, function (i, image) {
-                list.append($("<li class='span2'><img class='thumbnail' src='" + image.src + "'></li>"));
             });
 
-            $scope.currentElement.html(list[0].outerHTML);
+            //hack to hook into tab switching for map resizing
+            $('a[data-toggle="tab"]').on('shown', function (e) {
+                google.maps.event.trigger(map, 'resize');
+            })
+
+
         }
+    );    
+});
+'use strict';
+//this controller simply tells the dialogs service to open a mediaPicker window
+//with a specified callback, this callback will receive an object with a selection on it
+angular.module("umbraco").controller("Umbraco.Editors.GridController", function($rootScope, $scope, dialog, $log, macroFactory){
+    //we most likely will need some iframe-motherpage interop here
+    
+    //we most likely will need some iframe-motherpage interop here
+       $scope.openMediaPicker =function(){
+               var d = dialog.mediaPicker({scope: $scope, callback: renderImages});
+       };
 
-        $(window).bind("umbraco.grid.click", function (event) {
+       $scope.openPropertyDialog =function(){
+               var d = dialog.property({scope: $scope, callback: renderProperty});
+       };
 
-            $scope.$apply(function () {
-                $scope.currentEditor = event.editor;
-                $scope.currentElement = $(event.element);
+       $scope.openMacroDialog =function(){
+               var d = dialog.macroPicker({scope: $scope, callback: renderMacro});
+       };
 
-                if (event.editor == "macro")
-                    $scope.openMacroDialog();
-                else if (event.editor == "image")
-                    $scope.openMediaPicker();
-                else
-                    $scope.propertyDialog();
-            });
-        })
-    });
-    angular.module("umbraco")
-        .controller("Umbraco.Editors.ListViewController", function ($rootScope, $scope, contentFactory, contentTypeFactory) {
-            $scope.options = {
-                take: 10,
-                offset: 0,
-                filter: '',
-                sortby: 'id',
-                order: "desc"
-            };
+       function renderProperty(data){
+          $scope.currentElement.html("<h1>boom, property!</h1>"); 
+       }
 
-            $scope.pagination = new Array(100);
-            $scope.listViewAllowedTypes = contentTypeFactory.getAllowedTypes($scope.content.id);
+       function renderMacro(data){
+          $scope.currentElement.html( macroFactory.renderMacro(data.macro, -1) ); 
+       }
+      
+       function renderImages(data){
+           var list = $("<ul class='thumbnails'></ul>")
+           $.each(data.selection, function(i, image) {
+               list.append( $("<li class='span2'><img class='thumbnail' src='" + image.src + "'></li>") );
+           });
 
-            $scope.next = function () {
-                if ($scope.options.offset < $scope.listViewResultSet.pages) {
-                    $scope.options.offset++;
-                    $scope.reloadView();
-                }
-            };
+           $scope.currentElement.html( list[0].outerHTML); 
+       }
 
-            $scope.goToOffset = function (offset) {
-                $scope.options.offset = offset;
-                $scope.reloadView();
-            };
+       $(window).bind("umbraco.grid.click", function(event){
 
-            $scope.sort = function (field) {
-                $scope.options.sortby = field;
+           $scope.$apply(function () {
+               $scope.currentEditor = event.editor;
+               $scope.currentElement = $(event.element);
 
-                if (field !== $scope.options.sortby) {
-                    if ($scope.options.order === "desc") {
-                        $scope.options.order = "asc";
-                    } else {
-                        $scope.options.order = "desc";
-                    }
-                }
-                $scope.reloadView();
-            };
-
-            $scope.prev = function () {
-                if ($scope.options.offset > 0) {
-                    $scope.options.offset--;
-
-                    $scope.reloadView();
-                }
-            };
-
-            /*Loads the search results, based on parameters set in prev,next,sort and so on*/
-            /*Pagination is done by an array of objects, due angularJS's funky way of monitoring state
-            with simple values */
-            $scope.reloadView = function () {
-                $scope.listViewResultSet = contentFactory.getChildren($scope.content.id, $scope.options);
-
-                $scope.pagination = [];
-                for (var i = $scope.listViewResultSet.pages - 1; i >= 0; i--) {
-                    $scope.pagination[i] = { index: i, name: i + 1 };
-                };
-
-                if ($scope.options.offset > $scope.listViewResultSet.pages) {
-                    $scope.options.offset = $scope.listViewResultSet.pages;
-                }
-            };
-
-            $scope.reloadView();
-        });
-    //this controller simply tells the dialogs service to open a mediaPicker window
-    //with a specified callback, this callback will receive an object with a selection on it
-    angular.module('umbraco').controller("mediaPickerController", function ($rootScope, $scope, dialog, $log) {
-        $scope.openMediaPicker = function (value) {
-            var d = dialog.mediaPicker({ scope: $scope, callback: populate });
+               if(event.editor == "macro")
+                   $scope.openMacroDialog();
+               else if(event.editor == "image")
+                   $scope.openMediaPicker();
+               else
+                   $scope.propertyDialog();
+           });
+       })
+});
+angular.module("umbraco")
+    .controller("Umbraco.Editors.ListViewController", function ($rootScope, $scope, contentFactory, contentTypeFactory) {
+        $scope.options = {
+            take: 10,
+            offset: 0,
+            filter: '',
+            sortby: 'id',
+            order: "desc"
         };
 
-        function populate(data) {
-            $log.log(data.selection);
-            $scope.model.value = data.selection;
-        }
-    });
-    angular.module("umbraco")
-        .controller("Umbraco.Editors.RTEController",
-        function ($rootScope, $scope, dialog, $log) {
-            require(
-                [
-                    'tinymce'
-                ],
-                function (tinymce) {
+        $scope.pagination = new Array(100);
+        $scope.listViewAllowedTypes = contentTypeFactory.getAllowedTypes($scope.content.id);
+        
+        $scope.next = function(){
+            if($scope.options.offset < $scope.listViewResultSet.pages){
+                $scope.options.offset++;
+                $scope.reloadView();    
+            }
+        };
 
-                    tinymce.DOM.events.domLoaded = true;
-                    tinymce.init({
-                        selector: "#" + $scope.model.alias + "_rte",
-                        skin: "umbraco",
-                        menubar: false,
-                        statusbar: false,
-                        height: 340,
-                        toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker",
-                        setup: function (editor) {
+        $scope.goToOffset = function(offset){
+            $scope.options.offset = offset;
+            $scope.reloadView();
+        };
 
-                            editor.on('blur', function (e) {
-                                $scope.$apply(function () {
-                                    //$scope.model.value = e.getBody().innerHTML;
-                                    $scope.model.value = editor.getContent();
-                                })
-                            });
+        $scope.sort = function(field){
+            $scope.options.sortby = field;
+            
+            if(field !== $scope.options.sortby){
+                if($scope.options.order === "desc"){
+                    $scope.options.order = "asc";
+                }else{
+                    $scope.options.order = "desc";    
+                }
+            }
+            $scope.reloadView();
+        };
 
-                            editor.addButton('mediapicker', {
-                                icon: 'media',
-                                tooltip: 'Media Picker',
-                                onclick: function () {
-                                    dialog.mediaPicker({
-                                        scope: $scope, callback: function (data) {
+        $scope.prev = function(){
+            if($scope.options.offset > 0){
+                $scope.options.offset--;    
+                
+                $scope.reloadView();
+            }
+        };
 
-                                            //really simple example on how to intergrate a service with tinyMCE
-                                            $(data.selection).each(function (i, img) {
-                                                var data = {
-                                                    src: img.thumbnail,
-                                                    style: 'width: 100px; height: 100px',
-                                                    id: '__mcenew'
-                                                };
+        /*Loads the search results, based on parameters set in prev,next,sort and so on*/
+        /*Pagination is done by an array of objects, due angularJS's funky way of monitoring state
+        with simple values */
+        $scope.reloadView = function(){
+                $scope.listViewResultSet = contentFactory.getChildren($scope.content.id, $scope.options);
+                
+                $scope.pagination = [];
+                for (var i = $scope.listViewResultSet.pages - 1; i >= 0; i--) {
+                        $scope.pagination[i] = {index: i, name: i+1};
+                };
+                
+                if($scope.options.offset > $scope.listViewResultSet.pages){
+                    $scope.options.offset = $scope.listViewResultSet.pages;
+                }        
+        };
 
-                                                editor.insertContent(editor.dom.createHTML('img', data));
-                                                var imgElm = editor.dom.get('__mcenew');
-                                                editor.dom.setAttrib(imgElm, 'id', null);
-                                            });
+        $scope.reloadView();
+});
+//this controller simply tells the dialogs service to open a mediaPicker window
+//with a specified callback, this callback will receive an object with a selection on it
+angular.module('umbraco').controller("Umbraco.Editors.MediaPickerController", function($rootScope, $scope, dialog, $log){
+    $scope.openMediaPicker =function(value){
+            var d = dialog.mediaPicker({scope: $scope, callback: populate});
+    };
+
+    function populate(data){
+    	$log.log(data.selection);
+        $scope.model.value = data.selection;    
+    }
+});
+angular.module("umbraco")
+    .controller("Umbraco.Editors.RTEController", 
+    function($rootScope, $scope, dialog, $log){
+    require(
+        [
+            'tinymce'
+        ],
+        function (tinymce) {
+
+            tinymce.DOM.events.domLoaded = true;
+            tinymce.init({
+                selector: "#" + $scope.model.alias + "_rte",
+                skin: "umbraco",
+                menubar : false,
+                statusbar: false,
+                height: 340,
+                toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker",
+                setup : function(editor) {
+                        
+                        editor.on('blur', function(e) {
+                            $scope.$apply(function(){
+                                //$scope.model.value = e.getBody().innerHTML;
+                                $scope.model.value = editor.getContent();
+                            })
+                        });
+
+                        editor.addButton('mediapicker', {
+                            icon: 'media',
+                            tooltip: 'Media Picker',
+                            onclick: function(){
+                                dialog.mediaPicker({scope: $scope, callback: function(data){
+                                 
+                                    //really simple example on how to intergrate a service with tinyMCE
+                                    $(data.selection).each(function(i,img){
+                                            var data = {
+                                                src: img.thumbnail,
+                                                style: 'width: 100px; height: 100px',
+                                                id : '__mcenew'
+                                            };
+                                            
+                                            editor.insertContent(editor.dom.createHTML('img', data));
+                                            var imgElm = editor.dom.get('__mcenew');
+                                            editor.dom.setAttrib(imgElm, 'id', null);
+                                    });    
+                                       
+
+                                }});
+                            }
+                        });
+
+            
+                  }
+            });
 
 
-                                        }
-                                    });
-                                }
-                            });
+            $scope.openMediaPicker =function(value){
+                    var d = dialog.mediaPicker({scope: $scope, callback: populate});
+            };
 
+            function bindValue(inst){
+                $log.log("woot");
 
-                        }
-                    });
+                $scope.$apply(function(){
+                    $scope.model.value = inst.getBody().innerHTML;
+                })
+            }
 
+            function myHandleEvent(e){
+                $log.log(e);
+            }
 
-                    $scope.openMediaPicker = function (value) {
-                        var d = dialog.mediaPicker({ scope: $scope, callback: populate });
-                    };
+            function populate(data){
+                $scope.model.value = data.selection;    
+            }
 
-                    function bindValue(inst) {
-                        $log.log("woot");
-
-                        $scope.$apply(function () {
-                            $scope.model.value = inst.getBody().innerHTML;
-                        })
-                    }
-
-                    function myHandleEvent(e) {
-                        $log.log(e);
-                    }
-
-                    function populate(data) {
-                        $scope.model.value = data.selection;
-                    }
-
-                });
         });
-    angular.module("umbraco").controller("Umbraco.Editors.TagsController",
-        function ($rootScope, $scope, dialog, $log, tagsFactory) {
+});
+angular.module("umbraco").controller("Umbraco.Editors.TagsController", 
+	function($rootScope, $scope, dialog, $log, tagsFactory) {	
+		
+		require( 
+		[
+			'/belle/views/propertyeditors/umbraco/tags/bootstrap-tags.custom.js',
+			'css!/belle/views/propertyeditors/umbraco/tags/bootstrap-tags.custom.css'
+		],function(){
+		
+			// Get data from tagsFactory
+			$scope.tags = tagsFactory.getTags("group");
 
-            require(
-            [
-                '/belle/views/propertyeditors/umbraco/tags/bootstrap-tags.custom.js',
-                'css!/belle/views/propertyeditors/umbraco/tags/bootstrap-tags.custom.css'
-            ], function () {
+			// Initialize bootstrap-tags.js script
+	        var tags = $('#' + $scope.model.alias + "_tags").tags({
+	            tagClass: 'label-inverse'
+	        });
 
-                // Get data from tagsFactory
-                $scope.tags = tagsFactory.getTags("group");
+        	$.each($scope.tags, function(index, tag) {
+				tags.addTag(tag.label);
+        	});
+		});
+	}
+);
 
-                // Initialize bootstrap-tags.js script
-                var tags = $('#' + $scope.model.alias + "_tags").tags({
-                    tagClass: 'label-inverse'
-                });
-
-                $.each($scope.tags, function (index, tag) {
-                    tags.addTag(tag.label);
-                });
-            });
-        }
-    );
-
-    return angular;
+return angular;
 });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js
index 327d7c0f7d..1b01116ac0 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js
@@ -1,10 +1,10 @@
-/*! umbraco - v0.0.1-SNAPSHOT - 2013-05-28
+/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03
  * http://umbraco.github.io/Belle
  * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick;
  * Licensed MIT
  */
 'use strict';
-define(['angular', 'app'], function (angular, app) {
+define(['app', 'angular'], function (app, angular) {
 
     /**
     * @ngdoc directive 
@@ -225,6 +225,51 @@ angular.module('umbraco.directives', [])
     };
 })
 
+.directive('umbHeader', function($parse, $timeout){
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: 'true',
+        templateUrl: '/belle/views/directives/umb-header.html',
+
+        compile: function compile(tElement, tAttrs, transclude) {
+              return function postLink(scope, iElement, iAttrs, controller) {
+
+                  scope.panes = [];
+                  var $panes = $('div.tab-content');
+
+                  var activeTab = 0, _id, _title, _active;
+                  $timeout(function() {
+
+                    $panes.find('.tab-pane').each(function(index) {
+                      var $this = angular.element(this);
+                      var _scope = $this.scope();
+
+                      _id = $this.attr("id");
+                      _title = $this.attr('title');
+                      _active = !_active && $this.hasClass('active');
+
+                      if(iAttrs.fade){$this.addClass('fade');}
+
+                      scope.panes.push({
+                        id: _id,
+                        title: _title,
+                        active: _active
+                      });
+
+                    });
+
+                    if(scope.panes.length && !_active) {
+                      $panes.find('.tab-pane:first-child').addClass('active' + (iAttrs.fade ? ' in' : ''));
+                      scope.panes[0].active = true;
+                    }
+
+                  }); //end timeout
+              }; //end postlink
+        }
+    };
+})
+
 .directive('umbTabView', function(){
     return {
         restrict: 'E',
@@ -239,23 +284,133 @@ angular.module('umbraco.directives', [])
         restrict: 'E',
         replace: true,
         transclude: 'true',
+        
+        scope: {
+                    title: '@',
+                    id: '@'
+                },
+
         templateUrl: '/belle/views/directives/umb-tab.html'
     };
 })
 
+
+
 .directive('umbProperty', function(){
     return {
         restrict: 'E',
         replace: true,
         transclude: 'true',
-        templateUrl: '/belle/views/directives/umb-property.html',
-        link: function(scope, elem, attrs) {
-            scope.$eval(attrs.model);
-        }
+        templateUrl: '/belle/views/directives/umb-property.html'
     };
 })
 
 
+.directive('umbTree', function ($compile, $log, tree, $q) {
+  return {
+      restrict: 'E',
+      terminal: true,
+
+      scope: {
+            section: '@',
+            showoptions: '@',
+            showheader: '@',
+            cachekey: '@',
+            preventdefault: '@',
+            node:'='
+          },
+      link: function (scope, element, attrs) {
+
+        //config
+        var showheader = (scope.showheader === 'false') ? false : true;
+        var showoptions = (scope.showoptions === 'false') ? false : true;
+        var _preventDefault = (scope.preventdefault === 'true') ? "prevent-default" : "";
+
+        var template;
+        var rootTemplate = '<ul class="umb-tree">' + 
+                              '<li class="root">';
+
+                              if(showheader){ 
+                                rootTemplate +='<div>' + 
+                                  '<h5><a class="root-link">{{tree.name}}</a><i class="umb-options"><i></i><i></i><i></i></i></h5>' + 
+                                '</div>';
+                                } 
+
+            rootTemplate +=     '<ul><li ng-repeat="val in tree.children">' + 
+                                      '<umb-tree node="val" preventdefault="{{preventdefault}}" showheader="{{showheader}}" showoptions="{{showoptions}}" section="{{section}}"></umb-tree>' +
+                                '</li></ul>' +   
+                              '</li>' + 
+                            '</ul>';
+
+        var treeTemplate = '<ul ng-class="{collapsed: !node.expanded}"><li ng-repeat="val in node.children"><umb-tree section="{{section}}" preventdefault="{{preventdefault}}" showheader="{{showheader}}" showoptions="{{showoptions}}" node="val"></umb-tree></li></ul>';                
+        var itemTemplate = '<div ng-style="setTreePadding(node)">' +
+                                '<ins ng-hide="node.hasChildren" style="background:none;width:18px;"></ins>' +
+                                '<ins ng-show="node.hasChildren" ng-class="{\'icon-caret-right\': !node.expanded, \'icon-caret-down\': node.expanded}" ng-click="load(node)"></ins>' +
+                              '<i class="{{node | umbTreeIconClass:\'icon umb-tree-icon sprTree\'}}" style="{{node | umbTreeIconImage}}"></i>' +
+                                '<a ng-click="select(this, node, $event)" ng-href="#{{node.view}}" ' + _preventDefault + '>{{node.name}}</a>';
+        if(showoptions){
+            itemTemplate +=  '<i class="umb-options" ng-click="options(node, $event)"><i></i><i></i><i></i></i>';
+        }  
+        itemTemplate +=     '</div>';
+
+
+        if(scope.node === undefined){            
+            //NOTE: We use .when here because getTree may return a promise or
+            // simply a cached value.
+            $q.when(tree.getTree({section:scope.section, cachekey: scope.cachekey}))
+                .then(function (data) {
+                    //set the data once we have it
+                    scope.tree = data;
+                }, function (reason) {
+                    alert(reason);
+                    return;
+                });
+
+            template = rootTemplate;
+        }else{
+            template = itemTemplate + treeTemplate;
+        }
+
+        scope.options = function(n, event){ 
+            $log.log("emitting options");
+            scope.$emit("treeOptionsClick", n);
+        };
+
+        scope.select = function(e,n,ev){
+            $log.log("emitting select");
+            scope.$emit("treeNodeSelect", {element: e, node: n, event: ev});
+        };
+
+        scope.load = function (node) {
+            if (node.expanded) {
+                node.expanded = false;
+                node.children = [];
+            }
+            else {
+                tree.getChildren({ node: node, section: scope.section })
+                    .then(function (data) {
+                        node.children = data;
+                        node.expanded = true;
+                    }, function (reason) {
+                        alert(reason);
+                        return;
+                    });
+            }
+        };
+
+          scope.setTreePadding = function(node) {
+              return { 'padding-left': (node.level * 20) + "px" };
+          };
+
+          
+
+          var newElement = angular.element(template);
+          $compile(newElement)(scope);
+          element.replaceWith(newElement);
+      }
+  };
+})
+
 .directive('include', function($compile, $http, $templateCache, $interpolate, $log) {
 
   $log.log("loading view");
@@ -274,8 +429,6 @@ angular.module('umbraco.directives', [])
     priority: 100,        // We need this directive to happen before ng-model
     terminal: false,       // We are going to deal with this element
     compile: function(element, attrs) {
-
-      $log.log("compiling view");
       // Extract the label and validation message info from the directive's original element
       //var validationMessages = getValidationMessageMap(element);
       //var labelContent = getLabelContent(element);
@@ -291,44 +444,7 @@ angular.module('umbraco.directives', [])
         loadTemplate(path || 'error.html').then(function(templateElement) {
           // Set up the scope - the template will have its own scope, which is a child of the directive's scope
           var childScope = scope.$new();
-          // Attach a copy of the message map to the scope
-          //childScope.$validationMessages = angular.copy(validationMessages);
-          // Generate an id for the field from the ng-model expression and the current scope
-          // We replace dots with underscores to work with browsers and ngModel lookup on the FormController
-          // We couldn't do this in the compile function as we need to be able to calculate the unique id from the scope
-          //childScope.$fieldId = attrs.ngModel.replace('.', '_').toLowerCase() + '_' + childScope.$id;
-          //childScope.$fieldLabel = labelContent;
-
-          // Update the $fieldErrors array when the validity of the field changes
-          /*childScope.$watch('$field.$dirty && $field.$error', function(errorList) {
-            childScope.$fieldErrors = [];
-            angular.forEach(errorList, function(invalid, key) {
-              if ( invalid ) {
-                childScope.$fieldErrors.push(key);
-              }
-            });
-          }, true);
-          */
-
-          // Copy over all left over attributes to the input element
-          /* We can't use interpolation in the template for directives such as ng-model
-          var inputElement = findInputElement(templateElement);
-          angular.forEach(attrs.$attr, function (original, normalized) {
-            var value = element.attr(original);
-            inputElement.attr(original, value);
-          });*/
-
-          // Wire up the input (id and name) and its label (for).
-          // We need to set the input element's name here before we compile the template.
-          /* If we leave it to be interpolated at the next $digest the formController doesn't pick it up
-          inputElement.attr('name', childScope.$fieldId);
-          inputElement.attr('id', childScope.$fieldId);
-          var labelElement = templateElement.find('label');
-          labelElement.attr('for', childScope.$fieldId);
-          // Update the label's contents
-          labelElement.html(labelContent);
-          */
-
+          
           // Place our template as a child of the original element.
           // This needs to be done before compilation to ensure that it picks up any containing form.
           element.append(templateElement);
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js
index 129b96292d..a9e722f503 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js
@@ -1,21 +1,21 @@
-/*! umbraco - v0.0.1-SNAPSHOT - 2013-05-28
+/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03
  * http://umbraco.github.io/Belle
  * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick;
  * Licensed MIT
  */
 'use strict';
-define(['app', 'angular'], function (app, angular) {
-    angular.module('umbraco.filters', [])
-            .filter('interpolate', ['version', function (version) {
-                return function (text) {
-                    return String(text).replace(/\%VERSION\%/mg, version);
-                };
-            }])
-            .filter('propertyEditor', function () {
-                return function (input) {
-                    return "views/propertyeditors/" + String(input).replace('.', '/') + "/editor.html";
-                };
-            });
+define([ 'app','angular'], function (app,angular) {
+angular.module('umbraco.filters', [])
+        .filter('interpolate', ['version', function(version) {
+            return function(text) {
+                return String(text).replace(/\%VERSION\%/mg, version);
+            };
+        }])
+        .filter('propertyEditor', function() {
+            return function(input) {
+                return "views/propertyeditors/" + String(input).replace('.', '/') + "/editor.html";
+            };
+        });
 
     /**
     * @ngdoc filter 
@@ -28,7 +28,7 @@ define(['app', 'angular'], function (app, angular) {
             if (treeNode.iconIsClass) {
                 return "";
             }
-            return "background-image: url('" + treeNode.iconFilePath + "');";
+            return "background-image: url('" + treeNode.iconFilePath + "');height:16px;background-position:2px 0px";
         };
     };
     angular.module('umbraco.filters').filter("umbTreeIconImage", treeIconImageFilter);
@@ -43,13 +43,20 @@ define(['app', 'angular'], function (app, angular) {
         return function (treeNode, standardClasses) {
 
             if (treeNode.iconIsClass) {
-                return standardClasses + " " + (treeNode.icon.startsWith('.') ? treeNode.icon.trimStart('.') : treeNode.icon);
+                //if it is a legacy class then we'll add a custom 'icon-' class so styles work properly
+                var classes = standardClasses + " " + (treeNode.icon.startsWith('.') ? treeNode.icon.trimStart('.') : treeNode.icon);
+                if (treeNode.icon.startsWith('.')) {
+                    //its legacy
+                    classes += " icon-legacy";
+                }
+                return classes;
             }
+            //we need an 'icon-' class in there for certain styles to work so if it is image based we'll add this
             return standardClasses + " icon-custom-file";
         };
     };
     angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);
 
 
-    return app;
+return app;
 });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.resources.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.resources.js
index ad3b0bd8a1..fdf034c621 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.resources.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.resources.js
@@ -1,15 +1,16 @@
-/*! umbraco - v0.0.1-SNAPSHOT - 2013-05-28
+/*! umbraco - v0.0.1-SNAPSHOT - 2013-06-03
  * http://umbraco.github.io/Belle
  * Copyright (c) 2013 Per Ploug, Anders Stenteberg & Shannon Deminick;
  * Licensed MIT
  */
 'use strict';
-define(['angular', 'app'], function (angular, app) {
+define(['app', 'angular'], function (app, angular) {
+
 
     /**
- * @ngdoc factory 
- * @name umbraco.resources.trees.umbTreeResource     
-**/
+    * @ngdoc factory 
+    * @name umbraco.resources.trees.umbTreeResource     
+    **/
     function umbTreeResource($q, $http) {
 
         /** internal method to get the tree app url */
@@ -62,7 +63,9 @@ define(['angular', 'app'], function (angular, app) {
     }
     angular.module('umbraco.resources.trees', []).factory('umbTreeResource', umbTreeResource);
 
-angular.module('umbraco.resources.content', [])
+
+
+    angular.module('umbraco.resources.content', [])
 .factory('contentFactory', function () {
 
     var contentArray = [];
@@ -101,7 +104,8 @@ angular.module('umbraco.resources.content', [])
                         { alias: "bodyText", label: "Body Text", description:"Here you enter the primary article contents", view: "umbraco.rte", value: "<p>askjdkasj lasjd</p>" },
                         { alias: "textarea", label: "textarea", view: "umbraco.textarea", value: "ajsdka sdjkds", config: { rows: 4 } },
                         { alias: "map", label: "Map", view: "umbraco.googlemaps", value: "37.4419,-122.1419", config: { mapType: "ROADMAP", zoom: 4 } },
-                        { alias: "media", label: "Media picker", view: "umbraco.mediapicker", value: "" }
+                        { alias: "media", label: "Media picker", view: "umbraco.mediapicker", value: "" },
+                        { alias: "content", label: "Content picker", view: "umbraco.contentpicker", value: "" }
                     ]
                 },
                 {
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js
index 4f7efda46a..27082f7241 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.services.js
@@ -1,5 +1,5 @@
 'use strict';
-define(['angular', 'app'], function (angular, app) {
+define(['app','angular'], function (app, angular) {
 angular.module('umbraco.services.dialog', [])
 .factory('dialog', ['$rootScope', '$compile', '$http', '$timeout', '$q', '$templateCache', function($rootScope, $compile, $http, $timeout, $q, $templateCache) {
 	
@@ -223,7 +223,7 @@ angular.module('umbraco.services.search', [])
 		}
 	};
 });
-angular.module('umbraco.services.section', [])
+angular.module('umbraco.services.section', ['umbraco.resources.trees'])
 .factory('section', function ($rootScope) {
 
 	var currentSection = "content";
@@ -244,51 +244,52 @@ angular.module('umbraco.services.section', [])
 	};
 
 });
-
-angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
-.factory('tree', function ($http, $q, umbTreeResource) {
+angular.module('umbraco.services.tree', [])
+.factory('tree', function ($q, umbTreeResource) {
 		//implement this in local storage
 		var treeArray = [];
 		var currentSection = "content";
 
 		return {
-		    getTree: function (section) {
+			getTree: function (options) {
 
-		        if (!section) {
-		            throw "No section defined";
-		        }
+				if(options === undefined){
+					options = {};
+				}
+                
+				var section = options.section || 'content';
+				var cacheKey = options.cachekey || '';
+				cacheKey += "_" + section;	
 
-		        var deferred = $q.defer();
+				var deferred = $q.defer();
 
-                //return the cache if it exists
-		        if (treeArray[section] !== undefined) {
-		            return treeArray[section];
-		        }
+			    //return the cache if it exists
+				if (treeArray[cacheKey] !== undefined){
+					return treeArray[cacheKey];
+				}
+				
+				umbTreeResource.loadApplication(section)
+ 		            .then(function (data) {
+ 		                //this will be called once the tree app data has loaded
+ 		                var result = {
+ 		                    name: section,
+ 		                    alias: section,
+ 		                    children: data
+ 		                };
+ 		                //cache this result
+ 		                //TODO: We'll need to un-cache this in many circumstances
+ 		                treeArray[cacheKey] = result;
+ 		                //return the data result as promised
+ 		                deferred.resolve(treeArray[cacheKey]);
+ 		            }, function (reason) {
+ 		                //bubble up the rejection
+ 		                deferred.reject(reason);
+ 		                return;
+ 		            });
 
-		        umbTreeResource.loadApplication(section)
-		            .then(function (data) {
+				return deferred.promise;
 
-		                //this will be called once the tree app data has loaded
-		                var result = {
-		                    name: section,
-		                    alias: section,
-                            nodes: data
-		                };
-		                //cache this result
-                        //TODO: We'll need to un-cache this in many circumstances
-		                treeArray[section] = result;
-                        //return the data result as promised
-		                deferred.resolve(treeArray[section]);
-
-		            }, function (reason) {
-                        //bubble up the rejection
-		                deferred.reject(reason);
-		                return;
-		            });
-
-		        return deferred.promise;
-
-                //NOTE: The below will never be hit, it is legacy code from the mock data services
+			    //NOTE: The below will never be hit, it is legacy code from the mock data services
 
 				//var t;
 				//switch(section){
@@ -298,7 +299,7 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				//		name: section,
 				//		alias: section,
 
-				//		nodes: [
+				//		children: [
 				//			{ name: "My website", id: 1234, icon: "icon-home", view: section + "/edit/" + 1234, children: [], expanded: false, level: 1, defaultAction: "create" },
 				//			{ name: "Components", id: 1235, icon: "icon-cogs", view: section + "/edit/" + 1235, children: [], expanded: false, level: 1, defaultAction: "create"  },
 				//			{ name: "Archieve", id: 1236, icon: "icon-folder-close", view: section + "/edit/" + 1236, children: [], expanded: false, level: 1, defaultAction: "create"  },
@@ -312,7 +313,7 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				//		name: section,
 				//		alias: section,
 
-				//		nodes: [
+				//		children: [
 				//		{ name: "Data types", id: 1234, icon: "icon-folder-close", view: section + "/edit/" + 1234, children: [], expanded: false, level: 1 },
 				//		{ name: "Macros", id: 1235, icon: "icon-folder-close", view: section + "/edit/" + 1235, children: [], expanded: false, level: 1 },
 				//		{ name: "Pacakges", id: 1236, icon: "icon-folder-close", view: section + "/edit/" + 1236, children: [], expanded: false, level: 1 },
@@ -326,7 +327,7 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				//		name: section,
 				//		alias: section,
 
-				//		nodes: [
+				//		children: [
 				//		{ name: "Stylesheets", id: 1234, icon: "icon-folder-close", view: section + "/edit/" + 1234, children: [], expanded: false, level: 1 },
 				//		{ name: "Templates", id: 1235, icon: "icon-folder-close", view: section + "/edit/" + 1235, children: [], expanded: false, level: 1 },
 				//		{ name: "Dictionary", id: 1236, icon: "icon-folder-close", view: section + "/edit/" + 1236, children: [], expanded: false, level: 1 },
@@ -340,7 +341,7 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				//		name: section,
 				//		alias: section,
 
-				//		nodes: [
+				//		children: [
 				//		{ name: "random-name-" + section, id: 1234, icon: "icon-home", defaultAction: "create", view: section + "/edit/" + 1234, children: [], expanded: false, level: 1 },
 				//		{ name: "random-name-" + section, id: 1235, icon: "icon-folder-close", defaultAction: "create", view: section + "/edit/" + 1235, children: [], expanded: false, level: 1 },
 				//		{ name: "random-name-" + section, id: 1236, icon: "icon-folder-close", defaultAction: "create", view: section + "/edit/" + 1236, children: [], expanded: false, level: 1 },
@@ -350,8 +351,8 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				//	break;
 				//}				
 
-				//treeArray[section] = t;
-				//return treeArray[section];
+				//treeArray[cacheKey] = t;
+				//return treeArray[cacheKey];
 			},
 
 			getActions: function(treeItem, section){
@@ -377,7 +378,14 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				];
 			},	
 
-			getChildActions: function(treeItem, section){
+			getChildActions: function(options){
+
+				if(options === undefined){
+					options = {};
+				}
+				var section = options.section || 'content';
+				var treeItem = options.node;
+
 				return [
 				{ name: "Create", cssclass: "plus", alias: "create" },
 
@@ -400,36 +408,47 @@ angular.module('umbraco.services.tree', ["umbraco.resources.trees"])
 				];
 			},
 
-			getChildren: function (treeItem, section) {
+			getChildren: function (options) {
 
-			    if (!treeItem) {
-			        throw "No treeItem defined";
-			    }
-			    if (!section) {
-			        throw "No section defined";
+				if(options === undefined){
+				    throw "No options object defined for getChildren";
+				}
+				if (options.node === undefined) {
+				    throw "No node defined on options object for getChildren";
+				}
+				var section = options.section || 'content';
+				var treeItem = options.node;
+
+                //NOTE: the level is generated on the client side during data retreival
+				var childLevel = (treeItem.level ? treeItem.level : 1) + 1;
+
+				//hack to have create as default content action
+				var action;
+				if(section === "content"){
+					action = "create";
+				}
+
+				if (!options.node) {
+			        throw "No node defined";
 			    }
 
 			    var deferred = $q.defer();
-                
 			    umbTreeResource.loadNodes(section, treeItem)
-		            .then(function (data) {		                
-		                deferred.resolve(data);
-		            }, function (reason) {
-		                //bubble up the rejection
-		                deferred.reject(reason);
-		                return;
-		            });
+                    .then(function (data) {
+                        //now that we have the data, we need to add the childLevel property to each item
+                        for (var i = 0; i < data.length; i++) {
+                            data[i].level = childLevel;
+                        }
+                        deferred.resolve(data);
+                    }, function (reason) {
+                        //bubble up the rejection
+                        deferred.reject(reason);
+                        return;
+                    });
 
 			    return deferred.promise;
 
-                //NOTE: The below will never get hit it is legacy mock data
-			    //var iLevel = treeItem.level + 1;
-
-				////hack to have create as default content action
-				//var action;
-				//if(section === "content"){
-				//	action = "create";
-				//}
+			    //NOTE: The below will never get hit it is legacy mock data
 
 				//return [
 				//	{ name: "child-of-" + treeItem.name, id: iLevel + "" + 1234, icon: "icon-file-alt", view: section + "/edit/" + iLevel + "" + 1234, children: [], expanded: false, level: iLevel, defaultAction: action },