begun breaking the code across multiple files.
authorhamidouk
Fri, 09 Sep 2011 15:13:06 +0200
changeset 31 cbb1425bc769
parent 30 69ac9ee00ec1
child 32 ad24ff95c4ba
begun breaking the code across multiple files.
src/js/LdtPlayer.js
src/js/data.js
src/js/site.js
src/js/ui.js
src/js/utils.js
--- a/src/js/LdtPlayer.js	Fri Sep 09 14:34:38 2011 +0200
+++ b/src/js/LdtPlayer.js	Fri Sep 09 15:13:06 2011 +0200
@@ -1,5 +1,4 @@
-/* 
- * 	
+/* 	
  *	Copyright 2010 Institut de recherche et d'innovation 
  *	contributor(s) : Samuel Huron 
  *	Use Silvia Pfeiffer 's javascript mediafragment implementation
@@ -24,72 +23,6 @@
 }
 
 		
-/* CLASS TRACE */
-
-IriSP.traceNum = 0;
-IriSP.trace = function( msg, value ) {
-
-	if( IriSP.config.gui.debug === true ) {
-		IriSP.traceNum += 1;
-		IriSP.jQuery( "<div>"+IriSP.traceNum+" - "+msg+" : "+value+"</div>" ).appendTo( "#Ldt-output" );
-	}
-};
-
-// Player Configuration 
-IriSP.config = undefined;
-IriSP.configDefault = {
-		metadata:{
-			format:'cinelab',
-			src:'',
-			load:'jsonp'
-		},
-		gui:{
-			width:650,
-			height:0,
-			mode:'radio',
-			container:'LdtPlayer',
-			debug:false, 
-			css:'../src/css/LdtPlayer.css'
-		},
-		player:{
-			type:'jwplayer',
-			src:'../res/swf/player.swf',
-			params:{
-				allowfullscreen:"true", 
-				allowscriptaccess:"always",
-				wmode:"transparent"
-			},
-			flashvars:{
-				streamer:"streamer",
-				file:"file", 
-				live:"true",
-				autostart:"false",
-				controlbar:"none",
-				playerready:"__IriSP.playerReady"
-			},
-			attributes:{
-				id:"Ldtplayer1",  
-				name:"Ldtplayer1"
-			}
-		},
-		module:null
-	};
-
-IriSP.lib = {
-			jQuery:"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
-			jQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js",
-			jQueryToolTip:"http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js",
-			swfObject:"http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
-			cssjQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css"
-		};
-		
-// Player Variable
-IriSP.LdtShareTool = ""+
-"\n<a onclick=\"__IriSP.MyApiPlayer.share('delicious');\" title='partager avec delicious'><span class='share shareDelicious'>&nbsp;</span></a>"+		
-"\n<a onclick=\"__IriSP.MyApiPlayer.share('facebook');\" title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a>"+
-"\n<a onclick=\"__IriSP.MyApiPlayer.share('twitter');\" title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a>"+
-"\n<a onclick=\"__IriSP.MyApiPlayer.share('myspace');\" title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
-
 // Official instance - to refactor ?
 IriSP.MyLdt 		= null;
 IriSP.MyTags 		= null;
@@ -101,13 +34,8 @@
 IriSP.playerLdtWidth	= null;
 IriSP.playerLdtHeight	= null;
 
-	
- 
 
