# HG changeset patch
# User cavaliet
# Date 1370534296 -7200
# Node ID 3d4b40a75ecd9ae0982b3d408d5ad7e9a3a4e255
# Parent  4b37ee07374d7efe5025a6c91dfbfb013caa580e
enable post data

diff -r 4b37ee07374d -r 3d4b40a75ecd src/metadatacomposer/static/metadatacomposer/css/style.css
--- a/src/metadatacomposer/static/metadatacomposer/css/style.css	Thu Jun 06 15:48:09 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css	Thu Jun 06 17:58:16 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 4b37ee07374d -r 3d4b40a75ecd src/metadatacomposer/static/metadatacomposer/js/edition.js
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js	Thu Jun 06 15:48:09 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js	Thu Jun 06 17:58:16 2013 +0200
@@ -1,8 +1,6 @@
 var myMedia = undefined,
     currentChapter = undefined,
-    currentAnnotation = undefined,
-    chapters = [],
-    annotations = [];
+    currentAnnotation = undefined;
 
 $(function(){
 
@@ -38,35 +36,40 @@
 
     myMedia = myProject.getCurrentMedia();
 
+    var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");
+    if (!anntypes.length) {
+        chapterAnnType = new IriSP.AnnotationType(false, myProject);
+        chapterAnnType.title = "chapitrage";
+    } else {
+        chapterAnnType = anntypes[0];
+    }
+
 //load Chapitre
-var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage");
-if(_chapters.length){
-    $.each(_chapters, function(k, v){
+
+    chapters = chapterAnnType.getAnnotations();
+    $.each(chapters, function(k, v){
         v.color = getRandomColor();
-        chapters.push(v);
-        if((k+1) == _chapters.length){
-            renderChapter();
-        }
     });
-}
+    renderChapter();
 
 //load Annotations
-var _annotations = myProject.getAnnotationsByTypeTitle("annotations");
-if(_annotations.length){
-    $.each(_annotations, function(k, v){
+    var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations");
+    if (!anntypes.length) {
+        annotationsAnnType = new IriSP.AnnotationType(false, myProject);
+        annotationsAnnType.title = "annotations";
+    } else {
+        annotationsAnnType = anntypes[0];
+    }
 
-        v.color = getRandomColor();
+    annotations = annotationsAnnType.getAnnotations();
+    $.each(annotations, function(k, v){
         var type = v.content.mimetype.split('-');
         type = type[type.length-1]
         v.type = type;
+        v.color = getRandomColor();
+    });
+    renderAnnotation();
 
-        annotations.push(v);
-        if((k+1) == _annotations.length){
-            renderAnnotation();
-        }
-
-    });
-}
 
     IriSP.htmlPlayer(
         myMedia,
@@ -79,10 +82,10 @@
             url_transform: function(src) {
                 return [{
                     type: "video/mp4",
-                    src: src.replace(/\.[\d\w]+$/,'.mp4')
+                    src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
                 }, {
                     type: "video/webm",
-                    src: src.replace(/\.[\d\w]+$/,'.webm')
+                    src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
                 }];
             }
         }
@@ -102,6 +105,7 @@
         }else{
             btnCutChapter.css("left",pos);
         }
+        $('.info-time').text(t)
         //annotations view
         refreshAnnotationDisplay(t);
 
@@ -151,7 +155,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 +170,7 @@
         annotationDisplayView
             .attr('data-id', idAnnotation)
             .css('backgroundColor', annotation.color)
-            .text(annotation.type)
+            .text(annotation.type+' : '+annotation.title)
             .show();
     }
 });
