# HG changeset patch
# User cavaliet
# Date 1370515323 -7200
# Node ID 8e016726669b83def5bfb71ea78c5e69252367cf
# Parent  9115f9cba3a5542311f88a920db07d3028f49df6# Parent  5dfa74fcec4bd0e9e725e57c6473f07dbb0c1f8c
Merge with 5dfa74fcec4bd0e9e725e57c6473f07dbb0c1f8c

diff -r 9115f9cba3a5 -r 8e016726669b integration/css/style.css
--- a/integration/css/style.css	Thu Jun 06 12:41:20 2013 +0200
+++ b/integration/css/style.css	Thu Jun 06 12:42:03 2013 +0200
@@ -44,6 +44,7 @@
 .project-action a:last-child{margin-right: 20px;}
 .chapter-widget-info{margin-bottom: 20px;}
 .chapter-widget form{ margin: 0;}
+.form-info-general-annotation{background-color: #ecf0f1;}
 .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{}
@@ -86,10 +87,11 @@
 .close-tab:hover{color:#2c3e50;}
 .html-apercu{overflow: auto; margin-top: 10px;}
 .input-image-url{display: none;}
+.slider-duration.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{ background: #202020;}
 .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: 10px; position: relative; padding-bottom: 4px;}
-.timeline-annotations .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:0px;}
+.timeline-annotations .annotation{ color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 9px; width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:0px;}
 ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;}
@@ -111,6 +113,10 @@
 td.image-slideshow-row img{width: 60px; height: 60px;}
 .project-title-editor input{margin-bottom: 0;}
 #templates{display: none;}
+
+.title-slideshow-row{word-wrap: break-word;width: 76px;}
+.description-slideshow-row{word-wrap: break-word; width: 180px;}
+.description-slideshow-row textarea{width: 164px; max-width: 164px; height: 164px;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
diff -r 9115f9cba3a5 -r 8e016726669b integration/edition.html
--- a/integration/edition.html	Thu Jun 06 12:41:20 2013 +0200
+++ b/integration/edition.html	Thu Jun 06 12:42:03 2013 +0200
@@ -184,7 +184,7 @@
 								</div>
 								<div class="list-annotation-wrap">
 									<h4><i class="icon-bookmark"></i> <i class="icon-th-list"></i> Liste des annotations</h4>
-									<table class="table">
+									<table class="table ">
 										<thead>
 											<tr>
 												<th>Titre</th>
@@ -521,7 +521,7 @@
 
 <div id="templates">
 <script id="tpl-head" type="text/html">
-<form action="#" class="form-info-general-annotation" style="background-color:{{color}}" data-id="{{id}}">
+<form action="#" class="form-info-general-annotation" data-id="{{id}}">
 	
 	<div class="row">
 		<div class="span3 text-right">
@@ -603,7 +603,7 @@
 	<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
 	<span class="span3">
 		Ajouter une vidéo 
-		<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"><i class="icon-plus"></i></a>
+		<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>
 <div class="row annotation-video-content">
@@ -642,7 +642,7 @@
 	<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
 	<span class="span3">
 		Ajouter une image 
-		<a data-type-media="image" data-diaporama="diaporama-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
+		<a data-type-media="image" data-diaporama="diaporama-{{id}}" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html" data-hide-add-new><i class="icon-plus"></i></a>
 	</span>
 </div>
 <div class="row config-diaporama">
@@ -662,7 +662,7 @@
 </div>
 <div class="row">
 	<div class="span6">
-		<table class="table">
+		<table class="table table-striped">
 			<thead>
 				<tr>
 					<th>Aperçu</th>
@@ -721,17 +721,19 @@
 <script id="tpl-diaporama-row" type="text/html">
 <tr id="rid-{{ridid}}" class="row-image-diaporama">
 	<td class="image-slideshow-row"><img data-url="{{url}}" src="{{url}}" alt=""> </td>
-	<td class="title-slideshow-row">{{title}}</td>
-	<td class="description-slideshow-row">{{description}}</td>
+	<td class="title-slideshow-row"><span>{{title}}</span> <i class="icon-pencil"></i></td>
+	<td class="description-slideshow-row"><span>{{description}}</span> <i class="icon-pencil"></i></td>
 	<td>
 		<table>
 			<tr>
-				<td><a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="modal-image.html"><i class="icon-pencil"></i></a></td>
-				<td><a data-title="une image" href="#rid-{{id}}" class="btn btn-delete-image"><i class="icon-trash"></i></a></td>
+				<td>
+					<a data-title="une image" href="#rid-{{id}}" class="btn btn-delete-image"><i class="icon-trash"></i></a>
+				</td>
+				<td><a href="#" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
 			</tr>
 			<tr>
-				<td><a href="" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
-				<td><a href="" class="btn btn-sort up"><i class="icon-angle-up"></i></a></td>
+				<td></td>
+				<td><a href="#" class="btn btn-sort down"><i class="icon-angle-down"></i></a></td>
 			</tr>
 		</table>
 	</td>
diff -r 9115f9cba3a5 -r 8e016726669b integration/js/edition.js
--- a/integration/js/edition.js	Thu Jun 06 12:41:20 2013 +0200
+++ b/integration/js/edition.js	Thu Jun 06 12:42:03 2013 +0200
@@ -1,6 +1,6 @@
-var myMedia = null,
-    currentChapter = null,
-    currentAnnotation = null,
+var myMedia = undefined,
+    currentChapter = undefined,
+    currentAnnotation = undefined,
     chapters = [],
     annotations = [];
 
@@ -9,10 +9,10 @@
 var global = {
     colorsIndex : 0,
     colors : 
-        ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',  
-        '#f1c40f', '#e67e22', '#e74c3c', 
-        '#16a085', '#27ae60', '#2980b9', '#8e44ad', 
-         '#d35400', '#c0392b', '#bdc3c7']
+        ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71',  
+        '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6',
+        '#16a085', '#2980b9', '#8e44ad', '#27ae60', 
+         '#f39c12', '#c0392b', '#bdc3c7', '#d35400', '#7f8c8d']
 };
 
 
