# HG changeset patch
# User veltr
# Date 1350576356 -7200
# Node ID 1113c3874dd66470b6f840bf577289e598528125
# Parent  a46461f8a74fce493baf1f0efd46e3a7da51fa5c
Added Datasheet View

diff -r a46461f8a74f -r 1113c3874dd6 .settings/org.eclipse.core.resources.prefs
--- a/.settings/org.eclipse.core.resources.prefs	Thu Oct 11 18:22:45 2012 +0200
+++ b/.settings/org.eclipse.core.resources.prefs	Thu Oct 18 18:05:56 2012 +0200
@@ -1,47 +1,48 @@
-eclipse.preferences.version=1
-encoding//data/villes.csv=ISO-8859-1
-encoding//web/hdabo/forms.py=utf-8
-encoding//web/hdabo/management/commands/clean_tags.py=utf-8
-encoding//web/hdabo/management/commands/diff_csv.py=utf-8
-encoding//web/hdabo/management/commands/import_csv.py=utf-8
-encoding//web/hdabo/management/commands/import_tag_popularity.py=utf-8
-encoding//web/hdabo/management/commands/query_wikipedia.py=utf-8
-encoding//web/hdabo/management/utils.py=utf-8
-encoding//web/hdabo/migrations/0001_initial.py=utf-8
-encoding//web/hdabo/migrations/0002_backport_hdabo_sf.py=utf-8
-encoding//web/hdabo/migrations/0003_update_redirection.py=utf-8
-encoding//web/hdabo/migrations/0005_auto__chg_field_datasheet_organisation.py=utf-8
-encoding//web/hdabo/models.py=utf-8
-encoding//web/hdabo/search/french_whoosh_backend.py=utf-8
-encoding//web/hdabo/tests/models.py=utf-8
-encoding//web/hdabo/utils.py=utf-8
-encoding//web/hdabo/views.py=utf-8
-encoding//web/hdabo/wp_utils.py=utf-8
-encoding//web/hdalab/__init__.py=utf-8
-encoding//web/hdalab/config.py=utf-8
-encoding//web/hdalab/manage.py=utf-8
-encoding//web/hdalab/management/commands/export_tags_csv.py=utf-8
-encoding//web/hdalab/management/commands/export_wpcategory_csv.py=utf-8
-encoding//web/hdalab/management/commands/fill_country_codes.py=utf-8
-encoding//web/hdalab/management/commands/fill_tag_years.py=utf-8
-encoding//web/hdalab/management/commands/geojson_transform.py=utf-8
-encoding//web/hdalab/management/commands/import_hda_insee_csv.py=utf-8
-encoding//web/hdalab/management/commands/import_hdabo_db.py=utf-8
-encoding//web/hdalab/management/commands/import_insee_csv.py=utf-8
-encoding//web/hdalab/management/commands/query_category_inclusion.py=utf-8
-encoding//web/hdalab/management/commands/query_dbpedia.py=utf-8
-encoding//web/hdalab/management/commands/query_geo_inclusion.py=utf-8
-encoding//web/hdalab/management/commands/query_wikipedia_category.py=utf-8
-encoding//web/hdalab/management/utils.py=utf-8
-encoding//web/hdalab/migrations/0001_initial.py=utf-8
-encoding//web/hdalab/migrations/0002_dataviz.py=utf-8
-encoding//web/hdalab/migrations/0003_hdasession.py=utf-8
-encoding//web/hdalab/migrations/0005_rename_end_year.py=utf-8
-encoding//web/hdalab/migrations/0006_dbpedia_fields_one_to_one.py=utf-8
-encoding//web/hdalab/migrations/0007_geographic_inclusion.py=utf-8
-encoding//web/hdalab/migrations/0008_datasheet_insee.py=utf-8
-encoding//web/hdalab/models/dataviz.py=utf-8
-encoding//web/hdalab/settings.py=utf-8
-encoding//web/hdalab/urls.py=utf-8
-encoding//web/hdalab/utils.py=utf-8
-encoding//web/hdalab/views/ajax.py=utf-8
+eclipse.preferences.version=1
+encoding//data/villes.csv=ISO-8859-1
+encoding//web/hdabo/forms.py=utf-8
+encoding//web/hdabo/management/commands/clean_tags.py=utf-8
+encoding//web/hdabo/management/commands/diff_csv.py=utf-8
+encoding//web/hdabo/management/commands/import_csv.py=utf-8
+encoding//web/hdabo/management/commands/import_tag_popularity.py=utf-8
+encoding//web/hdabo/management/commands/query_wikipedia.py=utf-8
+encoding//web/hdabo/management/utils.py=utf-8
+encoding//web/hdabo/migrations/0001_initial.py=utf-8
+encoding//web/hdabo/migrations/0002_backport_hdabo_sf.py=utf-8
+encoding//web/hdabo/migrations/0003_update_redirection.py=utf-8
+encoding//web/hdabo/migrations/0005_auto__chg_field_datasheet_organisation.py=utf-8
+encoding//web/hdabo/models.py=utf-8
+encoding//web/hdabo/search/french_whoosh_backend.py=utf-8
+encoding//web/hdabo/tests/models.py=utf-8
+encoding//web/hdabo/utils.py=utf-8
+encoding//web/hdabo/views.py=utf-8
+encoding//web/hdabo/wp_utils.py=utf-8
+encoding//web/hdalab/__init__.py=utf-8
+encoding//web/hdalab/config.py=utf-8
+encoding//web/hdalab/manage.py=utf-8
+encoding//web/hdalab/management/commands/export_tags_csv.py=utf-8
+encoding//web/hdalab/management/commands/export_wpcategory_csv.py=utf-8
+encoding//web/hdalab/management/commands/fill_country_codes.py=utf-8
+encoding//web/hdalab/management/commands/fill_tag_years.py=utf-8
+encoding//web/hdalab/management/commands/geojson_transform.py=utf-8
+encoding//web/hdalab/management/commands/import_hda_insee_csv.py=utf-8
+encoding//web/hdalab/management/commands/import_hdabo_db.py=utf-8
+encoding//web/hdalab/management/commands/import_insee_csv.py=utf-8
+encoding//web/hdalab/management/commands/query_category_inclusion.py=utf-8
+encoding//web/hdalab/management/commands/query_dbpedia.py=utf-8
+encoding//web/hdalab/management/commands/query_geo_inclusion.py=utf-8
+encoding//web/hdalab/management/commands/query_wikipedia_category.py=utf-8
+encoding//web/hdalab/management/utils.py=utf-8
+encoding//web/hdalab/migrations/0001_initial.py=utf-8
+encoding//web/hdalab/migrations/0002_dataviz.py=utf-8
+encoding//web/hdalab/migrations/0003_hdasession.py=utf-8
+encoding//web/hdalab/migrations/0005_rename_end_year.py=utf-8
+encoding//web/hdalab/migrations/0006_dbpedia_fields_one_to_one.py=utf-8
+encoding//web/hdalab/migrations/0007_geographic_inclusion.py=utf-8
+encoding//web/hdalab/migrations/0008_datasheet_insee.py=utf-8
+encoding//web/hdalab/models/dataviz.py=utf-8
+encoding//web/hdalab/settings.py=utf-8
+encoding//web/hdalab/urls.py=utf-8
+encoding//web/hdalab/utils.py=utf-8
+encoding//web/hdalab/views/ajax.py=utf-8
+encoding//web/hdalab/views/pages.py=utf-8
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/static/hdalab/css/facettes.css
--- a/web/hdalab/static/hdalab/css/facettes.css	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/static/hdalab/css/facettes.css	Thu Oct 18 18:05:56 2012 +0200
@@ -309,6 +309,10 @@
     font-size: 18px; margin: 3px 0;
 }
 