@@ -177,13 +181,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 +203,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 +236,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 +252,7 @@
 
     function loadFormChapter(idChapter){
 
+        disabledPreview();
         
 
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
@@ -283,32 +284,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;
@@ -337,6 +318,7 @@
             chapter.setMedia(myMedia.id);
             chapter.setBegin(dataChapter.begin);
             chapter.setEnd(dataChapter.end);
+            chapter.setAnnotationType(chapterAnnType.id);
             chapter.title = dataChapter.title;
             chapter.description = dataChapter.description;
             chapter.keywords = dataChapter.keywords;
@@ -378,6 +360,8 @@
     }
     
     function renderChapter(){
+        disabledPreview();
+
         var chapterSegmentWrap = $('.chapter-segments'),
             wChapterSegmentWrap = chapterSegmentWrap.width(),
             chapterList = $('.list-chapter-rows-wrap');
@@ -417,6 +401,7 @@
 
     function newAnnotation(dataAnnotation){
         var annotation = new IriSP.Model.Annotation(false, myProject);
+            annotation.setAnnotationType(annotationsAnnType.id);
             annotation.setMedia(myMedia.id);
             annotation.setBegin(dataAnnotation.begin);
             annotation.setEnd(dataAnnotation.end);
@@ -433,6 +418,8 @@
     }
 
     function renderAnnotation(){
+        disabledPreview();
+
         var timeline = $('.timeline-annotations'),
             wTimeline = timeline.width(),
             annotationList = $('#list-annotations-rows');
@@ -499,7 +486,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 +498,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 +511,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 +519,7 @@
     });
 
     function deleteAnnotation(idAnnotation){
+        disabledPreview();
         $("#modal-confirm").modal('hide');
         annotations = _(annotations).reject(function(c) { return c.id == idAnnotation; });
         closeTab(idAnnotation);
@@ -557,7 +540,7 @@
     });
 
     function openTab(type, data){
-
+        
         var dataView;
         if(_.isUndefined(data)){//nouveau
             var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
@@ -605,16 +588,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 +609,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 +757,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 +777,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 +883,42 @@
 $('.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');
+
+    console.log(myProject.serialize());
+
+    $.ajax({
+        type: "POST",
+        url: urlSaveProject,
+        data: myProject.serialize(),
+        contentType: "application/cinelab",
+        headers: {
+            "X-CSRFToken": tokenSaveProject
+        },
+        success: function(data, status, request){
+            console.log('data : ', data);
+            console.log('status : ', status);
+            console.log('request : ', request);
+
+        },
+        error: function(jqXHR, textStatus, errorThrown){
+            alert(gettext("Server error\nYour hashcut couldn't be published"));
+        }
+    });
+
+
+});
+
+function disabledPreview(){
+    if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled');
+}
+
 //################ config
 //tagit
 function onTagItChange(e, ui) {
@@ -937,7 +943,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 +1038,7 @@
         case 'slideshow': 
             content = {
                 mimetype : "application/x-ldt-slideshow",
-                duration : 1,
+                slideduration : 1000,
                 autostart : false,
                 images : []
             };
@@ -1070,7 +1076,6 @@
     return this; 
 };
 
