# HG changeset patch
# User hamidouk
# Date 1324633567 -3600
# Node ID 97599ff4307210c2635e216ab9150654dc5156b0
# Parent  b1e442d9a1bc2cd7fda271e5880b9739f99895ff# Parent  fe8c9f4791cb28ae2b1b91b23596bb87fd520b94
Merge with calage-segmentsWidget

diff -r b1e442d9a1bc -r 97599ff43072 sbin/build/client.xml
--- a/sbin/build/client.xml	Wed Dec 21 16:06:41 2011 +0100
+++ b/sbin/build/client.xml	Fri Dec 23 10:46:07 2011 +0100
@@ -50,7 +50,7 @@
 			<filelist dir="../../src/js/" files="header.js" />
 			
       <filelist dir="../../src/js/libs" 
-                files="lab.js mustache.js"/> 
+                files="lab.js mustache.js underscore.js"/> 
      
       <!-- required file before everything else -->
 	    <filelist dir="../../src/js" files="main.js" />
diff -r b1e442d9a1bc -r 97599ff43072 src/css/LdtPlayer.css
--- a/src/css/LdtPlayer.css	Wed Dec 21 16:06:41 2011 +0100
+++ b/src/css/LdtPlayer.css	Fri Dec 23 10:46:07 2011 +0100
@@ -23,8 +23,8 @@
       padding-bottom: 8px; /* FIXME: only a temporary fix. This should be put into the layout manager. */
     }
 
