--- a/src/css/LdtPlayer.css	Thu Jan 05 13:14:59 2012 +0100
+++ b/src/css/LdtPlayer.css	Thu Jan 05 13:15:24 2012 +0100
@@ -688,4 +688,29 @@
 
 .Ldt-createAnnotation-errorMessage {
   color: #D93C71;
-}
\ No newline at end of file
+}
+
+/* AnnotationsListWidget */
+
+.Ldt-AnnotationsListWidget {
+  font-size: 12px;
+  font-family: "Arial",  "Verdana", "sans-serif";
+  background-color:#eeeeee;
+  border: 1px solid #b6b8b8;
+  overflow: auto;
+  max-height: 480px;
+}
+
+.Ldt-AnnotationsListWidget li {
+  list-style-type: none;
+  cursor: pointer;
+}
+.Ldt-AnnotationsList-Duration {
+  float: right;
+  color : #f7268e;
+}
+
+.Ldt-AnnotationsList-Title {
+  color: #0068c4;
+  font-size: 14px;
+}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/widgets/annotationsListWidget.js	Thu Jan 05 13:15:24 2012 +0100
@@ -0,0 +1,49 @@
+IriSP.AnnotationsListWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+};
+
+
+IriSP.AnnotationsListWidget.prototype = new IriSP.Widget();
+
+IriSP.AnnotationsListWidget.prototype.clear = function() {
+};
+
+IriSP.AnnotationsListWidget.prototype.clearWidget = function() {   
+};
+
+IriSP.AnnotationsListWidget.prototype.draw = function() {
+  var _this = this;
+
+  var view_type = this._serializer.getNonTweetIds()[0];
+  var annotations = this._serializer._data.annotations;
+  var list = [];
+  
+  if (typeof(view_type) === "undefined") {
+    console.log("not type suitable for display");
+    return;
+  }
+  
+  for (i = 0; i < annotations.length; i++) {
+    var annotation = annotations[i];
+
+    /* filter the annotations whose type is not the one we want */
+    if (typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined"
+          && annotation.meta["id-ref"] != view_type) {
+        continue;
+    }
+
+    var a = annotation;
+    var obj = {};
+    console.log(a);
+    obj["id"] = a.id;
+    obj["title"] = a.content.title;
+    obj["desc"] = a.content.description;
+    obj["begin"] = IriSP.msToTime(a.begin);
+    obj["end"] = IriSP.msToTime(a.end);
+    
+    list.push(obj);
+  }
+
+  var widgetMarkup = IriSP.templToHTML(IriSP.annotationsListWidget_template, {annotations: list});
+  this.selector.append(widgetMarkup);
+};
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/templates/annotationsListWidget.html	Thu Jan 05 13:15:24 2012 +0100
@@ -0,0 +1,20 @@
+{{! template for the annotation list widget }}
+<div class='Ldt-AnnotationsListWidget'>
+  <!-- ugly div because we want to have a double border -->
+  <div class='Ldt-Annotation-DoubleBorder'>
+    <ul>
+    {{#annotations}}
+      <li>
+        <a href='#a={{id}}'>
+          <div style='overflow: auto; margin-bottom: 10px;'>
+            <img src='http://i.imgur.com/aoUlC.jpg' style='display: block; float: left;'></img>
+            <div class='Ldt-AnnotationsList-Duration'>{{begin}} - {{end}}</div>
+            <div class='Ldt-AnnotationsList-Title'>{{title}}</div>
+            <div class='Ldt-AnnotationsList-Description'>{{desc}}</div>
+          </div>
+        </a>
+      </li>
+    {{/annotations}}
+    </ul>
+  </div>
+</div>

--- a/test/integration/polemic.htm	Thu Jan 05 13:14:59 2012 +0100
+++ b/test/integration/polemic.htm	Thu Jan 05 13:15:24 2012 +0100
@@ -61,6 +61,13 @@
 						  src:'polemic_fr.json',
 						  type:'json'}
 						},
+            {type: "AnnotationsListWidget",
+             container: "AnnotationsListContainer",             
+						 metadata:{
+						  format:'cinelab',
+						  src:'polemic_fr.json',
+						  type:'json'}
+						},
             {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
              mode: "radio",
              metadata:{
@@ -145,5 +152,5 @@
   
   
  </body>
- <div id="PopcornContainer"></div>
+ <div id="AnnotationsListContainer" style="position: absolute; width: 400px; left: 660px; top: 105px;"></div>
  </html>