diff -r 9e14b6f964fe -r 42919bf5d4e1 integration/edition.html
--- a/integration/edition.html	Wed May 29 18:14:23 2013 +0200
+++ b/integration/edition.html	Fri May 31 17:32:56 2013 +0200
@@ -31,7 +31,7 @@
 					    	</a> 
 				    	<li><span class="divider">></span></li>
 					    </li>
-					    <li class="active"><i class="icon-folder-close-alt"></i> Titre du projet azerty</li>
+					    <li class="active"><i class="icon-folder-close-alt"></i> <span class="project-title-nav">Titre du projet azerty</span></li>
 					    <li><span class="divider">/</span></li>
 					    <a href=""><li class="active"><i class="icon-folder-close-alt"></i> Ressources</li></a>
 					    </ul>
@@ -43,10 +43,12 @@
 			<div class="container">
 				<div class="row project-head">
 					<div class="span7">
+
 						<div class="project-title-editor">
 							<i class="icon-folder-close-alt"></i> 
-							<a href="#" class="_popover" data-toggle="tooltip" data-placement="bottom" title="Modifier le du projet"><span class="project-title">Titre du projet</span> <i class="icon-pencil"></i></a> 
+							<span class="project-title">Titre du projet</span> <i class="icon-pencil"></i> 
 						</div>
+
 					</div>
 					<div class="span5 text-right project-action">
 						<a href="" class="btn"><i class="icon-eye-open"></i> Voir aperçu</a>
@@ -66,7 +68,10 @@
 						</div>
 						<div class="timeline-annotations-wrap">
 							<div class="indicateur-annotation"></div>
-							<div class="timeline-annotations"></div>
+							<!--<div class="timeline-annotations"></div>-->
+							<ul class="timeline-annotations">
+		
+							</ul>
 						</div>
 <!-- chapter-widget -->
 						<div class="chapter-widget">
@@ -515,6 +520,318 @@
 		</div>
 	</div>
 