+.content-item h3 a, .content-item p a {
+    color: #000000;
+}
+
 .content-item h4 {
     font-size: 11px; margin: 3px 0;
 }
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/static/hdalab/css/notice.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/hdalab/static/hdalab/css/notice.css	Thu Oct 18 18:05:56 2012 +0200
@@ -0,0 +1,115 @@
+h2 {
+    font-size: 20px; font-weight: bold; text-align: center;
+}
+
+.main-datasheet {
+    float: left; width: 300px; border-radius: 3px; padding: 9px; border: 1px solid #999;
+    background: #FFF8F0; margin-top: 10px;
+}
+
+.main-datasheet a {
+    color: #000000;
+}
+
+.main-datasheet h3 {
+    font-size: 16px; font-weight: bold; font-style: italic; margin: 10px 0;
+}
+
+.main-datasheet img {
+    max-width: 173px; float: right; margin: 5px 0 2px 2px; border: 1px solid #999;
+}
+
+.main-datasheet p {
+    font-size: 12px; margin: 5px 0;
+}
+
+.main-datasheet ul {
+    padding-left: 15px; margin: 10px 0 5px;
+}
+
+.main-datasheet li {
+    font-size: 13px; margin: 5px 0; font-weight: bold;
+}
+
+.main-datasheet li a {
+    text-decoration: underline;
+}
+
+.tag-container {
+    float: left; width: 320px; height: 1px; position: relative;
+}
+
+.tag-container h2, .related-datasheets h2 {
+    margin: 10px;
+}
+
+.tag-canvas, .tags-main {
+    position: absolute; top: 0; left: 0;
+}
+
+.tags-main {
+    width: 320px;
+}
+
+.tags {
+    list-style: none; text-align: center;
+}
+
+.tags li {
+    font-size: 12px; line-height: 14px; min-height: 14px; margin: 20px 0; cursor: pointer;
+}
+
+
+.tags span {
+    color: #ffffff; padding: 4px; background: #666680; 
+}
+
+.tags span.selected {
+    color: #FFFF00; font-weight: bold;
+}
+
+.related-datasheets {
+    float: left; width: 320px;
+}
+
+.datasheets {
+    list-style: none;
+}
+
+.datasheet {
+    border-radius: 3px; padding: 4px; border: 1px solid #999; margin: 5px 0;
+    background: #FFF8F0;
+}
+
+.datasheet img {
+    max-width: 86px; float: right; margin: 2px 0 2px 2px; border: 1px solid #999;
+}
+
+.datasheet h3 {
+    font-size: 13px; font-weight: bold; line-height: 13px; margin: 4px 0;
+}
+
+.datasheet h3 a {
+    color: #000000;
+}
+
+.datasheet h4 {
+    font-size: 12px; font-style: italic; line-height: 12px; margin: 4px 0;
+}
+
+.datasheet-tags {
+    list-style: none; /* display: none; */
+}
+
+.datasheet-tags li {
+    padding: 2px; color: #ffffff; background: #999999; margin: 2px 2px 0 0;
+    font-size: 11px; display: inline-block;
+}
+
+.datasheet-tags li.common-tag {
+    font-weight: bold; background: #666680;
+}
+
+.datasheet:hover .datasheet-tags {
+    display: block;
+}
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/static/hdalab/css/trees.css
--- a/web/hdalab/static/hdalab/css/trees.css	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/static/hdalab/css/trees.css	Thu Oct 18 18:05:56 2012 +0200
@@ -10,15 +10,15 @@
     font-weight: normal;
 }
 
