--- a/web/hdalab/static/hdalab/css/cattree.css	Mon Aug 27 17:30:20 2012 +0200
+++ b/web/hdalab/static/hdalab/css/cattree.css	Tue Aug 28 15:56:38 2012 +0200
@@ -11,6 +11,10 @@
     font-size: 16px; font-weight: bold; margin-bottom: 5px;
 }
 
+.leftzone h3 {
+    font-size: 13px; font-weight: bold; margin: 30px 0 5px;
+}
+
 .leftzone input {
     background: #ffffff; width: 260px; font-size: 14px; font-weight: bold; margin: 5px 0;
 }
@@ -19,7 +23,7 @@
     display: none;
 }
 
-.results, .bloc-historique {
+.results {
     margin-top: 30px;
 }
 
@@ -27,6 +31,22 @@
     color: #000060;
 }
 
+ul.disciplist {
+    list-style: none; margin: 10px 5px;
+}
+
+.disciplist li {
+    font-size: 12px; font-weight: bold;
+}
+
+.disciplist a {
+    color: #000066;
+}
+
+.disciplist .selected a {
+    color: #0000ff;
+}
+
 .ui-autocomplete strong {
     font-weight: bold; color: #990000;
 }
@@ -72,7 +92,7 @@
 }
 
 .cattree .img-container {
-    float: left; margin: 4px 0; width: 60px; height: 50px; background: #dddddd;
+    float: left; margin: 10px 0 0; width: 60px; height: 50px; background: #dddddd;
 }
 
 .cattree .img-container img {
@@ -91,11 +111,11 @@
     font-weight: bold; cursor: pointer;
 }
 
-.cattree p.theme:after, .cattree .content p.title:after {
+.cattree p.theme:after {
     content: " [-]"
 }
 
-.cattree .folded p.theme:after, .cattree .content.folded p.title:after {
+.cattree .folded p.theme:after {
     content: " [+]"
 }
 
@@ -146,3 +166,7 @@
 li.content {
     list-style: disc;
 }
+
+.loading {
+    height: 128px; background: url(../img/loader.gif) no-repeat center;
+}

Binary file web/hdalab/static/hdalab/img/loader.gif has changed

--- a/web/hdalab/static/hdalab/js/cattree.js	Mon Aug 27 17:30:20 2012 +0200
+++ b/web/hdalab/static/hdalab/js/cattree.js	Tue Aug 28 15:56:38 2012 +0200
@@ -34,15 +34,18 @@
     return _html;
 }
 
-function histoclick(_el) {
-    gettree($(_el).text());
-}
-
 function gettree(_label) {
+    $(".disciplist li").removeClass("selected");
+    $("#tree").html('<div class="loading"></div>');
     $.getJSON(
         endpoints.cat_tree,
         { label: _label },
         function(_data) {
+            $(".disciplist li").each(function() {
+                if ($(this).text().trim().toLowerCase() === _label.toLowerCase()) {
+                    $(this).addClass("selected");
+                }
+            })
             $(".label-name").html(_label);
             if (_data) {
                 $("#tree").html(render(_data, 0));
@@ -54,7 +57,7 @@
                     $(this).find(".foldedcontent")
                     .dequeue()
                     .animate({
-                        height: $(this).find("p.description").outerHeight()
+                        height: 5 + $(this).find("p.description").outerHeight()
                     },
                     500);
                 }).mouseleave(function() {
@@ -81,17 +84,12 @@
                 $("#tree").html("");
                 $(".results").hide();
             }
-            var _hist = $(".historique"),
-                _html = _hist.text().length ? ' &raquo; ' : '';
-            _html += '<a href="#" onclick="histoclick(this); return false;">' + _label + '</a>';
-            _hist.append(_html);
-            $('.bloc-historique').show();
         }
     );
 }
 
 $(function() {
-    $( "#catsearch" ).autocomplete({
+    $("#catsearch").autocomplete({
         source: endpoints.cat_search,
         minLength: 2,
         select: function( event, ui ) {
@@ -111,5 +109,11 @@
                 + "</a>" )
             .appendTo( ul )
     };
+    $("#catform").submit(function() {
+        gettree($("#catsearch").val());
+    });
     gettree("peinture");
+    $(".disciplist li").click(function() {
+        gettree($(this).text().trim());
+    })
 });
\ No newline at end of file

--- a/web/hdalab/templates/categories.html	Mon Aug 27 17:30:20 2012 +0200
+++ b/web/hdalab/templates/categories.html	Tue Aug 28 15:56:38 2012 +0200
@@ -26,9 +26,26 @@
 
 {% block main_content %}
     <div class="leftzone">
-        <h2>Rechercher une catégorie&nbsp;: </h2>
+        <h2>Explorer les domaines artistiques</h2>
         <p>
-            <input id="catsearch" />
+            Cette interface expérimentale présente les ressources d'<a href="http://histoiredesarts.culture.fr/" target="_blank">Histoire des Arts</a>,
+            ordonnées selon l'arborescence des <a href="http://fr.wikipedia.org/wiki/Sp%C3%A9cial:ArbreCat%C3%A9gorie/Espace_Cat%C3%A9gorie" target="_blank">catégories de Wikipédia</a>.
+            Seules les ressources les plus pertinentes sont affichées.
+        </p>
+        <ul class="disciplist">
+            <li><a href="#">Architecture</a></li>
+            <li><a href="#">Cinéma</a></li>
+            <li><a href="#">Littérature</a></li>
+            <li><a href="#">Musique</a></li>
+            <li><a href="#">Peinture</a></li>
+            <li><a href="#">Photographie</a></li>
+            <li><a href="#">Poésie</a></li>
+            <li><a href="#">Sculpture</a></li>
+            <li><a href="#">Théâtre</a></li>
+        </ul>
+        <h3>Recherche libre dans les catégories&nbsp;: </h3>
+        <p>
+            <form id="catform"><input id="catsearch" /></form>
         </p>
         <div class="results hidden">
             <h2>Résultats pour &laquo;&nbsp;<span class="label-name"></span>&nbsp;&raquo;&nbsp;:</h2>
@@ -36,10 +53,6 @@
             <p class="tag-results"><span class="tag-count"></span> tag(s)</p>
             <p class="content-results"><span class="content-count"></span> contenu(s)</p>
         </div>
-        <div class="bloc-historique hidden">
-            <h2>Mon Historique</h2>
-            <p class="historique"></p>
-        </div>
     </div>
     <div id="tree" class="cattree"></div>
 {% endblock %}
\ No newline at end of file