Added events on annotation for inter widget communication new-model
authorveltr
Wed, 29 Aug 2012 18:34:11 +0200
branchnew-model
changeset 937 eb3c442cec50
parent 936 c66260a734ca
child 938 991f897f1cb1
Added events on annotation for inter widget communication
src/js/init.js
src/js/libs/underscore-min.js
src/js/model.js
src/js/players/player.mashup-html.js
src/widgets/AnnotationsList.css
src/widgets/AnnotationsList.js
src/widgets/Polemic.js
src/widgets/Segments.js
src/widgets/img/pinstripe-grey.png
--- a/src/js/init.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/js/init.js	Wed Aug 29 18:34:11 2012 +0200
@@ -95,7 +95,7 @@
         IriSP.jQuery = window.jQuery.noConflict();
     }
     if (typeof IriSP._ === "undefined" && typeof window._ !== "undefined") {
-        IriSP._ = window._.noConflict();
+        IriSP._ = window._;
     }
     IriSP.loadCss(IriSP.getLib("cssjQueryUI"));
     IriSP.loadCss(this.config.gui.css);
--- a/src/js/libs/underscore-min.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/js/libs/underscore-min.js	Wed Aug 29 18:34:11 2012 +0200
@@ -1,30 +1,32 @@
-// Underscore.js 1.2.3
-// (c) 2009-2011 Jeremy Ashkenas, DocumentCloud Inc.
+// Underscore.js 1.3.3
+// (c) 2009-2012 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);
+(function(){function r(a,c,d){if(a===c)return 0!==a||1/a==1/c;if(null==a||null==c)return a===c;a._chain&&(a=a._wrapped);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!1;switch(e){case "[object String]":return a==""+c;case "[object Number]":return a!=+a?c!=+c:0==a?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("object"!=typeof a||"object"!=typeof c)return!1;for(var f=d.length;f--;)if(d[f]==a)return!0;d.push(a);var f=0,g=!0;if("[object Array]"==e){if(f=a.length,g=f==c.length)for(;f--&&(g=f in a==f in c&&r(a[f],c[f],d)););}else{if("constructor"in a!="constructor"in c||a.constructor!=c.constructor)return!1;for(var h in a)if(b.has(a,h)&&(f++,!(g=b.has(c,h)&&r(a[h],c[h],d))))break;if(g){for(h in c)if(b.has(c,h)&&!f--)break;
+g=!f}}d.pop();return g}var s=this,I=s._,o={},k=Array.prototype,p=Object.prototype,i=k.slice,J=k.unshift,l=p.toString,K=p.hasOwnProperty,y=k.forEach,z=k.map,A=k.reduce,B=k.reduceRight,C=k.filter,D=k.every,E=k.some,q=k.indexOf,F=k.lastIndexOf,p=Array.isArray,L=Object.keys,t=Function.prototype.bind,b=function(a){return new m(a)};"undefined"!==typeof exports?("undefined"!==typeof module&&module.exports&&(exports=module.exports=b),exports._=b):s._=b;b.VERSION="1.3.3";var j=b.each=b.forEach=function(a,
+c,d){if(a!=null)if(y&&a.forEach===y)a.forEach(c,d);else if(a.length===+a.length)for(var e=0,f=a.length;e<f;e++){if(e in a&&c.call(d,a[e],e,a)===o)break}else for(e in a)if(b.has(a,e)&&c.call(d,a[e],e,a)===o)break};b.map=b.collect=function(a,c,b){var e=[];if(a==null)return e;if(z&&a.map===z)return a.map(c,b);j(a,function(a,g,h){e[e.length]=c.call(b,a,g,h)});if(a.length===+a.length)e.length=a.length;return e};b.reduce=b.foldl=b.inject=function(a,c,d,e){var f=arguments.length>2;a==null&&(a=[]);if(A&&
+a.reduce===A){e&&(c=b.bind(c,e));return f?a.reduce(c,d):a.reduce(c)}j(a,function(a,b,i){if(f)d=c.call(e,d,a,b,i);else{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(B&&a.reduceRight===B){e&&(c=b.bind(c,e));return 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;G(a,function(a,g,h){if(c.call(b,a,g,h)){e=a;return true}});return e};b.filter=b.select=function(a,c,b){var e=[];if(a==null)return e;if(C&&a.filter===C)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(D&&a.every===D)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 G=b.some=b.any=function(a,c,d){c||(c=b.identity);var e=false;if(a==null)return e;if(E&&a.some===E)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;if(q&&a.indexOf===q)return a.indexOf(c)!=-1;return b=G(a,function(a){return a===c})};b.invoke=function(a,c){var d=i.call(arguments,2);return b.map(a,function(a){return(b.isFunction(c)?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)&&a[0]===+a[0])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)&&a[0]===+a[0])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 b=[],d;j(a,function(a,f){d=Math.floor(Math.random()*(f+1));b[f]=b[d];b[d]=a});return b};b.sortBy=function(a,c,d){var e=b.isFunction(c)?c:function(a){return a[c]};return b.pluck(b.map(a,function(a,b,c){return{value:a,criteria:e.call(d,a,b,c)}}).sort(function(a,b){var c=a.criteria,d=b.criteria;return c===void 0?1:d===void 0?-1:c<d?-1:c>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?[]:b.isArray(a)||b.isArguments(a)?i.call(a):a.toArray&&b.isFunction(a.toArray)?a.toArray():b.values(a)};b.size=function(a){return b.isArray(a)?a.length:b.keys(a).length};b.first=b.head=b.take=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=[];a.length<3&&(c=true);b.reduce(d,function(d,g,h){if(c?b.last(d)!==g||!d.length:!b.include(d,g)){d.push(g);e.push(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),true);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){d=b.sortedIndex(a,c);return a[d]===c?d:-1}if(q&&a.indexOf===q)return a.indexOf(c);d=0;for(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(F&&a.lastIndexOf===F)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){if(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=a+d}return g};var H=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)));H.prototype=a.prototype;var b=new H,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 e=c.apply(this,arguments);return b.has(d,e)?d[e]:d[e]=a.apply(this,arguments)}};b.delay=function(a,b){var d=i.call(arguments,2);return setTimeout(function(){return a.apply(null,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,j=b.debounce(function(){h=
+g=false},c);return function(){d=this;e=arguments;f||(f=setTimeout(function(){f=null;h&&a.apply(d,e);j()},c));g?h=true:i=a.apply(d,e);j();g=true;return i}};b.debounce=function(a,b,d){var e;return function(){var f=this,g=arguments;d&&!e&&a.apply(f,g);clearTimeout(e);e=setTimeout(function(){e=null;d||a.apply(f,g)},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=[a].concat(i.call(arguments,0));
+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=L||function(a){if(a!==Object(a))throw new TypeError("Invalid object");var c=[],d;for(d in a)b.has(a,d)&&(c[c.length]=d);return c};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)a[d]=b[d]});return a};b.pick=function(a){var c={};j(b.flatten(i.call(arguments,1)),function(b){b in a&&(c[b]=a[b])});return c};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(a==null)return true;if(b.isArray(a)||b.isString(a))return a.length===0;for(var c in a)if(b.has(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]"};b.isArguments(arguments)||(b.isArguments=function(a){return!(!a||!b.has(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.isFinite=function(a){return b.isNumber(a)&&isFinite(a)};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.has=function(a,
+b){return K.call(a,b)};b.noConflict=function(){s._=I;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.result=function(a,c){if(a==null)return null;var d=a[c];return b.isFunction(d)?d.call(a):d};b.mixin=function(a){j(b.functions(a),function(c){M(c,b[c]=a[c])})};var N=0;b.uniqueId=
+function(a){var b=N++;return a?a+b:b};b.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var u=/.^/,n={"\\":"\\","'":"'",r:"\r",n:"\n",t:"\t",u2028:"\u2028",u2029:"\u2029"},v;for(v in n)n[n[v]]=v;var O=/\\|'|\r|\n|\t|\u2028|\u2029/g,P=/\\(\\|'|r|n|t|u2028|u2029)/g,w=function(a){return a.replace(P,function(a,b){return n[b]})};b.template=function(a,c,d){d=b.defaults(d||{},b.templateSettings);a="__p+='"+a.replace(O,function(a){return"\\"+n[a]}).replace(d.escape||
+u,function(a,b){return"'+\n_.escape("+w(b)+")+\n'"}).replace(d.interpolate||u,function(a,b){return"'+\n("+w(b)+")+\n'"}).replace(d.evaluate||u,function(a,b){return"';\n"+w(b)+"\n;__p+='"})+"';\n";d.variable||(a="with(obj||{}){\n"+a+"}\n");var a="var __p='';var print=function(){__p+=Array.prototype.join.call(arguments, '')};\n"+a+"return __p;\n",e=new Function(d.variable||"obj","_",a);if(c)return e(c,b);c=function(a){return e.call(this,a,b)};c.source="function("+(d.variable||"obj")+"){\n"+a+"}";return c};
+b.chain=function(a){return b(a).chain()};var m=function(a){this._wrapped=a};b.prototype=m.prototype;var x=function(a,c){return c?b(a).chain():a},M=function(a,c){m.prototype[a]=function(){var a=i.call(arguments);J.call(a,this._wrapped);return x(c.apply(b,a),this._chain)}};b.mixin(b);j("pop,push,reverse,shift,sort,splice,unshift".split(","),function(a){var b=k[a];m.prototype[a]=function(){var d=this._wrapped;b.apply(d,arguments);var e=d.length;(a=="shift"||a=="splice")&&e===0&&delete d[0];return x(d,
+this._chain)}});j(["concat","join","slice"],function(a){var b=k[a];m.prototype[a]=function(){return x(b.apply(this._wrapped,arguments),this._chain)}});m.prototype.chain=function(){this._chain=true;return this};m.prototype.value=function(){return this._wrapped}}).call(this);
--- a/src/js/model.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/js/model.js	Wed Aug 29 18:34:11 2012 +0200
@@ -86,6 +86,7 @@
     Array.call(this);
     this.directory = _directory;
     this.idIndex = [];
+    this.__events = {};
     if (typeof _directory == "undefined") {
         console.trace();
         throw "Error : new IriSP.Model.List(directory): directory is undefined";
@@ -259,6 +260,20 @@
     });
 }
 
+IriSP.Model.List.prototype.on = function(_event, _callback) {
+    if (typeof this.__events[_event] === "undefined") {
+        this.__events[_event] = [];
+    }
+    this.__events[_event].push(_callback);
+}
+
+IriSP.Model.List.prototype.trigger = function(_event, _data) {
+    var _list = this;
+    IriSP._(this.__events[_event]).each(function(_callback) {
+        _callback.call(_list, _data);
+    });
+}
+
 /* A simple time management object, that helps converting millisecs to seconds and strings,
  * without the clumsiness of the original Date object.
  */
@@ -383,6 +398,7 @@
     this.id = _id;
     this.title = "";
     this.description = "";
+    this.__events = {}
     this.source.directory.addElement(this);
 }
 
@@ -409,6 +425,20 @@
     });
 }
 