-
-IriSP.init = function ( config ) {
-
-		
+IriSP.init = function ( config ) {		
 		if ( config === null ) {
 			IriSP.config 			 = IriSP.configDefault;
 		} else {
@@ -135,6 +63,7 @@
 		// Localize jQuery variable
 		IriSP.jQuery = null;
 
+		/* FIXME : to refactor using popcorn.getscript ? */
 		/******** Load jQuery if not present *********/
 		if ( window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2' ) {
 			
@@ -242,91 +171,10 @@
 				
 				//__IriSP.trace("main","ready createMyHtml");
 				
-				IriSP.createMyHtml();
-				//__IriSP.trace("main","end createMyHtml");
+				IriSP.createPlayerChrome();
 				
 				/******* Load Metadata *******/
-				/* FIXME : factor it in another file */
-				IriSP.jQuery.ajax({
-					  dataType: IriSP.config.metadata.load,
-					  url:metadataSrc,
-					  success : function( json ){
-					  
-							IriSP.trace( "ajax", "success" );
-							
-							// START PARSING ----------------------- 
-							if( json === "" ){
-								alert( "Json load error" );
-							} else {							  							  
-								// # CREATE MEDIA  							//
-								// # JUSTE ONE PLAYER FOR THE MOMENT		//
-								//__IriSP.jQuery("<div></div>").appendTo("#output");
-								var MyMedia = new  __IriSP.Media(
-																	json.medias[0].id,
-																	json.medias[0].href,
-																	json.medias[0]['meta']['dc:duration'],
-																	json.medias[0]['dc:title'],
-																	json.medias[0]['dc:description']);
-								
-								IriSP.trace( "__IriSP.MyApiPlayer",
-																	IriSP.config.gui.width+"   "
-																	+ IriSP.config.gui.height + " "
-																	+ json.medias[0].href + " "
-																	+ json.medias[0]['meta']['dc:duration'] + " "
-																	+ json.medias[0]['meta']['item']['value']);
-								
-								// Create APIplayer
-								IriSP.MyApiPlayer = new __IriSP.APIplayer (
-																	IriSP.config.gui.width,
-																	IriSP.config.gui.height,
-																	json.medias[0].href,
-																	json.medias[0]['meta']['dc:duration'],
-																	json.medias[0]['meta']['item']['value']);
-							
-								// # CREATE THE FIRST LINE  				//
-								IriSP.trace( "__IriSP.init.main","__IriSP.Ligne" );
-								IriSP.MyLdt = new __IriSP.Ligne(
-																	json['annotation-types'][0].id,
-																	json['annotation-types'][0]['dc:title'],
-																	json['annotation-types'][0]['dc:description'],
-																	json.medias[0]['meta']['dc:duration']);			
-								
-								// CREATE THE TAG CLOUD 					//
-								IriSP.trace( "__IriSP.init.main","__IriSP.Tags" );
-								IriSP.MyTags =  new __IriSP.Tags( json.tags );
-							
-								// CREATE THE ANNOTATIONS  				    //
-								// JUSTE FOR THE FIRST TYPE   			 	//
-								IriSP.jQuery.each( json.annotations, function(i,item) {
-									if (item.meta['id-ref'] == IriSP.MyLdt.id) {
-										//__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation");
-										IriSP.MyLdt.addAnnotation(
-													item.id,
-													item.begin,
-													item.end,
-													item.media,
-													item.content.title,
-													item.content.description,
-													item.content.color,
-													item.tags);
-									}
-										//MyTags.addAnnotation(item);
-								} );	
-								IriSP.jQuery.each( json.lists, function(i,item) {
-									IriSP.trace("lists","");
-								} );	
-								IriSP.jQuery.each( json.views, function(i,item) {
-									IriSP.trace("views","");
-								} );	
-							}
-							// END PARSING ----------------------- //  
-						
-										
-					}, error : function(data){
-						  alert("ERROR : "+data);
-					}
-				  });	
-			
+				IriSP.getMetadata();
 			
 			});
 		}
@@ -334,150 +182,6 @@
 };
 
 
