diff -r e69e78a0b5e6 -r 44deeff592e2 crea/integration/metadataplayer/MusitagAnnotations.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/metadataplayer/MusitagAnnotations.js	Thu May 31 14:45:36 2012 +0200
@@ -0,0 +1,59 @@
+IriSP.Widgets.MusitagAnnotations = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.MusitagAnnotations.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.MusitagAnnotations.prototype.defaults = {
+    annotation_type: 'musitag',
+    columns: 15,
+    max_by_column: 10,
+    emoticons: ['happy', 'unhappy', 'laughing', 'surprised'],
+    colors: ['red', 'yellow', 'green', 'blue']
+};
+
+IriSP.Widgets.MusitagAnnotations.prototype.draw = function() {
+    var _html = '',
+        _annotations = this.getWidgetAnnotations(),
+        _duration = this.source.getDuration().milliseconds,
+        _sliceDuration = _duration/this.columns,
+        _this = this;
+    _annotations.forEach(function(_annotation) {
+        var _tags = _annotation.getTagTexts();
+        _annotation.color_tag = false;
+        _annotation.emoticon_tag = false;
+        _tags.forEach(function(_tag) {
+            if (_this.emoticons.indexOf(_tag) != -1) {
+                _annotation.emoticon_tag = _tag;
+            }
+            if (_this.colors.indexOf(_tag) != -1) {
+                _annotation.color_tag = _tag;
+            }
+        });
+    });
+    for (var i = 0; i < this.columns; i++) {
+        var _sliceStart = i * _sliceDuration,
+            _sliceEnd = (i+1) * _sliceDuration,
+            _column = _annotations.filter(function(_annotation) {
+                return _annotation.begin >= _sliceStart
+                    && _annotation.begin < _sliceEnd
+                    && _annotation.emoticon_tag
+                    && _annotation.color_tag
+            }).sortBy(function(_annotation) {
+                return _annotation.created;
+            });
+        if (_column.length > this.max_by_column) {
+            _column = _column.slice(_column.length - this.max_by_column, _column.length);
+        }
+        _html += '<div class="Musitag-Annotations-column">';
+        _html += _column.map(function(_annotation) {
+            return '<div class="Musitag-container-50 Musitag-Annotations-tag">'
+                   + '<div class="Musitag-shadow"></div>'
+                   + '<div class="Musitag-color Musitag-' + _annotation.color_tag + '"></div>'
+                   + '<div class="Musitag-emoticon Musitag-' + _annotation.emoticon_tag + '"></div>'
+                   + '</div>';
+        }).join('');
+        _html += '</div>';
+    }
+    this.$.html(_html);
+}
\ No newline at end of file