# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1369147205 -7200
# Node ID 0e02c3a284918872e3f923f5704d107219a9cf30
# Parent  abd04f346dbec021d995d9c0ae9823807dbe8b14
chapter widget

diff -r abd04f346dbe -r 0e02c3a28491 integration/css/style.css
--- a/integration/css/style.css	Fri May 17 12:41:30 2013 +0200
+++ b/integration/css/style.css	Tue May 21 16:40:05 2013 +0200
@@ -36,7 +36,7 @@
 .project-title-editor{line-height: 28px; }
 .project-title-editor-form{margin: 0;}
 .project-action a:last-child{margin-right: 20px;}
-.chapter-widget-info{background-color:#e74c3c; padding: 10px 0; margin-bottom: 20px;}
+.chapter-widget-info{}
 .chapter-widget form{ margin: 0;}
 .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;
@@ -44,15 +44,16 @@
 -moz-transition: height .3s ease;
 transition: height .3s ease;
 }
+.form-chapter-edit{padding-top: 10px;}
 .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: 60px;}
-.btn-cut-chapter{position: absolute;bottom: 0;left: 11px;}
-.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #e74c3c; position: absolute;}
-.chapter-segments {width: 100%; height: 20px; background-color: #856; margin: 0;}
-.chapter-segments li{float: left; list-style: none; line-height: 20px; height: 20px; text-align: center;}
-.list-chapter-wrap{background-color: #3498db;}
+.chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;}
+.btn-cut-chapter{position: absolute;top: 20px;left: 11px;}
+.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
+.chapter-segments {width: 100%; height: 20px; margin: 0;}
+.chapter-segments li{float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
+.list-chapter-wrap{}
 .list-chapter-wrap h4{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;}
 .add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0; background-color: #1abc9c;}
 .add-annotation-wrap strong{padding-left: 10px;}
diff -r abd04f346dbe -r 0e02c3a28491 integration/edition.html
--- a/integration/edition.html	Fri May 17 12:41:30 2013 +0200
+++ b/integration/edition.html	Tue May 21 16:40:05 2013 +0200
@@ -72,6 +72,7 @@
 								</div>
 							</div>
 							<div class="chapter-widget-info">
+								<!--
 								<form action="#" class="form-chapter-edit">
 									<div class="row">
 										<div class="span3 text-right">
@@ -106,6 +107,7 @@
 										</div>
 									</div>
 								</form>
+							-->
 							</div>
 							<div class="list-chapter-wrap">
 								<h4><i class="icon-flag"></i> Liste des chapitres</h4>
diff -r abd04f346dbe -r 0e02c3a28491 integration/js/edition.js
--- a/integration/js/edition.js	Fri May 17 12:41:30 2013 +0200
+++ b/integration/js/edition.js	Tue May 21 16:40:05 2013 +0200
@@ -3,10 +3,12 @@
 var global = {
     diaporama : null,
     idAnnotation : null,
-    beginCurrentChapter : 0,
-    mediaDuration : 0,
-    colors : ['#1abc9c', '#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#e74c3c']
+    colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',  
+    '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', 
+    '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50',
+    '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d']
 },
+currentChapter = null,
 chapters = [],
 annotations = [];
 
@@ -31,9 +33,6 @@
 
     myMedia.on("timeupdate", function(t) {
 
-        //init
-        global.mediaDuration = myMedia.duration.milliseconds;
-
         //curseur chapitre
         var wContainer = $('.chapitre-cut-wrap').width() - 1,
             pos = wContainer * t / myMedia.duration,
@@ -47,6 +46,7 @@
             btnCutChapter.css("left",pos);
         }
 
+        /*
         //chapitre edit
         var formChapter = $('.form-chapter-edit'),
             inputBeginChapter = formChapter.find('input[name=begin]'),
@@ -55,7 +55,7 @@
             viewBeginChapter = formChapter.find('.begin'),
             viewDurationChapter = formChapter.find('.duration'),
             viewEndChapter = formChapter.find('.end'),
-            timeBegin = global.beginCurrentChapter,
+            timeBegin = 0,
             timeEnd = t.milliseconds,
             timeDuration = timeEnd - timeBegin;
 
@@ -65,6 +65,7 @@
         viewBeginChapter.html(millisecondsToString(timeBegin));
         viewDurationChapter.html(millisecondsToString(timeDuration));
         viewEndChapter.html(millisecondsToString(timeEnd));
+        */
     });//timeupdate
     
 });//myProject.onLoad
