diff -r 78f71aa0a477 -r 547b3ddedf7f integration/edition.html
--- a/integration/edition.html	Tue May 14 18:19:04 2013 +0200
+++ b/integration/edition.html	Thu May 16 12:58:48 2013 +0200
@@ -6,9 +6,10 @@
 	<!--[if lt IE 9]>
 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
-	<link href="css/bootstrap.min.css" rel="stylesheet">
+	<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 	<link href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet">
 	<link href="lib/CLEditor/jquery.cleditor.css" rel="stylesheet">
+	<link href="lib/tag-it/css/jquery.tagit.css" rel="stylesheet">
 	<link href="css/style.css" rel="stylesheet">
 	
 </head>
@@ -26,7 +27,7 @@
 					<div class="span9">
 						<ul class="breadcrumb nav-bar">
 					    <li>
-					    	<a data-type-media="image" data-title="Bibliothèque" class="open-modal" href="modal-bibliotheque.html">
+					    	<a href="#">
 					    		<i class="icon-file"></i> Projets
 					    	</a> 
 				    	<li><span class="divider">></span></li>
@@ -56,6 +57,10 @@
 				<div class="row">
 					<div class="span6">
 						<img src="img/460x345.gif" alt="">
+						<div class="timeline-annotation-widget">
+							<div class="annotation" style="left:20%"></div>
+						</div>
+<!-- chapter-widget -->
 						<div class="chapter-widget">
 							<div class="row">
 								
@@ -70,11 +75,11 @@
 								</div>
 							</div>
 							<div class="chapter-widget-info">
-								<form action="#"></form>
+								<form action="#" class="form-chapter-edit">
 									<div class="row">
 										<div class="span3 text-right">
 											<input type="text">
-											<input type="text">
+											<input type="text" class="tag-it">
 										</div>
 										<div class="span3">
 											<table class="table text-right">
@@ -116,7 +121,7 @@
 											<th>Actions</th>
 										</tr>
 									</thead>
-									<tbody>
+									<tbody class="list-chapter-rows-wrap">
 										<tr id="row-list-chapter-id1">
 											<td>Titre d'un chapitre</td>
 											<td>Tags, Tags, Tags</td>
@@ -143,12 +148,14 @@
 						</div><!-- /.chapter-widget -->
 					</div>
 					<div class="span6 col-right">
-
+<!-- tab -->
 						<ul class="nav nav-tabs" id="annotation-tab">
 							<li class="active"><a id="tab-list-annotation" href="#list-annotations"><i class="icon-bookmark"></i> Annotations</a></li>
 							<li><a href="#annotation-azerty"><i class="icon-film"></i> All <span class="close-tab">&times;</span></a> </li>
 						</ul>
+
 						<div class="tab-content">
+<!-- liste annotations -->
 							<div class="tab-pane active" id="list-annotations">
 								<div class="add-annotation-wrap">
 									<strong><i class="icon-plus"></i> Ajouter :</strong>
@@ -177,9 +184,9 @@
 											<td>4:26</td>
 											<td>4:26</td>
 											<td>
-												<a href="#" data-idAnnotation="annotation-123" class="btn btn-edit-annotation" data-type="video">
-													<i class="icon-pencil "></i></a>
-												<a data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
+												<a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video">
+													<i class="icon-pencil"></i></a>
+												<a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
 													<i class="icon-trash delete-annotation"></i>
 												</a>
 											</td>
@@ -191,9 +198,9 @@
 											<td>4:26</td>
 											<td>4:26</td>
 											<td>
-												<a href="#" data-idAnnotation="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
+												<a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
 													<i class="icon-pencil "></i></a>
-												<a data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
+												<a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
 													<i class="icon-trash delete-annotation"></i>
 												</a>
 											</td>
@@ -201,8 +208,9 @@
 									</tbody>
 								</table>
 							</div>
+<!-- exemple annotation all -->
 							<div class="tab-pane" id="annotation-azerty">