+<div id="templates">
+<script id="tpl-head" type="text/html">
+<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.." name="title" value="{{title}}">
+			<textarea id="" name="description">{{description}}</textarea>
+		</div>
+		<div class="span3">
+			<input type="text" class="tag-it" data-type="annotation" value="{{keywords}}">
+			<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 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>
+		</div>
+	</div>
+	<div class="row">
+		<div class="span6 text-center">
+			<div data-id="{{id}}" id="" class="slider-duration"></div>
+		</div>
+		<div class="span6 text-right">
+			<a class="btn btn-danger btn-delete-annotation" data-id="{{id}}" data-no-render>
+				<i class="icon-trash"></i> Delete
+			</a>
+			<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-audio" type="text/html">
+<div class="edit-annotation-title row">
+	<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
+</div>
+<div class="row annotation-audio-content">
+		<div class="span6">
+			<form class="form-horizontal">
+				<div class="control-group">
+					<label class="control-label" for="url-source-{{id}}">URL source :</label>
+					<div class="controls">
+						<input type="text" value="{{content.url}}" name="url" id="url-source-{{id}}" placeholder="http://">
+					</div>
+				</div>
+				<div class="control-group">
+					<label class="control-label" for="embed-{{id}}">Code embed :</label>
+					<div class="controls">
+						<textarea name="embedcode" id="embed-{{id}}" cols="30" rows="10">{{content.embedcode}}</textarea>
+					</div>
+				</div>
+			</form>
+		</div>
+</div>
+</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>
+	<span class="span3">
+		Ajouter une vidéo 
+		<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 annotation-video-content">
+
+</div>
+</script>
+
+<script id="tpl-html" type="text/html">
+<div class="edit-annotation-title row">
+	<h3 class="span3"><i class="icon-link"></i> Html</h3>
+</div>
+<div class="row edit-annotation-html">
+	<div class="span6">
+		<textarea class="" name="" id="" cols="30" rows="10"></textarea>
+	</div>
+	<div class="span6 text-right">
+		<a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
+	</div>
+	<div class="html-apercu span6"></div>
+</div>
+</script>
+
+<script id="tpl-text" type="text/html">
+<div class="edit-annotation-title row">
+	<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
+</div>
+<div class="row">
+	<div class="span6 wysiwyg-wrap">
+		<textarea class="wysiwyg" name="" id="" cols="30" rows="10">{{content.text}}</textarea>
+	</div>
+</div>
+</script>
+
+<script id="tpl-slideshow" type="text/html">
+<div class="edit-annotation-title row">
+	<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
+	<span class="span3">
+		Ajouter une image 
+		<a data-type-media="image" data-diaporama="diaporama-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+	</span>
+</div>
+<div class="row config-diaporama">
+	<form action="">
+		<div class="span3">
+			<label for="">Diaporama :</label>
+		    <div class="btn-group" data-toggle="buttons-radio">
+			    <button type="button" data-autostart="false" class="{{^content.autostart}}active{{/content.autostart}} btn btn-primary btn-autostart">Manuel</button>
+			    <button type="button" class="{{#content.autostart}}active{{/content.autostart}} btn btn-primary  btn-autostart" data-autostart="true">Auto</button>
+		    </div>	
+		</div>
+		<div class="span3">
+			<label for="">Durée image : </label>
+			<input pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="1"> sec
+		</div>
+	</form>
+</div>
+<div class="row">
+	<div class="span6">
+		<table class="table">
+			<thead>
+				<tr>
+					<th>Aperçu</th>
+					<th>Titre</th>
+					<th>Description</th>
+					<th>Actions</th>
+				</tr>
+			</thead>
+			<tbody id="diaporama-{{id}}" class="list-image-diaporama ui-sortable">
+
+			</tbody>
+		</table>
+	</div>
+</div>
+</script>
+
+<script id="tpl-links" type="text/html">
+<div class="edit-annotation-title row">
+	<h3 class="span3"><i class="icon-link"></i> Liens</h3>
+</div>
+<div class="row annotation-links-content">
+	<div class="span6">
+		<form class="form-horizontal">
+			<table class="table">
+				<thead>
+					<tr>
+						<th>URL</th>
+						<th>Titre du lien</th>
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody data-id="{{id}}" class="links-rows">
+
+				</tbody>
+				<tfoot>
+					<tr>
+						<td colspan="3"><a class="btn btn-success add-link" href="#"><i class="icon-plus"></i> Ajouter un lien</a></td>
+					</tr>
+				</tfoot>
+			</table>
+		</form>
+	</div>
+</div>
+</script>
+
+<script id="tpl-links-row" type="text/html">
+<tr>
+	<td><input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://"></td>
+	<td><input class="input-medium title-link" type="text" value="{{title}}" placeholder="Titre du lien"></td>
+	<td>
+		<a class="btn delete-link" href="#"><i class="icon-trash"></i> </a>
+	</td>
+</tr>
+</script>
+
+<script id="tpl-diaporama-row" type="text/html">
+<tr id="rid-{{ridid}}" class="row-image-diaporama">
+	<td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}" alt=""> </td>
+	<td class="title-slideshow-row">{{title}}</td>
+	<td class="description-slideshow-row">{{description}}</td>
+	<td>
+		<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-{{id}}" class="btn btn-delete-image"><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>
+				<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+			</tr>
+		</table>
+	</td>
+</tr>
+</script>
+
+<script id="tpl-video-row" type="text/html">
+<div class="span6">
+	<div class="video-container"></div>
+	<table class="table">
+		<tbody>
+			<tr>
+				<th>Titre</th>
+				<td>{{title}}</td>
+			</tr>
+			<tr>
+				<th>Description</th>
+				<td>{{description}}</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+</script>
+
+<script id="tpl-list-annotation-row" type="text/html">
+<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="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}">
+			<i class="icon-pencil"></i></a>
+		<a data-id="{{id}}" data-type="annotation" data-title="{{title}}" href="#row-list-annotation-{{id}}" class="btn btn-delete-annotation">
+			<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}}" style="background-color : {{color}};">
+	<td class="list-chapter-title">{{title}}</td>
+	<td class="list-chapter-tags">{{keywords}}</td>
+	<td class="begin">{{begin}}</td>
+	<td class="duration">{{getDuration}}</td>
+	<td class="end">{{end}}</td>
+	<td>
+		<table>
+			<tr>
+				<td>
+					<a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>
+				</td>
+				<td>
+					<a data-title="{{title}}" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
+				</td>
+			</tr>
+		</table>
+	</td>
+</tr>
+</script>
+
+<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" data-type="chapter" value="{{keywords}}">
+		</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"><span {{#beginTangle}}class="time-tangle tangle-start begin" data-milliseconds="{{begin.milliseconds}}"{{/beginTangle}}>{{begin}}</span></td>
+						<td class="span1"><span>{{getDuration}}</span></td>
+						<td class="span1"><span {{#endTangle}}class="time-tangle tangle-end end" data-milliseconds="{{end.milliseconds}}"{{/endTangle}}>{{end}}</span></td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+	<div class="row">
+		<div class="span6 text-center">
+			<textarea class="" name="description" id="">{{description}}</textarea>
+		</div>
+	</div>
+</form>
+</script>	
+</div><!-- /#templates -->
+
 	<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>