-IriSP.createMyHtml = function(){
-		var width = IriSP.config.gui.width;
-		var height = IriSP.config.gui.height;
-		var heightS = IriSP.config.gui.height-20;
-		
-		// AUDIO  */
-		// PB dans le html : ; 
-		IriSP.trace( "__IriSP.createMyHtml",IriSP.config.gui.container );
-
-		
-		/* FIXME : factor this in another file */
-		if( IriSP.config.gui.mode=="radio" ){
-		
-		IriSP.jQuery( "#"+IriSP.config.gui.container ).before(
-		"<div id='LdtSearchContainer'  style='margin-left:445px;position:absolute;'>\n"+
-		"<div id='LdtSearch' style='display:none;background-color:#EEE;width:165px;boder:1px;border-color:#CFCFCF;position:absolute;text-align:center;'><input id='LdtSearchInput' style='margin-top:2px;margin-bottom:2px;' /></div>	\n"+
-		"</div>\n"+
-		" <div class='cleaner'></div>");
-		IriSP.trace("__IriSP.createHtml",IriSP.config.gui.container);
-		
-		IriSP.jQuery( "<div id='Ldt-Root'>\n"+
-			"	<div id='Ldt-PlaceHolder'>\n"+
-			"		<a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player	\n"+
-			"	</div>\n"+
-			"	<div id='Ldt-controler' class='demo'>\n"+
-			"		<div class='Ldt-Control1' >\n"+
-			"			<button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+
-			"			<button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+
-			"		</div>\n"+
-			"		<div id='Ldt-Annotations' class='ui-slider'>\n"+
-			"			<div id='slider-range-min'></div>\n"+
-			"	</div>\n"+
-			"		<div class='Ldt-Control2'>\n"+
-			"			<button id='ldt-CtrlLink'  onclick='__IriSP.searchblock()'> Rechercher </button>\n"+
-			"			<button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+
-			"		</div>\n"+
-			"  <div class='cleaner'>&nbsp\;</div> \n"+
-			"  <div id='Ldt-Show-Arrow-container'>\n"+
-			"  	<div id='Ldt-Show-Arrow'> </div>\n"+
-			"  </div>\n"+
-			"</div>\n"+
-			"<div>\n"+
-			" <div id='ldt-Show'> </div>\n"+
-			"	<div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+
-			"		<div id='Ldt-SaTitle'></div>\n"+
-			"		<div id='Ldt-SaDescription'></div>\n"+
-			" 		<div class='cleaner'><!--&nbsp\;--></div>\n"+
-			" </div>\n"+
-			" <div id='Ldt-SaKeyword'>\n"+
-			" <div id='Ldt-SaKeywordText'>  </div>\n"+
-			" <div class='cleaner'></div>\n"+
-			" <div id='Ldt-SaShareTools'>\n"+
-			" \n"+
-			" "+IriSP.LdtShareTool+"\n"+
-			" \n"+
-			"  </div>\n"+
-			" <div class='cleaner'></div>"+
-			"</div>  "+
-			//"<div id='Ldt-Tags'> Mots clefs : </div>"+
-			"</div>"+
-			"<div id='Ldt-output' style='clear:left;float:none;position:relative;height:200px;width:"+width+"px;overflow:scroll;' ></div>").appendTo("#"+IriSP.config.gui.container);
-			// special tricks 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");
-						IriSP.trace("__IriSP.createHtml","IE7 SPECIAL ");
-			}
-		} else if(IriSP.config.gui.mode=="video") {
-		
-			IriSP.jQuery(  "<div id='LdtSearchContainer'  style='margin-top:"+heightS+"px;margin-left:445px;position:absolute;'>\n"+
-			"<div id='LdtSearch' style='background-color:#EEE;display:none;width:165px;boder:1px;border-color:#CFCFCF;position:absolute;text-align:center;z-index:999;'><input id='LdtSearchInput' style='margin-top:2px;margin-bottom:2px;' /></div>	\n"+
-			"</div>\n"+
-			"<div id='Ldt-Root'>\n"+
-			"	<div id='Ldt-PlaceHolder'>\n"+
-			"		<a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player	\n"+
-			"	</div>\n"+
-						
-			"	<div id='Ldt-controler' class='demo'>\n"+
-			"		<div class='Ldt-Control1' >\n"+
-			"			<button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+
-			"			<button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+
-			"		</div>\n"+
-			"		<div id='Ldt-Annotations' class='ui-slider'>\n"+
-			"			<div id='slider-range-min'></div>\n"+
-			"	</div>\n"+
-			"		<div class='Ldt-Control2'>\n"+
-			"			<button id='ldt-CtrlLink'  onclick='__IriSP.searchblock()'> Rechercher </button>\n"+
-			"			<button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+
-			"		</div>\n"+
-			"  <div class='cleaner'>&nbsp\;</div> \n"+
-			"  <div id='Ldt-Show-Arrow-container'>\n"+
-			"  	<div id='Ldt-Show-Arrow'> </div>\n"+
-			"  </div>\n"+
-			"</div>\n"+
-			"<div>\n"+
-			" <div id='ldt-Show'> </div>\n"+
-			"	<div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+
-			"		<div id='Ldt-SaTitle'></div>\n"+
-			"		<div id='Ldt-SaDescription'></div>\n"+
-			" 		<div class='cleaner'><!--&nbsp\;--></div>\n"+
-			" </div>\n"+
-			" <div id='Ldt-SaKeyword'>\n"+
-			" <div id='Ldt-SaKeywordText'>  </div>\n"+
-			" <div class='cleaner'></div>\n"+
-			" <div id='Ldt-SaShareTools'>\n"+
-			" \n"+
-			" "+IriSP.LdtShareTool+"\n"+
-			" \n"+
-			"  </div>\n"+
-			" <div class='cleaner'></div>"+
-			"</div>  "+
-			//"<div id='Ldt-Tags'> Mots clefs : </div>"+
-			"</div>"+
-			"<div id='Ldt-output'></div>").appendTo("#"+IriSP.config.gui.container);
-		
-		}
-		
-		
-		IriSP.trace("__IriSP.createHtml",IriSP.jQuery.browser.msie+" "+IriSP.jQuery.browser.version);		
-		IriSP.trace("__IriSP.createHtml","end");
-		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("<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>").appendTo("#Ldt-ShowAnnotation-audio");
-	
-		if(IriSP.config.gui.mode=='radio'){
-			IriSP.jQuery("#Ldt-load-container").attr("width",IriSP.config.gui.width);
-		}
-		// Show or not the output
-		if(IriSP.config.gui.debug===true){
-			IriSP.jQuery("#Ldt-output").show();
-		} else {
-			IriSP.jQuery("#Ldt-output").hide();
-		}
-		
-};
-
 __IriSP.Media = function ( id, url, duration, title, description ) {
 		this.id 		 	= id;
 		this.url 		= url;
@@ -506,76 +210,6 @@
 
 
 
-/* 	INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON ()   */
-IriSP.createInterface = function( width, height, duration ) {
-		
-		IriSP.jQuery( "#Ldt-controler" ).show();
-		//__IriSP.jQuery("#Ldt-Root").css('display','visible');
-		IriSP.trace( "__IriSP.createInterface" , width+","+height+","+duration+"," );
-		
-		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: 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.trace("__IriSP.createInterface","ICI");
-		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
-		}).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.trace("__IriSP.createInterface","ICI2");
-		IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" );
-		
-		IriSP.jQuery( "#Ldt-load-container" ).hide();
-		
-		if( IriSP.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" );
-		
-	};
 
 
 