-    .Ldt-iri-chapter{
-      float: left;
+    .Ldt-iri-chapter {
+      position: absolute;
       height: 10px;
       border-right: 1px solid white;
     }
diff -r b1e442d9a1bc -r 97599ff43072 src/js/libs/underscore.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/libs/underscore.js	Fri Dec 23 10:46:07 2011 +0100
@@ -0,0 +1,30 @@
+// Underscore.js 1.2.3
+// (c) 2009-2011 Jeremy Ashkenas, DocumentCloud Inc.
+// Underscore is freely distributable under the MIT license.
+// Portions of Underscore are inspired or borrowed from Prototype,
+// Oliver Steele's Functional, and John Resig's Micro-Templating.
+// For all details and documentation:
+// http://documentcloud.github.com/underscore
+(function(){function r(a,c,d){if(a===c)return a!==0||1/a==1/c;if(a==null||c==null)return a===c;if(a._chain)a=a._wrapped;if(c._chain)c=c._wrapped;if(a.isEqual&&b.isFunction(a.isEqual))return a.isEqual(c);if(c.isEqual&&b.isFunction(c.isEqual))return c.isEqual(a);var e=l.call(a);if(e!=l.call(c))return false;switch(e){case "[object String]":return a==String(c);case "[object Number]":return a!=+a?c!=+c:a==0?1/a==1/c:a==+c;case "[object Date]":case "[object Boolean]":return+a==+c;case "[object RegExp]":return a.source==
+c.source&&a.global==c.global&&a.multiline==c.multiline&&a.ignoreCase==c.ignoreCase}if(typeof a!="object"||typeof c!="object")return false;for(var f=d.length;f--;)if(d[f]==a)return true;d.push(a);var f=0,g=true;if(e=="[object Array]"){if(f=a.length,g=f==c.length)for(;f--;)if(!(g=f in a==f in c&&r(a[f],c[f],d)))break}else{if("constructor"in a!="constructor"in c||a.constructor!=c.constructor)return false;for(var h in a)if(m.call(a,h)&&(f++,!(g=m.call(c,h)&&r(a[h],c[h],d))))break;if(g){for(h in c)if(m.call(c,
+h)&&!f--)break;g=!f}}d.pop();return g}var s=this,F=s._,o={},k=Array.prototype,p=Object.prototype,i=k.slice,G=k.concat,H=k.unshift,l=p.toString,m=p.hasOwnProperty,v=k.forEach,w=k.map,x=k.reduce,y=k.reduceRight,z=k.filter,A=k.every,B=k.some,q=k.indexOf,C=k.lastIndexOf,p=Array.isArray,I=Object.keys,t=Function.prototype.bind,b=function(a){return new n(a)};if(typeof exports!=="undefined"){if(typeof module!=="undefined"&&module.exports)exports=module.exports=b;exports._=b}else typeof define==="function"&&
+define.amd?define("underscore",function(){return b}):s._=b;b.VERSION="1.2.3";var j=b.each=b.forEach=function(a,c,b){if(a!=null)if(v&&a.forEach===v)a.forEach(c,b);else if(a.length===+a.length)for(var e=0,f=a.length;e<f;e++){if(e in a&&c.call(b,a[e],e,a)===o)break}else for(e in a)if(m.call(a,e)&&c.call(b,a[e],e,a)===o)break};b.map=function(a,c,b){var e=[];if(a==null)return e;if(w&&a.map===w)return a.map(c,b);j(a,function(a,g,h){e[e.length]=c.call(b,a,g,h)});return e};b.reduce=b.foldl=b.inject=function(a,
+c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(x&&a.reduce===x)return e&&(c=b.bind(c,e)),f?a.reduce(c,d):a.reduce(c);j(a,function(a,b,i){f?d=c.call(e,d,a,b,i):(d=a,f=true)});if(!f)throw new TypeError("Reduce of empty array with no initial value");return d};b.reduceRight=b.foldr=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(y&&a.reduceRight===y)return e&&(c=b.bind(c,e)),f?a.reduceRight(c,d):a.reduceRight(c);var g=b.toArray(a).reverse();e&&!f&&(c=b.bind(c,e));return f?b.reduce(g,
+c,d,e):b.reduce(g,c)};b.find=b.detect=function(a,c,b){var e;D(a,function(a,g,h){if(c.call(b,a,g,h))return e=a,true});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(z&&a.filter===z)return a.filter(c,b);j(a,function(a,g,h){c.call(b,a,g,h)&&(e[e.length]=a)});return e};b.reject=function(a,c,b){var e=[];if(a==null)return e;j(a,function(a,g,h){c.call(b,a,g,h)||(e[e.length]=a)});return e};b.every=b.all=function(a,c,b){var e=true;if(a==null)return e;if(A&&a.every===A)return a.every(c,
+b);j(a,function(a,g,h){if(!(e=e&&c.call(b,a,g,h)))return o});return e};var D=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(B&&a.some===B)return a.some(c,d);j(a,function(a,b,h){if(e||(e=c.call(d,a,b,h)))return o});return!!e};b.include=b.contains=function(a,c){var b=false;if(a==null)return b;return q&&a.indexOf===q?a.indexOf(c)!=-1:b=D(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(c.call?c||a:a[c]).apply(a,
+d)})};b.pluck=function(a,c){return b.map(a,function(a){return a[c]})};b.max=function(a,c,d){if(!c&&b.isArray(a))return Math.max.apply(Math,a);if(!c&&b.isEmpty(a))return-Infinity;var e={computed:-Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b>=e.computed&&(e={value:a,computed:b})});return e.value};b.min=function(a,c,d){if(!c&&b.isArray(a))return Math.min.apply(Math,a);if(!c&&b.isEmpty(a))return Infinity;var e={computed:Infinity};j(a,function(a,b,h){b=c?c.call(d,a,b,h):a;b<e.computed&&(e={value:a,
+computed:b})});return e.value};b.shuffle=function(a){var c=[],b;j(a,function(a,f){f==0?c[0]=a:(b=Math.floor(Math.random()*(f+1)),c[f]=c[b],c[b]=a)});return c};b.sortBy=function(a,c,d){return b.pluck(b.map(a,function(a,b,g){return{value:a,criteria:c.call(d,a,b,g)}}).sort(function(a,c){var b=a.criteria,d=c.criteria;return b<d?-1:b>d?1:0}),"value")};b.groupBy=function(a,c){var d={},e=b.isFunction(c)?c:function(a){return a[c]};j(a,function(a,b){var c=e(a,b);(d[c]||(d[c]=[])).push(a)});return d};b.sortedIndex=
+function(a,c,d){d||(d=b.identity);for(var e=0,f=a.length;e<f;){var g=e+f>>1;d(a[g])<d(c)?e=g+1:f=g}return e};b.toArray=function(a){return!a?[]:a.toArray?a.toArray():b.isArray(a)?i.call(a):b.isArguments(a)?i.call(a):b.values(a)};b.size=function(a){return b.toArray(a).length};b.first=b.head=function(a,b,d){return b!=null&&!d?i.call(a,0,b):a[0]};b.initial=function(a,b,d){return i.call(a,0,a.length-(b==null||d?1:b))};b.last=function(a,b,d){return b!=null&&!d?i.call(a,Math.max(a.length-b,0)):a[a.length-
+1]};b.rest=b.tail=function(a,b,d){return i.call(a,b==null||d?1:b)};b.compact=function(a){return b.filter(a,function(a){return!!a})};b.flatten=function(a,c){return b.reduce(a,function(a,e){if(b.isArray(e))return a.concat(c?e:b.flatten(e));a[a.length]=e;return a},[])};b.without=function(a){return b.difference(a,i.call(arguments,1))};b.uniq=b.unique=function(a,c,d){var d=d?b.map(a,d):a,e=[];b.reduce(d,function(d,g,h){if(0==h||(c===true?b.last(d)!=g:!b.include(d,g)))d[d.length]=g,e[e.length]=a[h];return d},
+[]);return e};b.union=function(){return b.uniq(b.flatten(arguments,true))};b.intersection=b.intersect=function(a){var c=i.call(arguments,1);return b.filter(b.uniq(a),function(a){return b.every(c,function(c){return b.indexOf(c,a)>=0})})};b.difference=function(a){var c=b.flatten(i.call(arguments,1));return b.filter(a,function(a){return!b.include(c,a)})};b.zip=function(){for(var a=i.call(arguments),c=b.max(b.pluck(a,"length")),d=Array(c),e=0;e<c;e++)d[e]=b.pluck(a,""+e);return d};b.indexOf=function(a,
+c,d){if(a==null)return-1;var e;if(d)return d=b.sortedIndex(a,c),a[d]===c?d:-1;if(q&&a.indexOf===q)return a.indexOf(c);for(d=0,e=a.length;d<e;d++)if(d in a&&a[d]===c)return d;return-1};b.lastIndexOf=function(a,b){if(a==null)return-1;if(C&&a.lastIndexOf===C)return a.lastIndexOf(b);for(var d=a.length;d--;)if(d in a&&a[d]===b)return d;return-1};b.range=function(a,b,d){arguments.length<=1&&(b=a||0,a=0);for(var d=arguments[2]||1,e=Math.max(Math.ceil((b-a)/d),0),f=0,g=Array(e);f<e;)g[f++]=a,a+=d;return g};
+var E=function(){};b.bind=function(a,c){var d,e;if(a.bind===t&&t)return t.apply(a,i.call(arguments,1));if(!b.isFunction(a))throw new TypeError;e=i.call(arguments,2);return d=function(){if(!(this instanceof d))return a.apply(c,e.concat(i.call(arguments)));E.prototype=a.prototype;var b=new E,g=a.apply(b,e.concat(i.call(arguments)));return Object(g)===g?g:b}};b.bindAll=function(a){var c=i.call(arguments,1);c.length==0&&(c=b.functions(a));j(c,function(c){a[c]=b.bind(a[c],a)});return a};b.memoize=function(a,
+c){var d={};c||(c=b.identity);return function(){var b=c.apply(this,arguments);return m.call(d,b)?d[b]:d[b]=a.apply(this,arguments)}};b.delay=function(a,b){var d=i.call(arguments,2);return setTimeout(function(){return a.apply(a,d)},b)};b.defer=function(a){return b.delay.apply(b,[a,1].concat(i.call(arguments,1)))};b.throttle=function(a,c){var d,e,f,g,h,i=b.debounce(function(){h=g=false},c);return function(){d=this;e=arguments;var b;f||(f=setTimeout(function(){f=null;h&&a.apply(d,e);i()},c));g?h=true:
+a.apply(d,e);i();g=true}};b.debounce=function(a,b){var d;return function(){var e=this,f=arguments;clearTimeout(d);d=setTimeout(function(){d=null;a.apply(e,f)},b)}};b.once=function(a){var b=false,d;return function(){if(b)return d;b=true;return d=a.apply(this,arguments)}};b.wrap=function(a,b){return function(){var d=G.apply([a],arguments);return b.apply(this,d)}};b.compose=function(){var a=arguments;return function(){for(var b=arguments,d=a.length-1;d>=0;d--)b=[a[d].apply(this,b)];return b[0]}};b.after=
+function(a,b){return a<=0?b():function(){if(--a<1)return b.apply(this,arguments)}};b.keys=I||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var b=[],d;for(d in a)m.call(a,d)&&(b[b.length]=d);return b};b.values=function(a){return b.map(a,b.identity)};b.functions=b.methods=function(a){var c=[],d;for(d in a)b.isFunction(a[d])&&c.push(d);return c.sort()};b.extend=function(a){j(i.call(arguments,1),function(b){for(var d in b)b[d]!==void 0&&(a[d]=b[d])});return a};b.defaults=function(a){j(i.call(arguments,
+1),function(b){for(var d in b)a[d]==null&&(a[d]=b[d])});return a};b.clone=function(a){return!b.isObject(a)?a:b.isArray(a)?a.slice():b.extend({},a)};b.tap=function(a,b){b(a);return a};b.isEqual=function(a,b){return r(a,b,[])};b.isEmpty=function(a){if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(m.call(a,c))return false;return true};b.isElement=function(a){return!!(a&&a.nodeType==1)};b.isArray=p||function(a){return l.call(a)=="[object Array]"};b.isObject=function(a){return a===
+Object(a)};b.isArguments=function(a){return l.call(a)=="[object Arguments]"};if(!b.isArguments(arguments))b.isArguments=function(a){return!(!a||!m.call(a,"callee"))};b.isFunction=function(a){return l.call(a)=="[object Function]"};b.isString=function(a){return l.call(a)=="[object String]"};b.isNumber=function(a){return l.call(a)=="[object Number]"};b.isNaN=function(a){return a!==a};b.isBoolean=function(a){return a===true||a===false||l.call(a)=="[object Boolean]"};b.isDate=function(a){return l.call(a)==
+"[object Date]"};b.isRegExp=function(a){return l.call(a)=="[object RegExp]"};b.isNull=function(a){return a===null};b.isUndefined=function(a){return a===void 0};b.noConflict=function(){s._=F;return this};b.identity=function(a){return a};b.times=function(a,b,d){for(var e=0;e<a;e++)b.call(d,e)};b.escape=function(a){return(""+a).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;").replace(/\//g,"&#x2F;")};b.mixin=function(a){j(b.functions(a),function(c){J(c,
+b[c]=a[c])})};var K=0;b.uniqueId=function(a){var b=K++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};b.template=function(a,c){var d=b.templateSettings,d="var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('"+a.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(d.escape,function(a,b){return"',_.escape("+b.replace(/\\'/g,"'")+"),'"}).replace(d.interpolate,function(a,b){return"',"+b.replace(/\\'/g,
+"'")+",'"}).replace(d.evaluate||null,function(a,b){return"');"+b.replace(/\\'/g,"'").replace(/[\r\n\t]/g," ")+";__p.push('"}).replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\t")+"');}return __p.join('');",e=new Function("obj","_",d);return c?e(c,b):function(a){return e.call(this,a,b)}};var n=function(a){this._wrapped=a};b.prototype=n.prototype;var u=function(a,c){return c?b(a).chain():a},J=function(a,c){n.prototype[a]=function(){var a=i.call(arguments);H.call(a,this._wrapped);return u(c.apply(b,
+a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];n.prototype[a]=function(){b.apply(this._wrapped,arguments);return u(this._wrapped,this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];n.prototype[a]=function(){return u(b.apply(this._wrapped,arguments),this._chain)}});n.prototype.chain=function(){this._chain=true;return this};n.prototype.value=function(){return this._wrapped}}).call(this);
diff -r b1e442d9a1bc -r 97599ff43072 src/js/main.js
--- a/src/js/main.js	Wed Dec 21 16:06:41 2011 +0100
+++ b/src/js/main.js	Fri Dec 23 10:46:07 2011 +0100
@@ -43,6 +43,8 @@
 
     $L.wait(function() {
       IriSP.jQuery = window.jQuery.noConflict( true );
+      IriSP._ = window._.noConflict();
+      IriSP.underscore = IriSP._;
       
       var css_link_jquery = IriSP.jQuery( "<link>", { 
         rel: "stylesheet", 
diff -r b1e442d9a1bc -r 97599ff43072 src/js/serializers/JSONSerializer.js
--- a/src/js/serializers/JSONSerializer.js	Wed Dec 21 16:06:41 2011 +0100
+++ b/src/js/serializers/JSONSerializer.js	Fri Dec 23 10:46:07 2011 +0100
@@ -242,3 +242,34 @@
 
   return ret_array;
 };
+
+
+/* this function returns a list of ids of tweet lines */
+IriSP.JSONSerializer.prototype.getTweetIds = function() {
+  if (typeof(this._data.lists) === "undefined" || this._data.lists === null)
+    return [];
+
+  var tweetsId = [];
+  
+  /* first get the list containing the tweets */
+  var tweets = IriSP.underscore.filter(this._data.lists, function(entry) { return entry.id.indexOf("tweet") !== -1 });
+  
+  // FIXME: collect tweets from multiple sources ?
+  tweetsId = IriSP.underscore.pluck(tweets[0].items, "id-ref");
+
+  return tweetsId;
+};
+
+/* this function returns a list of lines which are not tweet lines */
+IriSP.JSONSerializer.prototype.getNonTweetIds = function() {
+  if (typeof(this._data.lists) === "undefined" || this._data.lists === null)
+    return [];
+  
+  /* get all the ids */
+  var ids = IriSP.underscore.map(this._data.lists, function(entry) {                                                         
+                                                         return IriSP.underscore.pluck(entry.items, "id-ref"); });
+                                                         
+  var illegal_values = this.getTweetIds();
+  return IriSP.underscore.difference(ids, illegal_values);
+  
+};
diff -r b1e442d9a1bc -r 97599ff43072 src/js/widgets/segmentsWidget.js
--- a/src/js/widgets/segmentsWidget.js	Wed Dec 21 16:06:41 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Fri Dec 23 10:46:07 2011 +0100
@@ -12,29 +12,41 @@
 
 IriSP.SegmentsWidget.prototype = new IriSP.Widget();
 
+/* Get the width of a segment, in pixels. */
+IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) {  
+  var begin = Math.round((+ annotation.begin) / 1000);
+  var end = Math.round((+ annotation.end) / 1000);    
+  var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
+  
+  var startPourcent 	= IriSP.timeToPourcent(begin, duration);
+  var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100));
+  
+  var endPourcent 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
+  var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100));
+  
+  return endPixel;
+};
+
+/* compute the total length of a group of segments */
+IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) {
+  var self = this;
+  var total = 0;
+  
+  for (var i = 0; i < segmentsList.length; i++)
+    total += self.segmentToPixel(segmentsList[i].annotation);
+  
+  return total;  
+};
+
 IriSP.SegmentsWidget.prototype.draw = function() {
 
   var self = this;
   var annotations = this._serializer._data.annotations;
 
   this.selector.addClass("Ldt-SegmentsWidget");
-
-  /* in case we have different types of annotations, we want to display only the first type */
-  /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either
-     null or undefined.
-  */
-  var view;
-
-  if (typeof(this._serializer._data.views) !== "undefined" && this._serializer._data.views !== null)
-     view = this._serializer._data.views[0];
-
-  var view_type = "";
-
-  if(typeof(view) !== "undefined" && typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
-          view_type = view.annotation_types[0];
-  }
- 
   this.selector.append(Mustache.to_html(IriSP.overlay_marker_template));
+          
+  var view_type = this._serializer.getNonTweetIds()[0];    
   
   this.positionMarker = this.selector.children(":first");
   
@@ -42,9 +54,9 @@
   
   
   var i = 0;
-  var totalWidth = this.selector.width();
-  var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */
- 
+  
+  var segments_annotations = [];
+  
   for (i = 0; i < annotations.length; i++) {
     var annotation = annotations[i];
 
@@ -54,23 +66,30 @@
         continue;
     }
 
-    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 startPourcent 	= IriSP.timeToPourcent(begin, duration);
+    segments_annotations.push(annotation);
+  }
     
