# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1369409015 -7200
# Node ID 4c2428524c22e764261ea2661ceff9d622bd4b24
# Parent  6eb0de10e9f8e13df3582b0ec38655d4f0805038
annotation display view

diff -r 6eb0de10e9f8 -r 4c2428524c22 integration/css/style.css
--- a/integration/css/style.css	Fri May 24 11:02:32 2013 +0200
+++ b/integration/css/style.css	Fri May 24 17:23:35 2013 +0200
@@ -95,6 +95,13 @@
 -moz-border-radius: 0px;
 border-radius: 0px;}
 
+.video-wrap{position: relative;}
+.annotations-display{}
+.annotation-display-view{display:none;text-align:center; line-height:200px;background-color: #fff;position: absolute; width: 200px; margin-left: -100px; height: 200px; margin-top: -100px; top: 50%; left: 50%;}
+.list-current-annotations{position: absolute;bottom: 40px; left: 20px; margin: 0;}
+.list-current-annotations li{list-style: none; margin-top: 4px;}
+.list-current-annotations a{text-align:center; line-height:20px; color:#FFF;display: inline-block; background-color: #589; width: 20px; height: 20px; }
+.list-current-annotations a:hover{text-decoration: none;}
 /* Tangle */
 .time-tangle {
 	color: #2c3e50; cursor: w-resize; position: relative;
diff -r 6eb0de10e9f8 -r 4c2428524c22 integration/edition.html
--- a/integration/edition.html	Fri May 24 11:02:32 2013 +0200
+++ b/integration/edition.html	Fri May 24 17:23:35 2013 +0200
@@ -56,7 +56,15 @@
 				</div>
 				<div class="row">
 					<div class="span6">
-						<div class="main-video"></div>
+						<div class="video-wrap">
+							<div class="main-video"></div>
+							<div class="annotations-display">
+								<div class="annotation-display-view"></div>
+								<ul class="list-current-annotations">
+
+								</ul>
+							</div>
+						</div>
 						<div class="timeline-annotations-wrap">
 							<div class="indicateur-annotation"></div>
 							<div class="timeline-annotations"></div>
diff -r 6eb0de10e9f8 -r 4c2428524c22 integration/js/edition.js
--- a/integration/js/edition.js	Fri May 24 11:02:32 2013 +0200
+++ b/integration/js/edition.js	Fri May 24 17:23:35 2013 +0200
@@ -53,12 +53,67 @@
         }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();
+                }
+            }
+        });
+
+
     });//timeupdate
     
 });//myProject.onLoad
 
+//display annotation view
+$('.list-current-annotations').on('click', 'a', function(e){
+    e.preventDefault();
+    var annotationDisplayView = $('.annotation-display-view'),
+        idAnnotation = $(this).attr('data-id');
+    var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
 
-//--modal
+    if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+        annotationDisplayView.hide();
+    }else{
+        annotationDisplayView
+            .attr('data-id', idAnnotation)
+            .css('backgroundColor', annotation.color)
+            .text(annotation.type)
+            .show();
+    }
+});
+
+//########### modal
+
     $(document).on('click', 'a.open-modal', function(e){
         var diaporama = $(this).attr('data-diaporama'),
             idAnnotation = $(this).attr('data-id');
@@ -425,10 +480,12 @@
         
         var dataView;
         if(_.isUndefined(data)){//nouveau
+            var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
+                endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
             var dataAnnotation = {
                 title : 'Nouveau',
-                begin : 60 * 1000,
-                end : 60 * 1000 * 2,
+                begin : myMedia.currentTime,
+                end : endAnnotation,
                 description : 'description',
                 type : type,
                 keywords : []
@@ -461,17 +518,16 @@
 
             //particularité selon type
             switch(type){
-                case 'son': iconTab = 'volume-up';
+                case 'son':
                     break;
-                case 'video': iconTab = 'film';
+                case 'video':
                     break;
                 case 'text': 
-                    iconTab = 'align-left';
                     $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig);
                     break;
-                case 'html': iconTab = 'link';
+                case 'html': 
                     break;
-                case 'diaporama': iconTab = 'picture';
+                case 'diaporama': 
                     $(tabContent).find('.number-spin').spin(spinParam);
                     $(tabContent).find('.ui-sortable').sortable({
                         stop : function(event, ui){
@@ -481,7 +537,7 @@
                     break;
             }
 
-            dataView.iconTab = iconTab;
+            dataView.iconTab = getIcon(type);
             var tplOnglet = $(templates).filter('#tpl-onglet').html();
             var onglet = Mustache.render(tplOnglet, dataView);
 
@@ -490,6 +546,24 @@
         });
     }//openTab()
 
+    function getIcon(type){
+        var icon;
+        switch(type){
+            case 'son': icon = 'volume-up';
+                break;
+            case 'video': icon = 'film';
+                break;
+            case 'text': 
+                icon = 'align-left';
+                break;
+            case 'html': icon = 'link';
+                break;
+            case 'diaporama': icon = 'picture';
+                break;
+        }
+        return icon;
+    }
+
     //définit currentAnnotation quand la tab s'ouvre
     $('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) {
         var idAnnotation = $(e.target).attr('data-id');
@@ -640,54 +714,6 @@
     };
 
 }
-//milliseconds To 12h12m12s
-function millisecondsToString(milliseconds) {
-    var oneHour = 3600000;
-    var oneMinute = 60000;
-    var oneSecond = 1000;
-    var seconds = 0;
-    var minutes = 0;
-    var hours = 0;
-    var result;
-
-    if (milliseconds >= oneHour) {
-        hours = Math.floor(milliseconds / oneHour);
-    }
-
-    milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;
-
-    if (milliseconds >= oneMinute) {
-        minutes = Math.floor(milliseconds / oneMinute);
-    }
-
-    milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;
-
-    if (milliseconds >= oneSecond) {
-        seconds = Math.floor(milliseconds / oneSecond);
-    }
-
-    milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;
-
-    if (hours > 0) {
-        result = (hours > 9 ? hours : "0" + hours) + "h";
-    } else {
-        result = "";
-    }
-
-    if (minutes > 0) {
-        result += (minutes > 9 ? minutes : "0" + minutes) + "m";
-    } else {
-        result += "00m";
-    }
-
-    if (seconds > 0) {
-        result += (seconds > 9 ? seconds : "0" + seconds) + "s";
-    } else {
-        result += "00s";
-    }
-
-    return result;
-}
 
 //test
 $(".wysiwyg").cleditor(wysiwygConfig);
@@ -703,10 +729,6 @@
 
 $('.slider-duration').slider(configSlider);
 
-
-
-
-
 $(".tag-it").tagit();
 
 });//ready
\ No newline at end of file