disabled preview
authorAnthony Ly <anthonyly.com@gmail.com>
Mon, 10 Jun 2013 15:58:23 +0200
changeset 107 f354d24e08ca
parent 106 db45d04eb957
child 108 ba125e8615eb
disabled preview
integration/css/style.css
integration/edition.html
integration/js/edition.js
--- a/integration/css/style.css	Mon Jun 10 13:11:43 2013 +0200
+++ b/integration/css/style.css	Mon Jun 10 15:58:23 2013 +0200
@@ -1,4 +1,5 @@
 .wrap{color: #2c3e50;}
+.tab-content{overflow: hidden;}
 .vignette-projet{position: relative;}
 .vignette-projet:hover a{display: block;}
 .vignette-projet a{ display:none;position: absolute; width: 50%; height: 100%; font-size: 50px; text-align: center; line-height: 140px; text-decoration: none;}
@@ -64,9 +65,7 @@
 .add-annotation-wrap, .form-info-general-annotation{padding: 10px 0;}
 .form-info-general-annotation ul.tagit {margin-left: 0px;width: 195px;}
 .form-info-general-annotation textarea{min-height:100px; height: 100px;min-width: 196px;}
-
 .add-annotation-wrap {margin-bottom: 20px; padding-top: 0;}
-
 .slider-duration{width: 435px;display: inline-block; margin-bottom: 10px;}
 .btn-save-annotation{margin-right: 10px;}
 .tab-pane.active{background-color: #F5F5F5;}
@@ -80,7 +79,6 @@
 .config-diaporama form{background-color: #34495e; padding: 4px 0; margin: 0; overflow: hidden;  line-height: 28px;}
 .config-diaporama form label{display: inline-block; padding-left: 10px;}
 .config-diaporama form input{margin-bottom: 0;}
-
 .edit-annotation-text textarea{max-width: 446px;}
 .wysiwyg-wrap{overflow: hidden; }
 .ui-slider-handle.ui-state-default.ui-corner-all{border-radius: 0;}
@@ -98,12 +96,8 @@
 .timeline-annotations .annotation:hover span,
 .annotation.editing span, 
 .annotation.editing i{display: inline;}
-ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
--moz-border-radius: 0px;
-border-radius: 0px;}
-
+ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
 .video-wrap{position: relative;}
-.annotations-display{}
 .annotation-display-view{display:none;text-align:center; line-height:200px;background-color: #fff;position: absolute; width: 200px; margin-left: -100px; height: 200px; margin-top: -100px; top: 50%; left: 50%;}
 .list-current-annotations{position: absolute;bottom: 40px; left: 20px; margin: 0;}
 .list-current-annotations li{list-style: none; margin-top: 4px;}
@@ -111,54 +105,29 @@
 .list-current-annotations a span{display: none;}
 .list-current-annotations a:hover span{display: inline-block;}
 .annotation-audio-content textarea{max-width: 206px;}
-
 .annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;}
-
 td.list-chapter-tags, td.list-chapter-title, #list-annotations-rows > tr td:first-child{word-wrap: break-word; max-width: 75px;}
 td.begin, td.duration, td.end{max-width: 40px;}
-
 td.image-slideshow-row img{width: 60px; height: 60px;}
 .project-title-editor input{margin-bottom: 0;}
 #templates{display: none;}
-
 .title-slideshow-row{word-wrap: break-word;width: 76px;}
 .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;}
 .label-modify-video, .label-add-video{display: none;}
-
-.shadow {
-    background-color: #00FFFF !important;
-}
+.shadow {background-color: #00FFFF !important;}
 .alert-message{display: none;}
 .alert{display: none;}
-
 /* Tangle */
-.time-tangle {
-	color: #2c3e50; cursor: w-resize; position: relative;
-	border-bottom: 1px dashed #2c3e50;
-}
+.time-tangle {color: #2c3e50; cursor: w-resize; position: relative;border-bottom: 1px dashed #2c3e50;}
 .time-tangle:hover, 
-.time-tangle.active {
-    color: #c0392b; 
-}
+.time-tangle.active {color: #c0392b;}
 .time-tangle:hover:after, 
-.time-tangle.active:after {
-	position: absolute;
-	display: inline-block;
-    color: #2c3e50;  top: 18px; left: 50%; width: 160px;
-    margin-left: -80px; font-size: 10px; text-align: center;
-    content: "glisser pour modifier";
-}
-
-.time-tangle.deactivate:hover {
-    border: none; color: #2c3e50;
-}
-
-.time-tangle.deactivate:hover:after {
-    display: none;
-}
+.time-tangle.active:after {position: absolute;display: inline-block;color: #2c3e50;  top: 18px; left: 50%; width: 160px;margin-left: -80px; font-size: 10px; text-align: center;content: "glisser pour modifier";}
+.time-tangle.deactivate:hover {border: none; color: #2c3e50;}
+.time-tangle.deactivate:hover:after {display: none;}
 
 .loader {
     background: url(../img/loader.gif) center no-repeat;
--- a/integration/edition.html	Mon Jun 10 13:11:43 2013 +0200
+++ b/integration/edition.html	Mon Jun 10 15:58:23 2013 +0200
@@ -508,7 +508,7 @@
 			</div><!-- /.container -->
 		</section>
 		<footer>
-			<a href="#" class="log-annotations">Log annotations</a> - <a href="#" class="log-chapters">Log chapitres</a>
+
 		</footer>
 	</div>
 
--- a/integration/js/edition.js	Mon Jun 10 13:11:43 2013 +0200
+++ b/integration/js/edition.js	Mon Jun 10 15:58:23 2013 +0200
@@ -6,204 +6,177 @@
 
 $(function(){
 
-var global = {
-    colorsIndex : 0,
-    colors : 
-        ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71',  
-        '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6',
-        '#16a085', '#2980b9', '#8e44ad', '#27ae60', 
-         '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d']
-};
-
-
-//position de la video setCurrentTime
-$(".indicateur-annotation").draggable({
-    axis: "x",
-    containment: "parent",
-    drag: function(e, ui) {
-        var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".timeline-annotations").width() - 2 * ui.helper.width() );
-        myMedia.setCurrentTime(t);
-    }
-});
-
-//survol
-$(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
-    if(!$(this).hasClass('shadow')) {
-        var idAnnotation = $(this).attr('data-id');
-        $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
-    }
-});
+    var global = {
+        colorsIndex : 0,
+        colors : 
+            ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71',  
+            '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6',
+            '#16a085', '#2980b9', '#8e44ad', '#27ae60', 
+             '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d']
+    };
 
-$(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){
-    if(!$(this).hasClass('shadow')) {
-        var idChapter = $(this).attr('data-id');
-        $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow');
-    }
-});
-
-$(document).on('mouseout', '.shadow' , function(){
-    $('.shadow').removeClass('shadow');
-});
-
-
-$(document).on('click', '.annotation, .item-display-annotation', function(e){
-    e.preventDefault();
-    var idAnnotation = $(this).attr('data-id'),
-        annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
-    myMedia.setCurrentTime(annotation.begin);
-    if($('#tab-annotation-'+idAnnotation).length){
-        $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
-    }else{
-        openTab(annotation.type, annotation);
-    }
-});
-
-myProject.onLoad(function() {
-    myProject.regenerateTags = true;
-
-    $(".project-title").text(myProject.title);
-    $('.project-title-nav').text(myProject.title);
-
-    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];
+    function getTemplate(idTpl){
+        return $('#templates').find(idTpl).html();
     }
 
-//load Chapitre
+    myProject.onLoad(function() {
+        myProject.regenerateTags = true;
+
+        $(".project-title").text(myProject.title);
+        $('.project-title-nav').text(myProject.title);
+
+        myMedia = myProject.getCurrentMedia();
 
-    chapters = chapterAnnType.getAnnotations();
-    $.each(chapters, function(k, v){
-        v.color = getRandomColor();
-    });
-    renderChapter();
+        var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");
+        if (!anntypes.length) {
+            chapterAnnType = new IriSP.AnnotationType(false, myProject);
+            chapterAnnType.title = "chapitrage";
+        } else {
+            chapterAnnType = anntypes[0];
+        }
 
-//load Annotations
-    var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations");
-    if (!anntypes.length) {
-        annotationsAnnType = new IriSP.AnnotationType(false, myProject);
-        annotationsAnnType.title = "annotations";
-    } else {
-        annotationsAnnType = anntypes[0];
-    }
+        //load Chapitre
+        chapters = chapterAnnType.getAnnotations();
+        $.each(chapters, function(k, v){
+            v.color = getRandomColor();
+        });
+        renderChapter();
 
-    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();
+        //load Annotations
+        var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations");
+        if (!anntypes.length) {
+            annotationsAnnType = new IriSP.AnnotationType(false, myProject);
+            annotationsAnnType.title = "annotations";
+        } else {
+            annotationsAnnType = anntypes[0];
+        }
+
+        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();
 
 
-    IriSP.htmlPlayer(
-        myMedia,
-        $(".main-video"),
-        {
-            width: 460,
-            height: 345,
-            controls: true,
-            autostart: true,
-            url_transform: function(src) {
-                return [{
-                    type: "video/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').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
-                }];
+        IriSP.htmlPlayer(
+            myMedia,
+            $(".main-video"),
+            {
+                width: 460,
+                height: 345,
+                controls: true,
+                autostart: true,
+                url_transform: function(src) {
+                    return [{
+                        type: "video/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').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
+                    }];
+                }
             }
-        }
-    );
+        );
 
-    myMedia.on("timeupdate", function(t) {
+        myMedia.on("timeupdate", function(t) {
 
-        //curseur chapitre
-        var wContainer = $('.chapitre-cut-wrap').width() - 1,
-            pos = wContainer * t / myMedia.duration,
-            btnCutChapter = $('.btn-cut-chapter'),
-            wBtnCutChapter = btnCutChapter.outerWidth();
+            //curseur chapitre
+            var wContainer = $('.chapitre-cut-wrap').width() - 1,
+                pos = wContainer * t / myMedia.duration,
+                btnCutChapter = $('.btn-cut-chapter'),
+                wBtnCutChapter = btnCutChapter.outerWidth();
+            
+            $(".indicateur-chapter, .indicateur-annotation").css("left",pos);
+            if(pos+wBtnCutChapter>wContainer){
+                btnCutChapter.css("left",(pos - wBtnCutChapter));
+            }else{
+                btnCutChapter.css("left",pos);
+            }
+            $('.info-time').text(t)
+            //annotations view
+            refreshAnnotationDisplay(t);
+
+        });//timeupdate
         
-        $(".indicateur-chapter, .indicateur-annotation").css("left",pos);
-        if(pos+wBtnCutChapter>wContainer){
-            btnCutChapter.css("left",(pos - wBtnCutChapter));
-        }else{
-            btnCutChapter.css("left",pos);
-        }
-        $('.info-time').text(t)
-        //annotations view
-        refreshAnnotationDisplay(t);
+    });//myProject.onLoad
 
-    });//timeupdate
-    
-});//myProject.onLoad
+/* Display annotation in timeline */
 
-function refreshAnnotationDisplay(t){
-    
-    var currentAnnotationsDisplay = new Array();
-    $.each(annotations, function(k, v){
+    //survol
+    $(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
+        if(!$(this).hasClass('shadow')) {
+            var idAnnotation = $(this).attr('data-id');
+            $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
+        }
+    });
 
-        if(v.begin <= t && v.end >= t){
-            currentAnnotationsDisplay.push(v.id);
-            if(!$('#item-current-annotation-'+v.id).length){
-                var itemAnnotation = getTemplate('#tpl-item-annotation-display');
-                v.iconTab = getIcon(v.type);
-                itemAnnotation = Mustache.render(itemAnnotation, v);
-                $('.list-current-annotations').append(itemAnnotation)
-            }
+    $(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){
+        if(!$(this).hasClass('shadow')) {
+            var idChapter = $(this).attr('data-id');
+            $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow');
         }
     });
-    $.each($('.list-current-annotations li'), function(k, v){
+
+    $(document).on('mouseout', '.shadow' , function(){
+        $('.shadow').removeClass('shadow');
+    });
+
+    $(document).on('click', '.annotation, .item-display-annotation', function(e){
+        e.preventDefault();
         var idAnnotation = $(this).attr('data-id'),
-            annotationDisplayView = $('.annotation-display-view');
-        if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché
-            $('#item-current-annotation-'+idAnnotation).remove();
-            if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
-                annotationDisplayView.hide();
-            }
+            annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+        myMedia.setCurrentTime(annotation.begin);
+        if($('#tab-annotation-'+idAnnotation).length){
+            $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');
+        }else{
+            openTab(annotation.type, annotation);
         }
     });
-    if(currentAnnotation !== undefined){ 
-        showCurrentAnnotationInTimeline(currentAnnotation.id);
-    }
-}
+
+    function refreshAnnotationDisplay(t){
+        var currentAnnotationsDisplay = new Array();
+        $.each(annotations, function(k, v){
 
-function showCurrentAnnotationInTimeline(idAnnotation){
-    $('.annotation').removeClass('editing');
-    $('#annotation-timeline-'+idAnnotation).addClass('editing');
-}
-//display annotation view
-$('.list-current-annotations').on('click', 'a', function(e){
-    e.preventDefault();
-    /*
-    var annotationDisplayView = $('.annotation-display-view'),
-        idAnnotation = $(this).attr('data-id');
-    var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+            if(v.begin <= t && v.end >= t){
+                currentAnnotationsDisplay.push(v.id);
+                if(!$('#item-current-annotation-'+v.id).length){
+                    var itemAnnotation = getTemplate('#tpl-item-annotation-display');
+                    v.iconTab = getIcon(v.type);
+                    itemAnnotation = Mustache.render(itemAnnotation, v);
+                    $('.list-current-annotations').append(itemAnnotation)
+                }
+            }
+        });
 
-    if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
-        annotationDisplayView.hide();
-    }else{
-        annotationDisplayView
-            .attr('data-id', idAnnotation)
-            .css('backgroundColor', annotation.color)
-            .text(annotation.type+' : '+annotation.title)
-            .show();
+        $.each($('.list-current-annotations li'), function(k, v){
+            var idAnnotation = $(this).attr('data-id'),
+                annotationDisplayView = $('.annotation-display-view');
+            if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché
+                $('#item-current-annotation-'+idAnnotation).remove();
+                if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+                    annotationDisplayView.hide();
+                }
+            }
+        });
+        if(currentAnnotation !== undefined){ 
+            showCurrentAnnotationInTimeline(currentAnnotation.id);
+        }
     }
-    */
-});
 
-//########### modal
+    function showCurrentAnnotationInTimeline(idAnnotation){
+        $('.annotation').removeClass('editing');
+        $('#annotation-timeline-'+idAnnotation).addClass('editing');
+    }
 
-    $(document).on('click', 'a.open-modal', function(e){
-
+    $('.list-current-annotations').on('click', 'a', function(e){
+        e.preventDefault();
     });
+    
 
-//select on bibliotheque
+/*  Modal */
 
     //confirmation suppression
     $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
@@ -218,12 +191,10 @@
         }
     });
 
-//--apercu projet
-$(document).on('click', '.btn-apercu-projet.disabled', function(e){
-    e.preventDefault();
-});
+
 
-//--title-editor
+/* Title project */
+
     $(document).on('click', '.project-title-editor i, .project-title', function () {
         
         var html = $('.project-title').html();
@@ -240,12 +211,13 @@
         myProject.title = newTitle;
         $(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>');
         $('.project-title-nav').text(newTitle);
+        disabledPreview();
     });
 
 
-//######################## chapter
+/*  Chapter */
 
-//edit
+    //edit
     $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
         e.preventDefault();
         var idChapter = $(this).attr('data-chapter-id');
@@ -258,8 +230,6 @@
     });
 
     $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
-        
-
         var name = $(this).attr('name'),
             value = $(this).val();
         currentChapter[name] = value;
@@ -269,15 +239,10 @@
             $('#row-list-chapter-'+idChapter).find('td:first').text(value);
             $(this).parents('form').find('.btn-delete-chapter').attr('data-title', value);
         }
+        disabledPreview();
     });
 
-
-
     function loadFormChapter(idChapter){
-
-        
-        
-
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
         var chapterWrap = $('.chapter-widget-info'),
             indexChapter = _.indexOf(chapters, currentChapter),
@@ -295,63 +260,61 @@
         myMedia.setCurrentTime(currentChapter.begin);
     }
 
-    function getTemplate(idTpl){
-        return $('#templates').find(idTpl).html();
-    }
-//supprimer
-$(document).on('click', '.btn-delete-chapter', function(e){
-    e.preventDefault();
+    //delete chapter
+    $(document).on('click', '.btn-delete-chapter', function(e){
+        e.preventDefault();
 
-    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);
+        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');
+        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();
+        $('.form-chapter-edit').remove();
+    });
 
-});
-$(document).on('click', '.btn-ok-chapter', function(e){
-    e.preventDefault();
-    $('.form-chapter-edit').remove();
-})
+    function deleteChapter(idChapter){
+        
+        $("#modal-confirm").modal('hide');
+        var 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.removeId(idChapter);
+        myProject.getAnnotations().removeId(idChapter, true);
+        renderChapter();
+        //si le formulaire est visible
+        if($('#form-chapter-edit-'+idChapter).length){
+            $('#form-chapter-edit-'+idChapter).remove();
+        }
+        disabledPreview();
+    }
 
-function deleteChapter(idChapter){
-    
-    $("#modal-confirm").modal('hide');
-    var 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);
+    function getRandomColor(){
+        return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
     }
-    chapters.removeId(idChapter);
-    myProject.getAnnotations().removeId(idChapter, true);
-    renderChapter();
-    //si le formulaire est visible
-    if($('#form-chapter-edit-'+idChapter).length){
-        $('#form-chapter-edit-'+idChapter).remove();
-    }
-}
-
-function getRandomColor(){
-    return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
-}
-//nouveau chapitre
+    //nouveau chapitre
     function newChapter(dataChapter, render){
         var chapter = new IriSP.Model.Annotation(false, myProject);
             chapter.setMedia(myMedia.id);
@@ -367,6 +330,8 @@
         myProject.getAnnotations().push(chapter);
         renderChapter();
         loadFormChapter(chapter.id);
+        disabledPreview();
+        $('#chapter-title').focus();
     }
 
     $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
@@ -381,11 +346,11 @@
             return;
         }
         var dataChapter = {
-            title : 'New',
+            title : '',
             begin : begin,
             end : end,
-            description : 'description',
-            keywords : ['tag1','tag2']
+            description : '',
+            keywords : []
         };
 
         newChapter(dataChapter, true);
