# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1350390239 -7200
# Node ID 95df5542a1ce82277f8495e3e6500dce7bc19e73
# Parent  771e832a51c4c5f29e2b723a902d580214f40df0
traitement des retours

diff -r 771e832a51c4 -r 95df5542a1ce integration/article.html
--- a/integration/article.html	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/article.html	Tue Oct 16 14:23:59 2012 +0200
@@ -8,7 +8,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Article</title>
 
-
+        
 
         <link rel="stylesheet" href="css/reset.css" />
         <link rel="stylesheet" href="css/style.css" />
@@ -28,8 +28,8 @@
                         <p >
                             <a href="#" class="photo"></a>
                             <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
-                            <input type="submit" value="" class="recherche-submit"/>
-                            <a class="plus-button" href="#"> </a>
+                            <input type="submit" title="Rechercher"  value="" class="recherche-submit"/>
+                            <a class="plus-button" title="Annoter" href="#"> </a>
                         </p>
                     </form>
                 </div>
@@ -63,7 +63,7 @@
                         <h2>MES DOSSIERS</h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Nouveau dossier documentaire" href="#">
                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
                             </li>
 
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers"  href="#"></a>
                         <h2></h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <atitle="Voir le dossier"  href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -122,17 +122,15 @@
                                 </a>
                             </li>
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
                     </div>
                 </div><!--dossier-documentaire-->
             </div><!-- header -->
 
             <div class="content-wrap clearfix">
                 <div class="frise">
-                    <div id="slider-range">
-                        <div class="voile-left"></div>
-                        <div class="voile-right"></div>
-                    </div>
+                    <div class="streamgraph"></div>
+                    <div id="slider-range"></div>
                 </div><!-- frise -->
                 <div class="cluster-wrap">
                     <a href="#" class="cluster-arrow arrow-left"></a>
@@ -141,18 +139,18 @@
                         <div class="cluster-visible">
                         
                             <ul class="cluster">
-                                <li><a href="#">Début</a></li>
-                                <li><a href="#">affaire de Karachi</a></li>
-                                <li><a href="#">Syrie</a></li>
-                                <li><a href="#">affaire de Karachi</a></li>
-                                <li><a href="#">Syrie</a></li>
-                                <li><a href="#">affaire de Karachi</a></li>
-                                <li><a href="#">Syrie</a></li>
-                                <li><a href="#">affaire de Karachi</a></li>
-                                <li><a href="#">Syrie</a></li>
-                                <li><a href="#">affaire de Karachi</a></li>
-                                <li><a href="#">Syrie</a></li>
-                                <li><a href="#">Fin</a></li>
+                                <li><a title="Afficher le cluster" href="#">Début</a></li>
+                                <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+                                <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+                                <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+                                <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+                                <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+                                <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+                                <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+                                <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+                                <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+                                <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+                                <li><a title="Afficher le cluster" href="#">Fin</a></li>
                             </ul>
                         </div>
                     </div>
@@ -171,7 +169,7 @@
                                     <form action="#" method="">
                                         <p class="clearfix">
                                             <input type="text" name="" placeholder="Rechercher" />
-                                            <input type="submit" value="" />
+                                            <input type="submit" title="Rechercher"   value="" />
                                         </p>
                                     </form>
                                 </div>
@@ -223,8 +221,8 @@
                                 <div class="widget-inner">
                                     
                                     <ul class="clearfix">
-                                        <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
-                                        <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+                                        <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+                                        <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
                                     </ul>
                                 </div>
                             </div><!-- affichage -->
@@ -237,7 +235,7 @@
 
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -253,7 +251,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -268,7 +266,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -284,7 +282,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -299,7 +297,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -315,7 +313,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -330,7 +328,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -346,7 +344,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -361,7 +359,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -377,7 +375,7 @@
                             </div><!--article -->
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         <a href="#">23 JANVIER 2024</a><br/>
                                         by <a href="#">Jean Dujardin</a>