+IriSP.Model.Element.prototype.on = function(_event, _callback) {
+    if (typeof this.__events[_event] === "undefined") {
+        this.__events[_event] = [];
+    }
+    this.__events[_event].push(_callback);
+}
+
+IriSP.Model.Element.prototype.trigger = function(_event, _data) {
+    var _element = this;
+    IriSP._(this.__events[_event]).each(function(_callback) {
+        _callback.call(_element, _data);
+    });
+}
+
 /* */
 
 IriSP.Model.Media = function(_id, _source) {
--- a/src/js/players/player.mashup-html.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/js/players/player.mashup-html.js	Wed Aug 29 18:34:11 2012 +0200
@@ -41,7 +41,7 @@
         	// _videoUrl is an array of {src:"u",type:"m"}
         	l = _videoUrl.length;
         	for (var _i = 0; _i < l; _i++) {
-        		srcNode = IriSP.jQuery('<source>');
+        		var srcNode = IriSP.jQuery('<source>');
         		srcNode.attr({src:_videoUrl[_i]["src"], type:_videoUrl[_i]["type"]});
         		_videoEl.append(srcNode);
             }
--- a/src/widgets/AnnotationsList.css	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/widgets/AnnotationsList.css	Wed Aug 29 18:34:11 2012 +0200
@@ -20,8 +20,8 @@
     padding: 2px 0;
     min-height: 60px;
 }
