--- a/integration/css/style.css	Tue May 21 16:40:05 2013 +0200
+++ b/integration/css/style.css	Tue May 21 17:41:10 2013 +0200
@@ -52,7 +52,7 @@
 .btn-cut-chapter{position: absolute;top: 20px;left: 11px;}
 .indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
 .chapter-segments {width: 100%; height: 20px; margin: 0;}
-.chapter-segments li{float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
+.chapter-segments li{cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
 .list-chapter-wrap{}
 .list-chapter-wrap h4{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;}
 .add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0; background-color: #1abc9c;}

--- a/integration/edition.html	Tue May 21 16:40:05 2013 +0200
+++ b/integration/edition.html	Tue May 21 17:41:10 2013 +0200
@@ -448,6 +448,7 @@
     <script src="js/metadataplayer-core.js"></script>
     <script src="js/ldt-serializer.js"></script>
 	<script src="js/common.js"></script>
+	<script src="js/tangle.js"></script>
     <script src="js/edition.js"></script>
     <script>
     

--- a/integration/js/edition.js	Tue May 21 16:40:05 2013 +0200
+++ b/integration/js/edition.js	Tue May 21 17:41:10 2013 +0200
@@ -169,6 +169,10 @@
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
     });
 
+    $('.chapter-segments').on('click', 'li', function(){
+        var idChapter = $(this).attr('id');
+        loadFormChapter(idChapter);
+    });
 
     $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
         var name = $(this).attr('name'),

--- a/integration/template.html	Tue May 21 16:40:05 2013 +0200
+++ b/integration/template.html	Tue May 21 17:41:10 2013 +0200
@@ -220,14 +220,14 @@
 			<table class="table text-right">
 				<thead>
 					<tr>
-						<th class="span1">Début</th>
+						<th class="span1 ">Début</th>
 						<th class="span1">Durée</th>
 						<th class="span1">Fin</th>
 					</tr>
 				</thead>
 				<tbody>
 					<tr>
-						<td class="span1 begin">{{beginString}}</td>
+						<td class="span1 begin time-tangle">{{beginString}}</td>
 						<td class="span1 duration">{{durationString}}</td>
 						<td class="span1 end">{{endString}}</td>
 					</tr>