@@ -445,10 +410,7 @@
      
     }//renderChapter()
 
-
-
-//######################## annotation
-    
+/* Annotation */    
 
     function newAnnotation(dataAnnotation){
         var annotation = new IriSP.Model.Annotation(false, myProject);
@@ -465,7 +427,8 @@
 
         myProject.getAnnotations().push(annotation);
         annotations.push(annotation);
-        
+        disabledPreview();
+
         return annotation;
     }
 
@@ -566,6 +529,7 @@
             $('#annotation-timeline-'+ idAnnotation).attr('title', value);
             $('#annotation-timeline-'+ idAnnotation+' span').text(value);
         }
+        disabledPreview();
     });
 
     //delete annotation
@@ -585,9 +549,11 @@
         myProject.getAnnotations().removeId(idAnnotation, true);
         closeTab(idAnnotation);
         renderAnnotation();
+        disabledPreview();
     }
 
-//tab
+/* Tab */
+
     $('#onglet-annotations').on('click', 'a', function(e){
         e.preventDefault();
         $(this).tab('show');
@@ -765,7 +731,7 @@
         $('#tab-list-annotation').tab('show');
     }
 
-//video
+    //video
     function renderVideoInfo(videoWrap, dataVideo){
     
         var tplVideo = getTemplate('#tpl-video-row');
@@ -798,10 +764,11 @@
 
         labelModify.show();
         labelAdd.hide();
-        
+
+        disabledPreview();
     });
 