@@ -102,47 +102,57 @@
         }else{
             btnCutChapter.css("left",pos);
         }
-
         //annotations view
-        var currentAnnotationsDisplay = new Array();
-        $.each(annotations, function(k, v){
-
-            if(v.begin <= t && v.end >= t){
-                currentAnnotationsDisplay.push(v.id);
-                if(!$('#item-current-annotation-'+v.id).length){
-                    var itemAnnotation = 
-                        $('<li>')
-                            .attr('id', 'item-current-annotation-'+v.id)
-                            .attr('data-id', v.id)
-                            .append(
-                                $('<a>')
-                                    .css('backgroundColor', v.color)
-                                    .attr('data-id', v.id)
-                                    .attr('href', '#')
-                                    .append(
-                                        $('<i>').addClass('icon-'+getIcon(v.type))
-                                    )
-                            );
-                    $('.list-current-annotations').append(itemAnnotation)
-                }
-            }
-        });
-        $.each($('.list-current-annotations li'), function(k, v){
-            var idAnnotation = $(this).attr('data-id'),
-                annotationDisplayView = $('.annotation-display-view');
-            if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché
-                $('#item-current-annotation-'+idAnnotation).remove();
-                if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
-                    annotationDisplayView.hide();
-                }
-            }
-        });
-
+        refreshAnnotationDisplay(t);
 
     });//timeupdate
     
 });//myProject.onLoad
 
