diff -r 16b482c153fd -r abd04f346dbe integration/js/edition.js
--- a/integration/js/edition.js	Thu May 16 18:03:54 2013 +0200
+++ b/integration/js/edition.js	Fri May 17 12:41:30 2013 +0200
@@ -2,9 +2,12 @@
 
 var global = {
     diaporama : null,
-    idAnnotation : null
+    idAnnotation : null,
+    beginCurrentChapter : 0,
+    mediaDuration : 0,
+    colors : ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#e74c3c']
 },
-chapitres = [],
+chapters = [],
 annotations = [];
 
 myProject.onLoad(function() {
@@ -13,6 +16,8 @@
     
     myMedia = myProject.getCurrentMedia();
     
+    loadChapters();
+
     IriSP.htmlPlayer(
         myMedia,
         $(".main-video"),
@@ -26,9 +31,12 @@
 
     myMedia.on("timeupdate", function(t) {
 
+        //init
+        global.mediaDuration = myMedia.duration.milliseconds;
+
         //curseur chapitre
-        var pos = $(".chapitre-cut-wrap").width() * t / myMedia.duration,
-            wContainer = $('.chapitre-cut-wrap').width(),
+        var wContainer = $('.chapitre-cut-wrap').width() - 1,
+            pos = wContainer * t / myMedia.duration,
             btnCutChapter = $('.btn-cut-chapter'),
             wBtnCutChapter = btnCutChapter.outerWidth();
             
@@ -38,7 +46,25 @@
         }else{
             btnCutChapter.css("left",pos);
         }
-            
+
+        //chapitre edit
+        var formChapter = $('.form-chapter-edit'),
+            inputBeginChapter = formChapter.find('input[name=begin]'),
+            inputDurationChapter = formChapter.find('input[name=duration]'),
+            inputEndChapter = formChapter.find('input[name=end]'),
+            viewBeginChapter = formChapter.find('.begin'),
+            viewDurationChapter = formChapter.find('.duration'),
+            viewEndChapter = formChapter.find('.end'),
+            timeBegin = global.beginCurrentChapter,
+            timeEnd = t.milliseconds,
+            timeDuration = timeEnd - timeBegin;
+
+        inputBeginChapter.val(timeBegin);
+        inputEndChapter.val(timeEnd);
+        inputDurationChapter.val(timeDuration);
+        viewBeginChapter.html(millisecondsToString(timeBegin));
+        viewDurationChapter.html(millisecondsToString(timeDuration));
+        viewEndChapter.html(millisecondsToString(timeEnd));
     });//timeupdate
     
 });//myProject.onLoad
@@ -143,6 +169,7 @@
             var tpl = $(templates).filter('#tpl-chapter-edit').html();
             var tpl = Mustache.render(tpl, viewChapter);
             $('.form-chapter-edit').empty().append(tpl);
+            $('.form-chapter-edit').find('.tag-it').tagit();
         });
     });
     //nouveau chapitre
@@ -150,20 +177,97 @@
         e.preventDefault();
 
         var uniqId = 'id' + (new Date()).getTime();
-        $.get('template.html', function(templates){
-            var viewChapterRow = {
-                    id : uniqId
-                };
-            var tpl = $(templates).filter('#tpl-chapter-row').html();
-            var tpl = Mustache.render(tpl, viewChapterRow);
-            $('.list-chapter-rows-wrap').append(tpl);
-        });
+        
+        var formChapter = $('.form-chapter-edit'),
+            title = formChapter.find('input[name=title]').val(),
+            tags = formChapter.find('input[name=tags]').val(),
+            begin = formChapter.find('input[name=begin]').val(),
+            duration = formChapter.find('input[name=duration]').val(),
+            end = formChapter.find('input[name=end]').val(),
+            beginString = millisecondsToString(begin),
+            durationString = millisecondsToString(duration),
+            endString = millisecondsToString(end),
+            description = formChapter.find('textarea[name=description]').val(),
+            id = uniqId;
+
+        var dataChapter = {
+            title : title,
+            tags : tags,
+            begin : begin,
+            duration : duration,
+            end : end,
+            description : description,
+            beginString : beginString,
+            durationString : durationString,
+            endString : endString,
+            id : id
+        };
+
+        addChapter(dataChapter);
     });
 
-    function addChapter(data){
+    function addChapter(dataChapter){
+        chapters.push(dataChapter);
+
+        //vue liste chapitre
+        $.get('template.html', function(templates){
+            var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
+            tplChapterRow = Mustache.render(tplChapterRow, dataChapter);
+            $('.list-chapter-rows-wrap').append(tplChapterRow);
+
+            updateChapterSegments();
+        });
 
     }
     
+    function updateChapterSegments(){
+        var chapterSegmentWrap = $('.chapter-segments'),
+            wChapterSegmentWrap = chapterSegmentWrap.width();
+        chapterSegmentWrap.empty();
+
+        $.each(chapters, function(k, v){
+            var chapter = v,
+                color = global.colors[k],
+                width = chapter.duration * wChapterSegmentWrap / global.mediaDuration,
+                segment = $('<li>'+chapter.title+'</li>').css({
+                    width : width,
+                    backgroundColor : color
+                }).attr('id', chapter.id);
+            chapterSegmentWrap.append(segment)
+        });
+    }
+
+    function loadChapters(){
+        //nouveau projet, 1 chapitre
+        var uniqId = 'id' + (new Date()).getTime();
+
+        var title = 'chapitre 1',
+            tags = 'tag1,tag2',
+            begin = 0,
+            duration = myMedia.duration.milliseconds,
+            end = myMedia.duration.milliseconds,
+            beginString = millisecondsToString(begin),
+            durationString = millisecondsToString(duration),
+            endString = millisecondsToString(end),
+            description = 'description du chapitre 1',
+            id = uniqId;
+
+        var dataChapter = {
+            title : title,
+            tags : tags,
+            begin : begin,
+            duration : duration,
+            end : end,
+            description : description,
+            beginString : beginString,
+            durationString : durationString,
+            endString : endString,
+            id : id
+        };
+
+        addChapter(dataChapter);
+    }
+
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
         e.preventDefault();
@@ -410,4 +514,6 @@
 
 $('#annotation-tab a:last-child').tab('show');
 
+$(".tag-it").tagit();
+
 });//ready
\ No newline at end of file