diff -r ec6a5592c617 -r e3a17ec94cd8 integration/template.html
--- a/integration/template.html	Wed May 22 17:10:38 2013 +0200
+++ b/integration/template.html	Thu May 23 18:11:55 2013 +0200
@@ -1,12 +1,13 @@
 <script id="tpl-head" type="text/html">
-<form action="#" class="form-info-general-annotation">
+<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}">
+
 	<div class="row">
 		<div class="span3 text-right">
-			<input type="text" placeholder="Titre de l'annotation.." value="{{titre}}">
-			<textarea name="" id=""></textarea>
+			<input type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
+			<textarea id="" name="description">{{description}}</textarea>
 		</div>
 		<div class="span3">
-			<input type="text" placeholder="Titre de l'annotation..">
+			<input type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
 			<table class="table text-right">
 				<thead>
 					<tr>
@@ -17,9 +18,9 @@
 				</thead>
 				<tbody>
 					<tr>
-						<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>
+						<td id="{{id}}-begin" class="span1">{{begin}}</td>
+						<td id="{{id}}-duration" class="span1">{{getDuration}}</td>
+						<td id="{{id}}-end" class="span1">{{end}}</td>
 					</tr>
 				</tbody>
 			</table>
@@ -30,14 +31,24 @@
 			<div data-id="{{id}}" id="" class="slider-duration"></div>
 		</div>
 		<div class="span6 text-right">
-			<button data-id="{{id}}" type="submit" class="btn btn-primary btn-save-annotation">
-				<i class="icon-save"></i> Enregistrer annotation
-			</button>
+			<a class="btn btn-primary btn-save-annotation" data-id="{{id}}">
+				<i class="icon-ok"></i> Ok
+			</a>
 		</div>
 	</div>
 </form>
 </script>
 
+<script id="tpl-onglet" type="text/html">
+<li id="onglet-{{id}}">
+    <a data-id="{{id}}" data-toggle="annotation" href="#tab-annotation-{{id}}">
+        <i class="icon-{{iconTab}}"></i> 
+        <span id="onglet-title-{{id}}">{{title}}</span> 
+        <span class="close-tab">&times;</span>
+    </a>
+</li>
+</script>
+
 <script id="tpl-video" type="text/html">
 <div class="edit-annotation-title row">
 	<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
@@ -166,16 +177,16 @@
 </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>
+<tr id="row-list-annotation-{{id}}" style="background-color : {{color}};">
+	<td>{{title}}</td>
+	<td>{{type}}</td>
+	<td>{{begin}}</td>
+	<td>{{getDuration}}</td>
+	<td>{{end}}</td>
 	<td>
-		<a href="#" data-id="annotation-{{id}}" class="btn btn-edit-annotation" data-type="video">
+		<a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}">
 			<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 btn-delete-annotation">
+		<a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation">
 			<i class="icon-trash delete-annotation"></i>
 		</a>
 	</td>
@@ -206,10 +217,11 @@
 
 <script id="tpl-chapter-edit" type="text/html">
 <form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}">
+	<h4><i class="icon-flag"></i> <i class="icon-pencil"></i> Modifier le chapitre</h4>
 	<div class="row">
 		<div class="span3 text-right">
 			<input name="title" type="text" value="{{title}}">
-			<input name="keywords" type="text" class="tag-it" value="{{keywords}}">
+			<input name="keywords" type="text" class="tag-it" data-type="chapter" value="{{keywords}}">
 		</div>
 		<div class="span3">
 			<table class="table text-right">