--- a/src/js/widgets/annotationsWidget.js	Fri Oct 28 16:09:46 2011 +0200
+++ b/src/js/widgets/annotationsWidget.js	Fri Oct 28 16:43:59 2011 +0200
@@ -7,9 +7,9 @@
 IriSP.AnnotationsWidget.prototype = new IriSP.Widget();
 
 IriSP.AnnotationsWidget.prototype.clear = function() {
-    IriSP.jQuery("#Ldt-SaTitle").text("");
-    IriSP.jQuery("#Ldt-SaDescription").text("");
-    IriSP.jQuery("#Ldt-SaKeywordText").text("");
+    this.selector.find(".Ldt-SaTitle").text("");
+    this.selector.find(".Ldt-SaDescription").text("");
+    this.selector.find(".Ldt-SaKeywordText").text("");
 };
 
 IriSP.AnnotationsWidget.prototype.displayAnnotation = function(annotation) {
@@ -20,28 +20,27 @@
     var end = +annotation.end;
     var duration = +this._serializer.currentMedia().meta["dc:duration"];
 
-    IriSP.jQuery("#Ldt-SaTitle").text(title);
-    IriSP.jQuery("#Ldt-SaDescription").text(description);
-    IriSP.jQuery("#Ldt-SaKeywordText").text("Mots clefs : "+ keywords);
+    this.selector.find(".Ldt-SaTitle").text(title);
+    this.selector.find(".Ldt-SaDescription").text(description);
 		var startPourcent = parseInt(Math.round((begin*1+(end*1-begin*1)/2) / (duration*1)) / 100); 
-		IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000);
+		this.selector.find(".Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000);
 		//IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000);
 
 };
 
 IriSP.AnnotationsWidget.prototype.clearWidget = function() {
     /* retract the pane between two annotations */
-    IriSP.jQuery("#Ldt-SaTitle").text("");
-    IriSP.jQuery("#Ldt-SaDescription").text("");
-    IriSP.jQuery("#Ldt-SaKeywordText").html("");
-    IriSP.jQuery('#Ldt-ShowAnnotation').slideUp();
+    this.selector.find(".Ldt-SaTitle").text("");
+    this.selector.find(".Ldt-SaDescription").text("");
+    this.selector.find(".Ldt-SaKeywordText").html("");
+    this.selector.find(".Ldt-ShowAnnotation").slideUp();
 };
 
 IriSP.AnnotationsWidget.prototype.draw = function() {
   var _this = this;
 
   var annotationMarkup = Mustache.to_html(IriSP.annotationWidget_template, {"share_template" : IriSP.share_template});
-	IriSP.jQuery("#Ldt-Ligne").append(annotationMarkup);
+	this.selector.append(annotationMarkup);
 
   var annotations = this._serializer._data.annotations;
   var i;

--- a/src/templates/annotationWidget.html	Fri Oct 28 16:09:46 2011 +0200
+++ b/src/templates/annotationWidget.html	Fri Oct 28 16:43:59 2011 +0200
@@ -1,15 +1,14 @@
-		<div id='ldt-Show'></div>
-		<div id='Ldt-ShowAnnotation-audio' class='demo'>
-			<div id='Ldt-SaTitle'></div>
-			<div id='Ldt-SaDescription'></div>
-			<div class='cleaner'>
-				<!--&nbsp\;-->
-			</div>
+<div class='Ldt-AnnotationsWidget'>
+	<div class='ldt-Show'></div>
+	<div class='demo Ldt-ShowAnnotation-audio'>
+		<div class='Ldt-SaTitle'></div>
+		<div class='Ldt-SaDescription'></div>
+		<div class='cleaner'>
+			<!--&nbsp\;-->
 		</div>
-		<div id='Ldt-SaKeyword'>
-			<div id='Ldt-SaKeywordText'></div>
-			<div class='cleaner'></div>
-			<div id='Ldt-SaShareTools'>{{{share_template}}}</div>
-			<div class='cleaner'></div>
-		</div>
-		<div id='Ldt-Tags'>Mots clefs :</div>
\ No newline at end of file
+	</div>
+	<div class='Ldt-SaKeyword'>
+		<div class='Ldt-SaKeywordText'></div>
+
+	</div>
+</div>
\ No newline at end of file

--- a/unittests/tests/annotationsWidget.js	Fri Oct 28 16:09:46 2011 +0200
+++ b/unittests/tests/annotationsWidget.js	Fri Oct 28 16:43:59 2011 +0200
@@ -7,22 +7,16 @@
     
     this.dt = new IriSP.DataLoader();
     this.ser = new IriSP.MockSerializer(this.dt, "/url"); /* dummy serializer */
-    
+        
+    IriSP.jQuery("#widget-div").append("<div id='Ldt-Ligne'></div>");
     
-    IriSP.jQuery("#widget-div").append("<div id='Ldt-Ligne'></div>");
     this.config = {
-						metadata:{
-							format:'cinelab',
-							src:'test.json',
-							load:'json'},
-						gui:{
 							width:650,
 							height:1,
 							mode:'radio',
 							container:'widget-div',
 							debug:true,
-							css:'../src/css/LdtPlayer.css'},
-					};
+							css:'../src/css/LdtPlayer.css'};
     },
   teardown: function() {
     /* free the popcorn object because it has signal handlers attached to it */
@@ -34,8 +28,8 @@
     var widget = new IriSP.AnnotationsWidget(this.Popcorn, this.config, this.ser);    
     widget.draw();
 
-    equal(IriSP.jQuery("#Ldt-Ligne").length, 1, "test if the div has been added correctly");
-    equal(IriSP.jQuery("#Ldt-Ligne #Ldt-SaKeyword").length, 1, "test if sub-div has been added correctly");     
+    equal(widget.selector.children(".Ldt-AnnotationsWidget").length, 1, "test if the div has been added correctly");
+    equal(widget.selector.children(".Ldt-AnnotationsWidget").find(".Ldt-SaKeyword").length, 1, "test if sub-div has been added correctly");
   });
   
   test("test annotation display function", function() {
@@ -43,8 +37,8 @@
     widget.draw();
     var annotation = {content: {"title": "title", "description": "description", "keywords": "keywords"}};
     widget.displayAnnotation(annotation);
-    equal(IriSP.jQuery("#Ldt-SaTitle").text(), "title", "title set correctly");
-    equal(IriSP.jQuery("#Ldt-SaDescription").text(), "description", "description set correctly");
-    equal(IriSP.jQuery("#Ldt-SaKeywordText").text(), "Mots clefs : ", "keywords field set correctly");
+    equal(widget.selector.find(".Ldt-SaTitle").text(), "title", "title set correctly");
+    equal(widget.selector.find(".Ldt-SaDescription").text(), "description", "description set correctly");
+    equal(widget.selector.find(".Ldt-SaKeywordText").text(), "", "keywords field set correctly");
   });
 }; 
\ No newline at end of file