-.Ldt-AnnotationsList-li:hover {
-    background: url(img/pinstripe-grey.png) !important;
+.Ldt-AnnotationsList-li.selected {
+    background-image: url(img/pinstripe-grey.png);
 }
 .Ldt-AnnotationsList-highlight {
     background: #F7268E;
--- a/src/widgets/AnnotationsList.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/widgets/AnnotationsList.js	Wed Aug 29 18:34:11 2012 +0200
@@ -46,8 +46,11 @@
 IriSP.Widgets.AnnotationsList.prototype.template =
     '<div class="Ldt-AnnotationsListWidget">'
     + '<ul class="Ldt-AnnotationsList-ul">'
-    + '{{#annotations}}'
-    + '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
+    + '</ul>'
+    + '</div>';
+
+IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = 
+    '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
     + '<div class="Ldt-AnnotationsList-ThumbContainer">'
     + '<a href="{{url}}">'
     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
@@ -69,10 +72,7 @@
     + '{{/tags}}'
     + '</ul>'
     + '{{/tags.length}}'
-    + '</li>'
-    + '{{/annotations}}'
-    + '</ul>'
-    + '</div>';
+    + '</li>';
 
 IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) {
     this.searchString = typeof searchString !== "undefined" ? searchString : '';
@@ -170,61 +170,72 @@
     if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {
         /* This part only gets executed if the list needs updating */
         this.lastIds = _ids;
-        var _data = _list.map(function(_annotation) {
-                    var _url = (
-                        ( typeof _annotation.url !== "undefined" && _annotation.url)
-                        ? _annotation.url
-                        : (
-                            ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project )
-                            ? Mustache.to_html(
-                                _this.foreign_url,
-                                {
-                                    project : _annotation.project,
-                                    media : _annotation.media.id,
-                                    annotation : _annotation.id,
-                                    annotationType : _annotation.annotationType.id
-                                }
-                            )
-                            : '#id=' + _annotation.id
-                            )
-                    );
-                    var _title = (_annotation.title || "").replace(_annotation.description,''),
-                        _description = _annotation.description;
-                    if (!_annotation.title) {
-                        _title = _annotation.creator;
-                    }
-                    if (!_annotation.description && _annotation.creator) {
-                        _description = _annotation.title;
-                        _title = _annotation.creator;
-                    }
-                    var _bgcolor;
-                    IriSP._(_this.polemics).each(function(_polemic) {
-                        var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true);
-                        if (_rgxp.test(_title + " " + _description)) {
-                            _bgcolor = _polemic.background_color;
+        this.list_$.html("");
+        _list.forEach(function(_annotation) {
+            var _url = (
+                ( typeof _annotation.url !== "undefined" && _annotation.url)
+                ? _annotation.url
+                : (
+                    ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project )
+                    ? Mustache.to_html(
+                        _this.foreign_url,
+                        {
+                            project : _annotation.project,
+                            media : _annotation.media.id,
+                            annotation : _annotation.id,
+                            annotationType : _annotation.annotationType.id
                         }
-                    });
-                    var _res = {
-                        id : _annotation.id,
-                        media_id : _annotation.getMedia().id,
-                        title : _title,
-                        description : _description,
-                        begin : _annotation.begin.toString(),
-                        end : _annotation.end.toString(),
-                        thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
-                        url : _url,
-                        tags : _annotation.getTagTexts(),
-                        specific_style : (typeof _bgcolor !== "undefined" ? "background: " + _bgcolor : "")
-                    }
-                    return _res;
-            }),
-            _html = Mustache.to_html(
-                this.template,
-                {
-                    annotations : _data
-                });
-    
-        this.$.html(_html);
+                    )
+                    : '#id=' + _annotation.id
+                    )
+            );
+            var _title = (_annotation.title || "").replace(_annotation.description,''),
+                _description = _annotation.description;
+            if (!_annotation.title) {
+                _title = _annotation.creator;
+            }
+            if (!_annotation.description && _annotation.creator) {
+                _description = _annotation.title;
+                _title = _annotation.creator;
+            }
+            var _bgcolor;
+            IriSP._(_this.polemics).each(function(_polemic) {
+                var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true);
+                if (_rgxp.test(_title + " " + _description)) {
+                    _bgcolor = _polemic.background_color;
+                }
+            });
+            var _data = {
+                id : _annotation.id,
+                media_id : _annotation.getMedia().id,
+                title : _title,
+                description : _description,
+                begin : _annotation.begin.toString(),
+                end : _annotation.end.toString(),
+                thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
+                url : _url,
+                tags : _annotation.getTagTexts(),
+                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "")
+            };
+            var _html = Mustache.to_html(_this.annotationTemplate, _data);
+            var _el = IriSP.jQuery(_html);
+            _el.mouseover(function() {
+                    _annotation.trigger("select");
+                })
+                .mouseout(function() {
+                    _annotation.trigger("unselect");
+                })
+                .appendTo(_this.list_$);
+            _annotation.on("select", function() {
+                _this.annotations_$.removeClass("selected");
+                _el.addClass("selected");
+            });
+            _annotation.on("unselect", function() {
+                _this.annotations_$.removeClass("selected");
+            });;
+        });
+        
+        this.annotations_$ = this.$.find('.Ldt-AnnotationsList-li');
         
         /* Correct the empty tag bug */
         this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