@@ -947,6 +581,7 @@
 		//__IriSP.player.addEventListener("onStateChange", "__IriSP.DailymotionPositionListener");
 		setTimeout( "__IriSP.DailymotionPositionListener()", 100);
 		IriSP.DailymotionPositionListener();
+		/* FIXME : works only with jwplayer */
 		IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" );
 		//__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor');
 	} else {
@@ -993,6 +628,8 @@
 		IriSP.trace( "__IriSP.addListeners", "ADD  Listener " );
 		IriSP.player.addEventListener( "onStateChange", "__IriSP.YouTubeStateMonitor" );
 		setTimeout( "__IriSP.YouTubePositionListener()", 100 );
+		
+		/* FIXME : works only with jwplayer */
 		IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" );
 		//__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor');
 	} else {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/data.js	Fri Sep 09 15:13:06 2011 +0200
@@ -0,0 +1,85 @@
+/* data.js - this file deals with how the players gets and sends data */
+
+IriSP.getMetadata = function() {
+	
+	IriSP.jQuery.ajax({
+		  dataType: IriSP.config.metadata.load,
+		  url:IriSP.config.metadata.src,
+		  success : function( json ){
+		  
+				IriSP.trace( "ajax", "success" );
+				
+				// START PARSING ----------------------- 
+				if( json === "" ){
+					alert( "Json load error" );
+				} else {							  							  
+					// # CREATE MEDIA  							//
+					// # JUSTE ONE PLAYER FOR THE MOMENT		//
+					//__IriSP.jQuery("<div></div>").appendTo("#output");
+					var MyMedia = new  __IriSP.Media(
+														json.medias[0].id,
+														json.medias[0].href,
+														json.medias[0]['meta']['dc:duration'],
+														json.medias[0]['dc:title'],
+														json.medias[0]['dc:description']);
+					
+					IriSP.trace( "__IriSP.MyApiPlayer",
+														IriSP.config.gui.width+"   "
+														+ IriSP.config.gui.height + " "
+														+ json.medias[0].href + " "
+														+ json.medias[0]['meta']['dc:duration'] + " "
+														+ json.medias[0]['meta']['item']['value']);
+					
+					// Create APIplayer
+					IriSP.MyApiPlayer = new __IriSP.APIplayer (
+														IriSP.config.gui.width,
+														IriSP.config.gui.height,
+														json.medias[0].href,
+														json.medias[0]['meta']['dc:duration'],
+														json.medias[0]['meta']['item']['value']);
+				
+					// # CREATE THE FIRST LINE  				//
+					IriSP.trace( "__IriSP.init.main","__IriSP.Ligne" );
+					IriSP.MyLdt = new __IriSP.Ligne(
+														json['annotation-types'][0].id,
+														json['annotation-types'][0]['dc:title'],
+														json['annotation-types'][0]['dc:description'],
+														json.medias[0]['meta']['dc:duration']);			
+					
+					// CREATE THE TAG CLOUD 					//
+					IriSP.trace( "__IriSP.init.main","__IriSP.Tags" );
+					IriSP.MyTags =  new __IriSP.Tags( json.tags );
+				
+					// CREATE THE ANNOTATIONS  				    //
+					// JUSTE FOR THE FIRST TYPE   			 	//
+					IriSP.jQuery.each( json.annotations, function(i,item) {
+						if (item.meta['id-ref'] == IriSP.MyLdt.id) {
+							//__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation");
+							IriSP.MyLdt.addAnnotation(
+										item.id,
+										item.begin,
+										item.end,
+										item.media,
+										item.content.title,
+										item.content.description,
+										item.content.color,
+										item.tags);
+						}
+							//MyTags.addAnnotation(item);
+					} );	
+					IriSP.jQuery.each( json.lists, function(i,item) {
+						IriSP.trace("lists","");
+					} );	
+					IriSP.jQuery.each( json.views, function(i,item) {
+						IriSP.trace("views","");
+					} );	
+				}
+				// END PARSING ----------------------- //  
+			
+							
+		}, error : function(data){
+			  alert("ERROR : "+data);
+		}
+	  });	
+
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/site.js	Fri Sep 09 15:13:06 2011 +0200
@@ -0,0 +1,203 @@
+/* site.js - all our site-dependent config : player chrome, cdn locations, etc...*/
+
+IriSP.lib = { 
+		jQuery:"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
+		jQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js",
+		jQueryToolTip:"http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js",
+		swfObject:"http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js",
+		cssjQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css"
+};
+
+//Player Configuration 
+IriSP.config = undefined;
+IriSP.configDefault = {
+		metadata:{
+			format:'cinelab',
+			src:'',
+			load:'jsonp'
+		},
+		gui:{
+			width:650,
+			height:0,
+			mode:'radio',
+			container:'LdtPlayer',
+			debug:false, 
+			css:'../src/css/LdtPlayer.css'
+		},
+		player:{
+			type:'jwplayer',
+			src:'../res/swf/player.swf',
+			params:{
+				allowfullscreen:"true", 
+				allowscriptaccess:"always",
+				wmode:"transparent"
+			},
+			flashvars:{
+				streamer:"streamer",
+				file:"file", 
+				live:"true",
+				autostart:"false",
+				controlbar:"none",
+				playerready:"IriSP.playerReady"
+			},
+			attributes:{
+				id:"Ldtplayer1",  
+				name:"Ldtplayer1"
+			}
+		},
+		module:null
+};
+
+//Player Variable
+/* FIXME: use an sharing library */
+IriSP.LdtShareTool = ""+
+"\n<a onclick=\"__IriSP.MyApiPlayer.share('delicious');\" title='partager avec delicious'><span class='share shareDelicious'>&nbsp;</span></a>"+		
+"\n<a onclick=\"__IriSP.MyApiPlayer.share('facebook');\" title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a>"+
+"\n<a onclick=\"__IriSP.MyApiPlayer.share('twitter');\" title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a>"+
+"\n<a onclick=\"__IriSP.MyApiPlayer.share('myspace');\" title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>";
+
+/* FIXME: move the function out of this file to ui.js*/
+IriSP.createPlayerChrome = function(){
+	var width = IriSP.config.gui.width;
+	var height = IriSP.config.gui.height;
+	var heightS = IriSP.config.gui.height-20;
+	
+	// AUDIO  */
+	// PB dans le html : ; 
+	IriSP.trace( "__IriSP.createMyHtml",IriSP.config.gui.container );
+
+	
+	/* FIXME : factor this in another file */
+	if( IriSP.config.gui.mode=="radio" ){
+	
+	IriSP.jQuery( "#"+IriSP.config.gui.container ).before(
+	"<div id='LdtSearchContainer'  style='margin-left:445px;position:absolute;'>\n"+
+	"<div id='LdtSearch' style='display:none;background-color:#EEE;width:165px;boder:1px;border-color:#CFCFCF;position:absolute;text-align:center;'><input id='LdtSearchInput' style='margin-top:2px;margin-bottom:2px;' /></div>	\n"+
+	"</div>\n"+
+	" <div class='cleaner'></div>");
+	IriSP.trace("__IriSP.createHtml",IriSP.config.gui.container);
+	
+	IriSP.jQuery( "<div id='Ldt-Root'>\n"+
+		"	<div id='Ldt-PlaceHolder'>\n"+
+		"		<a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player	\n"+
+		"	</div>\n"+
+		"	<div id='Ldt-controler' class='demo'>\n"+
+		"		<div class='Ldt-Control1' >\n"+
+		"			<button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+
+		"			<button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+
+		"		</div>\n"+
+		"		<div id='Ldt-Annotations' class='ui-slider'>\n"+
+		"			<div id='slider-range-min'></div>\n"+
+		"	</div>\n"+
+		"		<div class='Ldt-Control2'>\n"+
+		"			<button id='ldt-CtrlLink'  onclick='__IriSP.searchblock()'> Rechercher </button>\n"+
+		"			<button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+
+		"		</div>\n"+
+		"  <div class='cleaner'>&nbsp\;</div> \n"+
+		"  <div id='Ldt-Show-Arrow-container'>\n"+
+		"  	<div id='Ldt-Show-Arrow'> </div>\n"+
+		"  </div>\n"+
+		"</div>\n"+
+		"<div>\n"+
+		" <div id='ldt-Show'> </div>\n"+
+		"	<div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+
+		"		<div id='Ldt-SaTitle'></div>\n"+
+		"		<div id='Ldt-SaDescription'></div>\n"+
+		" 		<div class='cleaner'><!--&nbsp\;--></div>\n"+
+		" </div>\n"+
+		" <div id='Ldt-SaKeyword'>\n"+
+		" <div id='Ldt-SaKeywordText'>  </div>\n"+
+		" <div class='cleaner'></div>\n"+
+		" <div id='Ldt-SaShareTools'>\n"+
+		" \n"+
+		" "+IriSP.LdtShareTool+"\n"+
+		" \n"+
+		"  </div>\n"+
+		" <div class='cleaner'></div>"+
+		"</div>  "+
+		//"<div id='Ldt-Tags'> Mots clefs : </div>"+
+		"</div>"+
+		"<div id='Ldt-output' style='clear:left;float:none;position:relative;height:200px;width:"+width+"px;overflow:scroll;' ></div>").appendTo("#"+IriSP.config.gui.container);
+		// special tricks 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");
+					IriSP.trace("__IriSP.createHtml","IE7 SPECIAL ");
+		}
+	} else if(IriSP.config.gui.mode=="video") {
+	
+		IriSP.jQuery(  "<div id='LdtSearchContainer'  style='margin-top:"+heightS+"px;margin-left:445px;position:absolute;'>\n"+
+		"<div id='LdtSearch' style='background-color:#EEE;display:none;width:165px;boder:1px;border-color:#CFCFCF;position:absolute;text-align:center;z-index:999;'><input id='LdtSearchInput' style='margin-top:2px;margin-bottom:2px;' /></div>	\n"+
+		"</div>\n"+
+		"<div id='Ldt-Root'>\n"+
+		"	<div id='Ldt-PlaceHolder'>\n"+
+		"		<a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player	\n"+
+		"	</div>\n"+
+					
+		"	<div id='Ldt-controler' class='demo'>\n"+
+		"		<div class='Ldt-Control1' >\n"+
+		"			<button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+
+		"			<button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+
+		"		</div>\n"+
+		"		<div id='Ldt-Annotations' class='ui-slider'>\n"+
+		"			<div id='slider-range-min'></div>\n"+
+		"	</div>\n"+
+		"		<div class='Ldt-Control2'>\n"+
+		"			<button id='ldt-CtrlLink'  onclick='__IriSP.searchblock()'> Rechercher </button>\n"+
+		"			<button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+
+		"		</div>\n"+
+		"  <div class='cleaner'>&nbsp\;</div> \n"+
+		"  <div id='Ldt-Show-Arrow-container'>\n"+
+		"  	<div id='Ldt-Show-Arrow'> </div>\n"+
+		"  </div>\n"+
+		"</div>\n"+
+		"<div>\n"+
+		" <div id='ldt-Show'> </div>\n"+
+		"	<div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+
+		"		<div id='Ldt-SaTitle'></div>\n"+
+		"		<div id='Ldt-SaDescription'></div>\n"+
+		" 		<div class='cleaner'><!--&nbsp\;--></div>\n"+
+		" </div>\n"+
+		" <div id='Ldt-SaKeyword'>\n"+
+		" <div id='Ldt-SaKeywordText'>  </div>\n"+
+		" <div class='cleaner'></div>\n"+
+		" <div id='Ldt-SaShareTools'>\n"+
+		" \n"+
+		" "+IriSP.LdtShareTool+"\n"+
+		" \n"+
+		"  </div>\n"+
+		" <div class='cleaner'></div>"+
+		"</div>  "+
+		//"<div id='Ldt-Tags'> Mots clefs : </div>"+
+		"</div>"+
+		"<div id='Ldt-output'></div>").appendTo("#"+IriSP.config.gui.container);
+	
+	}
+	
+	
+	IriSP.trace("__IriSP.createHtml",IriSP.jQuery.browser.msie+" "+IriSP.jQuery.browser.version);		
+	IriSP.trace("__IriSP.createHtml","end");
+	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("<div id='Ldt-load-container'><div id='Ldt-loader'>&nbsp;</div> Chargement... </div>").appendTo("#Ldt-ShowAnnotation-audio");
+
+	if(IriSP.config.gui.mode=='radio'){
+		IriSP.jQuery("#Ldt-load-container").attr("width",IriSP.config.gui.width);
+	}
+	// Show or not the output
+	if(IriSP.config.gui.debug===true){
+		IriSP.jQuery("#Ldt-output").show();
+	} else {
+		IriSP.jQuery("#Ldt-output").hide();
+	}
+	
+};
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/ui.js	Fri Sep 09 15:13:06 2011 +0200
@@ -0,0 +1,73 @@
+/* ui.js - ui related functions */
+
+/* FIXME: get rid of the chrome here	
+ * INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON ()   */
+IriSP.createInterface = function( width, height, duration ) {
+		
+		IriSP.jQuery( "#Ldt-controler" ).show();
+		//__IriSP.jQuery("#Ldt-Root").css('display','visible');
+		IriSP.trace( "__IriSP.createInterface" , width+","+height+","+duration+"," );
+		
+		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: 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.trace("__IriSP.createInterface","ICI");
+		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
+		}).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.trace("__IriSP.createInterface","ICI2");
+		IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" );
+		
+		IriSP.jQuery( "#Ldt-load-container" ).hide();
+		
+		if( IriSP.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" );
+		
+	};
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/js/utils.js	Fri Sep 09 15:13:06 2011 +0200
@@ -0,0 +1,13 @@
+/* utils.js - various utils that don't belong anywhere else */
+
+/* trace function, for debugging */
+
+IriSP.traceNum = 0;
+IriSP.trace = function( msg, value ) {
+
+	if( IriSP.config.gui.debug === true ) {
+		IriSP.traceNum += 1;
+		IriSP.jQuery( "<div>"+IriSP.traceNum+" - "+msg+" : "+value+"</div>" ).appendTo( "#Ldt-output" );
+	}
+};
+