-							
+	<!-- head -->
 								<form action="#" class="form-info-general-annotation">
 									<div class="row">
 										<div class="span3 text-right">
@@ -221,9 +229,9 @@
 												</thead>
 												<tbody>
 													<tr>
-														<td class="span1">4:20</td>
-														<td class="span1">4:20</td>
-														<td class="span1">4:20</td>
+														<td id="id741-begin" class="span1">4:20</td>
+														<td id="id741-duration" class="span1">4:20</td>
+														<td id="id741-end" class="span1">4:20</td>
 													</tr>
 												</tbody>
 											</table>
@@ -231,25 +239,24 @@
 									</div>
 									<div class="row">
 										<div class="span6 text-center">
-											<div id="" class="slider-duration"></div>
+											<div data-id="id741" id="id741" class="slider-duration"></div>
 										</div>
 										<div class="span6 text-right">
-											<input type="submit" class="btn btn-primary btn-save-annotation" value="Enregistrer l'annotation">
+											<button data-id="id741" type="submit" class="btn btn-primary btn-save-annotation">
+												<i class="icon-save"></i> Enregistrer l'annotation
+											</button>
 										</div>
 									</div>
 								</form>
-
-
-						
-							
+	<!-- vidéo -->
 								<div class="edit-annotation-title row">
 									<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
 									<span class="span3">
 										Ajouter une vidéo 
-										<a data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
+										<a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
 									</span>
 								</div>
-								<div class="row">
+								<div class="row annotation-video-content">
 									<div class="span6">
 										<img src="img/460x345.gif" alt="">
 										<table class="table">
@@ -275,7 +282,7 @@
 									</div>
 								</div>
 							
-
+	<!-- html -->
 								<div class="edit-annotation-title row">
 									<h3 class="span3"><i class="icon-link"></i> Html</h3>
 								</div>
@@ -291,7 +298,7 @@
 								</div>
 							
 
-							
+	<!-- text -->
 								<div class="edit-annotation-title row">
 									<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
 								</div>
@@ -300,7 +307,7 @@
 										<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
 									</div>
 								</div>
-
+	<!-- diaporama -->
 						
 								<div class="edit-annotation-title row">
 									<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
@@ -320,7 +327,7 @@
 										</div>
 										<div class="span3">
 											<label for="">Durée image : </label>
-											<input class="span1 number-spin" type="text" value="1"> sec
+											<input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
 										</div>
 									</form>
 								</div>
@@ -392,13 +399,9 @@
 									</div>
 								</div>
 						
-								<!---->
-								<!-- /.edit-annotation-diaporama -->
-
+							</div><!-- /exemple annotation all -->
 
-							</div>
 						</div><!-- /.tab-content -->
-
 					</div><!-- /.col-right -->
 				</div>
 			</div><!-- /.container -->
@@ -429,16 +432,15 @@
 		</div>
 	</div>
 
-	
-
-	<script src="js/jquery-1.9.1.min.js"></script>
-	<script src="js/jquery-migrate-1.1.1.js"></script>
+	<script src="lib/jquery-1.9.1.min.js"></script>
+	<script src="lib/jquery-migrate-1.1.1.js"></script>
 	<script src="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
-	<script src="js/bootstrap.js"></script>
-	<script src="js/ZeroClipboard.min.js"></script>
-	<script src="js/jquery.spin-1.0.2.js"></script>
-	<script src="lib/CLEditor/jquery.cleditor.min.js"></script>
-	<script src="js/mustache.js"></script>
-	<script src="js/main.js"></script>
+	<script src="lib/bootstrap/js/bootstrap.min.js"></script>
+	<script src="lib/spin/jquery.spin-1.0.2.js"></script>
+	<script src="lib/cleditor/jquery.cleditor.min.js"></script>
+	<script src="lib/tag-it/js/tag-it.min.js"></script>
+	<script src="lib/mustache.js"></script>
+
+	<script src="js/edition.js"></script>
 </body>
 </html>
\ No newline at end of file