-.cattree .score_0, .cattree .score_1 {
+.cattree .score_0, .cattree .score_1, .cattree .score_0 a, .cattree .score_1 a {
     color: #80d080;
 }
 
-.cattree .score_2, .cattree .score_3, .cattree .score_4 {
+.cattree .score_2, .cattree .score_3, .cattree .score_4, .cattree .score_2 a, .cattree .score_3 a, .cattree .score_4 a {
     color: #409840;
 }
 
-.cattree .score_5, .cattree .score_6, .cattree .score_7 {
+.cattree .score_5, .cattree .score_6, .cattree .score_7, .cattree .score_5 a, .cattree .score_6 a, .cattree .score_7 a {
     color: #006000;
 }
 
@@ -46,6 +46,10 @@
     margin: 4px 0 4px 64px; font-size: 12px; min-height: 50px;
 }
 
+.cattree a.content {
+    color: #000000;
+}
+
 .cattree li, .cattree p.theme {
     margin: 4px 0; font-size: 12px; position: relative;
 }
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/static/hdalab/js/gomina.js
--- a/web/hdalab/static/hdalab/js/gomina.js	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/static/hdalab/js/gomina.js	Thu Oct 18 18:05:56 2012 +0200
@@ -255,9 +255,12 @@
     if (contentdata && contentdata.length) {
         var _htmlCl = '<ul id="contentlist">'
             + contentdata.map(function(_d) {
-                var _html = '<li class="content-item"><h3>'
+                var _dsurl = gomNs.urls.datasheet.replace(/ID$/,_d.hda_id);
+                var _html = '<li class="content-item"><h3><a href="'
+                    + _dsurl
+                    + '">'
                     + _d.title
-                    + '</h3>'
+                    + '</a></h3>'
                     + ( typeof _d.coords == "object" ?
                         '<div class="maplet"><img src="http://maps.googleapis.com/maps/api/staticmap?center=47,1.5&zoom=4&size=160x160&maptype=roadmap&markers=color:red%7C'
                         + _d.coords.latitude
@@ -273,9 +276,11 @@
                     + _d.url
                     + '" target="_blank">'
                     + _d.url.replace(/(^.{40}).+(.{30}$)/m,'$1 &hellip; $2')
-                    + '</a></h4><p>'
+                    + '</a></h4><p><a href="'
+                    + _dsurl
+                    + '">'
                     + _d.description.replace(/(^.{0,160})([\s]|$)(.*)/,'$1&hellip;')
-                    + '</p><ul class="content-tags">'
+                    + '</a></p><ul class="content-tags">'
                     + _d.tags.map(function(_t) {
                         return '<li class="content-tag-item"><a href="#" onclick="addFilter(\'tag\', this.getAttribute(\'original-label\')); return false;" original-label="'
                             + _t.label
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/static/hdalab/js/notice.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/hdalab/static/hdalab/js/notice.js	Thu Oct 18 18:05:56 2012 +0200
@@ -0,0 +1,99 @@
+var selectedelement = null;
+
+function drawlinks() {
+    var w$ = $(window)
+        scroll = w$.scrollTop(),
+        windowheight = w$.height();
+    $(".tags-main, .main-datasheet").css({
+        "margin-top": Math.max(0, scroll - 60) + "px"
+    });
+    var cvheight = Math.max($(".tags-main").outerHeight(), $(".related-datasheets").outerHeight()),
+        cvwidth = $(".tag-container").width(),
+        cv$ = $(".tag-canvas"),
+        cvo = cv$.offset(),
+        colors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"];
+    cv$.attr({
+        width: cvwidth,
+        height: cvheight
+    }).css({
+        width: cvwidth,
+        height: cvheight
+    });
+    
+    $(".main-datasheet-tag, .datasheet").css("opacity", selectedelement ? .7 : 1);
+    $(selectedelement).css("opacity",1);
+    
+    var ctx = cv$[0].getContext('2d'),
+        mds$ = $(".main-datasheet"),
+        ymain = Math.floor(mds$.height() / 2 + mds$.offset().top - cvo.top);
+    
+    $(".main-datasheet-tag").each(function() {
+        var tag$ = $(this),
+            ytag = Math.floor(tag$.offset().top + tag$.outerHeight() / 2 - cvo.top);
+        ctx.strokeStyle = "#999999";
+        ctx.lineWidth = (this === selectedelement ? 4 : 1);
+        ctx.beginPath();
+        ctx.moveTo(0, ymain);
+        ctx.bezierCurveTo(80,ymain, 40,ytag, 120, ytag);
+        ctx.lineTo(160, ytag);
+        ctx.stroke();
+        
+        var tagid = tag$.attr("data-tag-id"),
+            relds = $(".related-datasheet-tag[data-tag-id=" + tagid + "]").parent().parent();
+        
+        if (this === selectedelement) {
+            relds.css("opacity", 1);
+        }
+        
+        relds.each(function(i) {
+            var ds$ = $(this),
+                dst = ds$.offset().top,
+                dsh = ds$.outerHeight(),
+                visible = ds$.is(":visible") && (dst - scroll < windowheight) && (dst + dsh - scroll > 0);
+            if (visible) {
+                var yds = Math.floor(dst + dsh / 2 - cvo.top);
+                ctx.lineWidth = (this === selectedelement || tag$[0] === selectedelement ? 4 : 1);
+                ctx.strokeStyle = colors[ds$.index() % colors.length];
+                ctx.beginPath();
+                ctx.moveTo(160, ytag);
+                ctx.lineTo(200, ytag);
+                ctx.bezierCurveTo(280,ytag, 280,yds, 320, yds);
+                ctx.stroke();
+                if (this === selectedelement) {
+                    tag$.css("opacity",1);
+                }
+            }
+        })
+    });
+}
+
+$(function() {
+    $(window).scroll(drawlinks);
+    $(window).resize(drawlinks);
+    $(".main-datasheet-tag").click(function() {
+        var tag$ = $(this);
+        if (tag$.hasClass("selected")) {
+            $(".datasheet").show();
+            tag$.removeClass("selected");
+        } else {
+            $(".datasheet").hide();
+            var tagid = tag$.attr("data-tag-id");
+            $(".related-datasheet-tag[data-tag-id=" + tagid + "]").parent().parent().show();
+            $(".main-datasheet-tag").removeClass("selected");
+            tag$.addClass("selected");
+        }
+        drawlinks();
+    });
+    $(".main-datasheet-tag, .datasheet").mouseover(function() {
+        if (selectedelement !== this) {
+            selectedelement = this;
+            drawlinks();
+        }
+    }).mouseout(function() {
+        if (selectedelement) {
+            selectedelement = null;
+            drawlinks();
+        }
+    });
+    drawlinks();
+});
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/static/hdalab/js/trees.js
--- a/web/hdalab/static/hdalab/js/trees.js	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/static/hdalab/js/trees.js	Thu Oct 18 18:05:56 2012 +0200
@@ -29,9 +29,14 @@
     });
     _data.show_more = _data.contents && _data.contents.length > 5 ? _data.contents.length - 5 : 0;
     _data.font_size = (10+Math.log(_data.counts.contents)*_scale);
+    var _dsurl = endpoints.datasheet.replace(/ID$/,'');
     var _prefix = '<li class="themeli {{#level}}folded {{/level}}"><p class="theme"><span style="font-size: {{font_size}}px">{{label}}</span> &mdash; {{#counts.themes}}{{counts.themes}} thème(s){{#counts.contents}}, {{/counts.contents}}{{/counts.themes}}{{#counts.contents}}{{counts.contents}} notice(s){{/counts.contents}}</p><ul>',
-        _suffix = '{{#contents}}<li class="content{{#hidden}} hidden{{/hidden}}" id="content_{{id}}"><p class="title score_{{score}}">{{title}}</p><div class="foldedcontent"><div class="img-container"><img src="http://www.histoiredesarts.culture.fr/images/cached/images/{{hda_id}}.jpg" />'
-            + '</div><p class="description">Source: {{organization}}<br /><a href="{{url}}" target="_blank" class="content">{{trimmed_description}}</a></p></div></li>{{/contents}}{{#show_more}}<li class="show_more">Plus de contenus (<span class="show_more_count">{{show_more}}</span>)&hellip;</li>{{/show_more}}</ul></li>',
+        _suffix = '{{#contents}}<li class="content{{#hidden}} hidden{{/hidden}}" id="content_{{id}}"><p class="title score_{{score}}"><a href="'
+            + _dsurl
+            + '{{hda_id}}">{{title}}</a></p><div class="foldedcontent"><div class="img-container"><img src="http://www.histoiredesarts.culture.fr/images/cached/images/{{hda_id}}.jpg" />'
+            + '</div><p class="description">Source: <a href="{{organization_url}}" target="_blank">{{organization}}</a><br /><a href="'
+            + _dsurl
+            + '{{hda_id}}" class="content">{{trimmed_description}}</a></p></div></li>{{/contents}}{{#show_more}}<li class="show_more">Plus de contenus (<span class="show_more_count">{{show_more}}</span>)&hellip;</li>{{/show_more}}</ul></li>',
         _html = Mustache.to_html(_prefix, _data);
     if (typeof _data.themes == "object" && typeof _data.themes.slice == "function") {
         for (var _i = 0; _i < _data.themes.length; _i++) {
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/templates/categories.html
--- a/web/hdalab/templates/categories.html	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/templates/categories.html	Thu Oct 18 18:05:56 2012 +0200
@@ -18,7 +18,8 @@
         endpoints = {
             cat_search: "{% url cat_search %}",
             cat_tree: "{% url cat_tree %}",
-            fill_tree: "{% url fill_tree %}"
+            fill_tree: "{% url fill_tree %}",
+            datasheet: "{% url notice 'ID' %}"
         };
         </script>
         <script src="{{STATIC_URL}}hdalab/js/trees.js"></script>
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/templates/facettes.html
--- a/web/hdalab/templates/facettes.html	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/templates/facettes.html	Thu Oct 18 18:05:56 2012 +0200
@@ -20,7 +20,7 @@
         <script src="{{STATIC_URL}}hdalab/lib/ZeroClipboard.js"></script>
 
         <script src="{% url jsi18n 'hdalab' %}"></script>
-        <script src="{{STATIC_URL}}hdalab/js/gomina.js?v=120829"></script>
+        <script src="{{STATIC_URL}}hdalab/js/gomina.js?v=121018"></script>
         
         <script type="text/javascript">
         gomNs.languageCode = '{{LANGUAGE_CODE}}';
@@ -28,7 +28,8 @@
             'filter': "{% url filter %}",
             'session_info': "{% url session_info %}",
             'countries': "{{STATIC_URL}}hdalab/lib/countries.geo.json",
-            'tag_search': "{% url tag_search %}"
+            'tag_search': "{% url tag_search %}",
+            'datasheet': "{% url notice 'ID' %}"
         };
         ZeroClipboard.setMoviePath('{{STATIC_URL}}hdalab/lib/ZeroClipboard.swf');
         </script>
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/templates/notice.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/hdalab/templates/notice.html	Thu Oct 18 18:05:56 2012 +0200
@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% block title %}{{block.super}} &gt; {{datasheet.title}}{% endblock %}
+
+{% block css_import %}
+{{block.super}}
+        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}hdalab/css/notice.css" />
+{% endblock %}
+
+{% block js_import %}
+{{block.super}}
+        <script src="{{STATIC_URL}}hdalab/lib/underscore-min.js"></script>
+        <script src="{{STATIC_URL}}hdalab/js/notice.js"></script>
+{% endblock %}
+
+{% block main_content %}
+<div class="main-datasheet">
+    <h2>{{datasheet.title}}</h2>
+    <h3><a href="{{datasheet.organisation.website}}" target="_blank">{{datasheet.organisation.name}}</a></h3>
+    <img src="http://histoiredesarts.culture.fr/images/cached/images/{{datasheet.hda_id}}.jpg" />
+    <p>{{datasheet.description}}</p>
+    <ul>
+        <li>Visiter sur <a href="{{datasheet.url}}" target="_blank">{{domain}}</a></li>
+        <li>Plus d'informations sur <a href="http://histoiredesarts.culture.fr/notices/{{datasheet.hda_id}}/" target="_blank">histoiredesarts.culture.fr</a></li>
+    </ul>
+</div>
+
+<div class="tag-container">
+    <canvas class="tag-canvas"></canvas>
+    <div class="tags-main">
+        <h2>Mots-clés</h2>
+        <ul class="tags">
+        {% for t in ordered_tags %}
+            <li><span class="main-datasheet-tag" data-tag-id="{{t.tag.id}}">{{t.tag.label}}</span></li>
+        {% endfor %}
+        </ul>
+    </div>
+</div>
+
+<div class="related-datasheets">
+    <h2>Notices liées :</h2>
+    <ul class="datasheets">
+    {% for ds in related %}
+        <li class="datasheet">
+            <img src="http://histoiredesarts.culture.fr/images/cached/images/{{ds.hda_id}}.jpg" />
+            <h3><a href="{% url notice ds.hda_id %}">{{ds.title}}</a></h3>
+            <h4>{{ds.organisation_name}}</h4>
+            <ul class="datasheet-tags">{% for t in ds.ordered_tags %}<li data-tag-id="{{t.id}}" class="related-datasheet-tag {% if t.common %} common-tag{% endif %}">{{t.label}}</li>{% endfor %}</ul>
+        </li>
+    {% endfor %}
+    </ul>
+</div>
+    
+{% endblock %}
\ No newline at end of file
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/templates/thesaurus.html
--- a/web/hdalab/templates/thesaurus.html	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/templates/thesaurus.html	Thu Oct 18 18:05:56 2012 +0200
@@ -16,7 +16,8 @@
         <script src="{{STATIC_URL}}hdalab/lib/jquery-ui-1.8.16.custom.min.js"></script>
         <script type="text/javascript">
         endpoints = {
-            fill_tree: "{% url fill_tree %}"
+            fill_tree: "{% url fill_tree %}",
+            datasheet: "{% url notice 'ID' %}"
         };
         </script>
         <script src="{{STATIC_URL}}hdalab/js/trees.js"></script>
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/urls.py
--- a/web/hdalab/urls.py	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/urls.py	Thu Oct 18 18:05:56 2012 +0200
@@ -27,6 +27,8 @@
     url(r'^categories/', TemplateView.as_view(template_name="categories.html"), name='categories'),
     url(r'^thesaurus/', TemplateView.as_view(template_name="thesaurus.html"), name='thesaurus'),
     url(r'^$', TemplateView.as_view(template_name="index.html"), name='home'),
+    
+    url(r'^notice/(?P<hda_id>[\w-]+)$', 'hdalab.views.pages.datasheet', name='notice')
 
 )
 
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/views/ajax.py
--- a/web/hdalab/views/ajax.py	Thu Oct 11 18:22:45 2012 +0200
+++ b/web/hdalab/views/ajax.py	Thu Oct 18 18:05:56 2012 +0200
@@ -126,6 +126,7 @@
                 'description': datasheet.description,
                 'hda_id': datasheet.hda_id,
                 'organization': datasheet.organisation.name,
+                'organization_url': datasheet.organisation.website,
                 'score': max(dsscore, rootscore)
             })
     cleantags(resobj)
@@ -336,7 +337,7 @@
                         
         cont_count = contentqs.count()
         
-        contenus = dict([(content.id, {'score' : 0, 'tags' : [], 'id':content.id, 'title': content.title, 'description': content.description, 'url': content.url}) for content in contentqs[0:content_count]])
+        contenus = dict([(content.id, {'score' : 0, 'tags' : [], 'hda_id': content.hda_id, 'id':content.id, 'title': content.title, 'description': content.description, 'url': content.url}) for content in contentqs[0:content_count]])
         contentids = contenus.keys()
         
         qs = DatasheetExtras.objects.select_related('insee').filter(datasheet__in = contentids)
@@ -424,7 +425,7 @@
     
     datasheets = Datasheet.objects.filter(validated = True, taggedsheet__tag__label__iexact = label, taggedsheet__order__lte = MAX_TAG_ORDER).annotate(tagorder=Min('taggedsheet__order')).select_related('organisation').distinct()
     
-    contents = [{ 'description': ds.description, 'title': ds.title, 'url': ds.url, 'score': int((MAX_TAG_ORDER - ds.tagorder)/2), 'id': ds.id, 'hda_id': ds.hda_id, 'organization': ds.organisation.name } for ds in datasheets]
+    contents = [{ 'description': ds.description, 'title': ds.title, 'url': ds.url, 'score': int((MAX_TAG_ORDER - ds.tagorder)/2), 'id': ds.id, 'hda_id': ds.hda_id, 'organization': ds.organisation.name, 'organization_url': ds.organisation.website } for ds in datasheets]
     
     contents = sorted(contents, key=lambda e: -e['score'])
     
diff -r a46461f8a74f -r 1113c3874dd6 web/hdalab/views/pages.py
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/hdalab/views/pages.py	Thu Oct 18 18:05:56 2012 +0200
@@ -0,0 +1,59 @@
+# -*- coding: utf-8 -*-
+
+from django.shortcuts import render_to_response, redirect
+from django.template import RequestContext
+from hdabo.models import Datasheet, TaggedSheet
+import re
+import django.utils.simplejson as json
+
+def datasheet(request, hda_id=None):
+    MAX_TAG = 15
+    MAX_RELATED = 50
+    
+    datasheet = Datasheet.objects.select_related("organisation").get(hda_id=hda_id)
+    
+    domain = re.findall(r"^https?://(www\.)?([^/]+)",datasheet.url)
+    ordered_tags = TaggedSheet.objects.filter(datasheet=datasheet,order__lte=MAX_TAG).select_related("tag").order_by('order')
+    tags = [t.tag.id for t in ordered_tags]
+    tagorders = dict([(t.tag.id,t.order) for t in ordered_tags])
+    tsqs = TaggedSheet.objects.exclude(datasheet=datasheet).filter(order__lte=MAX_TAG,tag_id__in=tags)
+    dsscores = {}
+    addtoscore = 3*MAX_TAG
+    
+    for ts in tsqs:
+        a_order = tagorders[ts.tag_id]
+        b_order = ts.order
+        score = addtoscore - a_order - b_order
+        dsscore = dsscores.get(ts.datasheet_id,0)
+        dsscores[ts.datasheet_id] = dsscore + score
+    relatedqs = Datasheet.objects.filter(id__in=dsscores.keys()).select_related("organisation")
+    relatedds = [{
+        'id': ds.id,
+        'hda_id': ds.hda_id,
+        'title': ds.title,
+        'description': ds.description,
+        'organisation_name': ds.organisation.name,
+        'organisation_url': ds.organisation.website,
+        'score': dsscores.get(ds.id,0),
+    } for ds in relatedqs]
+    relatedds = sorted(relatedds, key=lambda ds: -ds['score'])[:MAX_RELATED]
+    
+    for ds in relatedds:
+        otqs = TaggedSheet.objects.filter(datasheet_id=ds['id'],order__lte=MAX_TAG).select_related("tag").order_by('order')
+        ds['ordered_tags'] = [{
+            'id': t.tag.id,
+            'label': t.tag.label,
+            'order': t.order,
+            'common' : (t.tag.id in tags)
+        } for t in otqs]
+    
+    return render_to_response(
+        "notice.html",
+        {
+            'datasheet':datasheet,
+            'domain': domain[0][1] if domain else "",
+            'ordered_tags': ordered_tags,
+            'related': relatedds,
+        },
+        context_instance=RequestContext(request)
+    )