# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1370940199 -7200
# Node ID 9144b17b390e7b68da63748a0aa843f06a26721d
# Parent  c0e4d761bcb6630d85f761d4b87270b2931299ac
cleaning project

diff -r c0e4d761bcb6 -r 9144b17b390e integration/css/style.css
--- a/integration/css/style.css	Mon Jun 10 18:02:41 2013 +0200
+++ b/integration/css/style.css	Tue Jun 11 10:43:19 2013 +0200
@@ -55,8 +55,8 @@
 .chapter-widget table td{}
 .chapter-widget textarea:focus{height: 100px;}
 .chapitre-cut-wrap{position: relative; height: 70px; margin-bottom: 10px;}
-.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 11px; width: 40px;}
-.indicateur-chapter, .indicateur-annotation{z-index:999; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
+.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 1px; width: 40px;}
+.indicateur-chapter, .indicateur-annotation{z-index:999; left:0; width: 1px; height: 100%;background-color: #000; position: absolute;}
 .chapter-segments {overflow:hidden; width: 100%; height: 20px; margin: 0; position: relative;}
 .chapter-segments li{position: absolute; top: 0; cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
 .list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;}
@@ -118,8 +118,9 @@
 .description-slideshow-row textarea{width: 164px; max-width: 164px; height: 100px;}
 .label-modify-video, .label-add-video{display: none;}
 .shadow {background-color: #54D0ED !important;}
-.alert-message{display: none;}
-.alert{display: none;}
+.alert-message,
+.alert,
+.links-rows .help-inline{display: none;}
 /* Tangle */
 .time-tangle {color: #2c3e50; cursor: w-resize; position: relative;border-bottom: 1px dashed #2c3e50;}
 .time-tangle:hover, 
diff -r c0e4d761bcb6 -r 9144b17b390e integration/edition.html
--- a/integration/edition.html	Mon Jun 10 18:02:41 2013 +0200
+++ b/integration/edition.html	Tue Jun 11 10:43:19 2013 +0200
@@ -83,10 +83,7 @@
 						</div>
 						<div class="timeline-annotations-wrap">
 							<div class="indicateur-annotation"></div>
-							<!--<div class="timeline-annotations"></div>-->
-							<ul class="timeline-annotations">
-		
-							</ul>
+							<ul class="timeline-annotations"></ul>
 						</div>
 <!-- chapter-widget -->
 						<div class="chapter-widget">
@@ -102,42 +99,6 @@
 								</div>
 							</div>
 							<div class="chapter-widget-info">
-								<!--
-								<form action="#" class="form-chapter-edit">
-									<div class="row">
-										<div class="span3 text-right">
-											<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>
-														<th class="span1">Durée</th>
-														<th class="span1">Fin</th>
-													</tr>
-												</thead>
-												<tbody>
-													<tr>
-														<td class="span1 begin">4:20</td>
-														<td class="span1 duration">4:20</td>
-														<td class="span1 end">4:20</td>
-													</tr>
-												</tbody>
-											</table>
-										</div>
-									</div>
-									<div class="row">
-										<div class="span6 text-center">
-											<textarea class="" name="description" id=""></textarea>
-										</div>
-									</div>
-								</form>
-							-->
 							</div>
 							<div class="list-chapter-wrap">
 								<h4><i class="icon-flag"></i> <i class="icon-th-list"></i> Liste des chapitres</h4>
@@ -153,27 +114,6 @@
 										</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>
-											<td>79:55</td>
-											<td>79:55</td>
-											<td>79:55</td>
-											<td>
-												<table>
-													<tr>
-														<td>
-															<a href="" class="btn edit-chapter"><i class="icon-pencil"></i></a>
-														</td>
-														<td>
-															<a data-title="Chapitre 1" href="#row-list-chapter-id1" class="btn btn-delete"><i class="icon-trash delete-annotation"></i></a>
-														</td>
-													</tr>
-												</table>
-											</td>
-										</tr>
-									-->
 									</tbody>
 								</table>
 							</div>
@@ -214,294 +154,11 @@
 											</tr>
 										</thead>
 										<tbody id="list-annotations-rows">
-											<!--
-											<tr id="row-list-annotation-id1">
-												<td>Titre annotation</td>
-												<td>Vidéo</td>
-												<td>4:26</td>
-												<td>4:26</td>
-												<td>4:26</td>
-												<td>
-													<a href="#" data-id="annotation-123" class="btn btn-edit-annotation" data-type="video">
-														<i class="icon-pencil"></i></a>
-													<a data-id="annotation-123" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id1" class="btn btn-delete">
-														<i class="icon-trash delete-annotation"></i>
-													</a>
-												</td>
-											</tr>
-											<tr id="row-list-annotation-id2">
-												<td>Titre annotation</td>
-												<td>Diaporama</td>
-												<td>4:26</td>
-												<td>4:26</td>
-												<td>4:26</td>
-												<td>
-													<a href="#" data-id="annotation-456" class="btn btn-edit-annotation" data-type="diaporama">
-														<i class="icon-pencil "></i></a>
-													<a data-id="annotation-456" data-type="annotation" data-title="Annotation XYZ" href="#row-list-annotation-id2" class="btn btn-delete">
-														<i class="icon-trash delete-annotation"></i>
-													</a>
-												</td>
-											</tr>
-										-->
+
 										</tbody>
 									</table>
 								</div>
-							</div>
-<!-- exemple annotation all -->
-							<div class="tab-pane" id="annotation-azerty">
-	<!-- head -->
-								<form action="#" class="form-info-general-annotation">
-									<div class="row">
-										<div class="span3 text-right">
-											<input type="text" placeholder="Titre de l'annotation..">
-											<textarea name="" id=""></textarea>
-										</div>
-										<div class="span3">
-											<input type="text" placeholder="Titre de l'annotation..">
-											<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 id="id741-begin" class="span1">4:20</td>
-														<td id="id741-duration" class="span1">4:20</td>
-														<td id="id741-end" class="span1">4:20</td>
-													</tr>
-												</tbody>
-											</table>
-										</div>
-									</div>
-									<div class="row">
-										<div class="span6 text-center">
-											<div data-id="id741" id="id741" class="slider-duration"></div>
-										</div>
-										<div class="span6 text-right">
-											<button data-id="id741" type="submit" class="btn btn-primary btn-save-annotation">
-												<i class="icon-save"></i> Enregistrer l'annotation
-											</button>
-										</div>
-									</div>
-								</form>
-	<!-- Liens -->
-								<div class="edit-annotation-title row">
-									<h3 class="span3"><i class="icon-link"></i> Liens</h3>
-								</div>
-								<div class="row annotation-links-content">
-										<div class="span6">
-											<form class="form-horizontal">
-												<table class="table">
-													<thead>
-														<tr>
-															<th>URL</th>
-															<th>Titre du lien</th>
-															<th>Actions</th>
-														</tr>
-													</thead>
-													<tbody>
-														<tr>
-															<td><input class="input-medium" type="text" placeholder="http://"></td>
-															<td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
-															<td>
-																<a class="btn" href="#"><i class="icon-trash"></i></a>
-																<a class="btn" href="#"><i class="icon-plus"></i></a>
-															</td>
-														</tr>
-														<tr>
-															<td><input class="input-medium" type="text" placeholder="http://"></td>
-															<td><input class="input-medium" type="text" placeholder="Titre du lien"></td>
-															<td>
-																<a class="btn" href="#"><i class="icon-trash"></i></a>
-																<a class="btn" href="#"><i class="icon-plus"></i></a>
-															</td>
-														</tr>
-													</tbody>
-												</table>
-											</form>
-										</div>
-
-								</div>
-	<!-- Son -->
-								<div class="edit-annotation-title row">
-									<h3 class="span3"><i class="icon-volume-up"></i> Son</h3>
-								</div>
-								<div class="row annotation-audio-content">
-										<div class="span6">
-											<form class="form-horizontal">
-												<div class="control-group">
-													<label class="control-label" for="url-source">URL source :</label>
-													<div class="controls">
-														<input type="text" id="url-source" placeholder="http://">
-													</div>
-												</div>
-												<div class="control-group">
-													<label class="control-label" for="embed">Code embed :</label>
-													<div class="controls">
-														<textarea name="" id="embed" cols="30" rows="10"></textarea>
-													</div>
-												</div>
-											</form>
-										</div>
-								</div>
-
-	<!-- vidéo -->
-								<div class="edit-annotation-title row">
-									<h3 class="span3"><i class="icon-film"></i> Vidéo</h3>
-									<span class="span3">
-										<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>
-								<div class="row annotation-video-content">
-									<div class="span6">
-										<img src="img/460x345.gif" alt="">
-										<table class="table">
-											<tbody>
-												<tr>
-													<th>Titre</th>
-													<td>Titre de la vidéo Azerty</td>
-												</tr>
-												<tr>
-													<th>Date</th>
-													<td>14 / 05 / 2016</td>
-												</tr>
-												<tr>
-													<th>Durée</th>
-													<td>25 m 35 s</td>
-												</tr>
-												<tr>
-													<th>Description</th>
-													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.</td>
-												</tr>
-											</tbody>
-										</table>
-									</div>
-								</div>
-							
-	<!-- html -->
-								<div class="edit-annotation-title row">
-									<h3 class="span3"><i class="icon-link"></i> Html</h3>
-								</div>
-								<div class="row edit-annotation-html">
-									<div class="span6">
-										<textarea class="" name="" id="" cols="30" rows="10"></textarea>
-										
-									</div>
-									<div class="span6 text-right">
-										<a href="#" class="btn btn-html-apercu"><i class="icon-eye-open"></i> Aperçu</a>
-									</div>
-									<div class="html-apercu span6"></div>
-								</div>
-							
-
-	<!-- text -->
-								<div class="edit-annotation-title row">
-									<h3 class="span3"><i class="icon-align-left"></i> Texte</h3>
-								</div>
-								<div class="row">
-									<div class="span6 wysiwyg-wrap">
-										<textarea class="wysiwyg" name="" id="" cols="30" rows="10"></textarea>
-									</div>
-								</div>
-	<!-- diaporama -->
-						
-								<div class="edit-annotation-title row">
-									<h3 class="span3"><i class="icon-picture"></i> Diaporama</h3>
-									<span class="span3">
-										Ajouter une image 
-										<a data-type-media="image" data-diaporama="diaporama-id1" data-title="Ajouter une image" class="btn btn-success open-modal" href="modal-bibliotheque-image.html"><i class="icon-plus"></i></a>
-									</span>
-								</div>
-								<div class="row config-diaporama">
-									<form action="">
-										<div class="span3">
-											<label for="">Diaporama :</label>
-										    <div class="btn-group" data-toggle="buttons-radio">
-											    <button type="button" class="btn btn-primary">Manuel</button>
-											    <button type="button" class="btn btn-primary active">Auto</button>
-										    </div>	
-										</div>
-										<div class="span3">
-											<label for="">Durée image : </label>
-											<input pattern="[0-9]*" class="span1 number-spin" type="text" value="1"> sec
-										</div>
-									</form>
-								</div>
-								<div class="row">
-									<div class="span6">
-										<table class="table">
-											<thead>
-												<tr>
-													<th>Aperçu</th>
-													<th>Titre</th>
-													<th>Description</th>
-													<th>Actions</th>
-												</tr>
-											</thead>
-											<tbody id="diaporama-id1" class="list-image-diaporama ui-sortable">
-												<tr id="rid-id1" class="row-image-diaporama">
-													<td><img src="img/60x60.gif" alt=""> </td>
-													<td>Titre annotation 1</td>
-													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</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-id1" class="btn btn-delete"><i class="icon-trash"></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>
-															</tr>
-														</table>
-													</td>
-												</tr>
-												<tr id="rid-id2" class="row-image-diaporama">
-													<td><img src="img/60x60.gif" alt=""> </td>
-													<td>Titre annotation 2</td>
-													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
-													<td>
-														<table>
-															<tr>
-																<td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
-																<td><a href="" class="btn"><i class="icon-trash"></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>
-															</tr>
-														</table>
-													</td>
-												</tr>
-												<tr id="rid-id3" class="row-image-diaporama">
-													<td><img src="img/60x60.gif" alt=""> </td>
-													<td>Titre annotation 3</td>
-													<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima.</td>
-													<td>
-														<table>
-															<tr>
-																<td><a href="" class="btn"><i class="icon-pencil"></i></a></td>
-																<td><a href="" class="btn"><i class="icon-trash"></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>
-															</tr>
-														</table>
-													</td>
-												</tr>
-											</tbody>
-										</table>
-									</div>
-								</div>
-						
-							</div><!-- /exemple annotation all -->
-
+							</div><!-- /.liste annotations -->
 						</div><!-- /.tab-content -->
 					</div><!-- /.col-right -->
 				</div>
@@ -552,9 +209,9 @@
 </div>
 
 <div id="templates">
+
 <script id="tpl-head" type="text/html">
 <form action="#" class="form-info-general-annotation" data-id="{{id}}">
-	
 	<div class="row">
 		<div class="span3 text-right">
 			<label class="label-left" for="head-title-{{id}}">Titre :</label>
@@ -751,8 +408,12 @@
 
 <script id="tpl-links-row" type="text/html">
 <tr>
-	<td class="control-group"><input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://"></td>
-	<td><input class="input-medium title-link" type="text" value="{{title}}" placeholder="Titre du lien"></td>
+	<td class="control-group">
+		<input class="input-medium url-link" type="text" value="{{url}}" placeholder="http://">
+		<div class="help-inline"><i class="icon-unlink"></i> Le lien est incorrect.</div>
+	</td>
+	<td><input class="input-medium title-link" type="text" value="{{title}}" placeholder="Titre du lien">
+	</td>
 	<td>
 		<a class="btn delete-link" href="#"><i class="icon-trash"></i> </a>
 	</td>
diff -r c0e4d761bcb6 -r 9144b17b390e integration/js/edition.js
--- a/integration/js/edition.js	Mon Jun 10 18:02:41 2013 +0200
+++ b/integration/js/edition.js	Tue Jun 11 10:43:19 2013 +0200
@@ -1,30 +1,29 @@
-var myMedia = undefined,
-    currentChapter = undefined,
-    currentAnnotation = undefined,
-    currentSlider = undefined,
-    secMiniChapter = 10;
-
-
-
-
 $(function(){
 
+    var myMedia = undefined,
+        currentChapter = undefined,
+        currentAnnotation = undefined,
+        currentSlider = undefined,
+        secMiniChapter = 10;
+
+/* Colors */
     var annotationsColors = {
         'video' : '#BE4477',
         'text' : '#5E90CB',
         'slideshow' : '#F69058',
         'audio' : '#63BE6C',
         'links' : '#8985BB'
-    }
-
-    var global = {
-        colorsIndex : 0,
-        colors : 
-            ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F',  '#00A388',
+        },
+        colorsRangeIndex = 0,
+        colorsRange = [
+            '#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F',  '#00A388',
              '#1695A3', '#ACF0F2', '#F3FFE2', '#EB7F00', '#FF8000',
              '#FFD933', '#CCCC52', '#8FB359', '#FFD393', '#F54F29'
-            ]
-    };
+        ];
+
+    function getRandomColor(){
+        return colorsRange[(colorsRangeIndex<colorsRange.length) ? colorsRangeIndex++ : (colorsRangeIndex=0)];
+    }
 
     function getTemplate(idTpl){
         return $('#templates').find(idTpl).html();
@@ -38,6 +37,7 @@
 
         myMedia = myProject.getCurrentMedia();
 
+        //load Chapitre
         var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");
         if (!anntypes.length) {
             chapterAnnType = new IriSP.Model.AnnotationType(false, myProject);
@@ -47,7 +47,6 @@
             chapterAnnType = anntypes[0];
         }
 
-        //load Chapitre
         chapters = chapterAnnType.getAnnotations();
         if(!chapters.length){
             var dataChapter = {
@@ -83,7 +82,7 @@
         });
         renderAnnotation();
 
-
+        //player
         IriSP.htmlPlayer(
             myMedia,
             $(".main-video"),
@@ -105,7 +104,6 @@
         );
 
         myMedia.on("timeupdate", function(t) {
-
             //curseur chapitre
             var wContainer = $('.chapitre-cut-wrap').width() - 1,
                 pos = wContainer * t / myMedia.duration,
@@ -118,17 +116,17 @@
             }else{
                 btnCutChapter.css("left",pos);
             }
-            $('.info-time').text(t)
-            //annotations view
+            $('.info-time').text(t);
+
+            //display annotations
             refreshAnnotationDisplay(t);
-
         });//timeupdate
         
     });//myProject.onLoad
 
 /* Display annotation in timeline */
 
-    //survol
+    //hover
     $(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
         if(!$(this).hasClass('shadow')) {
             var idAnnotation = $(this).attr('data-id');
@@ -214,8 +212,6 @@
         }
     });
 
