--- a/web/index.html	Mon Oct 21 18:48:58 2013 +0200
+++ b/web/index.html	Tue Oct 22 11:33:46 2013 +0200
@@ -31,7 +31,7 @@
 	<div class="container">
     <div class="row divctn">
       <div class="col-md-4">
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle0">
           <p><a class="videolink" data-videoid="0">Vidéo chapitrée du résumé</a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p>
           <div id="abstract" class="collapse">
             <p>Avec l’apparition du web, c’est la nature même des savoirs sous toutes leurs formes qui a changé tandis que l’écriture réticulaire devenait accessible aux publics les plus divers. Ceux-ci ont redéfini les conditions de la parité et de ce fait l’université est entrée dans un nouvel âge. C’est ce fait majeur, massif et à bien des égards stupéfiant qui requiert le développement des digital studies prôné par la ministre de l’enseignement supérieur et de la recherche.</p>
@@ -39,28 +39,28 @@
             <p>La technologie du vidéolivre est un support nouveau pour un réseau de lecteurs constituant une communauté plurielle d’interprétations. Ce n’est là qu’un exemple de ces nouveaux dispositifs du débat public auxquels il est fondamental d’initier et d’associer le plus tôt possible les étudiants.</p>
           </div>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle1">
           <p>Chapitre 1&nbsp;: L'état et le numérique<br/><a class="videolink" data-videoid="1r">résumé</a> ou <a class="videolink" data-videoid="1">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle2">
           <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink" data-videoid="2r">résumé</a> ou <a class="videolink" data-videoid="2">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle3">
           <p>Chapitre 3&nbsp;: Qui pour guider une politique du numérique&nbsp;: le marché ? ou la recherche académique ?<br/><a class="videolink" data-videoid="3r">résumé</a> ou <a class="videolink" data-videoid="3">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle4">
           <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink" data-videoid="4r">résumé</a> ou <a class="videolink" data-videoid="4">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle5">
           <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink" data-videoid="5r">résumé</a> ou <a class="videolink" data-videoid="5">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle6">
           <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink" data-videoid="6r">résumé</a> ou <a class="videolink" data-videoid="6">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitle6">
           <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink" data-videoid="7r">résumé</a> ou <a class="videolink" data-videoid="7">vidéo complète</a></p>
         </div>
-        <div class="videotitle">
+        <div class="videotitle" id="videotitlef">
           <p><a class="videolink" data-videoid="full">Vidéo complète chapitrée</a></p>
         </div>
       </div>
@@ -88,7 +88,9 @@
     var iframes = {
       "0" : "<iframe src='http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/embediframe/?content_id=53574ae4-49e9-11e2-b4ad-00145ea4a2be&project_id=a94ee060-49e9-11e2-b4ad-00145ea4a2be&createannotation=True&tag_titles=&polemic=all&annotations_list=True&autostart=True&annotation=True' width='570' height='1300' seamless='seamless'></iframe>",
       "1" : "<p>iframe à venir, vidéo n°1</p>",
+      "1r" : "<iframe src='http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/embediframe/?content_id=0718fd52-3af8-11e3-8796-00145ea4a2be&project_id=2a7b8bde-3af8-11e3-a863-00145ea4a2be&createannotation=True&tag_titles=&polemic=all&annotations_list=True&autostart=True&annotation=True' width='570' height='1300' seamless='seamless'></iframe>",
       "2" : "<p>iframe à venir, vidéo n°2</p>",
+      "2r" : "<iframe src='http://ldt.iri.centrepompidou.fr//ldtplatform/ldt/embediframe/?content_id=fc7a32a2-3af8-11e3-a863-00145ea4a2be&project_id=0f2c892c-3af9-11e3-a863-00145ea4a2be&createannotation=True&tag_titles=&polemic=all&annotations_list=True&autostart=True&annotation=True' width='570' height='1300' seamless='seamless'></iframe>",
       "3" : "<p>iframe à venir, vidéo n°3</p>",
       "4" : "<p>iframe à venir, vidéo n°4</p>",
       "5" : "<p>iframe à venir, vidéo n°5</p>",
@@ -105,10 +107,12 @@
       if(update_h){
         update_history("iframe=" + n);
       }
+      
+      active_css(n);
     }
     
     function playVideo(n, update_h){
-      if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7" || n=="1r" || n=="2r" || n=="3r" || n=="4r" || n=="5r" || n=="6r" || n=="7r"){
+      if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7" || n=="3r" || n=="4r" || n=="5r" || n=="6r" || n=="7r"){
         $("#videocontainer").html("<p>à venir, vidéo n°" + n + "</p>");
       }
       else{
@@ -218,6 +222,8 @@
       if(update_h){
         update_history("v=" + n);
       }
+      
+      active_css(n);
     }
     
     //Functions to manage history with parameters
@@ -230,6 +236,12 @@
         History.replaceState(null, null, "#" + s);
     }
     
+    // active css
+    function active_css(n){
+        $(".videotitle").removeClass("active");
+        $("#videotitle" + n.substr(0,1)).addClass("active");
+    }
+    
     // on load
     $(function() {
       $(".videolink").click(function(e){