--- a/src/js/LdtPlayer.js	Tue Sep 13 12:29:30 2011 +0200
+++ b/src/js/LdtPlayer.js	Tue Sep 13 12:58:02 2011 +0200
@@ -960,11 +960,13 @@
 	//alert (this.duration);
 	var startPourcent 	= this.timeToPourcent(this.begin,this.duration); // temps du media 
 	var endPourcent 	= this.timeToPourcent(this.end,this.duration)-startPourcent;
-	var titleForDiv		= this.title.substr(0,55);
+	var divTitle		= this.title.substr(0,55);	
+		
+	IriSP.jQueryAnnotationTemplate = Mustache.to_html(IriSP.annotation_template,
+			{"divTitle" : divTitle, "id" : this.id, "startPourcent" : startPourcent,
+			"endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(this.color),
+			"seekPlace" : Math.round(this.begin/1000)});
 	
-	IriSP.jQueryAnnotationTemplate = "<div title='"+IriSP.stripHtml(titleForDiv)+"' id='"+this.id+"'  class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' width='100%' style=\"left:"+startPourcent+"%; width:"+endPourcent+"%; padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background:#"+IriSP.DEC_HEXA_COLOR(this.color)+";\" onClick=\"__IriSP.MyApiPlayer.seek('"+Math.round(this.begin/1000)+"');__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown();\"    ></div> ";
-	//alert(this.color+" : "+DEC_HEXA_COLOR(this.color));
-		
 	IriSP.jQuerytoolTipTemplate = Mustache.to_html(IriSP.tooltip_template, 
 				{"title" : this.title, "begin" : this.begin, "end" : this.end,
 				"description": this.description});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/annotation.html	Tue Sep 13 12:58:02 2011 +0200
@@ -0,0 +1,6 @@
+<div title='{{divTitle}}' id='{{id}}'
+	class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' 
+	width='100%' 
+	style='left: {{startPourcent}}%; width: {{endPourcent}}%; padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background:#{{hexa_color}};' 
+	onClick='IriSP.MyApiPlayer.seek({{seekPlace}});IriSP.jQuery(\"#Ldt-ShowAnnotation\").slideDown();'>
+</div>
\ No newline at end of file