--- a/integration/css/style.css	Fri Jun 07 16:31:42 2013 +0200
+++ b/integration/css/style.css	Fri Jun 07 17:56:17 2013 +0200
@@ -129,10 +129,9 @@
 .label-modify-video, .label-add-video{display: none;}
 
 .shadow {
-   -moz-box-shadow:    inset 0px 0px 2px 100px #00FFFF;
-   -webkit-box-shadow: inset 0px 0px 2px 100px  #00FFFF;
-   box-shadow:         inset 0px 0px 2px 100px  #00FFFF;
+    background-color: #00FFFF !important;
 }
+.alert-message{display: none;}
 
 /* Tangle */
 .time-tangle {

--- a/integration/edition.html	Fri Jun 07 16:31:42 2013 +0200
+++ b/integration/edition.html	Fri Jun 07 17:56:17 2013 +0200
@@ -497,7 +497,7 @@
 	</div>
 
 <!-- modal -->
-	<div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	<div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-hidden="true">
 		<div class="modal-header">
 			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 			<h3></h3>
@@ -507,7 +507,7 @@
 		</div>
 	</div>
 
-	<div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	<div id="modal-confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
 		<div class="modal-header">
 		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 			<h3><i class="icon-warning-sign"></i> Confirmation de la suppression</h3>
@@ -521,6 +521,20 @@
 		</div>
 	</div>
 
+	<div id="modal-alert" class="modal hide fade" tabindex="-1" role="dialog"  aria-hidden="true">
+	<div class="modal-header">
+		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+		<h3 id="myModalLabel"><i class="icon-warning-sign"></i> Attention</h3>
+	</div>
+	<div class="modal-body">
+		<p class="alert-message" id="alert-chapter-duration">Les chapitres doivent durer au moins <strong></strong> secondes.</p>
+		<p class="alert-message" id="alert-chapter-number">Le projet doit contenir au moins un chapitre.</p>
+	</div>
+	<div class="modal-footer">
+		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+	</div>
+</div>
+
 <div id="templates">
 <script id="tpl-head" type="text/html">
 <form action="#" class="form-info-general-annotation" data-id="{{id}}">
@@ -529,7 +543,7 @@
 		<div class="span3 text-right">
 			<label class="label-left" for="head-title">Titre :</label>
 			<input class="label-left" id="head-title" type="text" placeholder="Titre de l'annotation.." name="title" value="{{title}}">
-			<label for="head-description">Description :</label>
+			<label class="label-left" for="head-description">Description :</label>
 			<textarea id="head-description" name="description">{{description}}</textarea>
 		</div>
 		<div class="span3">
@@ -608,9 +622,9 @@
 <div class="edit-annotation-title row">
 	<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
 	<span class="span3">
-		<span class="label-add-video">Ajouter une vidéo</span>
-		<span class="label-modify-video">Modifier la vidéo</span> 
-		<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" data-hide-add-new><i class="icon-plus"></i></a>
+		<span class="label-add-video">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" data-hide-add-new><i class="icon-plus"></i></a></span>
+		<span class="label-modify-video">Modifier la vidéo <a data-id="annotation-{{id}}" data-type-media="video" data-title="Modifier la vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-pencil"></i></a></span> 
+		
 	</span>
 </div>
 <div class="row annotation-video-content">
@@ -806,7 +820,7 @@
 					<a href="#" title="Editer le chapitre" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>
 				</td>
 				<td>
-					<a data-title="{{title}}" title="Supprimer le chapitre" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
+					<a data-title="{{title}}" title="Supprimer le chapitre" 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>
@@ -851,7 +865,7 @@
 	</div>
 	<div class="row">
 		<div class="span6 text-right">
-			<a data-title="{{title}}" title="Supprimer le chapitre" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete btn-danger btn-delete-chapter">
+			<a data-title="{{title}}" title="Supprimer le chapitre" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-danger btn-delete-chapter">
 				<i class="icon-trash"></i> Delete
 			</a>
 			<a class="btn btn-primary btn-ok-chapter" href="#" data-id="{{id}}">
@@ -869,8 +883,8 @@
 </script>	
 
 <script id="tpl-item-annotation-display" type="text/html">
-<li   data-id="{{id}}">
-	<a id="item-current-annotation-{{id}}" class="item-display-annotation" data-id="{{id}}" style="background-color: {{color}};" data-id="{{id}}" href="#" title="{{title}}">
+<li data-id="{{id}}">
+	<a id="item-current-annotation-{{id}}" class="item-display-annotation" data-id="{{id}}" style="background-color: {{color}};" data-id="{{id}}" href="#">
 		<i class="icon-{{iconTab}}"></i>
 		<span>{{title}}</span>
 	</a> 

--- a/integration/js/edition.js	Fri Jun 07 16:31:42 2013 +0200
+++ b/integration/js/edition.js	Fri Jun 07 17:56:17 2013 +0200
@@ -36,7 +36,7 @@
 $(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){
     if(!$(this).hasClass('shadow')) {
         var idChapter = $(this).attr('data-id');
-        $('#row-list-chapter-'+idChapter+', #'+idChapter).addClass('shadow');
+        $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow');
     }
 });
 
@@ -301,12 +301,23 @@
 $(document).on('click', '.btn-delete-chapter', function(e){
     e.preventDefault();
 
-    if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}
+    if(chapters.length == 1){
+        $('#modal-alert .alert-message').hide();
+        $('#modal-alert #alert-chapter-number').show();
+        $('#modal-alert').modal('show');
+        return;
+    }
     var idChapter = $(this).attr('data-chapter-id'),
         btnDeleteModal = $("#modal-confirm #btn-delete-modal");
     btnDeleteModal.attr('data-type-delete', 'chapter');
     btnDeleteModal.attr('data-id', idChapter);
 
+    var titleMedia = $(this).attr('data-title'),
+        urlDelete = $(this).attr('href');
+    $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus();
+    $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia);
+    $("#modal-confirm").modal('show');
+
 });
 $(document).on('click', '.btn-ok-chapter', function(e){
     e.preventDefault();
@@ -362,7 +373,10 @@
         var begin = myMedia.currentTime,
             end = organizeNewChapter(myMedia.currentTime);
         if(!end){
-            alert('Les chapitres doivent durer au moins '+secMiniChapter+' secondes');
+            $('#modal-alert .alert-message').hide();
+            $('#modal-alert #alert-chapter-duration').show();
+            $('#modal-alert #alert-chapter-duration strong').text(secMiniChapter);
+            $('#modal-alert').modal('show');
             return;
         }
         var dataChapter = {
@@ -641,6 +655,7 @@
                         var videoWrap = $(tabContent).find('.annotation-video-content');
                         renderVideoInfo(videoWrap, viewType.content);
                         labelModify.show();
+
                     }else{
                         labelAdd.show();
                     }