--- a/src/js/widgets/segmentsWidget.js	Fri Oct 28 16:50:18 2011 +0200
+++ b/src/js/widgets/segmentsWidget.js	Fri Oct 28 16:51:35 2011 +0200
@@ -1,9 +1,9 @@
 IriSP.SegmentsWidget = function(Popcorn, config, Serializer) {
-  
+
   var self = this;
   IriSP.Widget.call(this, Popcorn, config, Serializer);
   this.oldSearchMatches = [];
-  
+
   // event handlers
   this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); });
   this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); });
@@ -16,44 +16,49 @@
 
   var self = this;
   var annotations = this._serializer._data.annotations;
-  
+  //this.selector.attr("class", "Ldt-Segments");
+
+  //this.selector.append("<div style='position: absolute; z-index: 100; text-color: blue'>bfdgdfgsdfgsdgsdfgsdg</div>")
+
   var i = 0;
-	for (i = 0; i < annotations.length; i++) {    
+
+  for (i = 0; i < annotations.length; i++) {
     var annotation = annotations[i];
 
     var begin = Math.round((+ annotation.begin) / 1000);
     var end = Math.round((+ annotation.end) / 1000);
     var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
-    var id = annotation.id;    
+    var id = annotation.id;
     var startPourcent 	= IriSP.timeToPourcent(begin, duration);
     var endPourcent 	= IriSP.timeToPourcent(end, duration) - startPourcent;
+
     var divTitle		= annotation.content.title.substr(0,55);
     var color = annotation.content.color
-    
-    
+
+
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
         {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
         "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(color),
         "seekPlace" : Math.round(begin/1000)});
-    
-    
-    var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template, 
+
+
+    var toolTipTemplate = Mustache.to_html(IriSP.tooltip_template,
           {"title" : divTitle, "begin" : begin, "end" : end,
           "description": annotation.content.description});
-    
-    IriSP.jQuery("#Ldt-Annotations").append(annotationTemplate);    
-    
+
+    this.selector.append(annotationTemplate);
+
     IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
-    
+
     IriSP.jQuery("#" + id).fadeTo(0,0.3);
-    
+
     IriSP.jQuery("#" + id).mouseover(function() {
       IriSP.jQuery("#" + id).animate({opacity: 0.6}, 5);
-    }).mouseout(function(){		
+    }).mouseout(function(){
       IriSP.jQuery("#" + id).animate({opacity: 0.3}, 5);
     });
-    
-    IriSP.jQuery("#" + id).click(function(_this, annotation) { 
+
+    IriSP.jQuery("#" + id).click(function(_this, annotation) {
                                     return function() { _this.clickHandler(annotation)};
                                  }(this, annotation));
 
@@ -61,29 +66,29 @@
     // FIXME: make it work - the arrow swings wildly atm.
     var middle = IriSP.timeToPourcent(begin + (end - begin)/ 2, duration);
     var arrow_div_width = IriSP.jQuery("#Ldt-Show-Arrow").width();
-    
+
     var real_middle = middle - (middle * (1 - this.width/arrow_div_width));
-    var conf = {start: begin, end: end, 
-                onStart: 
-                       function(middle) {                         
-                        return function() { 
-                          IriSP.jQuery("#Ldt-Show-Arrow").animate({left: real_middle + '%'}, 1000); }}(middle)                
+    var conf = {start: begin, end: end,
+                onStart:
+                       function(middle) {
+                        return function() {
+                          IriSP.jQuery("#Ldt-Show-Arrow").animate({left: real_middle + '%'}, 1000); }}(middle)
                 };
     this._Popcorn = this._Popcorn.code(conf);
-  } 
+  }
 };
 
 /* restores the view after a search */
 IriSP.SegmentsWidget.prototype.clear = function() {
   // reinit the fields
-  for (var id in this.oldSearchMatches) {     
-      
+  for (var id in this.oldSearchMatches) {
+
       IriSP.jQuery("#"+id).dequeue();
-			IriSP.jQuery("#"+id).animate({height:0},100);	
+			IriSP.jQuery("#"+id).animate({height:0},100);
 			IriSP.jQuery("#"+id).css('border','0px');
 			IriSP.jQuery("#"+id).css('border-color','red');
 			IriSP.jQuery("#"+id).animate({opacity:0.3},100);
-  }   
+  }
 };
 
 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
@@ -95,10 +100,10 @@
 
   if (searchString == "")
     return;
-  
+
   console.log(searchString);
   var matches = this._serializer.searchOccurences(searchString);
-  
+
   for (var id in matches) {
     var factor = matches[id] * 8;
     IriSP.jQuery("#"+id).dequeue();
@@ -109,10 +114,10 @@
 
     //IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1');
   }
-  
+
   // clean up the blocks that were in the previous search
   // but who aren't in the current one.
-  for (var id in this.oldSearchMatches) { 
+  for (var id in this.oldSearchMatches) {
     if (!matches.hasOwnProperty(id)) {
         IriSP.jQuery("#"+id).dequeue();
 				IriSP.jQuery("#"+id).animate({height:0},250);

--- a/unittests/tests/segmentsWidget.js	Fri Oct 28 16:50:18 2011 +0200
+++ b/unittests/tests/segmentsWidget.js	Fri Oct 28 16:51:35 2011 +0200
@@ -7,35 +7,30 @@
     
     this.dt = new IriSP.DataLoader();
     this.ser = new IriSP.MockSerializer(this.dt, "/url"); /* dummy serializer */
-    
-    
-    IriSP.jQuery("#widget-div").append("<div id='Ldt-Annotations'></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 */
     this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
-  }
-  });
+  }});
   
   test("test widget initialization", function() {  
     var widget = new IriSP.SegmentsWidget(this.Popcorn, this.config, this.ser);    
     widget.draw();
   
-    equal(IriSP.jQuery("#Ldt-Annotations").length, 1, "test if the div has been added correctly");
-    equal(IriSP.jQuery("#Ldt-Annotations").children().length, this.ser._data.annotations.length, "test if children have been added correctly");     
+    equal(IriSP.jQuery("#widget-div").length, 1, "test if the div has been added correctly");
+    equal(IriSP.jQuery("#widget-div").children().length, this.ser._data.annotations.length, "test if children have been added correctly");
   });
   
   test("test click on a random segment", function() {
@@ -46,7 +41,7 @@
     var spy_handler = sinon.spy(widget, "clickHandler");
     this.Popcorn.listen("timeupdate", spy_callback);    
     
-    var selector = IriSP.jQuery("#Ldt-Annotations :not(first-child)");
+    var selector = IriSP.jQuery("#widget-div :not(first-child)");
     var random = Math.round(Math.random() * selector.length) + 1;
     selector.eq(random).click();
         
@@ -61,9 +56,9 @@
     var widget = new IriSP.SegmentsWidget(this.Popcorn, this.config, this.ser);
     widget.draw();    
 
-    var oldStyle = IriSP.jQuery("#Ldt-Annotations").children(tag_id).attr("style");
+    var oldStyle = IriSP.jQuery("#widget-div").children(tag_id).attr("style");
     widget._Popcorn.trigger("IriSP.search", "sociologie");
-    var newStyle = IriSP.jQuery("#Ldt-Annotations").children(tag_id).attr("style");
+    var newStyle = IriSP.jQuery("#widget-div").children(tag_id).attr("style");
     notEqual(oldStyle, newStyle, "the segment style has been modified");
   });
 }; 
\ No newline at end of file