+function refreshAnnotationDisplay(t){
+    
+    var currentAnnotationsDisplay = new Array();
+    $.each(annotations, function(k, v){
+
+        if(v.begin <= t && v.end >= t){
+            currentAnnotationsDisplay.push(v.id);
+            if(!$('#item-current-annotation-'+v.id).length){
+                var itemAnnotation = 
+                    $('<li>')
+                        .attr('id', 'item-current-annotation-'+v.id)
+                        .attr('data-id', v.id)
+                        .append(
+                            $('<a>')
+                                .css('backgroundColor', v.color)
+                                .attr('data-id', v.id)
+                                .attr('href', '#')
+                                .append(
+                                    $('<i>').addClass('icon-'+getIcon(v.type))
+                                )
+                        );
+                $('.list-current-annotations').append(itemAnnotation)
+            }
+        }
+    });
+    $.each($('.list-current-annotations li'), function(k, v){
+        var idAnnotation = $(this).attr('data-id'),
+            annotationDisplayView = $('.annotation-display-view');
+        if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché
+            $('#item-current-annotation-'+idAnnotation).remove();
+            if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+                annotationDisplayView.hide();
+            }
+        }
+    });
+    if(currentAnnotation !== undefined){ 
+        showCurrentAnnotationInTimeline(currentAnnotation.id);
+    }
+}
+
+function showCurrentAnnotationInTimeline(idAnnotation){
+    $('.timeline-annotations .annotation').empty();
+    $('#annotation-timeline-'+idAnnotation).text('en cours');
+}
 //display annotation view
 $('.list-current-annotations').on('click', 'a', function(e){
     e.preventDefault();
@@ -176,9 +186,6 @@
 
 //select on bibliotheque
 
-    
-    
-
     //confirmation suppression
     $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
         
@@ -203,7 +210,10 @@
         var input = $('<input type="text" />');
         input.val(html);
         $('.project-title').replaceWith(input);
-        input.focus();
+        input.focus().keypress(function(e){
+            code = (e.keyCode ? e.keyCode : e.which);
+            if (code == 13) $(this).blur();
+        });
     });
     $(document).on('blur', '.project-title-editor input', function(){
         var newTitle = $(this).val();
@@ -500,7 +510,7 @@
         } 
     });
 
-    $('.tab-content').on('keyup', 'input[name=title], textarea', function(e){
+    $('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){
         var name = $(this).attr('name'),
             value = $(this).val();
         currentAnnotation[name] = value;
@@ -547,7 +557,7 @@
     });
 
     function openTab(type, data){
-        
+
         var dataView;
         if(_.isUndefined(data)){//nouveau
             var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
@@ -571,14 +581,13 @@
             iconTab;
 
         currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
-
-      
-
+        showCurrentAnnotationInTimeline(idAnnotation);
             //head commun à tous
             var tplHead = getTemplate('#tpl-head');
             var output = Mustache.render(tplHead, dataView);
             $(tabContent).append(output);
             $(tabContent).find(".slider-duration").slider(configSlider(dataView));
+            $(tabContent).find(".ui-slider-range.ui-widget-header.ui-corner-all").css('background', dataView.color);
             $(tabContent).find('.tag-it').tagit(tagitParam);
             //type
             var viewType = {
@@ -680,10 +689,12 @@
     $('#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; });
+        showCurrentAnnotationInTimeline(idAnnotation);
     });
 
     //rafraichit annotations au retour sur la liste
     $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) {
+        currentAnnotation = undefined;
         renderAnnotation();
     });
 
@@ -768,6 +779,41 @@
     
     };
 
+    //edit title / description
+    $('.tab-content').on('click', '.title-slideshow-row', function(){
+        if($(this).find('input').length) return;
+        var html = $(this).find('span').html();
+        var input = $('<input type="text" />').addClass('input-mini').attr('name', 'title');
+        input.val(html);
+        $(this).find('span').replaceWith(input);
+        input.focus().keypress(function(e){
+            code = (e.keyCode ? e.keyCode : e.which);
+            if (code == 13) $(this).blur();
+        });
+    });
+
+    $('.tab-content').on('click', '.description-slideshow-row', function(){
+        if($(this).find('textarea').length) return;
+        var html = $(this).find('span').html();
+        var input = $('<textarea>').attr('name', 'description');
+        input.val(html);
+        $(this).find('span').replaceWith(input);
+        input.focus().keypress(function(e){
+            code = (e.keyCode ? e.keyCode : e.which);
+            if (code == 13) $(this).blur();
+        });
+    });
+
+    $(document).on('blur', '.title-slideshow-row input, .description-slideshow-row textarea', function(){
+        var newValue = $(this).val(),
+            name = $(this).attr('name'),
+            span = $('<span>').html(newValue),
+            indexRow = $(this).parents('.row-image-diaporama').index();
+        $(this).replaceWith(span);
+
+        currentAnnotation.content.images[indexRow][name] = newValue;
+    });
+
     //bouton up / down
     $(document).on('click', '.ui-sortable .btn-sort', function(e){
         e.preventDefault();
@@ -946,7 +992,8 @@
             annotationTimeline.css('z-index',100);
         },
         stop : function(){
-            renderAnnotation()
+            renderAnnotation();
+            refreshAnnotationDisplay(myMedia.getCurrentTime());
         }
     };
 }