# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1370597540 -7200
# Node ID 79c19e74a1212a9d655a290546a56bdf5a4dc7fa
# Parent  69d52a7b1b8abd2fdf96ebe34ff6fbd971e88d43# Parent  14b9fc4a4a3dc77efcb03137584a7e3d1808f7a9
Merge

diff -r 14b9fc4a4a3d -r 79c19e74a121 integration/css/style.css
--- a/integration/css/style.css	Thu Jun 06 18:45:29 2013 +0200
+++ b/integration/css/style.css	Fri Jun 07 11:32:20 2013 +0200
@@ -43,9 +43,9 @@
 .project-title-editor-form{margin: 0;}
 .project-action a:last-child{margin-right: 20px;}
 .chapter-widget-info{margin-bottom: 20px;}
-.chapter-widget form{ margin: 0;}
+.chapter-widget form{ margin: 0; padding-bottom: 10px;}
 #list-annotations{ background-color: #fff;}
-.form-info-general-annotation{ border-bottom: 1px solid #bdc3c7;}
+.form-info-general-annotation{ }
 .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;-webkit-transition: height .3s ease;-moz-transition: height .3s ease;transition: height .3s ease;}
 .form-chapter-edit{}
@@ -92,7 +92,8 @@
 .timeline-annotations-wrap{position: relative;background-color: #202020;}
 .timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding-top: 4px;}
 .timeline-annotations li{display: block; width: 460px;height: 12px; position: relative; padding-bottom: 4px;}
-.timeline-annotations .annotation{ color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation{cursor: pointer; display:block; text-decoration:none; color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation span{display: none;}
 ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;}
@@ -120,6 +121,7 @@
 .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;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
diff -r 14b9fc4a4a3d -r 79c19e74a121 integration/edition.html
--- a/integration/edition.html	Thu Jun 06 18:45:29 2013 +0200
+++ b/integration/edition.html	Fri Jun 07 11:32:20 2013 +0200
@@ -337,7 +337,7 @@
 								<div class="edit-annotation-title row">
 									<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
 									<span class="span3">
-										Ajouter une vidéo 
+										<span class="label-add-video">Ajouter une vidéo </span> 
 										<a data-type-media="video" data-id="annotation-azerty" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html"><i class="icon-plus"></i></a>
 									</span>
 								</div>
@@ -604,7 +604,8 @@
 <div class="edit-annotation-title row">
 	<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
 	<span class="span3">
-		Ajouter une vidéo 
+		<span class="label-add-video">Ajouter une vidéo</span>
+		<span class="label-modify-video">Modifier la vidéo</span> 
 		<a data-id="annotation-{{id}}" data-type-media="video" data-title="Ajouter une vidéo" class="btn btn-success open-modal" href="modal-bibliotheque-video.html" data-hide-add-new><i class="icon-plus"></i></a>
 	</span>
 </div>
@@ -841,8 +842,24 @@
 			<textarea class="" name="description" id="">{{description}}</textarea>
 		</div>
 	</div>
+	<div class="row">
+		<div class="span6 text-right">
+			<a class="btn btn-danger btn-delete btn-delete-annotation" data-title="{{title}}" data-id="{{id}}" data-no-render>
+				<i class="icon-trash"></i> Delete
+			</a>
+			<a class="btn btn-primary btn-save-annotation" data-id="{{id}}">
+				<i class="icon-ok"></i> Ok
+			</a>
+		</div>
+	</div>
 </form>
 </script>	
+
+<script id="tpl-annotation-in-timeline" type="text/html">
+<a style="left:{{left}}px; width:{{width}}px; background-color:{{color}};" data-id="{{id}}" id="annotation-timeline-{{id}}" class="annotation">
+	<span><i class="icon-pencil"></i> édition en cours</span>
+</a>
+</script>	
 </div><!-- /#templates -->
 
 	<script src="lib/jquery-1.9.1.min.js"></script>
diff -r 14b9fc4a4a3d -r 79c19e74a121 integration/js/edition.js
--- a/integration/js/edition.js	Thu Jun 06 18:45:29 2013 +0200
+++ b/integration/js/edition.js	Fri Jun 07 11:32:20 2013 +0200
@@ -26,8 +26,10 @@
 
 $('.timeline-annotations').on('click', '.annotation', function(e){
     e.preventDefault();
-
-    myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+    var idAnnotation = $(this).attr('data-id'),
+        annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
+    myMedia.setCurrentTime(annotation.begin);
+    openTab(annotation.type, annotation);
 });
 
 myProject.onLoad(function() {
@@ -156,8 +158,8 @@
 }
 
 function showCurrentAnnotationInTimeline(idAnnotation){
-    $('.timeline-annotations .annotation').empty();
-    $('#annotation-timeline-'+idAnnotation).html('<i class="icon-pencil"></i> '+textCurrentAnnotationEditT);
+    $('.timeline-annotations .annotation span').hide();
+    $('#annotation-timeline-'+idAnnotation+' span').show();
 }
 //display annotation view
 $('.list-current-annotations').on('click', 'a', function(e){
@@ -441,14 +443,24 @@
             //timeline
             var width = Math.floor(v.getDuration() * wTimeline / myMedia.duration),
                 left = Math.floor(v.begin * wTimeline / myMedia.duration),
-                segment = $('<div>').css({
+                dataAnntim = {
+                    left : left,
+                    width : width,
+                    color : v.color,
+                    id : v.id
+                },
+                segment = getTemplate('#tpl-annotation-in-timeline');
+                segment = Mustache.render(segment, dataAnntim);
+
+                /*
+                segment = $('<a>').css({
                     left : left,
                     width : width,
                     backgroundColor : v.color
                 }).addClass('annotation')
                 .attr('data-id', v.id)
                 .attr('id', 'annotation-timeline-'+v.id);
-
+                */
             var isInTimeline = false;
             $.each(timeline.find('li'), function(a, b){
                 if(isInTimeline) return;
@@ -597,9 +609,14 @@
                 case 'audio':
                     break;
                 case 'video':
+                    var labelModify = $(tabContent).find('.label-modify-video'),
+                        labelAdd = $(tabContent).find('.label-add-video');
                     if(viewType.content.url != ""){
                         var videoWrap = $(tabContent).find('.annotation-video-content');
                         renderVideoInfo(videoWrap, viewType.content);
+                        labelModify.show();
+                    }else{
+                        labelAdd.show();
                     }
                     break;
                 case 'text': 
@@ -730,6 +747,12 @@
 
         var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
         renderVideoInfo(videoWrap, currentAnnotation.content);
+
+        var labelModify = $('#tab-annotation-'+currentAnnotation.id).find('.label-modify-video'),
+            labelAdd = $('#tab-annotation-'+currentAnnotation.id).find('.label-add-video');
+
+        labelModify.show();
+        labelAdd.hide();
         
     });