-//diaporama
+/* Slideshow */
 
     //bibliotheque
     $('.popup').on('click', '.bibliotheque-image a:not(.pagination a)', function(e){
@@ -821,6 +788,7 @@
         var listDiaporama = $('#diaporama-'+currentAnnotation.id);
         addImageToDiaporama(listDiaporama, image);
         $('.popup').modal('hide'); 
+        disabledPreview();
     });
 
     function addImageToDiaporama(diaporama, dataView){
@@ -854,6 +822,7 @@
             indexRow = $(this).parents('.row-image-diaporama').index();
         $(this).replaceWith(span);
         currentAnnotation.content.images[indexRow][name] = newValue;
+        disabledPreview();
     });
 
     $(document).on('blur', '.video-title-edit input, .video-description-edit textarea', function(){
@@ -862,6 +831,7 @@
             span = $('<span>').html(newValue);
         $(this).replaceWith(span);
         currentAnnotation.content[name] = newValue;
+        disabledPreview();
     });
 
     //bouton up / down
@@ -880,6 +850,7 @@
         currentAnnotation.content.images.move(oldIndex, newIndex);
 
         disabledBtnSortable(listDiaporama);
+        disabledPreview();
     });
 
     $('.tab-content').on('click','.btn-delete-image', function(e){
@@ -889,6 +860,7 @@
 
         rowImage.remove();
         currentAnnotation.content.images.splice(index, 1);
+        disabledPreview();
     });
 
     function disabledBtnSortable(listDiaporama){
@@ -897,254 +869,270 @@
         listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
     }
 