-
-
 /* Title project */
 
     $(document).on('click', '.project-title-editor i, .project-title', function () {
@@ -247,11 +243,6 @@
         loadFormChapter(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();
@@ -265,6 +256,12 @@
         disabledPreview();
     });
 
+    //form chapter
+    $('.chapter-segments').on('click', 'li', function(){
+        var idChapter = $(this).attr('id');
+        loadFormChapter(idChapter);
+    });
+
     function loadFormChapter(idChapter){
         currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
         var chapterWrap = $('.chapter-widget-info'),
@@ -283,6 +280,12 @@
         myMedia.setCurrentTime(currentChapter.begin);
     }
 
+    //close chapter form
+    $(document).on('click', '.btn-ok-chapter', function(e){
+        e.preventDefault();
+        $('.form-chapter-edit').remove();
+    });
+
     //delete chapter
     $(document).on('click', '.btn-delete-chapter', function(e){
         e.preventDefault();
@@ -305,10 +308,6 @@
         $("#modal-confirm").modal('show');
 
     });
-    $(document).on('click', '.btn-ok-chapter', function(e){
-        e.preventDefault();
-        $('.form-chapter-edit').remove();
-    });
 
     function deleteChapter(idChapter){
         
@@ -334,10 +333,7 @@
         disabledPreview();
     }
 
-    function getRandomColor(){
-        return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
-    }
-    //nouveau chapitre
+    //new chapter
     function newChapter(dataChapter, render){
         var chapter = new IriSP.Model.Annotation(false, myProject);
             chapter.setMedia(myMedia.id);
@@ -377,7 +373,6 @@
         };
 
         newChapter(dataChapter, true);
-
     });
     
     function organizeNewChapter(beginNew){
@@ -455,9 +450,51 @@
         return annotation;
     }
 