@@ -437,8 +435,11 @@
         <script src="js/vendor/jquery-1.8.0.min.js"></script>
         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
         <script src="js/vendor/dragslider.js"></script>
+        <script src="js/lib/raphael-min.js"></script>
+        <script src="js/lib/underscore-min.js"></script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/streamgraph.js"></script>
 
     </body>
 </html>
diff -r 771e832a51c4 -r 95df5542a1ce integration/css/style.css
--- a/integration/css/style.css	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/css/style.css	Tue Oct 16 14:23:59 2012 +0200
@@ -291,6 +291,18 @@
 	right: 0;
 	background: url(../img/cluster-arrows.jpg) no-repeat -19px 0;
 }
+a.cluster-arrow.arrow-right:hover{
+	background-position: -19px -22px;
+}
+a.cluster-arrow.arrow-right:active{
+	background-position: -19px -44px;
+}
+a.cluster-arrow.arrow-left:hover{
+	background-position: 0 -22px;
+}
+a.cluster-arrow.arrow-left:active{
+	background-position: 0 -44px;
+}
 /*content*/
 div.content{
 	height: 100%;
@@ -300,6 +312,7 @@
 	padding: 1px 0;
 
 }
+
 div.content-left,div.content-right{
 	float: left;
 }
@@ -754,8 +767,8 @@
 }
 div.actu div.links ul li a{
 	display: block;
-	width: 25px;
-	height: 25px;
+	width: 28px;
+	height: 28px;
 	background-color: #007dad;
 	background-repeat: no-repeat;
 }
@@ -764,15 +777,27 @@
 }
 div.actu div.links ul li a.trash{
 	background-image: url(../img/home-button-trash.png);
-	background-position: 6px 4px;
+	background-position: 8px 5px;
 }
 div.actu div.links ul li a.file{
 	background-image: url(../img/home-button-file.png);
-	background-position: 4px 6px;
+	background-position: 2px 6px;
+	text-decoration: none; 
+	position: relative;
+}
+div.actu div.links ul li a.file span{
+    color: #0F85B2;
+    display: block;
+    font-size: 11px;
+    left: 8px;
+    position: absolute;
+    text-align: center;
+    top: 6px;
+    width: 18px;
 }
 div.actu div.links ul li a.comment{
 	background-image: url(../img/home-button-comment.png);
-	background-position: 2px 5px;
+	background-position: 4px 6px;
 }
 
 /* FRISE */
@@ -945,4 +970,8 @@
 }
 li.item-dossier div.dossier-col-right ul.annotations li a.edit:hover{
 	background-position: -37px -60px;
+}
+/*datepicker*/
+.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{
+	font-size: 13px;
 }
\ No newline at end of file
diff -r 771e832a51c4 -r 95df5542a1ce integration/documentaire.html
--- a/integration/documentaire.html	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/documentaire.html	Tue Oct 16 14:23:59 2012 +0200
@@ -28,8 +28,8 @@
                         <p >
                             <a href="#" class="photo"></a>
                             <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
-                            <input type="submit" value="" class="recherche-submit"/>
-                            <a class="plus-button" href="#"> </a>
+                            <input type="submit" title="Rechercher"  value="" class="recherche-submit"/>
+                            <a class="plus-button" title="Annoter" href="#"> </a>
                         </p>
                     </form>
                 </div>
@@ -63,7 +63,7 @@
                         <h2>MES DOSSIERS</h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Nouveau dossier documentaire" href="#">
                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
                             </li>
 
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers"  href="#"></a>
                         <h2></h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <atitle="Voir le dossier"  href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -122,7 +122,7 @@
                                 </a>
                             </li>
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
                     </div>
                 </div><!--dossier-documentaire-->
             </div><!-- header -->
@@ -147,7 +147,7 @@
                                     <form action="#" method="">
                                         <p class="clearfix">
                                             <input type="text" name="" placeholder="Rechercher" />