@@ -81,13 +82,15 @@
         if(idAnnotation !== undefined){
             global.idAnnotation = idAnnotation;
         }
-    })
+    });
+
 //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();
     });
+
 //bibliotheque
     //video
     $('.popup').on('click', '.bibliotheque-video a', function(e){
@@ -108,16 +111,16 @@
         $('.popup').modal('hide');
     });
 
-    $(document).on('click','.btn-delete', function(e){
+    $(document).on('click','.btn-delete-annotation', function(e){
         e.preventDefault();
         //si c'est une annotation et que la tab est ouverte, on la ferme
         var type = $(this).attr('data-type');
-        if(type == 'annotation'){
-            var idAnnotation = $(this).attr('data-id');
-            $('a[href=#annotation-'+idAnnotation+']').closest('li').remove();
-            $('.tab-content #annotation'+idAnnotation).remove();
-            $('#tab-list-annotation').tab('show');
-        }
+     
+        var idAnnotation = $(this).attr('data-id');
+        $('a[href=#annotation-'+idAnnotation+']').closest('li').remove();
+        $('.tab-content #annotation'+idAnnotation).remove();
+        $('#tab-list-annotation').tab('show');
+        
     });
 
     //confirmation suppression
@@ -157,37 +160,92 @@
     });
 
 //--chapter
-    $('.list-chapter-wrap').on('click', '.edit-chapter', function(e){
+
+//edit
+    $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
         e.preventDefault();
-        var viewChapter = {
-            titre : 'titre du chapitre',
-            tags : 'tag 1, tag 2, tag 3',
-            description : 'lorem ipsum'
+        var idChapter = $(this).attr('data-chapter-id');
+        loadFormChapter(idChapter);
+        currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
+    });
+
+
+    $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
+        var name = $(this).attr('name'),
+            value = $(this).val();
+        currentChapter[name] = value;
+        if(name == 'title'){
+            var idChapter = $(this).parents('form').attr('data-chapter-id');
+            $('.chapter-segments').find('#'+idChapter).text(value);
+            $('#row-list-chapter-'+idChapter).find('td:first').text(value);
         }
-        
+    });
+
+    function onTagItChange(e, ui) {
+        var idChapter = $(this).parents('form').attr('data-chapter-id'),
+            value = $('input[name=tags]').val();
+        currentChapter.tags = value;
+        $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value);
+    }
+
+    var tagitParam = {
+        afterTagRemoved : onTagItChange,
+        afterTagAdded : onTagItChange
+    }
+
+    function loadFormChapter(idChapter){
+        var chapterData = _.find(chapters, function(c){ return c.id == idChapter; }),
+            chapterWrap = $('.chapter-widget-info');
+
+        currentChapter = chapterData;
+
         $.get('template.html', function(templates){
             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();
+            tpl = Mustache.render(tpl, chapterData);
+            chapterWrap.empty().append(tpl);
+            chapterWrap.find('.tag-it').tagit(tagitParam);
         });
-    });
-    //nouveau chapitre
+    }
+
+
+//supprimer
+$('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){
+    e.preventDefault();
+
+    if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}
+    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.begin = 0;
+        chapterModify.duration = chapterModify.end;
+    }else{
+        chapterModify = chapters[indexChapter-1];
+        chapterModify.end = chapter.end;
+        chapterModify.duration = chapterModify.end - chapterModify.begin;
+    }
+    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();
+    }
+});
+
+//nouveau chapitre
     $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
         e.preventDefault();
 
         var uniqId = 'id' + (new Date()).getTime();