@@ -261,6 +272,10 @@
 
 IriSP.Widgets.AnnotationsList.prototype.draw = function() {
     
+    this.renderTemplate();
+    
+    this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
+    
     this.bindPopcorn("IriSP.search", "onSearch");
     this.bindPopcorn("IriSP.search.closed", "onSearch");
     this.bindPopcorn("IriSP.search.cleared", "onSearch");
--- a/src/widgets/Polemic.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/widgets/Polemic.js	Wed Aug 29 18:34:11 2012 +0200
@@ -64,7 +64,7 @@
             } else {
                 _el.css({
                     "background" : _el.attr("polemic-color"),
-                    "opacity" : .5
+                    "opacity" : .3
                 });
             }
         } else {
@@ -145,39 +145,66 @@
                 position: "relative"
             });
             
-            var _x = 0,
-                _html = '';
+            var _x = 0;
             
-            function displayElement(_x, _y, _color, _id, _title, _polemic) {
-                _html += Mustache.to_html(
-                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" annotation-id="{{id}}" tweet-title="{{title}}" pos-x="{{posx}}" pos-y="{{top}}" polemic-color="{{color}}"'
-                    + ' style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
+            function displayAnnotation(_elx, _ely, _pol, _col, _annotation) {
+                var _html = Mustache.to_html(
+                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id={{media_id}}, polemic={{polemic}}" polemic-color="{{color}}"'
+                    + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
                 {
-                    id: _id,
+                    id: _annotation.id,
                     media_id: _this.source.currentMedia.id,
-                    polemic: _polemic,
-                    title: _title,
-                    posx: Math.floor(_x + (_this.element_width - 1) / 2),
-                    left: _x,
-                    top: _y,
-                    color: _color,
+                    polemic: _pol,
+                    left: _elx,
+                    top: _ely,
+                    color: _col,
                     width: (_this.element_width-1),
-                    height: _this.element_height
+                    height: _this.element_height,
+                    title: _annotation.title
+                });
+                var _el = IriSP.jQuery(_html);
+                _el.mouseover(function() {
+                    _annotation.trigger("select");
+                }).mouseout(function() {
+                    _annotation.trigger("unselect");
+                }).click(function() {
+                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _annotation.id);
+                    _this.player.popcorn.trigger("IriSP.Tweet.show", _annotation.id);
                 });
+                _annotation.on("select", function() {
+                    _this.tooltip.show(
+                        Math.floor(_elx + (_this.element_width - 1) / 2),
+                        _ely,
+                        _annotation.title,
+                        _col
+                    );
+                    _this.$tweets.each(function() {
+                        var _e = IriSP.jQuery(this);
+                        _e.css(
+                            "opacity",
+                            ( _e.attr("annotation-id") == _annotation.id ? 1 : .3 )
+                        );
+                    });
+                });
+                _annotation.on("unselect", function() {
+                    _this.tooltip.hide();
+                    _this.$tweets.css("opacity",1);
+                });
+                _this.$zone.append(_el);
             }
             
             IriSP._(_slices).forEach(function(_slice) {
                 var _y = _this.height;
                 _slice.annotations.forEach(function(_annotation) {
                     _y -= _this.element_height;
-                    displayElement(_x, _y, _this.defaultcolor, _annotation.id, _annotation.title, "none");
+                    displayAnnotation(_x, _y, "none", _this.defaultcolor, _annotation);
                 });
                 IriSP._(_slice.polemicStacks).forEach(function(_annotations, _j) {
                     var _color = _this.polemics[_j].color,
                         _polemic = _this.polemics[_j].name;
                     _annotations.forEach(function(_annotation) {
                         _y -= _this.element_height;
-                        displayElement(_x, _y, _color, _annotation.id, _annotation.title, _polemic);
+                        displayAnnotation(_x, _y, _polemic, _color, _annotation);
                     });
                 });
                 _x += _this.element_width;
@@ -187,20 +214,6 @@
             
             this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv");
             
-            this.$tweets
-                .mouseover(function() {
-                    var _el = IriSP.jQuery(this);
-                    _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _el.attr("tweet-title"), _el.attr("polemic-color"));
-                })
-                .mouseout(function() {
-                    _this.tooltip.hide();
-                })
-                .click(function() {
-                    var _id = IriSP.jQuery(this).attr("annotation-id");
-                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _id);
-                    _this.player.popcorn.trigger("IriSP.Tweet.show", _id);
-                });
-            
             this.bindPopcorn("IriSP.search", "onSearch");
             this.bindPopcorn("IriSP.search.closed", "onSearch");
             this.bindPopcorn("IriSP.search.cleared", "onSearch");
--- a/src/widgets/Segments.js	Wed Aug 29 18:32:34 2012 +0200
+++ b/src/widgets/Segments.js	Wed Aug 29 18:34:11 2012 +0200
@@ -1,4 +1,4 @@
-// TODO: Trigger IriSP.SegmentsWidget.click and IriSP.Mediafragment.showAnnotation
+// TODO: Trigger IriSP.SegmentsWidget.click
 
 IriSP.Widgets.Segments = function(player, config) {
     IriSP.Widgets.Widget.call(this, player, config);
@@ -13,19 +13,23 @@
 };
 
 IriSP.Widgets.Segments.prototype.template =
-    '<div class="Ldt-Segments-List">{{#segments}}'
-    + '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-id="{{id}}" segment-text="{{text}}" segment-color="{{color}}" center-pos="{{center}}" begin-seconds="{{beginseconds}}"'
-    + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'
-    + '{{/segments}}</div>'
+    '<div class="Ldt-Segments-List"></div>'
     + '<div class="Ldt-Segments-Position"></div>'
     + '<div class="Ldt-Segments-Tooltip"></div>';
 
+IriSP.Widgets.Segments.prototype.annotationTemplate =
+    '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}" segment-text="{{text}}"'
+    + 'style="left:{{left}}px; width:{{width}}px; background:{{color}}"></div>'
+
+
 IriSP.Widgets.Segments.prototype.draw = function() {
     this.bindPopcorn("IriSP.search", "onSearch");
     this.bindPopcorn("IriSP.search.closed", "onSearch");
     this.bindPopcorn("IriSP.search.cleared", "onSearch");
     this.bindPopcorn("timeupdate", "onTimeupdate");
     
+    this.renderTemplate();
+    
     var _list = this.getWidgetAnnotations(),
         _this = this,
         _scale = this.width / this.source.getDuration();
@@ -34,42 +38,47 @@
         height : (this.height - 2) + "px",
         margin : "1px 0"
     });
