--- a/crea/integration/metadataplayer/MusitagAnnotations.js	Thu Jun 07 11:50:17 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotations.js	Thu Jun 07 18:52:25 2012 +0200
@@ -4,15 +4,65 @@
 
 IriSP.Widgets.MusitagAnnotations.prototype = new IriSP.Widgets.Widget();
 
+IriSP.Widgets.MusitagAnnotations.prototype.template =
+    '<div class="Musitag-Annotations-Main"></div><div id="Musitag-Annotations-Audioplayer"></div>';
+    
+IriSP.Widgets.MusitagAnnotations.prototype.annotation_template =
+    '<div class="Musitag-Annotations-tag" begin-time="{{begin}}">'
+    + '<div class="Musitag-container-50">'
+    + '<div class="Musitag-shadow"></div>'
+    + '<div class="Musitag-color Musitag-{{color_tag}}"></div>'
+    + '<div class="Musitag-emoticon Musitag-{{emoticon_tag}}"></div>'
+    + '</div>{{#audio}}<div class="Musitag-Annotations-Balloon" audio-url="{{audio.href}}"></div>{{/audio}}'
+    + '</div>';
+
 IriSP.Widgets.MusitagAnnotations.prototype.defaults = {
     annotation_type: 'musitag',
     columns: 15,
     max_by_column: 10,
     emoticons: ['happy', 'unhappy', 'laughing', 'surprised'],
-    colors: ['red', 'yellow', 'green', 'blue']
+    colors: ['red', 'yellow', 'green', 'blue'],
+    rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"
 };
 
 IriSP.Widgets.MusitagAnnotations.prototype.draw = function() {
+    this.renderTemplate();
+    this.$main = this.$.find(".Musitag-Annotations-Main");
+    var _this = this;
+    this.jwplayer = jwplayer("Musitag-Annotations-Audioplayer");
+    this.jwplayer.setup({
+        flashplayer: IriSP.getLib("jwPlayerSWF"),
+        width: 1,
+        height: 1,
+        provider: "rtmp",
+        events: {
+            onPlay: function() {
+                _this.setPlayState(true);
+            },
+            onPause: function() {
+                _this.setPlayState(false);
+            },
+            onIdle: function() {
+                _this.setPlayState(false);
+            }
+        }
+    });
+    this.current_audio = false;
+    this.playing = false;
+    this.redraw();
+}
+
+IriSP.Widgets.MusitagAnnotations.prototype.setPlayState = function(_playState) {
+    this.playing = _playState;
+    if (_playState) {
+        this.$main.find(".Musitag-Annotations-Balloon").addClass("pause");
+    } else {
+        this.$main.find(".Musitag-Annotations-Balloon").removeClass("pause");
+    }
+}
+
+IriSP.Widgets.MusitagAnnotations.prototype.redraw = function() {
+    
     var _html = '',
         _annotations = this.getWidgetAnnotations(),
         _duration = this.source.getDuration().milliseconds,
@@ -47,25 +97,40 @@
         }
         _html += '<div class="Musitag-Annotations-column">';
         _html += _column.map(function(_annotation) {
-            return '<div class="Musitag-Annotations-tag" begin-time="' + _annotation.begin + '">'
-                + '<div class="Musitag-container-50">'
-                + '<div class="Musitag-shadow"></div>'
-                + '<div class="Musitag-color Musitag-' + _annotation.color_tag + '"></div>'
-                + '<div class="Musitag-emoticon Musitag-' + _annotation.emoticon_tag + '"></div>'
-                + '</div>'
-                + ( typeof _annotation.audio !== "undefined" && _annotation.audio.href ? '<div class="Musitag-Annotations-Balloon"></div>' : '' )
-                + '</div>';
+            return Mustache.to_html(_this.annotation_template, _annotation);
         }).join('');
         _html += '</div>';
     }
-    this.$.html(_html);
-    this.$.find('.Musitag-Annotations-tag .Musitag-container-50').click(function() {
+    this.$main.html(_html);
+    this.$main.find('.Musitag-Annotations-tag .Musitag-container-50').click(function() {
         var _el = IriSP.jQuery(this).parent();
         _this.player.popcorn.currentTime(_el.attr("begin-time") / 1000);
     });
-    this.$.find('.Musitag-Annotations-tag').mouseover(function() {
+    this.$main.find('.Musitag-Annotations-tag').mouseover(function() {
         var _el = IriSP.jQuery(this);
         _this.$.find('.Musitag-Annotations-Balloon').hide();
         _el.find('.Musitag-Annotations-Balloon').show();
     });
-}
\ No newline at end of file
+    this.$main.find('.Musitag-Annotations-Balloon').click(function() {
+        var _el = IriSP.jQuery(this),
+            _audiofile = _el.attr("audio-url").replace(_this.rtmp_streamer,"");
+        if (_this.playing) {
+            _this.jwplayer.pause();
+            _this.loadAudio(_audiofile);
+        } else {
+            _this.loadAudio(_audiofile);
+            _this.jwplayer.play();
+            _this.setPlayState(true);
+        }
+    });
+}
+
+IriSP.Widgets.MusitagAnnotations.prototype.loadAudio = function(_audiofile) {
+    if (this.current_audio !== _audiofile) {
+        this.jwplayer.load({
+            file: _audiofile,
+            streamer: this.rtmp_streamer
+        });
+        this.current_audio = _audiofile;
+    }
+}