# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1369150891 -7200
# Node ID 11a3be0689fc34ad70680183c3fb1791a48b0a74
# Parent  2a3159ee4ed02d70923a91993662c6e8660a2d5f# Parent  64a77e529f23d57839c325e97df15481c6ab9b21
Merge

diff -r 64a77e529f23 -r 11a3be0689fc integration/css/style.css
--- a/integration/css/style.css	Tue May 21 14:54:41 2013 +0200
+++ b/integration/css/style.css	Tue May 21 17:41:31 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,16 +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{ width:50%; background-color: #f1c40f;float: left; list-style: none; line-height: 20px; height: 20px; text-align: center;}
-.chapter-segments li:last-child{background-color: #27ae60;}
-.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{cursor:pointer; 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;}
@@ -80,4 +80,7 @@
 .html-apercu{overflow: auto; margin-top: 10px;}
 .input-image-url{display: none;}
 .timeline-annotation-widget{width: 460px;height: 40px;background-color: #ecf0f1; position: relative;}
-.timeline-annotation-widget .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;}
\ No newline at end of file
+.timeline-annotation-widget .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;}
+ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
+-moz-border-radius: 0px;
+border-radius: 0px;}
\ No newline at end of file
diff -r 64a77e529f23 -r 11a3be0689fc integration/edition.html
--- a/integration/edition.html	Tue May 21 14:54:41 2013 +0200
+++ b/integration/edition.html	Tue May 21 17:41:31 2013 +0200
@@ -66,24 +66,24 @@
 								
 								<div class="span6 chapitre-cut-wrap">
 									<div class="indicateur-chapter"></div>
-									<ul class="chapter-segments">
-										<li>chapitre 1</li>
-										<li>chapitre azerty</li>
-									</ul>
+									<ul class="chapter-segments"></ul>
 									
 									<a href="#" class="btn btn-primary btn-cut-chapter"><i class="icon-flag"></i> Nouveau chapitre</a>
 								</div>
 							</div>
 							<div class="chapter-widget-info">
+								<!--
 								<form action="#" class="form-chapter-edit">
 									<div class="row">
 										<div class="span3 text-right">
-											<input type="text">
-											<input type="text" class="tag-it">
+											<input name="title" type="text">
+											<input name="tags" type="text" class="tag-it">
 										</div>
 										<div class="span3">
+											<input type="hidden" name="begin">
+											<input type="hidden" name="duration">
+											<input type="hidden" name="end">
 											<table class="table text-right">
-												
 												<thead>
 													<tr>
 														<th class="span1">Début</th>
@@ -93,9 +93,9 @@
 												</thead>
 												<tbody>
 													<tr>
-														<td class="span1">4:20</td>
-														<td class="span1">4:20</td>
-														<td class="span1">4:20</td>
+														<td class="span1 begin">4:20</td>
+														<td class="span1 duration">4:20</td>
+														<td class="span1 end">4:20</td>
 													</tr>
 												</tbody>
 											</table>
@@ -103,10 +103,11 @@
 									</div>
 									<div class="row">
 										<div class="span6 text-center">
-											<textarea class="" name="" id=""></textarea>
+											<textarea class="" name="description" id=""></textarea>
 										</div>
 									</div>
 								</form>
+							-->
 							</div>
 							<div class="list-chapter-wrap">
 								<h4><i class="icon-flag"></i> Liste des chapitres</h4>
@@ -122,6 +123,7 @@
 										</tr>
 									</thead>
 									<tbody class="list-chapter-rows-wrap">
+										<!--
 										<tr id="row-list-chapter-id1">
 											<td>Titre d'un chapitre</td>
 											<td>Tags, Tags, Tags</td>
@@ -141,6 +143,7 @@
 												</table>
 											</td>
 										</tr>
+									-->
 									</tbody>
 								</table>
 							</div>
@@ -445,6 +448,7 @@
     <script src="js/metadataplayer-core.js"></script>
     <script src="js/ldt-serializer.js"></script>
 	<script src="js/common.js"></script>
+	<script src="js/tangle.js"></script>
     <script src="js/edition.js"></script>
     <script>
     
diff -r 64a77e529f23 -r 11a3be0689fc integration/js/common.js
--- a/integration/js/common.js	Tue May 21 14:54:41 2013 +0200
+++ b/integration/js/common.js	Tue May 21 17:41:31 2013 +0200
@@ -44,11 +44,15 @@
         var titleMedia = $(this).attr('data-title'),
             textModal = $('<p>Êtes-vous sûr de vouloir supprimer <strong>'+titleMedia+'</strong> ?</p>'),
             eltDelete = $(this).attr('href');
-        $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete);
+        $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete).focus();
         $("#modal-confirm .modal-body").empty().append(textModal); 
         $("#modal-confirm").modal('show');
     });
 
