Index: /trunk/LATMOS-Accounts-Web/lib/LATMOS/Accounts/Web/Controller/Json/Tree.pm
===================================================================
--- /trunk/LATMOS-Accounts-Web/lib/LATMOS/Accounts/Web/Controller/Json/Tree.pm	(revision 1938)
+++ /trunk/LATMOS-Accounts-Web/lib/LATMOS/Accounts/Web/Controller/Json/Tree.pm	(revision 1939)
@@ -29,7 +29,7 @@
     my %users = map { $_ => 1 } $base->search_objects('user', 'active=1', 'givenName=*');
     my %dpmts = map { $_ => 1 } $base->search_objects('group', 'sutype=dpmt');
-    my %userdpmt = $base->attributes_summary_by_object('user', 'department');
     my %dpmtmanager = $base->attributes_summary_by_object('group', 'managedBy');
     my %usermanager = $base->attributes_summary_by_object('user', 'managerContact');
+    my %dpmtuser    = $base->attributes_summary_by_object('user', 'department');
 
     my %nodes;
@@ -40,27 +40,26 @@
 
     foreach my $user (keys %users) {
+        my $ouser = $base->get_object('user', $user);
         push(@{ $data->{nodes} }, {
-                "name" => $user,
-                label => $user,
+                "name" => $ouser->id,
+                label => $ouser->get_attributes('displayName'),
         });
-        $nodes{$user} = $#{ $data->{nodes} };
+        $nodes{$ouser->id} = $#{ $data->{nodes} };
     }
-    push(@{ $data->{nodes} }, {
-            "name" => '-direction',
-            label => 'Direction',
-        });
-    $nodes{'-direction'} = $#{ $data->{nodes} };
 
-    foreach my $user (keys %dpmts) {
-        push(@{ $data->{nodes} }, {
-                "name" => '-' . $user,
-                label => $user,
-        });
-        $nodes{'-' . $user} = $#{ $data->{nodes} };
+    foreach my $user (keys %users) {
+        my $manager = $usermanager{$user}->[0] ||
+            $dpmtmanager { $dpmtuser{ $user }->[0] }->[0] or next;
+
+        if (!$nodes{$manager}) {
+            my $ouser = $base->get_object('user', $manager);
+            $nodes{$manager} = $nodes{$ouser->id};
+        }
+        $nodes{$manager} or next;
+
         push(@{ $data->{links} },
             {
-                "source" => $nodes{'-' . $user},
-                "target" => $nodes{'-direction'},
-                color => 'red',
+                "source" => $nodes{$user},
+                "target" => $nodes{$manager},
             }
         );
@@ -68,28 +67,4 @@
     }
 
-    
-    foreach my $user (keys %users) {
-
-        if (my $dpmt = $userdpmt{$user}) {
-            push(@{ $data->{links} },
-                {
-                    "source" => $nodes{$user},
-                    "target" => $nodes{'-' . $dpmt->[0]},
-                }
-            ) if ($dpmt->[0]);
-        }
-        if (my $manag = $usermanager{$user}) {
-            my $target = $manag->[0];
-            push(@{ $data->{links} },
-                {
-                    "source" => $nodes{$user},
-                    "target" => $nodes{$target},
-                }
-            ) if ($target);
-        }
-
-
-    }
-    
     $c->stash->{data} = $data;
 }
Index: /trunk/LATMOS-Accounts-Web/root/html/includes/wrapper.tt
===================================================================
--- /trunk/LATMOS-Accounts-Web/root/html/includes/wrapper.tt	(revision 1938)
+++ /trunk/LATMOS-Accounts-Web/root/html/includes/wrapper.tt	(revision 1939)
@@ -32,4 +32,6 @@
 <script src="[% c.uri_for('/static', 'js', 'd3', 'd3.v3.js') %]"></script>
 <script src="[% c.uri_for('/static', 'js', 'timeline', 'timeframe.js') %]"></script>