-    /* surprisingly, the following code doesn't work on webkit - for some reason, most of the 
-       boxes are 3 pixels smaller.
-    */
-    var endPourcent 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
-    var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2;
+  var totalWidth = this.selector.width() - segments_annotations.length;
+  var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; });
+  
+  for (i = 0; i < segments_annotations.length; i++) {
+  
+    var annotation = segments_annotations[i];
+    var begin = (+ annotation.begin);
+    var end = (+ annotation.end);
+    var duration = this._serializer.currentMedia().meta["dc:duration"];
+    var id = annotation.id;
         
-    if (i == 0) {
+    var startPixel = Math.floor(this.selector.parent().width() * (begin / duration));
 
-      endPourcent -= onePxPercent;
-    }
+    var endPixel = Math.floor(this.selector.parent().width() * (end / duration));
     
+    if (annotation.id !== lastSegment.id) 
+      var pxWidth = endPixel - startPixel -1;
+    else
+      /* the last segment has no segment following it */
+      var pxWidth = endPixel - startPixel;
+ 
     var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55);
 
     if (typeof(annotation.content.color) !== "undefined")
@@ -86,13 +105,18 @@
       hexa_color = hexa_color + '00';
     
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
-        {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
-        "endPixel" : endPixel, "hexa_color" : hexa_color,
+        {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel,
+        "pxWidth" : pxWidth, "hexa_color" : hexa_color,
         "seekPlace" : Math.round(begin/1000)});
 
