--- a/integration/template.html	Tue May 14 18:19:04 2013 +0200
+++ b/integration/template.html	Thu May 16 12:58:48 2013 +0200
@@ -17,9 +17,9 @@
 				</thead>
 				<tbody>
 					<tr>
-						<td class="span1">4:20</td>
-						<td class="span1">4:20</td>
-						<td class="span1">4:20</td>
+						<td id="{{id}}-begin" class="span1">4:20</td>
+						<td id="{{id}}-duration" class="span1">4:20</td>
+						<td id="{{id}}-end" class="span1">4:20</td>
 					</tr>
 				</tbody>
 			</table>
@@ -27,10 +27,12 @@
 	</div>
 	<div class="row">
 		<div class="span6 text-center">
-			<div id="" class="slider-duration"></div>
+			<div data-id="{{id}}" id="" 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="{{id}}" type="submit" class="btn btn-primary btn-save-annotation">
+				<i class="icon-save"></i> Enregistrer annotation
+			</button>
 		</div>
 	</div>
 </form>
@@ -41,33 +43,11 @@
 	<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-video.html"><i class="icon-plus"></i></a>
+		<a data-id="annotation-{{id}}" 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>
 	</span>
 </div>
-<div class="row">
-	<div class="span6">
-		<img src="img/460x345.gif" alt="">
-		<table class="table">
-			<tbody>
-				<tr>
-					<th>Titre</th>
-					<td>Titre de la vidéo Azerty</td>
-				</tr>
-				<tr>
-					<th>Date</th>
-					<td>14 / 05 / 2016</td>
-				</tr>
-				<tr>
-					<th>Durée</th>
-					<td>25 m 35 s</td>
-				</tr>
-				<tr>
-					<th>Description</th>
-					<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
+<div class="row annotation-video-content">
+
 </div>
 </script>
 
@@ -116,7 +96,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>
@@ -140,7 +120,7 @@
 </script>
 
 <script id="tpl-diaporama-row" type="text/html">
-<tr id="rid-id1" class="row-image-diaporama">
+<tr id="rid-{{ridid}}" class="row-image-diaporama">
 	<td><img src="img/60x60.gif" alt=""> </td>
 	<td>Titre annotation 1</td>
 	<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
@@ -148,7 +128,7 @@
 		<table>
 			<tr>
 				<td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
-				<td><a data-title="une image" href="#rid-id1" class="btn btn-delete"><i class="icon-trash"></i></a></td>
+				<td><a data-title="une image" href="#rid-{{ridid}}" class="btn btn-delete"><i class="icon-trash"></i></a></td>
 			</tr>
 			<tr>
 				<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
@@ -157,4 +137,102 @@
 		</table>
 	</td>
 </tr>
+</script>
+
+<script id="tpl-video-row" type="text/html">
+<div class="span6">
+	<img src="img/460x345.gif" alt="">
+	<table class="table">
+		<tbody>
+			<tr>
+				<th>Titre</th>
+				<td>Titre de la vidéo Azerty</td>
+			</tr>
+			<tr>
+				<th>Date</th>
+				<td>14 / 05 / 2016</td>
+			</tr>
+			<tr>
+				<th>Durée</th>
+				<td>25 m 35 s</td>
+			</tr>
+			<tr>
+				<th>Description</th>
+				<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+</script>
+
+<script id="tpl-list-annotation-row" type="text/html">
+<tr id="row-list-annotation-{{id}}">
+	<td>Titre annotation</td>
+	<td>Vidéo</td>
+	<td>4:26</td>
+	<td>4:26</td>
+	<td>4:26</td>
+	<td>
+		<a href="#" data-id="annotation-{{id}}" class="btn btn-edit-annotation" data-type="video">
+			<i class="icon-pencil"></i></a>
+		<a data-id="annotation-{{id}}" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-{{id}}" class="btn btn-delete">
+			<i class="icon-trash delete-annotation"></i>
+		</a>
+	</td>
+</tr>
+</script>
+
+<script id="tpl-chapter-row" type="text/html">
+<tr id="row-list-chapter-{{id}}">
+	<td>Titre chapitre</td>
+	<td>Tags, Tags, Tags</td>
+	<td>79:55</td>
+	<td>79:55</td>
+	<td>79:55</td>
+	<td>
+		<table>
+			<tr>
+				<td>
+					<a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
+				</td>
+				<td>
+					<a data-title="Chapitre 1" href="#row-list-chapter-{{id}}" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
+				</td>
+			</tr>
+		</table>
+	</td>
+</tr>
+</script>
+
+<script id="tpl-chapter-edit" type="text/html">
+<div class="row">
+	<div class="span3 text-right">
+		<input type="text" value="{{titre}}">
+		<input type="text" value="{{tags}}">
+	</div>
+	<div class="span3">
+		<table class="table text-right">
+			
+			<thead>
+				<tr>
+					<th class="span1">Début</th>
+					<th class="span1">Durée</th>
+					<th class="span1">Fin</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td class="span1">4:20</td>
+					<td class="span1">4:20</td>
+					<td class="span1">4:20</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+<div class="row">
+	<div class="span6 text-center">
+		<textarea name="">{{description}}</textarea>
+	</div>
+</div>
 </script>
\ No newline at end of file