diff -r 1c163781996b -r 8645721dd9fc integration/js/edition.js
--- a/integration/js/edition.js	Fri Jun 07 17:56:50 2013 +0200
+++ b/integration/js/edition.js	Mon Jun 10 13:11:23 2013 +0200
@@ -1,6 +1,7 @@
 var myMedia = undefined,
     currentChapter = undefined,
     currentAnnotation = undefined,
+    currentSlider = undefined,
     secMiniChapter = 10;
 
 $(function(){
@@ -224,7 +225,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);
@@ -257,7 +258,7 @@
     });
 
     $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
-        disabledPreview();
+        
 
         var name = $(this).attr('name'),
             value = $(this).val();
@@ -274,7 +275,7 @@
 
     function loadFormChapter(idChapter){
 
-        disabledPreview();
+        
         
 
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
@@ -325,7 +326,7 @@
 })
 
 function deleteChapter(idChapter){
-    disabledPreview();
+    
     $("#modal-confirm").modal('hide');
     var chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
         indexChapter = _.indexOf(chapters, chapter),
@@ -408,7 +409,7 @@
     }
     
     function renderChapter(){
-        disabledPreview();
+        
 
         var chapterSegmentWrap = $('.chapter-segments'),
             wChapterSegmentWrap = chapterSegmentWrap.width(),
@@ -469,7 +470,7 @@
     }
 
     function renderAnnotation(){
-        disabledPreview();
+        
 
         var timeline = $('.timeline-annotations'),
             wTimeline = timeline.width(),
@@ -542,7 +543,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){
@@ -554,7 +555,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;
@@ -578,7 +579,7 @@
     });
 
     function deleteAnnotation(idAnnotation){
-        disabledPreview();
+        
         $("#modal-confirm").modal('hide');
         annotations.removeId(idAnnotation);
         myProject.getAnnotations().removeId(idAnnotation, true);
@@ -631,6 +632,7 @@
             var output = Mustache.render(tplHead, dataView);
             $(tabContent).append(output);
             $(tabContent).find(".slider-duration").slider(configSlider(dataView));
+            currentSlider = $(tabContent).find(".slider-duration");
             $(tabContent).find(".ui-slider-range.ui-widget-header.ui-corner-all").css('background', dataView.color);
             $(tabContent).find('.tag-it').tagit(tagitParam);
             //type
@@ -734,6 +736,7 @@
     $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) {
         var idAnnotation = $(e.target).attr('data-id');
         currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+        currentSlider = $('#tab-annotation-'+idAnnotation).find(".slider-duration");
         showCurrentAnnotationInTimeline(idAnnotation);
     });
 
@@ -960,9 +963,23 @@
     }
 });
 
+$('.alert').bind('close', function (e) {
+    e.preventDefault();
+    $(this).hide();
+});
+
+function showAlertByClassName(className){
+    $('.alert').hide();
+    $('.'+className).show();
+}
 //save project
+
 $('.btn-save-project').bind('click', function(e){
-    $('.btn-apercu-projet').removeClass('disabled');
+    e.preventDefault();
+    if($(this).hasClass('disabled')) return;
+
+    showAlertByClassName('save-load');
+    $(this).addClass('disabled');
 
     console.log(myProject.serialize());
 
@@ -975,13 +992,18 @@
             "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);
 
         },
         error: function(jqXHR, textStatus, errorThrown){
-            alert(gettext("Server error\nYour hashcut couldn't be published"));
+            showAlertByClassName('save-error');
+            $(this).removeClass('disabled');
+            //alert(gettext("Server error\nYour hashcut couldn't be published"));
         }
     });
 
@@ -1009,6 +1031,7 @@
 }
 
 var tagitParam = {
+    allowSpaces: true,
     afterTagRemoved : onTagItChange,
     afterTagAdded : onTagItChange
 }
@@ -1056,9 +1079,11 @@
                 width = Math.floor(data.getDuration() * wTimeline / myMedia.duration),
                 left = Math.floor(data.begin * wTimeline / myMedia.duration);
 
-            $( '#'+ idSlider +'-begin' ).html(data.begin.toString());
+            $( '#'+ idSlider +'-begin span' ).html(data.begin.toString());
+            $( '#'+ idSlider +'-begin span' ).attr('data-milliseconds', data.begin);
             $( '#'+ idSlider +'-duration' ).html(data.getDuration().toString());
-            $( '#'+ idSlider +'-end' ).html(data.end.toString());
+            $( '#'+ idSlider +'-end span' ).html(data.end.toString());
+            $( '#'+ idSlider +'-end span' ).attr('data-milliseconds', data.end);
 
             annotationTimeline.css({
                 left : left,
@@ -1121,13 +1146,169 @@
 }//getContentAnnotationByType
 
 
+/* Tangles */
+    var tangleMsPerPixel = 100,
+        activeTangle,
+        tangleStartX,
+        tangleStartVal,
+        tangleHasMoved;
+    
+    $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+        return false;
+    });
 