-    
-//links
-$('.tab-content').on('click', '.add-link', function(e){
-    e.preventDefault();
-    var tbody = $(this).parents('tfoot').siblings('tbody');
-    addLinkRow(tbody);
-});
-$('.tab-content').on('click', '.delete-link', function(e){
-    e.preventDefault();
-    var row = $(this).parents('tr'),
-        tbody = $(this).parents('tbody');
-
-    row.remove();
-    updateLinks(tbody);
-});
-function addLinkRow(tbody, dataView){
-
-    //head commun à tous
-    var tplLinkRow = getTemplate('#tpl-links-row');
-    var output = Mustache.render(tplLinkRow, dataView);
-    tbody.append(output);
+    //links
+    $('.tab-content').on('click', '.add-link', function(e){
+        e.preventDefault();
+        var tbody = $(this).parents('tfoot').siblings('tbody');
+        addLinkRow(tbody);
+    });
+    $('.tab-content').on('click', '.delete-link', function(e){
+        e.preventDefault();
+        var row = $(this).parents('tr'),
+            tbody = $(this).parents('tbody');
 
-}
-$('.tab-content').on('keyup', '.links-rows input', function(e){
-    var tbody = $(this).parents('.links-rows');
-    updateLinks(tbody);   
-});
-function updateLinks(tbody){
-    links = new Array();
+        row.remove();
+        updateLinks(tbody);
+    });
+    function addLinkRow(tbody, dataView){
 
-    $.each(tbody.find('tr'), function(k, v){
-        var urlLink = $(v).find('.url-link').val(),
-            titleLink = $(v).find('.title-link').val(),
-            link = {
-                url : urlLink,
-                title : titleLink
-            };
-            links.push(link);
+        //head commun à tous
+        var tplLinkRow = getTemplate('#tpl-links-row');
+        var output = Mustache.render(tplLinkRow, dataView);
+        tbody.append(output);
 
+    }
+    $('.tab-content').on('keyup', '.links-rows input', function(e){
+        var tbody = $(this).parents('.links-rows');
+        updateLinks(tbody);   
     });
-    currentAnnotation.content.links = links;
-}
-
-//annotation audio
-$('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
-    var name = $(this).attr('name'),
-        value = $(this).val();
-
-    currentAnnotation.content[name] = value;
-});
+    function updateLinks(tbody){
+        links = new Array();
 
-//annotation slideshow
-$('.tab-content').on('click', '.btn-autostart', function(){
-    var autostart = $(this).attr('data-autostart');
-    if(autostart == "true"){ autostart = true;}
-    else {autostart = false;}
-    currentAnnotation.content.autostart = autostart;
-});
+        $.each(tbody.find('tr'), function(k, v){
+            var urlLink = $(v).find('.url-link').val(),
+                titleLink = $(v).find('.title-link').val(),
+                link = {
+                    url : urlLink,
+                    title : titleLink
+                };
+                links.push(link);
 
-$('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
-    var value = $(this).val();
-    if(!isNaN(value)){
-        currentAnnotation.content.slideduration = value * 1000;
+        });
+        currentAnnotation.content.links = links;
+        disabledPreview();
     }
-});
 
-$('.alert').bind('close', function (e) {
-    e.preventDefault();
-    $(this).hide();
-});
-
-function showAlertByClassName(className){
-    $('.alert').hide();
-    $('.'+className).show();
-}
-//save project
+    //annotation audio
+    $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
+        var name = $(this).attr('name'),
+            value = $(this).val();
 
-$('.btn-save-project').bind('click', function(e){
-    e.preventDefault();
-    if($(this).hasClass('disabled')) return;
-
-    showAlertByClassName('save-load');
-    $(this).addClass('disabled');
-
-    console.log(myProject.serialize());
+        currentAnnotation.content[name] = value;
+        disabledPreview();
+    });
 
-    $.ajax({
-        type: "POST",
-        url: urlSaveProject,
-        data: myProject.serialize(),
-        contentType: "application/cinelab",
-        headers: {
-            "X-CSRFToken": tokenSaveProject
-        },
-        success: function(data, status, request){
-            showAlertByClassName('save-ok');
-            $(this).removeClass('disabled');
-            $('.btn-apercu-projet').removeClass('disabled');
-            console.log('data : ', data);
-            console.log('status : ', status);
-            console.log('request : ', request);
+    //annotation slideshow
+    $('.tab-content').on('click', '.btn-autostart', function(){
+        var autostart = $(this).attr('data-autostart');
+        if(autostart == "true"){ autostart = true;}
+        else {autostart = false;}
+        disabledPreview();
+        currentAnnotation.content.autostart = autostart;
+    });
 
-        },
-        error: function(jqXHR, textStatus, errorThrown){
-            showAlertByClassName('save-error');
-            $(this).removeClass('disabled');
-            //alert(gettext("Server error\nYour hashcut couldn't be published"));
+    $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
+        var value = $(this).val();
+        if(!isNaN(value)){
+            disabledPreview();
+            currentAnnotation.content.slideduration = value * 1000;
         }
     });
 
-
-});
+    
+    //save project
+    $('.btn-save-project').bind('click', function(e){
+        e.preventDefault();
+        if($(this).hasClass('disabled')) return;
 
-function disabledPreview(){
-    if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled');
-}
+        showAlertByClassName('save-load');
+        var that = this;
+        $(this).addClass('disabled');
 
-//################ config
-//tagit
-function onTagItChange(e, ui) {
-    var tagitType = $(this).attr('data-type'), 
-        value = $(this).val();
+        console.log(myProject.serialize());
 
-    if(tagitType == 'chapter'){
-        var idChapter = $(this).parents('form').attr('data-chapter-id');
-        currentChapter.keywords = value.split(',');
-        $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value);
-    }else{
-        currentAnnotation.keywords = value.split(',');
-    }
+        $.ajax({
+            type: "POST",
+            url: urlSaveProject,
+            data: myProject.serialize(),
+            contentType: "application/cinelab",
+            headers: {
+                "X-CSRFToken": tokenSaveProject
+            },
+            success: function(data, status, request){
+                showAlertByClassName('save-ok');
+                $('.btn-apercu-projet').removeClass('disabled');
+                console.log('data : ', data);
+                console.log('status : ', status);
+                console.log('request : ', request);
+
+            },
+            error: function(jqXHR, textStatus, errorThrown){
+                showAlertByClassName('save-error');
+                //alert(gettext("Server error\nYour hashcut couldn't be published"));
+            },
+            complete : function(){
+                $(that).removeClass('disabled');
+            }
+        });
+    });
     