+        
     this.selector.append(annotationTemplate);
-
-//    IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
+    
+    /* add a special class to the last segment and change its border */
+    if (annotation.id === lastSegment.id) {
+        this.selector.find("#" + id).addClass("Ldt-lastSegment");        
+        this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color);        
+    }
 
     IriSP.jQuery("#" + id).fadeTo(0, 0.3);
 
@@ -126,7 +150,7 @@
 
 /* restores the view after a search */
 IriSP.SegmentsWidget.prototype.clear = function() {
-  this.selector.children(".Ldt-iri-chapter").css('border','none').animate({opacity:0.3}, 100);
+  this.selector.children(".Ldt-iri-chapter").animate({opacity:0.3}, 100);
 };
 
 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) {
@@ -155,7 +179,6 @@
   for (var id in matches) {
     var factor = 0.5 + matches[id] * 0.2;
     this.selector.find("#"+id).dequeue();
-    this.selector.find("#"+id).css('border','1px red');
     this.selector.find("#"+id).animate({opacity:factor}, 200);
   }
 
diff -r b1e442d9a1bc -r 97599ff43072 src/templates/annotation.html
--- a/src/templates/annotation.html	Wed Dec 21 16:06:41 2011 +0100
+++ b/src/templates/annotation.html	Fri Dec 23 10:46:07 2011 +0100
@@ -1,8 +1,8 @@
 {{! template for an annotation displayed in a segmentWidget }}
 <div title='{{divTitle}}' id='{{id}}'
 	class='Ldt-iri-chapter' 
-	style='left: {{startPourcent}}%; 
-         width: {{endPixel}}px; 
+	style='left: {{startPixel}}px; 
+         width: {{pxWidth}}px; 
          background-color:#{{hexa_color}};' 
 	>
 </div>
diff -r b1e442d9a1bc -r 97599ff43072 test/integration/polemic-jsonp.htm
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/integration/polemic-jsonp.htm	Fri Dec 23 10:46:07 2011 +0100
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
+
+<head>
+<title>Metadataplayer - Polemic tweet integration test</title>
+</head>
+
+<body>
+
+  <div style="width:650px;font-family: 'Trebuchet MS', 'Helvetica', 'Arial',  'Verdana', 'sans-serif';">
+  <h1>MetaDataPlayer</h1>
+  Polemic tweet integration test - loading an outside ressource using JSONP.
+  </div>
+  
+  
+ <!-- START Integration  ###################################### -->
+ <!-- SIMPLE PLAYER EXPERIMENTATION -->
+  <script type="text/javascript" src="../../build/LdtPlayer-release.js" type="text/javascript"></script>   
+  
+  <div id="video"></div>
+  <div id="LdtPlayer"></div>
+  
+  <script  type="text/javascript">
+    var config = {            
+        gui:{
+            width:650,
+            height:2100,              
+            container:'LdtPlayer',
+            css:'../../src/css/LdtPlayer.css',
+            widgets: [
+            {type: "SliderWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+						  type:'json'}
+						},
+            {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
+             mode: "radio",
+             metadata:{
+              format:'cinelab',
+              src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+              type:'json'}
+            },
+            {type: "SegmentsWidget",
+             metadata:{
+              format:'cinelab',
+              src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+              type:'json'},
+             requires: [{
+              type: "TooltipWidget",
+              width: 180,
+              heigh: 160,
+              metadata : {
+                type:'empty'
+              }
+             }],
+            },
+            {type: "ArrowWidget",
+             metadata:{
+              format:'cinelab',
+              src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+              type:'json'}
+            },
+
+            {type: "AnnotationsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+						  type:'json'}
+						},
+            {type: "TweetsWidget",
+						 metadata:{
+						  format:'cinelab',
+						  src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+						  type:'json'}
+						}      
+            ]
+        },
+      player:{
+      type:'jwplayer', // player type
+              flashplayer : '../libs/player.swf',
+              live: true, 
+              "controlbar.position" : "none", 
+              height: 300, 
+              width: 640, 
+              provider: "rtmp" 
+      },
+      modules: [
+               { type: "MediaFragment",
+  			     		 metadata:{
+	  	  			   format:'cinelab',
+		  				   src:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+						     type:'json'}
+						}]
+
+    };
+    
+    IriSP.loadLibs(IriSP.lib, config, "http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f20906c6-2c82-11e1-872c-00145ea49a02",
+      function() {   
+              var layoutManager = new IriSP.LayoutManager(config.gui.container);
+              var pop = IriSP.configurePopcorn(layoutManager, config.player);
+              
+              var widgets = IriSP.configureWidgets(pop, layoutManager, config.gui); 
+              var modules = IriSP.configureModules(pop, config.modules); 
+      });
+  </script>
+  
+  
+ </body>
+ <div id="PopcornContainer"></div>
+ </html>