+    //annotation content data init
+    function getContentAnnotationByType(type){
+        var content;
+        switch(type){
+            case 'audio':
+                content = {
+                    mimetype : "application/x-ldt-audio",
+                    url : "",
+                    embedcode : ""
+                };
+                break;
+            case 'video':
+                content = {
+                    mimetype : "application/x-ldt-video",
+                    url : "",
+                    embedcode : ""
+                };
+                break;
+            case 'text': 
+                content = {
+                    mimetype : "application/x-ldt-text",
+                    markup : "html",
+                    text : ""
+                };
+                break;
+            case 'links': 
+                content = {
+                    mimetype : "application/x-ldt-links",
+                    links : []
+                };
+                break;
+            case 'slideshow': 
+                content = {
+                    mimetype : "application/x-ldt-slideshow",
+                    slideduration : 1000,
+                    autostart : false,
+                    images : []
+                };
+                break;
+        }
+        return content;
+    }
+
     function renderAnnotation(){
         
-
         var timeline = $('.timeline-annotations'),
             wTimeline = timeline.width(),
             annotationList = $('#list-annotations-rows');
@@ -514,16 +551,12 @@
                 timeline.find('li:last-child').append(segment);
             }
             
-           
             //liste
                 v.iconTab = getIcon(v.type);
                 var tplAnnotationRow = getTemplate('#tpl-list-annotation-row');
                 tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
                 annotationList.append(tplAnnotationRow);