+<script src="[% c.uri_for('/static', 'js', 'jquery', 'jquery.orgchart.js') %]"></script>
+<link rel="stylesheet" href="[% c.uri_for('/static/js/jquery/jquery.orgchart.css') %]" type="text/css">
 
 <link rel="stylesheet" href="[% c.uri_for('/static/js/jqplot/jquery.jqplot.css') %]" type="text/css">
Index: /trunk/LATMOS-Accounts-Web/root/html/summary/departments/index.tt
===================================================================
--- /trunk/LATMOS-Accounts-Web/root/html/summary/departments/index.tt	(revision 1938)
+++ /trunk/LATMOS-Accounts-Web/root/html/summary/departments/index.tt	(revision 1939)
@@ -4,54 +4,78 @@
 [% dpmts = c.model('Accounts').db.search_objects('group', 'sutype=dpmt') %]
 
+<ul id="org-top" style="display: none">
+<li>Direction
+
 [% FOREACH dpmt = dpmts %]
 [% "<ul>" IF loop.first %]
 [% odpmt = c.model('Accounts').db.get_object('group', dpmt) %]
-<li><a href="#[% dpmt %]">[% odpmt.get_attributes('description') || dpmt | html %]</a></li>
-[% "</ul>" IF loop.last %]
+<li>[% dpmt | html %]
+
+[% omanager = c.model('Accounts').db.get_object('user', odpmt.get_attributes('managedBy')) %]
+
+[% IF omanager %]
+<br>
+[% omanager %]
 [% END %]
-
-[% FOREACH dpmt = dpmts %]
-[% odpmt = c.model('Accounts').db.get_object('group', dpmt) %]
-<h3><a name="[% dpmt %]">
-[%- odpmt.get_attributes('description') || dpmt | html -%]
-</a><a href="#top">â</a></h3>
 
 [% users = c.model('Accounts').db.fetchObjectInfo('user',
    [ 'givenName', 'sn', 'managerContact', 'department', 'expire', 'description' ],
    'active=1',
-   'memberOf=' _ dpmt,
+   'department=' _ dpmt,
 ) %]
 
-[% FOREACH user = users.keys.sort %]
-[% IF loop.first %]
-<table border=1>
-<tr><th>Personnel</th><th>Responsable</th></tr>
-[% END %]
-[% ouser = users.$user %]
+    [% FOREACH user = users.keys.sort %]
+    [% IF loop.first %]
+    <ul>
+    [% END %]
+    [% ouser = users.$user %]
+    <li>
+    [% IF ouser.department.0 != dpmt %]
+    <span style="font-style: italic;">
+    [% ELSE %]
+    <span>
+    [% END %]
+    [% ouser.givenName.0 _ ' ' _ ouser.sn.0 || ouser.description.0 || user | html %]
+    </span>
+    </li>
+    [% "</ul>" IF loop.last %]
+    [% END %] 
 
-<tr>
-<td>
-[% IF ouser.department.0 != dpmt %]
-<span style="font-style: italic;">
-[% ELSE %]
-<span>
-[% END %]
-[% ouser.givenName.0 _ ' ' _ ouser.sn.0 || ouser.description.0 || user | html %]
-</span>
-[% IF ouser.department.0 != dpmt %]
-([% ouser.department.0 || 'n/a' | html %])
-[% END %]
-</td>
-<td>
-[% manager = ouser.managerContact.0 %]
-[% IF manager %]
-[% omanager = c.model('Accounts').db.get_object('user', ouser.managerContact.0) %]
-[% omanager.get_attributes('displayName') || manager | html %]
-[% END %]
-</td>
-</tr>
-[% "</table>" IF loop.last %]
-[% END %] 
-
+[% "</ul>" IF loop.last %]
 [% END %]
 