-}
-
-var tagitParam = {
-    allowSpaces: true,
-    afterTagRemoved : onTagItChange,
-    afterTagAdded : onTagItChange
-}
+    //disabled preview
+    function disabledPreview(){
+        if(!$('.btn-apercu-projet').hasClass('disabled'))$('.btn-apercu-projet').addClass('disabled');
+    }
+    $(document).on('click', '.btn-apercu-projet.disabled', function(e){
+        e.preventDefault();
+    });
 
-//CLEditor annotation > text (wysiwyg)
-//http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
-var wysiwygConfig = {
-    width:        450, 
-    height:       250, 
-    controls:     "bold italic underline strikethrough | font size " +
-                    "style | color highlight removeformat | bullets numbering | source",
-    fonts:        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
-                    "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
-    sizes:        "1,2,3,4,5,6,7",
-    styles:       [["Paragraph", "<p>"], ["Header 2", "<h2>"],
-                    ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
-                    ["Header 6","<h6>"]],
-    docType:      '<!DOCTYPE HTML>',
-    bodyStyle:    "margin:0; font-family: 'Helvetica Neue',​Helvetica,​Arial,​sans-serif;",
-    updateTextArea : function(text){
-        currentAnnotation.content.text = text;
-        return text;
-    },
-    updateFrame: function(text){
-        currentAnnotation.content.text = text;
-        return text;
+    //alert
+    $('.alert').bind('close', function (e) {
+        e.preventDefault();
+        $(this).hide();
+    });
+
+    function showAlertByClassName(className){
+        $('.alert').hide();
+        $('.'+className).show();
     }
-};
+//################ config
+    //tagit
+    function onTagItChange(e, ui) {
+        var tagitType = $(this).attr('data-type'), 
+            value = $(this).val();
+
+        disabledPreview();
+
+        if(tagitType == 'chapter'){
+            var idChapter = $(this).parents('form').attr('data-chapter-id');
+            currentChapter.keywords = value.split(',');
+            $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value);
+        }else{
+            currentAnnotation.keywords = value.split(',');
+        }
+    }
 
