# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1370514959 -7200
# Node ID 8f954a0d6031678e7e0f17f9c1aab1a91a3a8bba
# Parent  5dfa74fcec4bd0e9e725e57c6473f07dbb0c1f8c
edit title and descripttion video

diff -r 5dfa74fcec4b -r 8f954a0d6031 integration/css/style.css
--- a/integration/css/style.css	Wed Jun 05 12:05:53 2013 +0200
+++ b/integration/css/style.css	Thu Jun 06 12:35:59 2013 +0200
@@ -44,16 +44,17 @@
 .project-action a:last-child{margin-right: 20px;}
 .chapter-widget-info{margin-bottom: 20px;}
 .chapter-widget form{ margin: 0;}
-.form-info-general-annotation{background-color: #ecf0f1;}
+#list-annotations{ background-color: #fff;}
+.form-info-general-annotation{ border-bottom: 1px solid #bdc3c7;}
 .chapter-widget input, .form-info-general-annotation input, .form-info-general-annotation textarea{width: 196px; max-width: 196px;	}
 .chapter-widget textarea{width: 426px; max-width: 426px; min-width: 426px; height: 20px;-webkit-transition: height .3s ease;-moz-transition: height .3s ease;transition: height .3s ease;}
 .form-chapter-edit{}
 .chapter-widget-info table{margin: 0; padding-top: 40px; }
 .chapter-widget table td{}
 .chapter-widget textarea:focus{height: 100px;}
-.chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;}
-.btn-cut-chapter{position: absolute;top: 20px;left: 11px; width: 40px;}
-.indicateur-chapter, .indicateur-annotation{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
+.chapitre-cut-wrap{position: relative; height: 70px; margin-bottom: 10px;}
+.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 11px; width: 40px;}
+.indicateur-chapter, .indicateur-annotation{z-index:999; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
 .chapter-segments {overflow:hidden; width: 100%; height: 20px; margin: 0; position: relative;}
 .chapter-segments li{position: absolute; top: 0; cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
 .list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;}
@@ -67,7 +68,7 @@
 
 .slider-duration{width: 435px;display: inline-block; margin-bottom: 10px;}
 .btn-save-annotation{margin-right: 10px;}
-.edit-annotation-diaporama{}
+.tab-pane.active{background-color: #F5F5F5;}
 .edit-annotation-title{border-bottom: 1px solid #E5E5E5; margin-bottom: 20px;}
 .edit-annotation-title h3{display: inline-block;}
 .edit-annotation-title span{text-align: right; line-height: 60px;}
@@ -90,8 +91,8 @@
 .slider-duration.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{ background: #202020;}
 .timeline-annotations-wrap{position: relative;background-color: #202020;}
 .timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding-top: 4px;}
-.timeline-annotations li{display: block; width: 460px;height: 10px; position: relative; padding-bottom: 4px;}
-.timeline-annotations .annotation{ color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 9px; width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations li{display: block; width: 460px;height: 12px; position: relative; padding-bottom: 4px;}
+.timeline-annotations .annotation{ color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
 ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;}
@@ -115,8 +116,10 @@
 #templates{display: none;}
 
 .title-slideshow-row{word-wrap: break-word;width: 76px;}
-.description-slideshow-row{word-wrap: break-word; width: 180px;}
-.description-slideshow-row textarea{width: 164px; max-width: 164px; height: 164px;}
+.title-slideshow-row input{width: 70px;}
+.description-slideshow-row{word-wrap: break-word; width: 180px; }
+.description-slideshow-row span{max-height: 100px; display: inline-block; overflow: auto;}
+.description-slideshow-row textarea{width: 164px; max-width: 164px; height: 100px;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
diff -r 5dfa74fcec4b -r 8f954a0d6031 integration/edition.html
--- a/integration/edition.html	Wed Jun 05 12:05:53 2013 +0200
+++ b/integration/edition.html	Thu Jun 06 12:35:59 2013 +0200
@@ -51,7 +51,7 @@
 					</div>
 					<div class="span5 text-right project-action">
 						<a href="#" class="btn disabled btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</a>
-						<a href="#" class="btn btn-success"><i class="icon-save"></i> Sauvegarder le projet</a>
+						<a href="#" class="btn btn-success btn-save-project"><i class="icon-save"></i> Sauvegarder le projet</a>
 					</div>
 				</div>
 				<div class="row">
@@ -79,8 +79,10 @@
 								<div class="span6 chapitre-cut-wrap">
 									<div class="indicateur-chapter"></div>
 									<ul class="chapter-segments"></ul>
-									
-									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i></a>
+									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> <i class="icon-cut"></i><br/>
+										<span class="info-time">0:00</span>
+									</a>
+
 								</div>
 							</div>
 							<div class="chapter-widget-info">
@@ -656,7 +658,7 @@
 		</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
+			<input pattern="[0-9]*" class="span1 number-spin" type="text" name="duration" value="{{content.slideduration}}"> sec
 		</div>
 	</form>
 </div>
@@ -721,8 +723,12 @@
 <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"><span>{{title}}</span> <i class="icon-pencil"></i></td>
-	<td class="description-slideshow-row"><span>{{description}}</span> <i class="icon-pencil"></i></td>
+	<td class="title-slideshow-row" data-input="input" data-name="title">
+		<span>{{title}}</span> <i class="icon-pencil"></i>
+	</td>
+	<td class="description-slideshow-row" data-input="textarea" data-name="description">
+		<span>{{description}}</span> <i class="icon-pencil"></i>
+	</td>
 	<td>
 		<table>
 			<tr>
@@ -747,11 +753,15 @@
 		<tbody>
 			<tr>
 				<th>Titre</th>
-				<td>{{title}}</td>
+				<td class="video-title-edit" data-input="input"  data-name="title">
+					<span>{{title}}</span> <i class="icon-pencil"></i>
+				</td>
 			</tr>
 			<tr>
 				<th>Description</th>
-				<td>{{description}}</td>
+				<td class="video-description-edit" data-input="textarea"  data-name="description">
+					<span>{{description}}</span> <i class="icon-pencil"></i>
+				</td>
 			</tr>
 		</tbody>
 	</table>
@@ -766,9 +776,9 @@
 	<td>{{getDuration}}</td>
 	<td>{{end}}</td>
 	<td>
-		<a href="#" data-id="{{id}}" class="btn btn-edit-annotation" data-type="{{type}}">
+		<a href="#" data-id="{{id}}" title="Editer l'annotation" 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 btn-delete-annotation">
+		<a data-id="{{id}}" title="Supprimer l'annotation" 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>
@@ -786,10 +796,10 @@
 		<table>
 			<tr>
 				<td>
-					<a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>
+					<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}}" 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 btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
 				</td>
 			</tr>
 		</table>
@@ -856,6 +866,8 @@
 	    min:0
 	};
 
+	var textCurrentAnnotationEditT = "en cours d'édition";
+
     /* Initialisation du metadataplayer avec un projet vide */
     var myDir = new IriSP.Model.Directory(),
         myProject = myDir.remoteSource({
diff -r 5dfa74fcec4b -r 8f954a0d6031 integration/js/edition.js
--- a/integration/js/edition.js	Wed Jun 05 12:05:53 2013 +0200
+++ b/integration/js/edition.js	Thu Jun 06 12:35:59 2013 +0200
@@ -102,6 +102,7 @@
         }else{
             btnCutChapter.css("left",pos);
         }
+        $('.info-time').text(t)
         //annotations view
         refreshAnnotationDisplay(t);
 
@@ -151,7 +152,7 @@
 
 function showCurrentAnnotationInTimeline(idAnnotation){
     $('.timeline-annotations .annotation').empty();
-    $('#annotation-timeline-'+idAnnotation).text('en cours');
+    $('#annotation-timeline-'+idAnnotation).html('<i class="icon-pencil"></i> '+textCurrentAnnotationEditT);
 }
 //display annotation view
 $('.list-current-annotations').on('click', 'a', function(e){
@@ -166,7 +167,7 @@
         annotationDisplayView
             .attr('data-id', idAnnotation)
             .css('backgroundColor', annotation.color)
-            .text(annotation.type)
+            .text(annotation.type+' : '+annotation.title)
             .show();
     }
 });
@@ -177,13 +178,6 @@
 
     });
 
-//edition image
-    $('.popup').on('change', '#media-type-select', function(e){
-        var typeImage = $(this).val();
-        $('.input-image-url, .input-image-upload').hide();
-        $('.input-image-'+typeImage).show();
-    });
-
 //select on bibliotheque
 
     //confirmation suppression
@@ -206,6 +200,7 @@
 
 //--title-editor
     $(document).on('click', '.project-title-editor i, .project-title', function () {
+        disabledPreview();
         var html = $('.project-title').html();
         var input = $('<input type="text" />');
         input.val(html);
@@ -238,6 +233,8 @@
     });
 
     $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
+        disabledPreview();
+
         var name = $(this).attr('name'),
             value = $(this).val();
         currentChapter[name] = value;
@@ -252,6 +249,7 @@
 
     function loadFormChapter(idChapter){
 
+        disabledPreview();
         
 
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
@@ -283,32 +281,12 @@
         btnDeleteModal = $("#modal-confirm #btn-delete-modal");
     btnDeleteModal.attr('data-type-delete', 'chapter');
     btnDeleteModal.attr('data-id', idChapter);
-   // $("#modal-confirm #btn-delete-modal").attr('onclick', 'deleteChapter("'+idChapter+'")')
-/*
-    var idChapter = $(this).attr('data-chapter-id'),
-        chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
-        indexChapter = _.indexOf(chapters, chapter),
-        chapterModify;
-    if(indexChapter == 0){
-        chapterModify = chapters[1];
-        chapterModify.setBegin(0);
-    }else{
-        chapterModify = chapters[indexChapter-1];
-        //var newEnd = new IriSP.Model.Time(chapter.end)
-        chapterModify.setEnd(chapter.end);
-    }
-    chapters = _(chapters).reject(function(c) { return c.id == idChapter; });
-    renderChapter();
-    //si le formulaire est visible
-    if($('#form-chapter-edit-'+idChapter).length){
-        $('#form-chapter-edit-'+idChapter).remove();
-    }
-*/
 
 });
 
 function deleteChapter(idChapter){
-    $("#modal-confirm").modal('hide')
+    disabledPreview();
+    $("#modal-confirm").modal('hide');
     var chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
         indexChapter = _.indexOf(chapters, chapter),
         chapterModify;
@@ -378,6 +356,8 @@
     }
     
     function renderChapter(){
+        disabledPreview();
+
         var chapterSegmentWrap = $('.chapter-segments'),
             wChapterSegmentWrap = chapterSegmentWrap.width(),
             chapterList = $('.list-chapter-rows-wrap');
@@ -433,6 +413,8 @@
     }
 
     function renderAnnotation(){
+        disabledPreview();
+
         var timeline = $('.timeline-annotations'),
             wTimeline = timeline.width(),
             annotationList = $('#list-annotations-rows');
@@ -499,7 +481,7 @@
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
         e.preventDefault();
-
+        disabledPreview();
         var idAnnotation = $(this).attr('data-id');
         //si il est déjà ouvert
         if($('#tab-annotation-'+idAnnotation).length){
@@ -511,6 +493,7 @@
     });
 
     $('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){
+        disabledPreview();
         var name = $(this).attr('name'),
             value = $(this).val();
         currentAnnotation[name] = value;
@@ -523,13 +506,7 @@
     //delete annotation
     $(document).on('click','.btn-delete-annotation', function(e){
         e.preventDefault();
-        /*
-        var idAnnotation = $(this).attr('data-id');
-        annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
-        closeTab(idAnnotation);
-        if(!$(this).hasAttr('data-no-render'))//si on ferme à partir de la tab renderAnnotation sera appelé 2 fois
-            renderAnnotation();
-        */
+
         var idAnnotation = $(this).attr('data-id'),
             btnDeleteModal = $("#modal-confirm #btn-delete-modal");
         btnDeleteModal.attr('data-type-delete', 'annotation');
@@ -537,6 +514,7 @@
     });
 
     function deleteAnnotation(idAnnotation){
+        disabledPreview();
         $("#modal-confirm").modal('hide');
         annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
         closeTab(idAnnotation);
@@ -557,7 +535,7 @@
     });
 
     function openTab(type, data){
-
+        
         var dataView;
         if(_.isUndefined(data)){//nouveau
             var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
@@ -605,16 +583,10 @@
                 case 'audio':
                     break;
                 case 'video':
-                    
                     if(viewType.content.url != ""){
-
                         var videoWrap = $(tabContent).find('.annotation-video-content');
                         renderVideoInfo(videoWrap, viewType.content);
-   
                     }
-
-                    
-
                     break;
                 case 'text': 
                     var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
@@ -632,7 +604,7 @@
                     break;
 
                 case 'slideshow': 
-
+                    $(tabContent).find('.number-spin').val(dataView.content.slideduration/1000);
                     $(tabContent).find('.number-spin').spin(spinParam);
                     $(tabContent).find('.ui-sortable').sortable({
                         start: function (event, ui) {
@@ -780,22 +752,12 @@
     };
 
     //edit title / description
-    $('.tab-content').on('click', '.title-slideshow-row', function(){
+    $('.tab-content').on('click', '.title-slideshow-row, .description-slideshow-row, .video-title-edit, .video-description-edit', function(){
         if($(this).find('input').length) return;
-        var html = $(this).find('span').html();
-        var input = $('<input type="text" />').addClass('input-mini').attr('name', 'title');
-        input.val(html);
-        $(this).find('span').replaceWith(input);
-        input.focus().keypress(function(e){
-            code = (e.keyCode ? e.keyCode : e.which);
-            if (code == 13) $(this).blur();
-        });
-    });
-
-    $('.tab-content').on('click', '.description-slideshow-row', function(){
-        if($(this).find('textarea').length) return;
-        var html = $(this).find('span').html();
-        var input = $('<textarea>').attr('name', 'description');
+        var html = $(this).find('span').html(),
+            inputType = $(this).attr('data-input'),
+            name = $(this).attr('data-name'),
+            input = $('<'+inputType+'>').attr('name', name);
         input.val(html);
         $(this).find('span').replaceWith(input);
         input.focus().keypress(function(e){
@@ -810,8 +772,15 @@
             span = $('<span>').html(newValue),
             indexRow = $(this).parents('.row-image-diaporama').index();
         $(this).replaceWith(span);
+        currentAnnotation.content.images[indexRow][name] = newValue;
+    });
 
-        currentAnnotation.content.images[indexRow][name] = newValue;
+    $(document).on('blur', '.video-title-edit input, .video-description-edit textarea', function(){
+        var newValue = $(this).val(),
+            name = $(this).attr('name'),
+            span = $('<span>').html(newValue);
+        $(this).replaceWith(span);
+        currentAnnotation.content[name] = newValue;
     });
 
     //bouton up / down
@@ -909,10 +878,20 @@
 $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
     var value = $(this).val();
     if(!isNaN(value)){
-        currentAnnotation.content.duration = value;
+        currentAnnotation.content.slideduration = value * 1000;
     }
 });
 
+//save project
+$('.btn-save-project').bind('click', function(e){
+    $('.btn-apercu-projet').removeClass('disabled');
+
+});
+
+function disabledPreview(){
+    if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled');
+}
+
 //################ config
 //tagit
 function onTagItChange(e, ui) {
@@ -937,7 +916,7 @@
 //CLEditor annotation > text (wysiwyg)
 //http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
 var wysiwygConfig = {
-    width:        456, 
+    width:        450, 
     height:       250, 
     controls:     "bold italic underline strikethrough | font size " +
                     "style | color highlight removeformat | bullets numbering | source",
@@ -1032,7 +1011,7 @@
         case 'slideshow': 
             content = {
                 mimetype : "application/x-ldt-slideshow",
-                duration : 1,
+                slideduration : 1000,
                 autostart : false,
                 images : []
             };
@@ -1070,7 +1049,6 @@
     return this; 
 };
 
-
 function getVideoPlayer(src, videoWrap){
 
     var youtubeTemplate = _.template(
diff -r 5dfa74fcec4b -r 8f954a0d6031 integration/modal-bibliotheque-image.html
--- a/integration/modal-bibliotheque-image.html	Wed Jun 05 12:05:53 2013 +0200
+++ b/integration/modal-bibliotheque-image.html	Thu Jun 06 12:35:59 2013 +0200
@@ -11,78 +11,131 @@
 				<a href="#" 
 					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
 					data-title="splash!!!"
-					data-description="lorem"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
 				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam amet voluptatum repellendus soluta debitis at aliquid vitae facilis sint quisquam quos aut numquam culpa iste voluptatibus quidem esse. Molestiae pariatur? média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo praesentium repellat iure non ullam earum quaerat? Sapiente numquam optio eius quae error voluptatem perferendis aspernatur nam temporibus? Assumenda aliquid ipsam!média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				><img src="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+					data-url="http://upload.wikimedia.org/wikipedia/commons/8/81/Waves_lajolla.jpg" 
+					data-title="splash!!!"
+					data-description="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
+				>splash!!!</a>
 				</h5>
 			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla recusandae iusto libero ipsam sed atque quis maxime laborum est consequuntur ut possimus aspernatur quas nobis maiores veniam officiis alias error.média</a>
-				</h5>
-			</div>
+			
 		</div>
 		<div class="pagination">
 		    <ul>
diff -r 5dfa74fcec4b -r 8f954a0d6031 integration/modal-bibliotheque-video.html
--- a/integration/modal-bibliotheque-video.html	Wed Jun 05 12:05:53 2013 +0200
+++ b/integration/modal-bibliotheque-video.html	Thu Jun 06 12:35:59 2013 +0200
@@ -19,73 +19,112 @@
 						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
 						data-title="titre de la super vidéo"
 						data-description="hello world"
-					>Titre du média Titre du média Titre du média Titre du média</a>
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a class="no-prevent" href="http://www.dailymotion.com/video/xgs10f_the-three-tenors-la-donna-e-mobile_music"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
+				<a href="#" 
+					data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+					data-title="titre de la super vidéo"
+					data-description="hello world"
+				>
+					<img src="img/140x140.gif" alt=""></a>
 				<h5>
-					<a href="#">Titre du média</a>
-				</h5>
-			</div>
-			<div class="span2">
-				<a href="#"><img src="img/140x140.gif" alt=""></a>
-				<h5>
-					<a href="#">Titre du média</a>
+					<a href="#" 
+						data-url="http://www.youtube.com/watch?v=zdmqFSoraMA"
+						data-title="titre de la super vidéo"
+						data-description="hello world"
+					>titre de la super vidéo</a>
 				</h5>
 			</div>
 		</div>