-        
-        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(),
+
+        var title = 'New',
+            tags = 'tag',
+            begin = myMedia.currentTime.milliseconds,
+            end = organizeNewChapter(begin),
+            duration = end - begin,
+            description = '',
             id = uniqId;
 
         var dataChapter = {
@@ -197,48 +255,72 @@
             duration : duration,
             end : end,
             description : description,
-            beginString : beginString,
-            durationString : durationString,
-            endString : endString,
-            id : id
+            color : global.colors[chapters.length],
+            id : uniqId
         };
-
-        addChapter(dataChapter);
+      
+        chapters.push(dataChapter);
+        renderChapter();
+        loadFormChapter(id);
     });
+    
+    function organizeNewChapter(beginNew){
 
-    function addChapter(dataChapter){
-        chapters.push(dataChapter);
+        var returnEnd;
+        $.each(chapters, function(k, v){
+            var begin = v.begin,
+                end = v.end;
+            if(beginNew>=begin && beginNew<=end){
+                v.end = beginNew;
+                v.duration = v.end - v.begin;
+                returnEnd = end;
+            }
+        });
+        return returnEnd;
+    }
+    
+    function renderChapter(){
+        var chapterSegmentWrap = $('.chapter-segments'),
+            wChapterSegmentWrap = chapterSegmentWrap.width(),
+            chapterList = $('.list-chapter-rows-wrap');
 
-        //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();
+        chapters = _.sortBy(chapters, function(c){
+            return c.begin;
         });
 
-    }
-    
-    function updateChapterSegments(){
-        var chapterSegmentWrap = $('.chapter-segments'),
-            wChapterSegmentWrap = chapterSegmentWrap.width();
         chapterSegmentWrap.empty();
+        chapterList.empty();
 
         $.each(chapters, function(k, v){
-            var chapter = v,
+
+            //segments
                 color = global.colors[k],
-                width = chapter.duration * wChapterSegmentWrap / global.mediaDuration,
-                segment = $('<li>'+chapter.title+'</li>').css({
+                width = Math.floor(v.duration * wChapterSegmentWrap / myMedia.duration.milliseconds),
+                segment = $('<li>'+v.title+'</li>').css({
                     width : width,
-                    backgroundColor : color
-                }).attr('id', chapter.id);
-            chapterSegmentWrap.append(segment)
+                    backgroundColor : v.color
+                }).attr('id', v.id);
+    
+            chapterSegmentWrap.append(segment);
+ 
+            //liste
+            $.get('template.html', function(templates){
+
+                v.beginString = millisecondsToString(v.begin);
+                v.durationString = millisecondsToString(v.duration);
+                v.endString = millisecondsToString(v.end);
+             
+                var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
+                tplChapterRow = Mustache.render(tplChapterRow, v);
+                chapterList.append(tplChapterRow);
+
+            });
         });
     }
 
-    function loadChapters(){
-        //nouveau projet, 1 chapitre
+//init
+    function loadChapters(){//nouveau projet, 1 chapitre
+
         var uniqId = 'id' + (new Date()).getTime();
 
         var title = 'chapitre 1',
@@ -246,9 +328,6 @@
             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;
 
@@ -259,15 +338,18 @@
             duration : duration,
             end : end,
             description : description,
-            beginString : beginString,
-            durationString : durationString,
-            endString : endString,
+            color : global.colors[chapters.length],
             id : id
         };
 
-        addChapter(dataChapter);
+        chapters.push(dataChapter);
+        renderChapter();
     }
 
+
+
+
+
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
         e.preventDefault();
diff -r abd04f346dbe -r 0e02c3a28491 integration/template.html
--- a/integration/template.html	Fri May 17 12:41:30 2013 +0200
+++ b/integration/template.html	Tue May 21 16:40:05 2013 +0200
@@ -175,7 +175,7 @@
 	<td>
 		<a href="#" data-id="annotation-{{id}}" class="btn btn-edit-annotation" data-type="video">
 			<i class="icon-pencil"></i></a>
-		<a data-id="annotation-{{id}}" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-{{id}}" class="btn btn-delete">
+		<a data-id="annotation-{{id}}" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-{{id}}" class="btn btn-delete btn-delete-annotation">
 			<i class="icon-trash delete-annotation"></i>
 		</a>
 	</td>
@@ -183,9 +183,9 @@
 </script>
 
 <script id="tpl-chapter-row" type="text/html">
-<tr id="row-list-chapter-{{id}}">
-	<td>{{title}}</td>
-	<td>{{tags}}</td>
+<tr id="row-list-chapter-{{id}}" style="background-color : {{color}};">
+	<td class="list-chapter-title">{{title}}</td>
+	<td class="list-chapter-tags">{{tags}}</td>
 	<td>{{beginString}}</td>
 	<td>{{durationString}}</td>
 	<td>{{endString}}</td>
@@ -193,10 +193,10 @@
 		<table>
 			<tr>
 				<td>
-					<a href="#" class="btn edit-chapter"><i class="icon-pencil"></i></a>
+					<a href="#" class="btn btn-edit-chapter" data-chapter-id="{{id}}"><i class="icon-pencil"></i></a>
 				</td>
 				<td>
-					<a data-title="Chapitre 1" href="#row-list-chapter-{{id}}" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
+					<a data-title="Chapitre 1" data-chapter-id="{{id}}" href="#row-list-chapter-{{id}}" class="btn btn-delete-chapter"><i class="icon-trash delete-annotation"></i></a>
 				</td>
 			</tr>
 		</table>
@@ -205,36 +205,40 @@
 </script>
 
 <script id="tpl-chapter-edit" type="text/html">
-<div class="row">
-	<div class="span3 text-right">
-		<input name="title" type="text" value="{{title}}">
-		<input name="tags" type="text" class="tag-it" value="{{tags}}">
+<form data-chapter-id="{{id}}" id="form-chapter-edit-{{id}}" action="#" class="form-chapter-edit" style="background-color:{{color}}">
+	<div class="row">
+		<div class="span3 text-right">
+			<input name="title" type="text" value="{{title}}">
+			<input name="tags" type="text" class="tag-it" value="{{tags}}">
+		</div>
+		<div class="span3">
+		<!--
+			<input type="hidden" name="begin" value="{{begin}}">
+			<input type="hidden" name="duration" value="{{duration}}">
+			<input type="hidden" name="end" value="{{end}}">
+		-->
+			<table class="table text-right">
+				<thead>
+					<tr>
+						<th class="span1">Début</th>
+						<th class="span1">Durée</th>
+						<th class="span1">Fin</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td class="span1 begin">{{beginString}}</td>
+						<td class="span1 duration">{{durationString}}</td>
+						<td class="span1 end">{{endString}}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 	</div>
-	<div class="span3">
-		<input type="hidden" name="begin" value="{{begin}}">
-		<input type="hidden" name="duration" value="{{duration}}">
-		<input type="hidden" name="end" value="{{end}}">
-		<table class="table text-right">
-			<thead>
-				<tr>
-					<th class="span1">Début</th>
-					<th class="span1">Durée</th>
-					<th class="span1">Fin</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td class="span1 begin"></td>
-					<td class="span1 duration"></td>
-					<td class="span1 end"></td>
-				</tr>
-			</tbody>
-		</table>
+	<div class="row">
+		<div class="span6 text-center">
+			<textarea class="" name="description" id="">{{description}}</textarea>
+		</div>
 	</div>
-</div>
-<div class="row">
-	<div class="span6 text-center">
-		<textarea class="" name="description" id="">{{description}}</textarea>
-	</div>
-</div>
+</form>
 </script>
\ No newline at end of file