-
         });
-
-
     }//renderAnnotation
 
     //edit annotation
@@ -541,7 +574,6 @@
     });
 
     $('.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;
@@ -582,7 +614,7 @@
         $(this).tab('show');
     });
 
-    //ouvrir tab
+    //open tab
     $(document).on('click', '.open-tab', function(e){
         e.preventDefault();
         var type = $(this).attr('data-type');
@@ -592,8 +624,7 @@
     function openTab(type, data){
         
         var dataView, isNew = false;
-        if(_.isUndefined(data)){//nouveau
-
+        if(_.isUndefined(data)){//new
             var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
                 endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
             var dataAnnotation = {
@@ -607,7 +638,7 @@
             dataView = newAnnotation(dataAnnotation);
             renderAnnotation();
             isNew = true;
-        }else{//édition
+        }else{//edition
             dataView = data;
         }
 
@@ -637,7 +668,7 @@
             $(tabContent).append(tpl);
             $('.tab-content').append(tabContent);
 
-            //particularité selon type
+            //data by type
             switch(type){
                 case 'audio':
                     break;
@@ -704,7 +735,7 @@
 
             if(isNew){$(tabContent).find('.head-title').focus();}
   
-    }//openTab()
+    }//openTab
 
     function getIcon(type){
         var icon;
@@ -725,7 +756,7 @@
         return icon;
     }
 
-    //définit currentAnnotation quand la tab s'ouvre
+    //define currentAnnotation by open tab
     $('#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; });
@@ -733,13 +764,19 @@
         showCurrentAnnotationInTimeline(idAnnotation);
     });
 
-    //rafraichit annotations au retour sur la liste
+    //refresh annotation data view when back on annotation list tab
     $('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) {
         currentAnnotation = undefined;
         renderAnnotation();
     });
 
-    //fermer tab
+    //close tab
+    function closeTab(idAnnotation){
+        $('#onglet-'+idAnnotation).remove();
+        $('.tab-content #tab-annotation-'+idAnnotation).remove();
+        $('#tab-list-annotation').tab('show');
+    }
+
     $('#onglet-annotations').on('click', 'span.close-tab', function(e){
         e.preventDefault();e.stopPropagation();
         var idAnnotation = $(this).parents('a').attr('data-id');
@@ -752,15 +789,9 @@
         closeTab(idAnnotation);
     });
 
-    function closeTab(idAnnotation){
-        $('#onglet-'+idAnnotation).remove();
-        $('.tab-content #tab-annotation-'+idAnnotation).remove();
-        $('#tab-list-annotation').tab('show');
-    }
+/* Video */
 
-    //video
     function renderVideoInfo(videoWrap, dataVideo){
-    
         var tplVideo = getTemplate('#tpl-video-row');
         tplVideo = Mustache.render(tplVideo, dataVideo);
         
@@ -768,8 +799,9 @@
 
         videoWrap = videoWrap.find(".video-container");
         getVideoPlayer(dataVideo.url, videoWrap);
-     
     }
+
+    //select video on modal
     $('.popup').on('click', '.bibliotheque-video a:not(.pagination a)', function(e){
         e.preventDefault();
 
@@ -797,7 +829,7 @@
 
 /* Slideshow */
 
-    //bibliotheque
+    //select image on modal 
     $('.popup').on('click', '.bibliotheque-image a:not(.pagination a)', function(e){
         e.preventDefault();
 
@@ -819,15 +851,13 @@
     });
 
     function addImageToDiaporama(diaporama, dataView){
-   
         var tplDiapo = getTemplate('#tpl-diaporama-row');
         tplDiapo = Mustache.render(tplDiapo, dataView);
         diaporama.append(tplDiapo);
         disabledBtnSortable(diaporama);
-    
     };
 
-    //edit title / description
+    //edit 
     $('.tab-content').on('click', '.title-slideshow-row, .description-slideshow-row, .video-title-edit, .video-description-edit', function(){
         if($(this).find('input').length) return;
         var html = $(this).find('span').html(),
@@ -861,7 +891,7 @@
         disabledPreview();
     });
 
-    //bouton up / down
+    //button up / down
     $(document).on('click', '.ui-sortable .btn-sort', function(e){
         e.preventDefault();
         var row = $(this).parents('tr.row-image-diaporama'),
@@ -880,6 +910,13 @@
         disabledPreview();
     });
 
+    function disabledBtnSortable(listDiaporama){
+        listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
+        listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
+        listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
+    }
+
+    //delete image on slideshow
     $('.tab-content').on('click','.btn-delete-image', function(e){
         e.preventDefault();
         var rowImage = $(this).parents('tr.row-image-diaporama'),
@@ -890,18 +927,23 @@
         disabledPreview();
     });
 
-    function disabledBtnSortable(listDiaporama){
-        listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
-        listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
-        listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
+/* Links */
+
+    //add
+    function addLinkRow(tbody, dataView){
+        var tplLinkRow = getTemplate('#tpl-links-row');
+        var output = Mustache.render(tplLinkRow, dataView);
+        tbody.append(output);
+
     }
 
-    //links
     $('.tab-content').on('click', '.add-link', function(e){
         e.preventDefault();
         var tbody = $(this).parents('tfoot').siblings('tbody');
         addLinkRow(tbody);
     });
+
+    //delete
     $('.tab-content').on('click', '.delete-link', function(e){
         e.preventDefault();
         var row = $(this).parents('tr'),
@@ -910,18 +952,13 @@
         row.remove();
         updateLinks(tbody);
     });
-    function addLinkRow(tbody, dataView){
-
-        //head commun à tous
-        var tplLinkRow = getTemplate('#tpl-links-row');
-        var output = Mustache.render(tplLinkRow, dataView);
-        tbody.append(output);
-
-    }
+    
+    //edit
     $('.tab-content').on('keyup', '.links-rows input', function(e){
         var tbody = $(this).parents('.links-rows');
         updateLinks(tbody);   
     });
+
     function updateLinks(tbody){
         links = new Array();
 
@@ -938,9 +975,13 @@
         currentAnnotation.content.links = links;
         disabledPreview();
     }
+
     $('.tab-content').on('focus', '.url-link', function(){
         var td = $(this).parents('td');
-        if(td.hasClass('error')) td.removeClass('error')
+        if(td.hasClass('error')) {
+            td.removeClass('error');
+            td.find('.help-inline').hide();
+        }
     });
     
     $('.tab-content').on('blur', '.url-link', function(){
@@ -948,6 +989,7 @@
             td = $(this).parents('td');
         if(!isValidLink(url)){
             td.addClass('error');
+            td.find('.help-inline').show();
         }
     });
 
@@ -955,7 +997,26 @@
         return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
     }
 
-    //annotation audio
+    //autostart
+    $('.tab-content').on('click', '.btn-autostart', function(){
+        var autostart = $(this).attr('data-autostart');
+        if(autostart == "true"){ autostart = true;}
+        else {autostart = false;}
+        disabledPreview();
+        currentAnnotation.content.autostart = autostart;
+    });
+
+    //duration
+    $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
+        var value = $(this).val();
+        if(!isNaN(value)){
+            disabledPreview();
+            currentAnnotation.content.slideduration = value * 1000;
+        }
+    });
+
+/* Audio */
+
     $('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
         var name = $(this).attr('name'),
             value = $(this).val();
@@ -964,25 +1025,8 @@
         disabledPreview();
     });
 
-    //annotation slideshow
-    $('.tab-content').on('click', '.btn-autostart', function(){
-        var autostart = $(this).attr('data-autostart');
-        if(autostart == "true"){ autostart = true;}
-        else {autostart = false;}
-        disabledPreview();
-        currentAnnotation.content.autostart = autostart;
-    });
+/* Save project */
 
-    $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
-        var value = $(this).val();
-        if(!isNaN(value)){
-            disabledPreview();
-            currentAnnotation.content.slideduration = value * 1000;
-        }
-    });
-
-    
-    //save project
     $('.btn-save-project').bind('click', function(e){
         e.preventDefault();
         if($(this).hasClass('disabled')) return;
@@ -1027,7 +1071,7 @@
         e.preventDefault();
     });
 