-                                            <input type="submit" value="" />
+                                            <input title="Rechercher" type="submit" value="" />
                                         </p>
                                     </form>
                                 </div>
@@ -196,7 +196,7 @@
                                    <div class="dossier-col-left">
                                         <div class="header-dossier">
                                           <h2>
-                                            <a href="#">L'affaire Sarkozy »</a>
+                                            <a  title="Lire l'article" href="#">L'affaire Sarkozy »</a>
                                           </h2>
                                         </div>
                                         
@@ -227,7 +227,7 @@
                                </li><!-- item-dossier -->
                                <li class="item-dossier clearfix">
                                    <div class="dossier-col-left">
-                                       <h2><a href="#">L'affaire Sarkozy »</a></h2>
+                                       <h2><a  title="Lire l'article" href="#">L'affaire Sarkozy »</a></h2>
                                        <div class="dossier-content">
                                            <img src="img/visuel-article.jpg" alt="">
                                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
diff -r 771e832a51c4 -r 95df5542a1ce integration/gabarit.html
--- a/integration/gabarit.html	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/gabarit.html	Tue Oct 16 14:23:59 2012 +0200
@@ -25,11 +25,11 @@
                 <div class="recherche-wrap">
                     <h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
                     <form action="#">
-                        <p>
+                        <p >
                             <a href="#" class="photo"></a>
                             <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
-                            <input type="submit" value="" class="recherche-submit"/>
-                            <a class="plus-button" href="#"> </a>
+                            <input type="submit" title="Rechercher"  value="" class="recherche-submit"/>
+                            <a class="plus-button" title="Annoter" href="#"> </a>
                         </p>
                     </form>
                 </div>
@@ -63,7 +63,7 @@
                         <h2>MES DOSSIERS</h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Nouveau dossier documentaire" href="#">
                                 <img src="img/documentaire-nouveau-dossier.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
                             </li>
 
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers"  href="#"></a>
                         <h2></h2>
                         <ul>
                             <li class="clearfix">
-                                <a href="#">
+                                <atitle="Voir le dossier"  href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
                                 </a>
                             </li>
                             <li class="clearfix">
-                                <a href="#">
+                                <a title="Voir le dossier" href="#">
                                 <img src="img/documentaire-visuel.jpg" alt="" />
                                 <span class="documentaire-texte">
                                     <h3>Terrorisme</h3>
@@ -122,17 +122,15 @@
                                 </a>
                             </li>
                         </ul>
-                        <a class="documentaire-lien" href="#"></a>
+                        <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
                     </div>
                 </div><!--dossier-documentaire-->
             </div><!-- header -->
 
             <div class="content-wrap clearfix">
                 <div class="frise">
-                    <div id="slider-range">
-                        <div class="voile-left"></div>
-                        <div class="voile-right"></div>
-                    </div>
+                    <div class="streamgraph"></div>
+                    <div id="slider-range"></div>
                 </div><!-- frise -->
 
 
@@ -144,12 +142,12 @@
                         <div class="widget-wrap">
 
                             <div class="widget affichage">
-                                <h3><a href="">AFFICHAGE</a></h3>
+                                <h3><a href="#">AFFICHAGE</a></h3>
                                 <div class="widget-inner">
                                     
                                     <ul class="clearfix">
-                                        <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
-                                        <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+                                        <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+                                        <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
                                     </ul>
                                 </div>
                             </div><!-- affichage -->
@@ -161,7 +159,7 @@
                         <div class="articles">
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         48 articles
                                     </p>
@@ -181,11 +179,11 @@
                                        
                                             <ul class="annotations clearfix">
                                                <li>
-                                                    <a class="comment number" href="#"> 
+                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
                                                         <span class="number-value">354</span>
                                                     </a>
                                                 </li>
-                                               <li><a class="comment add" href="#"></a></li>
+                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
                                                <li><a class="value plus" href="#">
                                                     <span class="inner-signe"></span>
                                                     <span class="inner-value" style="height:20%;"></span>