-
 function getVideoPlayer(src, videoWrap){
 
     var youtubeTemplate = _.template(
diff -r 4b37ee07374d -r 3d4b40a75ecd src/metadatacomposer/templates/metadatacomposer_edit.html
--- a/src/metadatacomposer/templates/metadatacomposer_edit.html	Thu Jun 06 15:48:09 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_edit.html	Thu Jun 06 17:58:16 2013 +0200
@@ -42,7 +42,6 @@
             <div class="container">
                 <div class="row project-head">
                     <div class="span7">
-
                         <div class="project-title-editor">
                             <i class="icon-folder-close-alt"></i> 
                             <span class="project-title">{{ project.title }}</span> <i class="icon-pencil"></i> 
@@ -50,8 +49,8 @@
 
                     </div>
                     <div class="span5 text-right project-action">
-                        <a href="{% url 'composer_preview_player' branding=branding ldt_id=ldt_id %}" class="btn" style="pointer-events:none; cursor:default;"><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="{% url 'composer_preview_player' branding=branding ldt_id=ldt_id %}" class="btn disabled btn-apercu-projet"><i class="icon-eye-open"></i> Voir aperçu</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 +78,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">
@@ -184,7 +185,7 @@
                                 </div>
                                 <div class="list-annotation-wrap">
                                     <h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4>
-                                    <table class="table">
+                                    <table class="table ">
                                         <thead>
                                             <tr>
                                                 <th>Titre</th>
@@ -336,7 +337,8 @@
                                     <h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
                                     <span class="span3">
                                         Ajouter une vidéo 
-                                        <a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
+                                        <a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" 
+                                           href="{% url 'composer_modal_content_library' branding=branding %}"><i class="icon-plus"></i></a>
                                     </span>
                                 </div>
                                 <div class="row annotation-video-content">
@@ -396,7 +398,8 @@
                                     <h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
                                     <span class="span3">
                                         Ajouter une image 
-                                        <a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+                                        <a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" 
+                                           href="{% url 'composer_modal_image_library' branding=branding %}"><i class="icon-plus"></i></a>
                                     </span>
                                 </div>
                                 <div class="row config-diaporama">
@@ -443,40 +446,6 @@
                                                         </table>
                                                     </td>
                                                 </tr>
-                                                <tr id="rid-id2" class="row-image-diaporama">
-                                                    <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""> </td>
-                                                    <td>Titre annotation 2</td>
-                                                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
-                                                    <td>
-                                                        <table>
-                                                            <tr>
-                                                                <td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
-                                                                <td><a href="" class="btn"><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>
-                                                <tr id="rid-id3" class="row-image-diaporama">
-                                                    <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""> </td>
-                                                    <td>Titre annotation 3</td>
-                                                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
-                                                    <td>
-                                                        <table>
-                                                            <tr>
-                                                                <td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
-                                                                <td><a href="" class="btn"><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>
                                             </tbody>
                                         </table>
                                     </div>
@@ -515,14 +484,14 @@
         </div>
         <div class="modal-footer">
             <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
-            <button id="btn-delete-modal" class="btn btn-primary">Supprimer</button>
+            <a id="btn-delete-modal" class="btn btn-primary">Supprimer</a>
         </div>
     </div>
 
 <div id="templates">
 <script id="tpl-head" type="text/html">
-<form action="#" class="form-info-general-annotation" style="background-color:{% templatetag openvariable %}color{% templatetag closevariable %}" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
-
+<form action="#" class="form-info-general-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
+    
     <div class="row">
         <div class="span3 text-right">
             <input type="text" placeholder="Titre de l'annotation.." name="title" value="{% templatetag openvariable %}title{% templatetag closevariable %}">
@@ -553,7 +522,7 @@
             <div data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" id="" class="slider-duration"></div>
         </div>
         <div class="span6 text-right">
-            <a class="btn btn-danger btn-delete-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-no-render>
+            <a class="btn btn-danger btn-delete btn-delete-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-no-render>
                 <i class="icon-trash"></i> Delete
             </a>
             <a class="btn btn-primary btn-save-annotation" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}">
@@ -603,7 +572,7 @@
     <h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
     <span class="span3">
         Ajouter une vidéo 
-        <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" 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>
+        <a data-id="annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="{% url 'composer_modal_content_library' branding=branding %}" data-hide-add-new><i class="icon-plus"></i></a>
     </span>
 </div>
 <div class="row annotation-video-content">
@@ -642,7 +611,7 @@
     <h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
     <span class="span3">
         Ajouter une image 
-        <a data-type-media="image" data-diaporama="diaporama-{% templatetag openvariable %}id{% templatetag closevariable %}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+        <a data-type-media="image" data-diaporama="diaporama-{% templatetag openvariable %}id{% templatetag closevariable %}" data-title="Ajouter une image" class="btn btn-success open-modal" href="{% url 'composer_modal_image_library' branding=branding %}" data-hide-add-new><i class="icon-plus"></i></a>
     </span>
 </div>
 <div class="row config-diaporama">
@@ -656,13 +625,13 @@
         </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="{% templatetag openvariable %}content.slideduration{% templatetag closevariable %}"> sec
         </div>
     </form>
 </div>
 <div class="row">
     <div class="span6">
-        <table class="table">
+        <table class="table table-striped">
             <thead>
                 <tr>
                     <th>Aperçu</th>
@@ -720,18 +689,24 @@
 
 <script id="tpl-diaporama-row" type="text/html">
 <tr id="rid-{% templatetag openvariable %}ridid{% templatetag closevariable %}" class="row-image-diaporama">
-    <td class="image-slideshow-row"><img data-url="{% templatetag openvariable %}url{% templatetag closevariable %}" src="{% templatetag openvariable %}url{% templatetag closevariable %}" alt=""> </td>
-    <td class="title-slideshow-row">{% templatetag openvariable %}title{% templatetag closevariable %}</td>
-    <td class="description-slideshow-row">{% templatetag openvariable %}description{% templatetag closevariable %}</td>
+    <td class="image-slideshow-row"><img data-url="{% templatetag openvariable %}url{% templatetag closevariable %}" src="{% templatetag openvariable %}url{% templatetag closevariable %}?width=60&height=60" alt=""> </td>
+    <td class="title-slideshow-row" data-input="input" data-name="title">
+        <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span> <i class="icon-pencil"></i>
+    </td>
+    <td class="description-slideshow-row" data-input="textarea" data-name="description">
+        <span>{% templatetag openvariable %}description{% templatetag closevariable %}</span> <i class="icon-pencil"></i>
+    </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-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-image"><i class="icon-trash"></i></a></td>
+                <td>
+                    <a data-title="une image" href="#rid-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-image"><i class="icon-trash"></i></a>
+                </td>
+                <td><a href="#" class="btn btn-sort up"><i class="icon-angle-up"></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>
+                <td></td>
+                <td><a href="#" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
             </tr>
         </table>
     </td>
@@ -741,32 +716,38 @@
 <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>{% templatetag openvariable %}title{% templatetag closevariable %}</td>
+                <td class="video-title-edit" data-input="input"  data-name="title">
+                    <span>{% templatetag openvariable %}title{% templatetag closevariable %}</span> <i class="icon-pencil"></i>
+                </td>
             </tr>
             <tr>
                 <th>Description</th>
-                <td>{% templatetag openvariable %}description{% templatetag closevariable %}</td>
+                <td class="video-description-edit" data-input="textarea"  data-name="description">
+                    <span>{% templatetag openvariable %}description{% templatetag closevariable %}</span> <i class="icon-pencil"></i>
+                </td>
             </tr>
         </tbody>
     </table>
+    -->
 </div>
 </script>
 
 <script id="tpl-list-annotation-row" type="text/html">
 <tr id="row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" style="background-color : {% templatetag openvariable %}color{% templatetag closevariable %};">
     <td>{% templatetag openvariable %}title{% templatetag closevariable %}</td>
-    <td>{% templatetag openvariable %}type{% templatetag closevariable %}</td>
+    <td><i class="icon-{% templatetag openvariable %}iconTab{% templatetag closevariable %}"></i></td>
     <td>{% templatetag openvariable %}begin{% templatetag closevariable %}</td>
     <td>{% templatetag openvariable %}getDuration{% templatetag closevariable %}</td>
     <td>{% templatetag openvariable %}end{% templatetag closevariable %}</td>
     <td>
-        <a href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-edit-annotation" data-type="{% templatetag openvariable %}type{% templatetag closevariable %}">
+        <a href="#" data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" title="Editer l'annotation" class="btn btn-edit-annotation" data-type="{% templatetag openvariable %}type{% templatetag closevariable %}">
             <i class="icon-pencil"></i></a>
-        <a data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" data-type="annotation" data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" href="#row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-annotation">
+        <a data-id="{% templatetag openvariable %}id{% templatetag closevariable %}" title="Supprimer l'annotation" data-type="annotation" data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" href="#row-list-annotation-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete btn-delete-annotation">
             <i class="icon-trash delete-annotation"></i>
         </a>
     </td>
@@ -784,10 +765,10 @@
         <table>
             <tr>
                 <td>
-                    <a href="#" class="btn btn-edit-chapter" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><i class="icon-pencil"></i></a>
+                    <a href="#" title="Editer le chapitre" class="btn btn-edit-chapter" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}"><i class="icon-pencil"></i></a>
                 </td>
                 <td>