+    $('.tab-content').on('mousedown', '.time-tangle', function(evt){
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+        return false;
+    });
+
+    $(document)
+        .mousemove(function(evt) {
+            if (activeTangle) {
+                tangleHasMoved = true;
+                var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
+                activeTangle.trigger("valuechange", newval);
+                return false;
+            }
+        })
+        .mouseup(function() {
+
+            if (activeTangle) {
+                if(activeTangle.hasClass('slider-tangle')){
+                    renderAnnotation();
+                    refreshAnnotationDisplay(myMedia.getCurrentTime());
+                }
+                $(".time-tangle").removeClass("active deactivate");
+                activeTangle = undefined;
+            }
+        });
+
+//chapters
+
+    function updateRenderChapter(chapterData){
+        var segment = $('.chapter-segments li#'+chapterData.id),
+            wChapterSegmentWrap = $('.chapter-segments').width(),
+            wSegmentNew = chapterData.getDuration() * wChapterSegmentWrap / myMedia.duration,
+            lSegmentNew = chapterData.begin * wChapterSegmentWrap / myMedia.duration,
+            row = $('#row-list-chapter-'+chapterData.id),
+            form = ($('#form-chapter-edit-'+chapterData.id).length) ? $('#form-chapter-edit-'+chapterData.id) : false;
+
+        segment.css({
+            width : wSegmentNew,
+            left : lSegmentNew
+        });
+
+        row.find('.begin').text(chapterData.begin);
+        console.log(chapterData.getDuration())
+        row.find('.duration').text(chapterData.getDuration());
+        row.find('.end').text(chapterData.end);
+
+        if(form){
+            form.find('.begin').text(chapterData.begin);
+            form.find('.begin').attr('data-milliseconds',chapterData.begin);
+            form.find('.duration').text(chapterData.getDuration());
+            form.find('.end').text(chapterData.end);
+            form.find('.end').attr('data-milliseconds',chapterData.end);
+        }
+    }
+
+    function updateChapterDuration(val, chapterBefore, chapterAfter){
+
+        if (val<=chapterAfter.end && val>=chapterBefore.begin && chapterAfter.end-val>secMiniChapter*1000 && val-chapterBefore.begin>secMiniChapter*1000) {
+            chapterAfter.setBegin(val);
+            chapterBefore.setEnd(val);
+
+            updateRenderChapter(chapterAfter);
+            updateRenderChapter(chapterBefore);
+        }
+    }
+
+    $('.chapter-widget-info').on('valuechange', '.tangle-start', function(evt, val){
+        var indexChapter = _.indexOf(chapters, currentChapter);
+        if(indexChapter == 0 || chapters.length<=1) return;
+        
+        var chapterBefore = chapters[indexChapter-1],
+            chapterAfter = currentChapter;
+
+        updateChapterDuration(val, chapterBefore, chapterAfter);
+    });
+
+    $('.chapter-widget-info').on('valuechange', '.tangle-end', function(evt, val){
+        var indexChapter = _.indexOf(chapters, currentChapter);
+        if(indexChapter == chapters.length-1 || chapters.length<=1) return;
+        
+        var chapterAfter = chapters[indexChapter+1],
+            chapterBefore = currentChapter;
+
+            updateChapterDuration(val, chapterBefore, chapterAfter);
+    });
+
+//annotations
+
+    $('.tab-content').on('valuechange', '.tangle-start', function(evt, val){
+        var max = currentSlider.slider('values')[1],
+            min = 0,
+            beginOrEnd = 'begin';
+
+        updateAnnotationDuration(val, min, max, beginOrEnd);
+    });
+
+    $('.tab-content').on('valuechange', '.tangle-end', function(evt, val){
+        var max = myMedia.duration,
+            min = currentSlider.slider('values')[0],
+            beginOrEnd = 'end';
+
+        updateAnnotationDuration(val, min, max, beginOrEnd);
+    });
+
+    function updateAnnotationDuration(val, min, max, beginOrEnd){
+        var idAnnotation = currentAnnotation.id,
+            tabAnnotation = $('#tab-annotation-'+idAnnotation),
+            spanTangleStart = tabAnnotation.find('.tangle-start'),
+            spanTangleEnd = tabAnnotation.find('.tangle-end'),
+            spanDuration = tabAnnotation.find('#'+idAnnotation+'-duration');
+
+        if(val<max && val>min){
+            if(beginOrEnd == 'begin'){currentAnnotation.setBegin(val);}
+            if(beginOrEnd == 'end'){currentAnnotation.setEnd(val);}
+
+            spanTangleStart.html(currentAnnotation.begin.toString());
+            spanTangleStart.attr('data-milliseconds', currentAnnotation.begin);
+            spanDuration.html(currentAnnotation.getDuration().toString());
+            spanTangleEnd.html(currentAnnotation.end.toString());
+            spanTangleEnd.attr('data-milliseconds', currentAnnotation.end);
+
+            var wTimeline = $('.timeline-annotations').width(),
+            annotationTimeline = $('#annotation-timeline-'+ idAnnotation),
+            width = Math.floor(currentAnnotation.getDuration() * wTimeline / myMedia.duration),
+            left = Math.floor(currentAnnotation.begin * wTimeline / myMedia.duration);
+
+            annotationTimeline.css({
+                left : left,
+                width :width
+            });
+            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 );
 });
 
 $('.log-chapters').bind('click', function(e){