@@ -209,7 +207,7 @@
 
                             <div class="article">
                                 <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="author">
                                         48 articles
                                     </p>
@@ -230,108 +228,11 @@
                                        
                                        <ul class="annotations clearfix">
                                                <li>
-                                                    <a class="comment number" href="#"> 
+                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
                                                         <span class="number-value">354</span>
                                                     </a>
                                                 </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
+                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
                                                <li><a class="value plus" href="#">
                                                     <span class="inner-signe"></span>
                                                     <span class="inner-value" style="height:20%;"></span>
@@ -353,200 +254,7 @@
                                     </div>
                                 </div>
                             </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a href="#"> Affaire Lorem »</a></h2>
-                                    <p class="author">
-                                        48 articles
-                                    </p>
-                                    <div class="article-content">
-                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. 
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-
-                                    </div>
-                                </div>
-                            </div><!--article -->
+                            
                           
                            
                         </div><!-- articles -->
@@ -600,8 +308,11 @@
         <script src="js/vendor/jquery-1.8.0.min.js"></script>
         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
         <script src="js/vendor/dragslider.js"></script>
+        <script src="js/lib/raphael-min.js"></script>
+        <script src="js/lib/underscore-min.js"></script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
+        <script src="js/streamgraph.js"></script>
 
     </body>
 </html>
diff -r 771e832a51c4 -r 95df5542a1ce integration/home.html
--- a/integration/home.html	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/home.html	Tue Oct 16 14:23:59 2012 +0200
@@ -142,12 +142,12 @@
                         <div class="widget-wrap">
        
                             <div class="widget affichage">
-                                <h3><a href="">AFFICHAGE</a></h3>
+                                <h3><a href="#">AFFICHAGE</a></h3>
                                 <div class="widget-inner">
                                     
                                     <ul class="clearfix">
-                                        <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
-                                        <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+                                        <li><a  title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+                                        <li><a  title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
                                     </ul>
                                 </div>
                             </div><!-- affichage -->
@@ -164,9 +164,9 @@
                                     <h2> <a href="#">Affaires Bettecourt</a></h2>
                                     <div class="links">
                                         <ul>
-                                            <li><a href="#" class="trash"></a></li>
-                                            <li><a href="#" class="file"></a></li>
-                                            <li><a href="#" class="comment"></a></li>
+                                            <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+                                            <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+                                            <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
                                         </ul>
                                     </div>
                                 </div>
@@ -179,9 +179,9 @@
                                     <h2> <a href="#">Affaires Bettecourt</a></h2>
                                     <div class="links">
                                         <ul>
-                                            <li><a href="#" class="trash"></a></li>
-                                            <li><a href="#" class="file"></a></li>
-                                            <li><a href="#" class="comment"></a></li>
+                                            <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+                                            <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+                                            <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
                                         </ul>
                                     </div>
                                 </div>
@@ -195,9 +195,9 @@
                                     <h2> <a href="#">Affaires Bettecourt</a></h2>
                                     <div class="links">
                                         <ul>
-                                            <li><a href="#" class="trash"></a></li>
-                                            <li><a href="#" class="file"></a></li>
-                                            <li><a href="#" class="comment"></a></li>
+                                            <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+                                            <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+                                            <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
                                         </ul>
                                     </div>
                                 </div>
@@ -210,9 +210,9 @@
                                     <h2> <a href="#">Affaires Bettecourt</a></h2>
                                     <div class="links">
                                        <ul>
-                                            <li><a href="#" class="trash"></a></li>
-                                            <li><a href="#" class="file"></a></li>
-                                            <li><a href="#" class="comment"></a></li>
+                                            <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+                                            <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+                                            <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
                                         </ul>
                                     </div>
                                 </div>
@@ -225,9 +225,9 @@
                                     <h2> <a href="#">Affaires Bettecourt</a></h2>
                                     <div class="links">
                                         <ul>