-//slider
-function configSlider(data){
-    return {
-        range: true,
-        values: [ data.begin.milliseconds, data.end.milliseconds ],
-        min: 0,
-        max: myMedia.duration.milliseconds,
-        slide: function( event, ui ) {
-            
-            data.setBegin(ui.values[0]);
-            data.setEnd(ui.values[1]);
-
-            var idSlider = $(this).attr('data-id'),
-                wTimeline = $('.timeline-annotations').width(),
-                annotationTimeline = $('#annotation-timeline-'+ data.id),
-                width = Math.floor(data.getDuration() * wTimeline / myMedia.duration),
-                left = Math.floor(data.begin * wTimeline / myMedia.duration);
+    var tagitParam = {
+        allowSpaces: true,
+        afterTagRemoved : onTagItChange,
+        afterTagAdded : onTagItChange
+    }
 
-            $( '#'+ idSlider +'-begin span' ).html(data.begin.toString());
-            $( '#'+ idSlider +'-begin span' ).attr('data-milliseconds', data.begin);
-            $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString());
-            $( '#'+ idSlider +'-end span' ).html(data.end.toString());
-            $( '#'+ idSlider +'-end span' ).attr('data-milliseconds', data.end);
-
-            annotationTimeline.css({
-                left : left,
-                width :width
-            });
+    //CLEditor annotation > text (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
+    var wysiwygConfig = {
+        width:        450, 
+        height:       250, 
+        controls:     "bold italic underline strikethrough | font size " +
+                        "style | color highlight removeformat | bullets numbering | source",
+        fonts:        "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
+                        "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
+        sizes:        "1,2,3,4,5,6,7",
+        styles:       [["Paragraph", "<p>"], ["Header 2", "<h2>"],
+                        ["Header 3", "<h3>"],  ["Header 4","<h4>"],  ["Header 5","<h5>"],
+                        ["Header 6","<h6>"]],
+        docType:      '<!DOCTYPE HTML>',
+        bodyStyle:    "margin:0; font-family: 'Helvetica Neue',​Helvetica,​Arial,​sans-serif;",
+        updateTextArea : function(text){
+            disabledPreview();
+            currentAnnotation.content.text = text;
+            return text;
         },
-        start : function(){
-            var idSlider = $(this).attr('data-id'),
-                annotationTimeline = $('#annotation-timeline-'+ data.id);
-            annotationTimeline.css('z-index',100);
-        },
-        stop : function(){
-            renderAnnotation();
-            refreshAnnotationDisplay(myMedia.getCurrentTime());
+        updateFrame: function(text){
+            disabledPreview();
+            currentAnnotation.content.text = text;
+            return text;
         }
     };
-}
+
+    //slider
+    function configSlider(data){
+        return {
+            range: true,
+            values: [ data.begin.milliseconds, data.end.milliseconds ],
+            min: 0,
+            max: myMedia.duration.milliseconds,
+            slide: function( event, ui ) {
+                
+                data.setBegin(ui.values[0]);
+                data.setEnd(ui.values[1]);
+
+                var idSlider = $(this).attr('data-id'),
+                    wTimeline = $('.timeline-annotations').width(),
+                    annotationTimeline = $('#annotation-timeline-'+ data.id),
+                    width = Math.floor(data.getDuration() * wTimeline / myMedia.duration),
+                    left = Math.floor(data.begin * wTimeline / myMedia.duration);
+
+                $( '#'+ idSlider +'-begin span' ).html(data.begin.toString());
+                $( '#'+ idSlider +'-begin span' ).attr('data-milliseconds', data.begin);
+                $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString());
+                $( '#'+ idSlider +'-end span' ).html(data.end.toString());
+                $( '#'+ idSlider +'-end span' ).attr('data-milliseconds', data.end);
+
+                annotationTimeline.css({
+                    left : left,
+                    width :width
+                });
+            },
+            start : function(){
+                var idSlider = $(this).attr('data-id'),
+                    annotationTimeline = $('#annotation-timeline-'+ data.id);
+                annotationTimeline.css('z-index',100);
+                disabledPreview();
+            },
+            stop : function(){
+                renderAnnotation();
+                refreshAnnotationDisplay(myMedia.getCurrentTime());
+            }
+        };
+    }
 
-//init annotation content data
-function getContentAnnotationByType(type){
-    var content;
-    switch(type){
-        case 'audio':
-            content = {
-                mimetype : "application/x-ldt-audio",
-                url : "",
-                embedcode : ""
-            };
-            break;
-        case 'video':
-            content = {
-                mimetype : "application/x-ldt-video",
-                url : "",
-                embedcode : ""
-            };
-            break;
-        case 'text': 
-            content = {
-                mimetype : "application/x-ldt-text",
-                markup : "html",
-                text : ""
-            };
-            break;
-        case 'links': 
-            content = {
-                mimetype : "application/x-ldt-links",
-                links : []
-            };
-            break;
-        case 'slideshow': 
-            content = {
-                mimetype : "application/x-ldt-slideshow",
-                slideduration : 1000,
-                autostart : false,
-                images : []
-            };
-            break;
+    //init annotation content data
+    function getContentAnnotationByType(type){
+        var content;
+        switch(type){
+            case 'audio':
+                content = {
+                    mimetype : "application/x-ldt-audio",
+                    url : "",
+                    embedcode : ""
+                };
+                break;
+            case 'video':
+                content = {
+                    mimetype : "application/x-ldt-video",
+                    url : "",
+                    embedcode : ""
+                };
+                break;
+            case 'text': 
+                content = {
+                    mimetype : "application/x-ldt-text",
+                    markup : "html",
+                    text : ""
+                };
+                break;
+            case 'links': 
+                content = {
+                    mimetype : "application/x-ldt-links",
+                    links : []
+                };
+                break;
+            case 'slideshow': 
+                content = {
+                    mimetype : "application/x-ldt-slideshow",
+                    slideduration : 1000,
+                    autostart : false,
+                    images : []
+                };
+                break;
+        }
+        return content;
+    }//getContentAnnotationByType
+
+    //unload
+    $(window).on("beforeunload", onLeave);
+    function onLeave(){
+        if($('.btn-apercu-projet').hasClass('disabled')) return "You have unsaved changes";
     }
-    return content;
-}//getContentAnnotationByType
-
 
 /* Tangles */
     var tangleMsPerPixel = 100,
@@ -1194,8 +1182,7 @@
             }
         });
 