+</li>
+</ul>
+
+<div id=chart></div>
+
+<style>
+
+div.orgChart {
+    overflow-x: scroll
+}
+
+div.orgChart .level1 {
+    font-size: 12px;
+}
+
+div.stack-container {
+    border: solid;
+}
+
+div.orgChart ul.stack > li {
+    margin-top: 1em;
+    font-size: 10px;
+    line-height: 1em;
+}
+</style>
+
+<script>
+$(function() {
+    $("#org-top").orgChart({
+        container: $("#chart"),
+        stack:     true,
+        depth:     2
+    });
+});
+</script>
Index: /trunk/LATMOS-Accounts-Web/root/static/js/jquery/jquery.orgchart.css
===================================================================
--- /trunk/LATMOS-Accounts-Web/root/static/js/jquery/jquery.orgchart.css	(revision 1939)
+++ /trunk/LATMOS-Accounts-Web/root/static/js/jquery/jquery.orgchart.css	(revision 1939)
@@ -0,0 +1,99 @@
+div.orgChart {
+    border                : 1px solid #cccccc;
+    background-color      : #ffffe8;
+    margin                : 10px;
+    padding               : 20px;
+}
+
+div.orgChart h2 {
+    margin                : 0px;
+    font-size             : 1em;
+    border-bottom         : none;
+}
+
+div.orgChart ul {
+    list-style            : none;
+    margin                : 4px;
+    padding               : 0px;
+    font-size             : 0.8em;
+    text-align            : left;
+}
+
+div.orgChart ul.stack,
+div.orgChart ul.stack ul {
+    text-align            : center;
+}
+
+div.orgChart table {
+    width                 : 100%;
+}
+
+div.orgChart tr.lines td.line {
+    width                 : 1px;
+    height                : 20px;
+}
+
+div.orgChart tr.lines td.top {
+    border-top            : 3px solid black;
+}
+
+div.orgChart tr.lines td.left {
+    border-right          : 2px solid black;
+}
+
+div.orgChart tr.lines td.right {
+    border-left           : 2px solid black;
+}
+
+div.orgChart td {
+    text-align            : center;
+    vertical-align        : top;
+    padding               : 0px 2px;
+}
+
+div.orgChart div.node {
+    cursor                : default;
+    border                : 2px solid black;
+    display               : inline-block;
+    padding               : 0 4px;
+    width                 : 96px;
+    height                : 60px;
+    background-color      : #ffffcf;
+    line-height           : 1.3em;
+    border-radius         : 8px;
+    box-shadow            : 4px 4px 6px #888888;
+    -moz-border-radius    : 8px;
+    -moz-box-shadow       : 4px 4px 6px #888888;
+    -webkit-border-radius : 8px;
+    -webkit-box-shadow    : 4px 4px 6px #888888;
+}
+
+div.orgChart div.hasChildren {
+    background-color      : #ffff98;
+}
+
+div.orgChart.interactive div.hasChildren {
+    cursor                : pointer;
+}
+
+div.orgChart div.node.hover {
+    background-color      : white;
+}
+
+div.orgChart div.adjunct.node {
+    position              : absolute;
+    margin-top            : 8px;
+    margin-left           : -110px;
+    width                 : 80px;
+    height                : 40px;
+    background-color      : #efefef;
+}
+
+div.orgChart div.adjunct-link {
+    display               : inline-block;
+    position              : absolute;
+    margin-left           : -20px;
+    margin-top            : 25px;
+    width                 : 20px;
+    border                : 1px dashed black;
+}
Index: /trunk/LATMOS-Accounts-Web/root/static/js/jquery/jquery.orgchart.js
===================================================================
--- /trunk/LATMOS-Accounts-Web/root/static/js/jquery/jquery.orgchart.js	(revision 1939)
+++ /trunk/LATMOS-Accounts-Web/root/static/js/jquery/jquery.orgchart.js	(revision 1939)
@@ -0,0 +1,218 @@
+/**
+ * JQuery Organisation Chart Plugin.
+ *
+ * Author: Mark Lee
+ * Copyright (C)2013-2015 Caprica Software Limited
+ * http://www.capricasoftware.co.uk
+ *
+ * Contributions by: Paul Lautman <paul.lautman at gmail.com>
+ *
+ * This software is licensed under the Creative Commons Attribution-ShareAlike 3.0 License,
+ * see here for license terms:
+ *
+ *     http://creativecommons.org/licenses/by-sa/3.0
+ */
+(function($) {
+
+    $.fn.orgChart = function(options) {
+        var opts = $.extend({}, $.fn.orgChart.defaults, options);
+
+        return this.each(function() {
+            var $chartSource = $(this);
+            // Clone the source list hierarchy so levels can be non-destructively removed if needed
+            // before creating the chart
+            $this = $chartSource.clone();
+            if (opts.levels > -1) {
+                $this.find("ul").andSelf().filter(function() {return $chartSource.parents("ul").length+1 > opts.levels;}).remove();
+            }
+            // Store the original element
+            $this.data("chart-source", $chartSource);
+            // Build the chart...
+            var $container = $("<div class='" + opts.chartClass + "'/>");
+            if (opts.interactive) {
+                $container.addClass("interactive");
+            }
+            // The chart may be sourced from either a "ul", or an "li" element...
+            var $root;
+            if ($this.is("ul")) {
+                $root = $this.find("li:first");
+            }
+            else if ($this.is("li")) {
+                $root = $this;
+            }
+            if ($root) {
+                buildNode($root, $container, 0, 0, opts);
+                // Special case for any hyperlink anchor in the chart to prevent the click on the node itself from propagating
+                $container.find("div.node a").click(function(evt) {
+                    evt.stopImmediatePropagation();
+                });
+                if(opts.replace) {
+                    opts.container.empty();
+                }
+                opts.container.append($container);
+            }
+        });
+    };
+
+    $.fn.orgChart.defaults = {
+        container  : $("body"),
+        depth      : -1,
+        levels     : -1,
+        showLevels : -1,
+        stack      : false,
+        chartClass : "orgChart",
+        hoverClass : "hover",
+        nodeText   : function($node) {return $node.clone().children("ul,li").remove().end().html();},
+        interactive: false,
+        fade       : false,
+        speed      : "slow",
+        nodeClicked: function($node) {},
+        copyClasses: true,
+        copyData   : true,
+        copyStyles : true,
+        copyTitle  : true,
+        replace    : true
+    };
+
+    function buildNode($node, $appendTo, level, index, opts) {
+        var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
+        var $tbody = $("<tbody/>");
+
+        // Make this node...
+        var $nodeRow = $("<tr/>").addClass("nodes");
+        var $nodeCell = $("<td/>").addClass("node").attr("colspan", 2);
+        var $childNodes = $node.children("ul:first").children("li");
+        if ($childNodes.length > 1) {
+            $nodeCell.attr("colspan", $childNodes.length*2);
+        }
+
+        var $adjunct = $node.children("adjunct").eq(0);
+        if ($adjunct.length > 0) {
+            var $adjunctDiv = $("<div>").addClass("adjunct node").addClass("level"+level).addClass("node"+index).addClass("level"+level+"-node"+index).append(opts.nodeText($adjunct));
+            $adjunctDiv.appendTo($nodeCell);
+            var $linkDiv = $("<div>").addClass("adjunct-link");
+            $linkDiv.appendTo($nodeCell);
+            $adjunct.remove();
+        }
+
+        var $heading = $("<h2>").html(opts.nodeText($node));
+        var $nodeDiv = $("<div>").addClass("node").addClass("level"+level).addClass("node"+index).addClass("level"+level+"-node"+index).append($heading);
+
+        // Copy classes from the source list to the chart node
+        if (opts.copyClasses) {
+            $nodeDiv.addClass($node.attr("class"));
+        }
+
+        // Copy data from the source list to the chart node
+        if (opts.copyData) {
+            $nodeDiv.data($node.data());
+        }
+
+        // Copy CSS styles from the source list to the chart node
+        if (opts.copyStyles) {
+            $nodeDiv.attr("style", $node.attr("style"));
+        }
+
+        // Copy the title attribute from the source list to the chart node
+        if (opts.copyTitle) {
+            $nodeDiv.attr("title", $node.attr("title"));
+        }
+
+        $nodeDiv.data("orgchart-level", level).data("orgchart-node", $node);
+
+        $nodeCell.append($nodeDiv);
+        $nodeRow.append($nodeCell);
+        $tbody.append($nodeRow);
+
+        $nodeDiv.click(function() {
+            var $this = $(this);
+            opts.nodeClicked($this.data("orgchart-node"), $this);
+            if (opts.interactive) {
+                var $row = $this.closest("tr");
+                if ($row.next("tr").is(":visible")) {
+                    if (opts.fade) {
+                        $row.nextAll("tr").fadeOut(opts.speed);
+                    }
+                    else {
+                        $row.nextAll("tr").hide();
+                    }
+                    $this.removeClass("shownChildren").addClass("hiddenChildren");
+                }
+                else {
+                    $this.removeClass("hiddenChildren").addClass("shownChildren");
+                    if (opts.fade) {
+                        $row.nextAll("tr").fadeIn(opts.speed);
+                    }
+                    else {
+                        $row.nextAll("tr").show();
+                    }
+                }
+            }
+        });
+
+        if ($childNodes.length > 0) {
+            if (opts.depth == -1 || level+1 < opts.depth) {
+                var $downLineRow = $("<tr/>").addClass("lines");
+                var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
+                $downLineRow.append($downLineCell);
+
+                var $downLineTable = $("<table cellpadding='0' cellspacing='0' border='0'>");
+                $downLineTable.append("<tbody>");
+                var $downLineLine = $("<tr/>").addClass("lines x");
+                var $downLeft = $("<td>").addClass("line left");
+                var $downRight = $("<td>").addClass("line right");
+                $downLineLine.append($downLeft).append($downRight);
+                $downLineTable.children("tbody").append($downLineLine);
+                $downLineCell.append($downLineTable);
+
+                $tbody.append($downLineRow);
+
+                if ($childNodes.length > 0) {
+                    $nodeDiv.addClass("hasChildren");
+                    if (opts.showLevels == -1 || level < opts.showLevels-1) {
+                        $nodeDiv.addClass("shownChildren");
+                    }
+                    else {
+                        $nodeDiv.addClass("hiddenChildren");
+                    }
+                    if (opts.interactive) {
+                        $nodeDiv.hover(function() {$(this).addClass(opts.hoverClass);}, function() {$(this).removeClass(opts.hoverClass)});
+                    }
+                }
+
+                // Recursively make child nodes...
+                var $linesRow = $("<tr/>").addClass("lines v");
+                $childNodes.each(function() {
+                    var $left = $("<td/>").addClass("line left top");
+                    var $right = $("<td/>").addClass("line right top");
+                    $linesRow.append($left).append($right);
+                });
+                $linesRow.find("td:first").removeClass("top");
+                $linesRow.find("td:last").removeClass("top");
+                $tbody.append($linesRow);
+                var $childNodesRow = $("<tr/>");
+                $childNodes.each(function(index) {
+                    var $td = $("<td/>");
+                    $td.attr("colspan", 2);
+                    buildNode($(this), $td, level+1, index, opts);
+                    $childNodesRow.append($td);
+                });
+                $tbody.append($childNodesRow);
+            }
+            else if (opts.stack) {
+                var $stackNodes = $childNodes.clone();
+                var $list = $("<ul class='stack'>").append($stackNodes).addClass("level"+level).addClass("node"+index).addClass("level"+level+"-node"+index);
+                var $stackContainer = $("<div class='stack-container'>").append($list);
+                $nodeDiv.after($stackContainer);
+            }
+        }
+
+        if (opts.showLevels > -1 && level >= opts.showLevels-1) {
+            $nodeRow.nextAll("tr").hide();
+        }
+
+        $table.append($tbody);
+        $appendTo.append($table);
+    };
+
+})(jQuery);