-    //alert
+    //alert save info
     $('.alert').bind('close', function (e) {
         e.preventDefault();
         $(this).hide();
@@ -1037,7 +1081,9 @@
         $('.alert').hide();
         $('.'+className).show();
     }
-//################ config
+
+/* Config */
+
     //tagit
     function onTagItChange(e, ui) {
         var tagitType = $(this).attr('data-type'), 
@@ -1060,7 +1106,7 @@
         afterTagAdded : onTagItChange
     }
 
-    //CLEditor annotation > text (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
+    //CLEditor (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
     var wysiwygConfig = {
         width:        450, 
         height:       250, 
@@ -1128,49 +1174,6 @@
         };
     }
 
-    //init annotation content data
-    function getContentAnnotationByType(type){
-        var content;
-        switch(type){
-            case 'audio':
-                content = {
-                    mimetype : "application/x-ldt-audio",
-                    url : "",
-                    embedcode : ""
-                };
-                break;
-            case 'video':
-                content = {
-                    mimetype : "application/x-ldt-video",
-                    url : "",
-                    embedcode : ""
-                };
-                break;
-            case 'text': 
-                content = {
-                    mimetype : "application/x-ldt-text",
-                    markup : "html",
-                    text : ""
-                };
-                break;
-            case 'links': 
-                content = {
-                    mimetype : "application/x-ldt-links",
-                    links : []
-                };
-                break;
-            case 'slideshow': 
-                content = {
-                    mimetype : "application/x-ldt-slideshow",
-                    slideduration : 1000,
-                    autostart : false,
-                    images : []
-                };
-                break;
-        }
-        return content;
-    }//getContentAnnotationByType
-
     //unload
     $(window).on("beforeunload", onLeave);
     function onLeave(){
@@ -1184,26 +1187,6 @@
         tangleStartVal,
         tangleHasMoved;
     
-    $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
-        activeTangle = $(this);
-        activeTangle.addClass("active");
-        tangleStartVal = +activeTangle.attr("data-milliseconds");
-        tangleStartX = evt.pageX;
-        tangleHasMoved = false;
-        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
-        return false;
-    });
-
-    $('.tab-content').on('mousedown', '.time-tangle', function(evt){
-        activeTangle = $(this);
-        activeTangle.addClass("active");
-        tangleStartVal = +activeTangle.attr("data-milliseconds");
-        tangleStartX = evt.pageX;
-        tangleHasMoved = false;
-        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
-        return false;
-    });
-
     $(document)
         .mousemove(function(evt) {
             if (activeTangle) {
@@ -1216,7 +1199,7 @@
         .mouseup(function() {
 
             if (activeTangle) {
-                if(activeTangle.hasClass('slider-tangle')){
+                if(activeTangle.hasClass('slider-tangle')){//annotation
                     renderAnnotation();
                     refreshAnnotationDisplay(myMedia.getCurrentTime());
                 }
@@ -1226,6 +1209,16 @@
         });
 
     //chapters
+    $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+        return false;
+    });
+
     function updateRenderChapter(chapterData){
         var segment = $('.chapter-segments li#'+chapterData.id),
             wChapterSegmentWrap = $('.chapter-segments').width(),
@@ -1285,7 +1278,16 @@
             updateChapterDuration(val, chapterBefore, chapterAfter);
     });
 
-//annotations
+    //annotations
+    $('.tab-content').on('mousedown', '.time-tangle', function(evt){
+        activeTangle = $(this);
+        activeTangle.addClass("active");
+        tangleStartVal = +activeTangle.attr("data-milliseconds");
+        tangleStartX = evt.pageX;
+        tangleHasMoved = false;
+        $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+        return false;
+    });
 
     $('.tab-content').on('valuechange', '.tangle-start', function(evt, val){
         var max = currentSlider.slider('values')[1],
@@ -1334,21 +1336,10 @@
         }
     }
 
-    //test
-    $('.log-annotations').bind('click', function(e){
-        e.preventDefault();
-        console.log(annotations.length + ' annotations', annotations);
-        currentSlider.slider( "values", 0, 55 );
-    });
-
-    $('.log-chapters').bind('click', function(e){
-        e.preventDefault();
-        console.log(chapters.length + ' chapitres',chapters);
-    });
-
 });//ready
 
-//Utilitaires
+/* Utility */
+
 Array.prototype.move = function (old_index, new_index) {
     if (new_index >= this.length) {
         var k = new_index - this.length;