-    this.$.append(Mustache.to_html(this.template, {
-        segments : _list.map(function(_annotation, _k) {
-            var _left = _annotation.begin * _scale,
-                _width = ( _annotation.end - _annotation.begin ) * _scale,
-                _center = _left + _width / 2,
-                _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' );
-            return {
-                text : _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
-                color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
-                beginseconds : _annotation.begin.getSeconds() ,
-                left : Math.floor( _left ),
-                width : Math.floor( _width ),
-                center : Math.floor( _center ),
-                id : _annotation.id,
-                media_id : _annotation.getMedia().id
-            }
-        })
-    }));
+    this.list_$ = this.$.find('.Ldt-Segments-List');
+    
+    _list.forEach(function(_annotation, _k) {
+        var _left = _annotation.begin * _scale,
+            _width = ( _annotation.getDuration() ) * _scale,
+            _center = Math.floor( _left + _width / 2 ),
+            _fulltext = _annotation.title + ( _annotation.description ? ( '<br/>' + _annotation.description ) : '' ),
+            _beginseconds = _annotation.begin.getSeconds();
+        var _data = {
+            color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ),
+            text: _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1&hellip;'),
+            left : Math.floor( _left ),
+            width : Math.floor( _width ),
+            id : _annotation.id,
+            media_id : _annotation.getMedia().id
+        };
+        var _html = Mustache.to_html(_this.annotationTemplate, _data),
+            _el = IriSP.jQuery(_html);
+        _el.mouseover(function() {
+                _annotation.trigger("select");
+            })
+            .mouseout(function() {
+                _annotation.trigger("unselect");
+            })
+            .click(function() {
+                _this.player.popcorn.currentTime(_beginseconds);
+                _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _data.id);
+            })
+            .appendTo(_this.list_$)
+        _annotation.on("select", function() {
+            _this.$segments.removeClass("active").addClass("inactive");
+            _this.tooltip.show( _center, 0, _data.text, _data.color );
+            _el.removeClass("inactive").addClass("active");
+        });
+        _annotation.on("unselect", function() {
+            _this.tooltip.hide();
+            _this.$segments.removeClass("inactive active");
+        });
+    });
     this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), "tooltip", { type: "Tooltip" });
     this.$segments = this.$.find('.Ldt-Segments-Segment');
-    
-    this.$segments.mouseover(function() {
-        var _el = IriSP.jQuery(this);
-        _this.$segments.removeClass("active").addClass("inactive");
-        _this.tooltip.show( _el.attr("center-pos"), 0, _el.attr("segment-text"), _el.attr("segment-color"));
-        _el.removeClass("inactive").addClass("active");
-    })
-    .mouseout(function() {
-        _this.tooltip.hide();
-        _this.$segments.removeClass("inactive active");
-    })
-    .click(function() {
-        var _el = IriSP.jQuery(this);
-        _this.player.popcorn.currentTime(_el.attr("begin-seconds"));
-        _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _el.attr("segment-id"));
-    });
 }
 
 IriSP.Widgets.Segments.prototype.onSearch = function(searchString) {
Binary file src/widgets/img/pinstripe-grey.png has changed