-                                            <li><a href="#" class="trash"></a></li>
-                                            <li><a href="#" class="file"></a></li>
-                                            <li><a href="#" class="comment"></a></li>
+                                            <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+                                            <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+                                            <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
                                         </ul>
                                     </div>
                                 </div>
@@ -240,9 +240,9 @@
                                     <h2> <a href="#">Affaires Bettecourt</a></h2>
                                     <div class="links">
                                         <ul>
-                                            <li><a href="#" class="trash"></a></li>
-                                            <li><a href="#" class="file"></a></li>
-                                            <li><a href="#" class="comment"></a></li>
+                                            <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+                                            <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+                                            <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
                                         </ul>
                                     </div>
                                 </div>
diff -r 771e832a51c4 -r 95df5542a1ce integration/img/cluster-arrows.jpg
Binary file integration/img/cluster-arrows.jpg has changed
diff -r 771e832a51c4 -r 95df5542a1ce integration/img/home-button-file.png
Binary file integration/img/home-button-file.png has changed
diff -r 771e832a51c4 -r 95df5542a1ce integration/js/main.js
--- a/integration/js/main.js	Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/js/main.js	Tue Oct 16 14:23:59 2012 +0200
@@ -12,13 +12,13 @@
 		});
 		$(".cluster-visible").css({"left": (clusterWidth-912+clusterVisibleLeft)});
 		$("a.cluster-arrow").bind("click",function(e){
-			console.log("click")
+		
 			e.preventDefault();
 			var clusterContainmentLeft = parseInt($(".cluster-containment").css("left"));
 			var clusterContainmentRight = parseInt($(".cluster-containment").css("left")) + $(".cluster-containment").width();
 			var clusterLeft = parseInt($(".cluster").css("left"));
 			var clusterRight = parseInt($(".cluster").css("left"))+$(".cluster").width();
-			if ($(this).hasClass("arrow-left")) {
+			if ($(this).hasClass("arrow-right")) {
 				if (clusterLeft-40>clusterContainmentLeft) {
 					$(".cluster").css({
 						"left":"-="+40	
@@ -29,7 +29,7 @@
 					});
 				}
 		
-			}else if($(this).hasClass("arrow-right")){
+			}else if($(this).hasClass("arrow-left")){
 			
 				if (clusterRight+40<clusterContainmentRight) {
 					$(".cluster").css({
@@ -47,6 +47,14 @@
 		$(".cluster").draggable({ axis: "x",containment: ".cluster-containment"  });
 	};
 //WIDGET
+	//HEIGHT
+	var contentRightHeight = $(".content-right").height();
+	var contentLeftHeight = $(".content-left").height();
+	if(contentRightHeight>contentLeftHeight){
+		$(".content-left .widget-wrap").css({
+			"height":"+="+(contentRightHeight-contentLeftHeight)
+		});
+	}
 	//VOLET
 	//Tout fermer par défaut
 	//$("div.content-left div.widget-wrap div.widget div.widget-inner").hide().removeClass("open");
@@ -88,6 +96,7 @@
 	});
 //VOLET DOCUMENTAIRE
 	$("div.dossier-documentaire").hide();
+	/*
 	$("div.header a.dossier-button").bind("click",function(e){
 		e.preventDefault();
 		$("div.dossier-documentaire").stop()
@@ -97,6 +106,16 @@
 			$("div.dossier-documentaire").slideDown();
 		}
 	});
+*/
+	$("div.header a.dossier-button").bind("click",function(e){e.preventDefault();});
+	$("div.header a.dossier-button, div.header div.dossier-documentaire").hover(
+		function(){
+			$("div.dossier-documentaire").stop().slideDown();
+		},
+		function(){
+			$("div.dossier-documentaire").stop().slideUp();
+		}
+	);
 //ARTICLES
 	$(".article-visuel-wrap").each(function(){
 		var contentHeight = $(this).parents(".article-content").height();