+    $("#modal-confirm").on('shown', function() {
+        $("#modal-confirm #btn-delete-modal").focus()
+    });
+    
     $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
         e.preventDefault();
         var idEltDelete = $(this).attr('data-id-elt-delete');
diff -r 64a77e529f23 -r 11a3be0689fc integration/js/edition.js
--- a/integration/js/edition.js	Tue May 21 14:54:41 2013 +0200
+++ b/integration/js/edition.js	Tue May 21 17:41:31 2013 +0200
@@ -2,9 +2,14 @@
 
 var global = {
     diaporama : null,
-    idAnnotation : null
+    idAnnotation : null,
+    colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',  
+    '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', 
+    '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50',
+    '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d']
 },
-chapitres = [],
+currentChapter = null,
+chapters = [],
 annotations = [];
 
 myProject.onLoad(function() {
@@ -13,6 +18,8 @@
     
     myMedia = myProject.getCurrentMedia();
     
+    loadChapters();
+
     IriSP.htmlPlayer(
         myMedia,
         $(".main-video"),
@@ -27,8 +34,8 @@
     myMedia.on("timeupdate", function(t) {
 
         //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 +45,27 @@
         }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 = 0,
+            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
@@ -55,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){
@@ -82,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
@@ -131,39 +160,200 @@
     });
 
 //--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-segments').on('click', 'li', function(){
+        var idChapter = $(this).attr('id');
+        loadFormChapter(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);
+            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();
-        $.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 title = 'New',
+            tags = 'tag',
+            begin = myMedia.currentTime.milliseconds,
+            end = organizeNewChapter(begin),
+            duration = end - begin,
+            description = '',
+            id = uniqId;
+
+        var dataChapter = {
+            title : title,
+            tags : tags,
+            begin : begin,
+            duration : duration,
+            end : end,
+            description : description,
+            color : global.colors[chapters.length],
+            id : uniqId
+        };
+      
+        chapters.push(dataChapter);
+        renderChapter();
+        loadFormChapter(id);
+    });
+    
+    function organizeNewChapter(beginNew){
+
+        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;
+            }
         });
-    });
-
-    function addChapter(data){
-
+        return returnEnd;
     }
     
+    function renderChapter(){
+        var chapterSegmentWrap = $('.chapter-segments'),
+            wChapterSegmentWrap = chapterSegmentWrap.width(),
+            chapterList = $('.list-chapter-rows-wrap');
+
+        chapters = _.sortBy(chapters, function(c){
+            return c.begin;
+        });
+
+        chapterSegmentWrap.empty();
+        chapterList.empty();
+
+        $.each(chapters, function(k, v){
+
+            //segments
+                color = global.colors[k],
+                width = Math.floor(v.duration * wChapterSegmentWrap / myMedia.duration.milliseconds),
+                segment = $('<li>'+v.title+'</li>').css({
+                    width : width,
+                    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);
+
+            });
+        });
+    }
+
+//init
+    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,
+            description = 'description du chapitre 1',
+            id = uniqId;
+
+        var dataChapter = {
+            title : title,
+            tags : tags,
+            begin : begin,
+            duration : duration,
+            end : end,
+            description : description,
+            color : global.colors[chapters.length],
+            id : id
+        };
+
+        chapters.push(dataChapter);
+        renderChapter();
+    }
+
+
+
+
+
     //edit annotation
     $('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
         e.preventDefault();
@@ -410,4 +600,6 @@
 
 $('#annotation-tab a:last-child').tab('show');
 
+$(".tag-it").tagit();
+
 });//ready
\ No newline at end of file
diff -r 64a77e529f23 -r 11a3be0689fc integration/template.html
--- a/integration/template.html	Tue May 21 14:54:41 2013 +0200
+++ b/integration/template.html	Tue May 21 17:41:31 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,20 +183,20 @@
 </script>
 
 <script id="tpl-chapter-row" type="text/html">
-<tr id="row-list-chapter-{{id}}">
-	<td>Titre chapitre</td>
-	<td>Tags, Tags, Tags</td>
-	<td>79:55</td>
-	<td>79:55</td>
-	<td>79:55</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>
 	<td>
 		<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,34 +205,40 @@
 </script>
 
 <script id="tpl-chapter-edit" type="text/html">
-<div class="row">
-	<div class="span3 text-right">
-		<input type="text" value="{{titre}}">
-		<input type="text" 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 time-tangle">{{beginString}}</td>
+						<td class="span1 duration">{{durationString}}</td>
+						<td class="span1 end">{{endString}}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 	</div>
-	<div class="span3">
-		<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">4:20</td>
-					<td class="span1">4:20</td>
-					<td class="span1">4:20</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 name="">{{description}}</textarea>
-	</div>
-</div>
+</form>
 </script>
\ No newline at end of file