diff -r a8a2b5d5421c -r 8d88a6144cb1 web/index.html
--- a/web/index.html	Thu Oct 24 18:48:39 2013 +0200
+++ b/web/index.html	Fri Oct 25 11:27:32 2013 +0200
@@ -29,10 +29,11 @@
 	  </div>
 	</header>
 	<div class="container">
-    <div class="row divctn">
-      <div id="titles" class="col-md-4">
+    <div class="row tabmatrow">
+      <button type="button" class="btn col-md-2" id="tabmat">Table des matières <b class="caret"></b></button>
+      <div id="titles" class="col-md-4" style="display:none;">
         <div class="videotitle" id="videotitle0">
-          <p><a class="videolink hand" data-videoid="0"><strong>Introduction</strong></a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p>
+          <p><a class="videolink hand" data-videoid="0">Résumé de l'article</a> (2'00) <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>
             <p>L’enjeu majeur représenté par les enseignements numériques vient rationnellement après celui de la recherche et des études numériques. Il s’agit d’impulser une dynamique qui repense les rapports des savoirs à leurs supports (dont les MOOCs) avec les universités et les institutions académiques, et qui, par la recherche, redéfinisse leur rôle dans ce nouveau contexte.</p>
@@ -40,30 +41,32 @@
           </div>
         </div>
         <div class="videotitle" id="videotitle1">
-          <p>Chapitre 1&nbsp;: L'État et le numérique<br/><a class="videolink hand" data-videoid="1r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_4A4E73E4-D9D6-8CAF-D0BC-C25BB3FB74D1">vidéo complète</a></p>
+          <p>Chapitre 1&nbsp;: L'État et le numérique<br/><a class="videolink hand" data-videoid="1r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_4A4E73E4-D9D6-8CAF-D0BC-C25BB3FB74D1">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitle2">
-          <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink hand" data-videoid="2r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_4D13D984-3BC6-3B20-41B1-C6338469F14C">vidéo complète</a></p>
+          <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink hand" data-videoid="2r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_4D13D984-3BC6-3B20-41B1-C6338469F14C">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitle3">
-          <p>Chapitre 3&nbsp;: Qui pour guider une politique sur le numérique ?<br/><a class="videolink hand" data-videoid="3r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_69946E8D-51C2-9F9D-0712-C724E69391DC">vidéo complète</a></p>
+          <p>Chapitre 3&nbsp;: Qui pour guider une politique sur le numérique ?<br/><a class="videolink hand" data-videoid="3r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_69946E8D-51C2-9F9D-0712-C724E69391DC">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitle4">
-          <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink hand" data-videoid="4r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_B7DCB161-B412-EA93-2887-C726314774EA">vidéo complète</a></p>
+          <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink hand" data-videoid="4r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_B7DCB161-B412-EA93-2887-C726314774EA">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitle5">
-          <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink hand" data-videoid="5r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_8CB9DCD2-FF09-33A7-3847-DA326EB5D96B">vidéo complète</a></p>
+          <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink hand" data-videoid="5r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_8CB9DCD2-FF09-33A7-3847-DA326EB5D96B">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitle6">
-          <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink hand" data-videoid="6r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_FFFFE45E-6991-959C-9347-C72C13F00EA4">vidéo complète</a></p>
+          <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink hand" data-videoid="6r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_FFFFE45E-6991-959C-9347-C72C13F00EA4">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitle7">
-          <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink hand" data-videoid="7r">résumé</a> ou <a class="videolink hand" data-videoid="full" data-segid="s_A40AC98F-AF31-7107-3FB4-C72EF6462E9E">vidéo complète</a></p>
+          <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink hand" data-videoid="7r">résumé</a> (2'00) ou <a class="videolink hand" data-videoid="full" data-segid="s_A40AC98F-AF31-7107-3FB4-C72EF6462E9E">vidéo complète</a></p>
         </div>
         <div class="videotitle" id="videotitlef">
-          <p><a class="videolink hand" data-videoid="full">Vidéo complète chapitrée</a></p>
+          <p><a class="videolink hand" data-videoid="full"><strong>Vidéo complète chapitrée (2'00)</strong></a></p>
         </div>
       </div>
+    </div>
+    <div class="row divctn">
       <div class="col-md-8" id="videocontainer">Pour commencer, cliquez sur "Vidéo chapitrée du résumé" ou "Vidéo complète chapitrée"</div>
     </div>
 	</div>
@@ -135,7 +138,7 @@
 	      else{
 	        var s = ''
 	 + '<div id="player_wrapper">'
-	 + '  <div style="float:left; width:550px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be">'
+	 + '  <div style="float:left; width:900px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be">'
 	 + '    <div>'
 	 + '      <div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>'
 	 + '      <script type="text/javascript" src="./lib/metadataplayer/LdtPlayer-core.js"><\/script>'
@@ -155,7 +158,7 @@
 	 + '      format: "ldt"'
 	 + '  };'
 	 + '  var _config = {'
-	 + '      width: "550",'
+	 + '      width: "900",'
 	 + '      container: "player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed",'
 	 + '      css: "./lib/metadataplayer/LdtPlayer-core.css",'
 	 + '      default_options: {'
@@ -287,6 +290,14 @@
       $(".videolink").click(function(e){
         playVideo($(this).attr("data-videoid"), $(this).attr('data-segid'));
       });
+      $("#tabmat").click(function(e){
+          if($("#titles").css("display")=="none"){
+        	  $("#titles").show();
+          }
+          else{
+        	  $("#titles").hide();
+          }
+      });
       // load first video with get parameter
       var first = "0";
       var iframe = getURLParameter("iframe");