-                    <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
+                    <a data-title="{% templatetag openvariable %}title{% templatetag closevariable %}" title="Supprimer le chapitre" data-chapter-id="{% templatetag openvariable %}id{% templatetag closevariable %}" href="#row-list-chapter-{% templatetag openvariable %}id{% templatetag closevariable %}" class="btn btn-delete btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
                 </td>
             </tr>
         </table>
@@ -852,12 +833,52 @@
             max:60,
             min:0
         };
-        /* Initialisation du metadataplayer avec un projet vide */
-        var myDir = new IriSP.Model.Directory(),
-            myProject = myDir.remoteSource({
-                url: "{% url 'projectjson_id' id=ldt_id %}",
-                serializer: IriSP.serializers.ldt
-            });
+    var urlSaveProject = "{% url 'api_dispatch_detail' api_name='1.0' resource_name='projects' ldt_id=ldt_id %}";
+    var tokenSaveProject = "{{ csrf_token }}";
+    var textCurrentAnnotationEditT = "en cours d'édition";
+
+    /* Initialisation du metadataplayer avec un projet */
+    var myDir = new IriSP.Model.Directory(),
+        myProject = myDir.remoteSource({
+            url: "{% url 'projectjson_id' id=ldt_id %}",
+            serializer: IriSP.serializers.ldt
+        });
+    
+    // pagination in modal
+    $(document).on('click', 'a.content_pagination_library', function(e){
+        e.preventDefault();e.stopPropagation();
+        var url = $(this).attr('href');
+        $(this).addClass("loader");
+        $.ajax({
+            url: url,
+            cache: false,
+            type: 'GET',
+            success: function(data, status, request) {
+                $("#content_list_container_library").html(data);
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                resp = $.parseJSON(jqXHR.responseText);
+                alert(resp.message);
+            }
+        });
+    });
+    $(document).on('click', 'a.image_pagination_library', function(e){
+        e.preventDefault();e.stopPropagation();
+        var url = $(this).attr('href');
+        $(this).addClass("loader");
+        $.ajax({
+            url: url,
+            cache: false,
+            type: 'GET',
+            success: function(data, status, request) {
+                $("#image_list_container_library").html(data);
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                resp = $.parseJSON(jqXHR.responseText);
+                alert(resp.message);
+            }
+        });
+    });
     </script>
 {% analytics %}
 </body>