-//chapters
-
+    //chapters
     function updateRenderChapter(chapterData){
         var segment = $('.chapter-segments li#'+chapterData.id),
             wChapterSegmentWrap = $('.chapter-segments').width(),
@@ -1226,6 +1213,7 @@
     function updateChapterDuration(val, chapterBefore, chapterAfter){
 
         if (val<=chapterAfter.end && val>=chapterBefore.begin && chapterAfter.end-val>secMiniChapter*1000 && val-chapterBefore.begin>secMiniChapter*1000) {
+            disabledPreview();
             chapterAfter.setBegin(val);
             chapterBefore.setEnd(val);
 
@@ -1280,6 +1268,7 @@
             spanDuration = tabAnnotation.find('#'+idAnnotation+'-duration');
 
         if(val<max && val>min){
+            disabledPreview();
             if(beginOrEnd == 'begin'){currentAnnotation.setBegin(val);}
             if(beginOrEnd == 'end'){currentAnnotation.setEnd(val);}
 
@@ -1301,20 +1290,18 @@
             currentSlider.slider('values', [currentAnnotation.begin, currentAnnotation.end])
         }
     }
-/* /Tangles */ 
-
-//test
 
-$('.log-annotations').bind('click', function(e){
-    e.preventDefault();
-    console.log(annotations.length + ' annotations', annotations);
-    currentSlider.slider( "values", 0, 55 );
-});
+    //test
+    $('.log-annotations').bind('click', function(e){
+        e.preventDefault();
+        console.log(annotations.length + ' annotations', annotations);
+        currentSlider.slider( "values", 0, 55 );
+    });
 
-$('.log-chapters').bind('click', function(e){
-    e.preventDefault();
-    console.log(chapters.length + ' chapitres',chapters);
-});
+    $('.log-chapters').bind('click', function(e){
+        e.preventDefault();
+        console.log(chapters.length + ' chapitres',chapters);
+    });
 
 });//ready