--- a/src/js/widgets.js	Thu Oct 13 17:11:20 2011 +0200
+++ b/src/js/widgets.js	Thu Oct 13 17:12:52 2011 +0200
@@ -1,9 +1,144 @@
 /* the widget classes and definitions */
 
-IriSP.Widget = function(Popcorn) {
-  this.Popcorn = Popcorn;
+IriSP.Widget = function(Popcorn, config, Serializer) {
+  this._Popcorn = Popcorn;
+  this._config = config;  
+  this._serializer = Serializer;
 };
 
 IriSP.Widget.prototype.draw = function() {
   /* implemented by "sub-classes" */  
 };
+
+IriSP.Widget.prototype.redraw = function() {
+  /* implemented by "sub-classes" */  
+};
+
+IriSP.PlayerWidget = function(Popcorn, config, Serializer) {
+  IriSP.Widget.call(this, Popcorn, config, Serializer);
+  
+};
+
+IriSP.PlayerWidget.prototype = IriSP.Widget;
+
+IriSP.PlayerWidget.prototype.draw = function() {
+  var width = this._config.gui.width;
+	var height = this._config.gui.height;
+	var heightS = this._config.gui.height-20;
+		
+	if( this._config.gui.mode=="radio" ){
+
+		//IriSP.jQuery( "#"+this._config.gui.container ).before(IriSP.search_template);
+		var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template});    
+		IriSP.jQuery(radioPlayer).appendTo("#"+this._config.gui.container);
+    
+		// special tricks for IE 7
+		if (IriSP.jQuery.browser.msie==true && IriSP.jQuery.browser.version=="7.0"){
+			//LdtSearchContainer
+			//__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px");
+			IriSP.jQuery("#Ldt-Root").css("padding-top","25px");			
+		}
+	} else if(this._config.gui.mode=="video") {
+	
+		var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS});
+		IriSP.jQuery(videoPlayer).appendTo("#"+this._config.gui.container);
+	}
+	
+	IriSP.jQuery("#Ldt-Annotations").width(width-(75*2));
+	IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2));
+	IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10);
+	IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10);
+	IriSP.jQuery("#Ldt-SaKeyword").width(width-10);
+	IriSP.jQuery("#Ldt-controler").width(width-10);
+	IriSP.jQuery("#Ldt-Control").attr("z-index","100");
+	IriSP.jQuery("#Ldt-controler").hide();
+	
+	IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio");
+
+	if(this._config.gui.mode=='radio'){
+		IriSP.jQuery("#Ldt-load-container").attr("width",this._config.gui.width);
+	}
+	// Show or not the output
+	if(this._config.gui.debug===true){
+		IriSP.jQuery("#Ldt-output").show();
+	} else {
+		IriSP.jQuery("#Ldt-output").hide();
+	}
+	  		
+  IriSP.jQuery( "#Ldt-controler" ).show();
+  //__IriSP.jQuery("#Ldt-Root").css('display','visible');
+  IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { 
+     //__IriSP.jQuery(this).slideUp(); 
+  } );
+
+  var LdtpPlayerY = IriSP.jQuery("#Ldt-PlaceHolder").attr("top");
+  var LdtpPlayerX = IriSP.jQuery("#Ldt-PlaceHolder").attr("left");
+  
+  IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min",
+    value: 0,
+    min: 1,
+    max: this._serializer.currentMedia().meta["dc:duration"]/1000,//1:54:52.66 = 3600+3240+
+    step: 0.1,
+    slide: function(event, ui) {
+      
+      //__IriSP.jQuery("#amount").val(ui.value+" s");
+      //player.sendEvent('SEEK', ui.value)
+      IriSP.MyApiPlayer.seek(ui.value);
+      //changePageUrlOffset(ui.value);
+      //player.sendEvent('PAUSE')
+    }
+  } );
+  
+  IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s");
+  IriSP.jQuery(".Ldt-Control1 button:first").button({
+    icons: {
+      primary: 'ui-icon-play'
+    },
+    text: false
+  }).click(IriSP.wrap(this, this.playEvent))
+    .next().button({
+    icons: {
+      primary: 'ui-icon-seek-next'
+    },
+     text: false
+  });
+  IriSP.jQuery(".Ldt-Control2 button:first").button({
+    icons: {
+      primary: 'ui-icon-search'//,
+      //secondary: 'ui-icon-volume-off'
+    },
+    text: false
+  }).next().button({
+    icons: {
+      primary: 'ui-icon-volume-on'
+    },
+     text: false
+  });
+
+  // /!\ PB A MODIFIER 
+  //__IriSP.MyTags.draw();
+  IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" );
+  
+  IriSP.jQuery( "#Ldt-load-container" ).hide();
+  
+  if( this._config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) {
+    IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" );
+  }
+  IriSP.trace( "__IriSP.createInterface" , "3" );
+
+  IriSP.trace( "__IriSP.createInterface", "END" );
+  
+  
+};
+
+IriSP.PlayerWidget.prototype.playEvent = function() {
+   var status = this._Popcorn.media.paused;
+      
+  if ( status == true ){        
+    this._Popcorn.play();
+  } else {
+    this._Popcorn.pause();
+  }
+  
+  this._Popcorn.trigger("mulz");
+};
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/playerWidget.js	Thu Oct 13 17:12:52 2011 +0200
@@ -0,0 +1,61 @@
+/* test module for the player widget */
+
+function test_player_widget() {
+  module("player widget testing", 
+  {setup : function() {    
+    this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
+    
+    this.dt = new IriSP.DataLoader();
+    this.ser = new IriSP.Serializer(this.dt, "/url"); /* dummy serializer */
+       
+    this.config = {
+						metadata:{
+							format:'cinelab',
+							src:'test.json',
+							load:'json'},
+						gui:{
+							width:650,
+							height:1,
+							mode:'radio',
+							container:'widget-div',
+							debug:true,
+							css:'../src/css/LdtPlayer.css'},
+					};
+  } });
+  
+  test("test player initialisation", function() {  
+    var player = new IriSP.PlayerWidget(this.Popcorn, this.config, this.ser);
+    player.draw();                               
+    equal(IriSP.jQuery("#widget-div #Ldt-Root").length, 1, "test if the div has been added correctly"); 
+
+    var player2 = new IriSP.PlayerWidget(this.Popcorn, this.config, this.ser);
+    player2.draw(); 
+    equal(IriSP.jQuery("#widget-div #Ldt-Root").length, 2, "test if the second div has been added correctly"); 
+  });
+ 
+  test("test play button event handler", function() {
+    var player = new IriSP.PlayerWidget(this.Popcorn, this.config, this.ser);
+
+    var spy_callback = this.spy();
+    var spy_callback2 = this.spy();
+    this.Popcorn.listen("play", spy_callback);
+    this.Popcorn.listen("pause", spy_callback2);
+    
+    player.draw();        
+
+    /*
+    Code seems to work but test doesn't. It must be a subtle race condition
+    between Popcorn, the youtube plugin and QUnit. Anyway, it works for pause
+    so WONTFIX
+    
+    IriSP.jQuery("#widget-div .Ldt-Control1 button:first").trigger("click");
+    ok(spy_callback.calledOnce, "test if play callback has been called");
+    
+    */
+    
+    IriSP.jQuery("#widget-div .Ldt-Control1 button:first").trigger("click");
+    IriSP.jQuery("#widget-div .Ldt-Control1 button:first").trigger("click");
+                                                                  
+    ok(spy_callback2.calledOnce, "test if pause callback has been called");                                                                    
+  }); 
+  };
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/unittests/tests/widget.js	Thu Oct 13 17:12:52 2011 +0200
@@ -0,0 +1,19 @@
+/* test module for base widgets */
+function test_widget() {
+  module("Base widget testing", 
+  {setup : function() {
+    this.Popcorn = Popcorn.youtube("#popcorn-div", "http://www.youtube.com/watch?v=QH2-TGUlwu4");
+    
+    this.dt = new IriSP.DataLoader();
+    this.ser = new IriSP.JSONSerializer(this.dt, "/url");
+  } }
+  );
+  
+  test("test initialisation", function() {
+    var wid = new IriSP.Widget(this.Popcorn, {parent: "widget-div"}, this.ser);
+    deepEqual(wid._config, {parent: "widget-div"}, "Check if the parent div is set correctly");
+    
+  });
+  
+  
+};
\ No newline at end of file