1 /* 	

     2  *	Copyright 2010 Institut de recherche et d'innovation 

     3  *	contributor(s) : Samuel Huron 

     4  *	Use Silvia Pfeiffer 's javascript mediafragment implementation

     5  *

     6  *	contact@iri.centrepompidou.fr

     7  *	http://www.iri.centrepompidou.fr 

     8  *	 

     9  *	This software is a computer program whose purpose is to show and add annotations on a video .

    10  *	This software is governed by the CeCILL-C license under French law and

    11  *	abiding by the rules of distribution of free software. You can  use, 

    12  *	modify and/ or redistribute the software under the terms of the CeCILL-C

    13  *	license as circulated by CEA, CNRS and INRIA at the following URL

    14  *	"http://www.cecill.info". 

    15  *	

    16  *	The fact that you are presently reading this means that you have had

    17  *	knowledge of the CeCILL-C license and that you accept its terms.

    18 */

    19 

    20 if ( window.IriSP === undefined && window.__IriSP === undefined ) { 

    21 	var IriSP = {}; 

    22 	var __IriSP = IriSP; /* for backward compatibility */

    23 }

    24 

    25 		

    26 // Official instance - to refactor ?

    27 IriSP.MyLdt 		= null;

    28 IriSP.MyTags 		= null;

    29 IriSP.MyApiPlayer	= null;

    30 IriSP.player		= null;

    31 

    32 // genral var (old code) - to refactor 

    33 IriSP.Durration		= null;

    34 IriSP.playerLdtWidth	= null;

    35 IriSP.playerLdtHeight	= null;

    36 

    37 

    38 IriSP.init = function ( config ) {		

    39 		if ( config === null ) {

    40 			IriSP.config 			 = IriSP.configDefault;

    41 		} else {

    42 			

    43 			IriSP.config 			 = config;

    44 						

    45 			if ( IriSP.config.player.params == null ) {

    46 				IriSP.config.player.params = IriSP.configDefault.player.params;

    47 			}

    48 			

    49 			if ( IriSP.config.player.flashvars == null ) {

    50 				IriSP.config.player.flashvars = IriSP.configDefault.player.flashvars;

    51 			}

    52 			

    53 			if ( IriSP.config.player.attributes == null ) {

    54 				IriSP.config.player.attributes = IriSP.configDefault.player.attributes;

    55 			}

    56 		}

    57 		

    58 		var metadataSrc 		 = IriSP.config.metadata.src;

    59 		var guiContainer		 = IriSP.config.gui.container;

    60 		var guiMode				 = IriSP.config.gui.mode;

    61 		var guiLdtShareTool		 = IriSP.LdtShareTool;

    62 		

    63 		// Localize jQuery variable

    64 		IriSP.jQuery = null;

    65 

    66 		/* FIXME : to refactor using popcorn.getscript ? */

    67 		/******** Load jQuery if not present *********/

    68 		if ( window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2' ) {

    69 			

    70 			var script_tag = document.createElement( 'script' );

    71 			script_tag.setAttribute( "type", "text/javascript" );

    72 			script_tag.setAttribute( "src", IriSP.lib.jQuery );

    73 			

    74 			script_tag.onload = scriptLibHandler;

    75 			script_tag.onreadystatechange = function () { // Same thing but for IE

    76 				if ( this.readyState == 'complete' || this.readyState == 'loaded' ) {

    77 					scriptLibHandler();					

    78 				}

    79 			};

    80 			

    81 			// Try to find the head, otherwise default to the documentElement

    82 			( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_tag );

    83 		} else {

    84 			// The jQuery version on the window is the one we want to use

    85 			 IriSP.jQuery = window.jQuery;

    86 			 scriptLibHandler();

    87 		}

    88 

    89 		/******** Called once jQuery has loaded ******/

    90 		function scriptLibHandler() {

    91 			

    92 			var script_jqUi_tooltip = document.createElement( 'script' );

    93 			script_jqUi_tooltip.setAttribute( "type", "text/javascript" );

    94 			script_jqUi_tooltip.setAttribute( "src", IriSP.lib.jQueryToolTip );

    95 			script_jqUi_tooltip.onload = scriptLoadHandler;

    96 			script_jqUi_tooltip.onreadystatechange = function () { // Same thing but for IE

    97 				if ( this.readyState == 'complete' || this.readyState == 'loaded' ) {

    98 					scriptLoadHandler( "jquery.tools.min.js loded" );

    99 				}

   100 			};

   101 			

   102 			var script_swfObj = document.createElement('script');

   103 			script_swfObj.setAttribute( "type","text/javascript" );

   104 			script_swfObj.setAttribute( "src",IriSP.lib.swfObject );

   105 			script_swfObj.onload = scriptLoadHandler;

   106 			script_swfObj.onreadystatechange = function () { // Same thing but for IE

   107 				if ( this.readyState == 'complete' || this.readyState == 'loaded' ) {

   108 					scriptLoadHandler( "swfobject.js loded" );

   109 				}

   110 			};

   111 		

   112 			var script_jqUi = document.createElement( 'script' );

   113 			script_jqUi.setAttribute( "type","text/javascript" );

   114 			script_jqUi.setAttribute( "src",IriSP.lib.jQueryUI );

   115 			script_jqUi.onload = scriptLoadHandler;

   116 			script_jqUi.onreadystatechange = function () { // Same thing but for IE

   117 				if ( this.readyState == 'complete' || this.readyState == 'loaded' ) {

   118 					scriptLoadHandler( "jquery-ui.min.js loded" );

   119 				}

   120 			};

   121 		

   122 

   123 			( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_jqUi_tooltip);

   124 			( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_jqUi );

   125 			( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_swfObj );

   126 			

   127 

   128 		};

   129 

   130 		/******** Called once all lib are loaded ******/

   131 		var loadLib = 0;

   132 		/* FIXME : ugly */

   133 		function scriptLoadHandler( Mylib ) {

   134 			//alert(Mylib);

   135 			loadLib +=1;

   136 			if( loadLib===3 ) { 

   137 				main(); 			  

   138 			}

   139 		};

   140 

   141 		/******** Our main function ********/

   142 		function main() { 

   143 			

   144 

   145 			//  Make our own IriSP.jQuery and restore window.jQuery if there was one. 

   146 			IriSP.jQuery = window.jQuery.noConflict( true );

   147 			// Call ours Jquery

   148 			IriSP.jQuery( document ).ready( function($) { 

   149 				

   150 				/******* Load CSS *******/

   151 				var css_link_jquery = IriSP.jQuery( "<link>", { 

   152 					rel: "stylesheet", 

   153 					type: "text/css", 

   154 					href: IriSP.lib.cssjQueryUI,

   155 					'class': "dynamic_css"

   156 				} );

   157 				var css_link_custom = IriSP.jQuery( "<link>", { 

   158 					rel: "stylesheet", 

   159 					type: "text/css", 

   160 					href: IriSP.config.gui.css,

   161 					'class': "dynamic_css"

   162 				} );

   163 				

   164 				css_link_jquery.appendTo( 'head' );

   165 				css_link_custom.appendTo( 'head' );   

   166 

   167 				// to see dynamicly loaded css on IE

   168 				if ( $.browser.msie ) {

   169 					$( '.dynamic_css' ).clone().appendTo( 'head' );

   170 				}

   171 				

   172 				//__IriSP.trace("main","ready createMyHtml");

   173 				

   174 				IriSP.createPlayerChrome();

   175 				

   176 				/******* Load Metadata *******/

   177 				IriSP.getMetadata();

   178 			

   179 			});

   180 		}

   181 

   182 };

   183 

   184 

   185 __IriSP.Media = function ( id, url, duration, title, description ) {

   186 		this.id 		 	= id;

   187 		this.url 		= url;

   188 		this.title 		= title;

   189 		this.description = description;

   190 		this.duration 	= duration;

   191 		this.lignes 	  	= new Array();

   192 

   193 		IriSP.trace( "__IriSP.Media" , "Media ID : "+id);

   194 		IriSP.trace( "__IriSP.Media" , "Media URL : "+url);

   195 		IriSP.trace( "__IriSP.Media" , "Media title : "+title);

   196 };

   197 

   198 __IriSP.Media.prototype.createPlayerMedia = function ( width, height, MyStreamer, MySwfPath) {

   199 		IriSP.MyApiPlayer = new __IriSP.APIplayer( width, height, this.url, this.duration, MyStreamer, MySwfPath);

   200 		//createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath);

   201 };

   202 

   203 __IriSP.Media.prototype.getMediaDuration = function () {

   204 		return (this.duration);

   205 };

   206 

   207 __IriSP.Media.prototype.getMediaTitle = function (){

   208 		return (this.title);

   209 };

   210 

   211 

   212 

   213 

   214 

   215 

   216 /*  FIXME : API player - work in progress ... need refactoring of code */ 

   217 __IriSP.APIplayer = function ( width, height, url, duration, streamerPath, MySwfPath){

   218 		

   219 		

   220 		this.player 			= null;

   221 		this.hashchangeUpdate 	= null;

   222 		

   223 		this.width				= width;

   224 		this.height				= height;

   225 		this.url				= url;

   226 		this.duration			= duration;

   227 		this.streamerPath		= streamerPath;

   228 		this.MySwfPath			= MySwfPath;

   229 		

   230 		IriSP.MyApiPlayer		= this;

   231 		

   232 		IriSP.createPlayer( this.url, this.streamerPath );

   233 		IriSP.trace( "__IriSP.APIplayer", "__IriSP.createPlayer" );

   234 	

   235 	//__IriSP.config.player

   236 	/*

   237 	- dailymotion  // &enableApi=1&chromeless=1

   238 	- youtube 

   239 	- html5

   240 	- flowplayer 

   241 	- jwplayer

   242 	*/

   243 		

   244 };

   245 

   246 __IriSP.APIplayer.prototype.ready = function( player ) {

   247 

   248 	//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady"," __IriSP.createInterface");

   249 	IriSP.createInterface( this.width, this.height, this.duration );

   250 	//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady","END  __IriSP.createInterface");

   251 

   252 	// hashchange EVENT

   253 	if ( window.addEventListener ){

   254 	

   255 	// for firefox  hashchange EVENT

   256 		window.addEventListener( "hashchange", function() {

   257 		  var url = window.location.href;

   258 		  var time = IriSP.retrieveTimeFragment( url );

   259 		  IriSP.trace( "__IriSP.APIplayer.prototype.ready", time );

   260 		  if( IriSP.MyApiPlayer.hashchangeUpdate==null ){

   261 			IriSP.MyApiPlayer.seek( time );

   262 			

   263 		  } else {			  

   264 			IriSP.MyApiPlayer.hashchangeUpdate = null;

   265 		  }

   266 		}, false );

   267 	 

   268 	} else if (window.attachEvent){

   269 	// for ie hashchange EVENT

   270 		window.attachEvent( "onhashchange", function() {

   271 		  IriSP.trace( "hashchange",time );

   272 		  var url = window.location.href;

   273 		  var time = IriSP.retrieveTimeFragment( url );

   274 		  if( IriSP.MyApiPlayer.hashchangeUpdate == null ){

   275 			IriSP.MyApiPlayer.seek(time);

   276 		  } else {

   277 			IriSP.MyApiPlayer.hashchangeUpdate = null;

   278 		  }

   279 		}, false);

   280 	}

   281 	

   282 	// Search

   283 	//__IriSP.jQuery("#LdtSearchInput").change(function() {__IriSP.Search(this.value);});

   284 	//__IriSP.jQuery("#LdtSearchInput").live('change', function(event) {__IriSP.Search(this.value);}); 

   285 	IriSP.jQuery( "#LdtSearchInput" ).keydown( function() { IriSP.Search( this.value );} );

   286 	IriSP.jQuery("#LdtSearchInput").keyup( function() { IriSP.Search( this.value );} );

   287 	

   288 };

   289 

   290 __IriSP.APIplayer.prototype.pause = function(){

   291 	this.hashchangeUpdate = true;

   292 	IriSP.player.sendEvent( 'PAUSE' );

   293 };

   294 

   295 __IriSP.APIplayer.prototype.play  = function() {

   296 	this.hashchangeUpdate = true;

   297 	//__IriSP.trace("__IriSP.config.player.type",__IriSP.config.player.type);

   298 	if( IriSP.config.player.type=='jwplayer' ){

   299 	

   300 		IriSP.player.sendEvent( 'PLAY' );

   301 		

   302 	} else if(IriSP.config.player.type == 'dailymotion' 

   303 			  || IriSP.config.player.type == 'youtube' ) {

   304 			  

   305 		var status = IriSP.player.getPlayerState();

   306 		IriSP.trace( "__IriSP.APIplayer.prototype.play.status", status);

   307 		if ( status != 1 ){

   308 			IriSP.player.playVideo();

   309 		} else {

   310 			IriSP.player.pauseVideo();

   311 		}

   312 	}

   313 };

   314 

   315 __IriSP.APIplayer.prototype.mute  = function() {

   316 	IriSP.player.sendEvent( 'MUTE' );

   317 	

   318 	//alert(__IriSP.jQuery(".ui-icon-volume-on").css("background-position-x"));

   319 	/* FIXME : remove hardcoded values */

   320 	if ( IriSP.jQuery( ".ui-icon-volume-on" ).css( "background-position" ) == "-144px -160px" ){

   321 		IriSP.jQuery(" .ui-icon-volume-on ").css(" background-position ", "-130px -160px");

   322 	} else {

   323 		IriSP.jQuery( ".ui-icon-volume-on" ).css( "background-position", "-144px -160px" );

   324 	}

   325 };

   326 

   327 /* FIXME : rename */

   328 __IriSP.APIplayer.prototype.share = function( network ) {

   329 

   330 	/* FIXME : remove hardcoded */

   331 	var MyMessage = encodeURIComponent( "J'écoute Les Retours du Dimanche : " );

   332 	var MyURLNow = window.location.href;

   333 	var shareURL = null;

   334 	//alert(network+" : "+MyURLNow);

   335 	

   336 	/* FIXME : use a sharing library */

   337 	if(network == "facebook"){

   338 			shareURL = "http://www.facebook.com/share.php?u=";			

   339 		}else if(network == "twitter"){

   340 			shareURL  = "http://twitter.com/home?status="+MyMessage;	

   341 		}else if(network == "myspace"){

   342 			shareURL ="http://www.myspace.com/Modules/PostTo/Pages/?u=";

   343 		}else if(network == "delicious"){

   344 			shareURL = "http://delicious.com/save?url=";

   345 		}else if(network == "JameSpot"){

   346 			shareURL = "http://www.jamespot.com/?action=spotit&u=";

   347 			//alert(network+" non actif pour l'instant : "+MyURLNow);

   348 	}

   349 	

   350 	if (shareURL != null)

   351 		window.open( shareURL+encodeURIComponent(MyURLNow) );

   352 	//window.location.href = shareURL+encodeURIComponent(MyURLNow);

   353 };

   354 

   355 __IriSP.APIplayer.prototype.seek = function (time) {

   356 	

   357 	if( time==0 ) { time=1; }

   358 	

   359 	IriSP.trace( "__IriSP.APIplayer.prototype.seek", time );

   360 	

   361 	if( IriSP.config.player.type=='jwplayer') {

   362 		//__IriSP.MyApiPlayer.play()

   363 		IriSP.player.sendEvent( 'SEEK', time );

   364 	} else if( IriSP.config.player.type=='dailymotion'

   365 			|| IriSP.config.player.type=='youtube' ) {

   366 		IriSP.player.seekTo( time );

   367 	}

   368 	

   369 	this.changePageUrlOffset( time );

   370 };

   371 

   372 __IriSP.APIplayer.prototype.update = function (time) {

   373 	

   374 	if( time != 0 ) {

   375 		this.hashchangeUpdate = true;

   376 		

   377 		IriSP.trace( "__IriSP.APIplayer.prototype.update" ,time);

   378 		IriSP.player.sendEvent( 'SEEK', time );

   379 	}

   380 };

   381 

   382 __IriSP.APIplayer.prototype.changePageUrlOffset = function ( time ) {

   383 	//alert(time);

   384   IriSP.trace( "__IriSP.APIplayer.prototype.changePageUrlOffset" , "CHANGE URL "+ time);

   385   

   386   window.location.hash = "#t=" + time;

   387   window.location.href =  window.location.href;

   388   

   389 };

   390 

   391 /* Media Fragment functionality by Silvia Pfeiffer */ 

   392 

   393 IriSP.jumpToTimeoffset = function ( form ) {

   394 	var time = form.time.value;

   395 	IriSP.MyApiPlayer.changePageUrlOffset( time );

   396 };

   397 

   398 IriSP.retrieveTimeFragment = function ( url ) {

   399   var pageoffset = 0;

   400   var offsettime = 0;

   401   

   402   if ( url.split("#")[1] != null ) {

   403 	pageoffset = url.split( "#" )[1];

   404 		if ( pageoffset.substring( 2 ) != null ) {

   405 			offsettime = pageoffset.substring( 2 );

   406 		}

   407 	}

   408 	return offsettime;

   409 };

   410 

   411 IriSP.ignoreTimeFragment = function( url ){

   412 

   413 	var pageurl = url;

   414 	

   415 	if ( url.split( "#" )[1] != null ) {

   416 		pageurl = url.split( "#" )[0];

   417 	}

   418  

   419 	return pageurl;

   420 };

   421 

   422 

   423 /* code specific to jwplayer / creation and listener */

   424 

   425 IriSP.currentPosition 	= 0; 

   426 IriSP.currentVolume   	= 50; 

   427 IriSP.player 			= null;

   428 IriSP.startPosition 	= null;

   429 IriSP.firstplay	 		= false;

   430 

   431 

   432 

   433 IriSP.createPlayer = function ( url, streamerPath ) {

   434 	if( IriSP.config.player.type=='dailymotion' ) {

   435 		IriSP.config.player.src = IriSP.config.player.src+"&chromeless=1&enableApi=1";

   436 	} else if ( IriSP.config.player.type=='youtube' ){

   437 		IriSP.config.player.src = IriSP.config.player.src+"&enablejsapi=1&version=3";

   438 	}

   439 	

   440 	IriSP.trace( "__IriSP.createPlayer", "start" );			

   441 	

   442 	IriSP.myUrlFragment = url.split( streamerPath );	

   443 	

   444 	var configTemp = IriSP.jQuery.extend( true, {}, IriSP.config );

   445 	configTemp.player.flashvars.autostart =	"true";

   446 	configTemp.player.flashvars.streamer =	streamerPath;

   447 	configTemp.player.flashvars.file =	IriSP.myUrlFragment[1];

   448 	

   449 	var flashvars 		  = configTemp.player.flashvars;

   450 	var params 			  = configTemp.player.params;

   451 	var attributes 		  = configTemp.player.attributes;

   452 	

   453 	IriSP.trace(

   454 				  "__IriSP.createPlayer",

   455 				  "SWFOBJECT src:"+

   456 				  IriSP.config.player.src+

   457 				  " " +IriSP.config.gui.width+

   458 				  " " +IriSP.config.gui.height

   459 				  );

   460 	

   461 	swfobject.embedSWF(

   462 						IriSP.config.player.src,

   463 						"Ldt-PlaceHolder",

   464 						IriSP.config.gui.width,

   465 						IriSP.config.gui.height,

   466 						"9.0.115", // FIXME : de-hardcode version ?

   467 						false,

   468 						flashvars,

   469 						params,

   470 						attributes

   471 					);

   472 	

   473 	// need a methode to 

   474 	// re execute if this swf call does'nt work 

   475 };

   476 

   477 

   478 /* jw player api */

   479 IriSP.playerReady  = function (thePlayer) {

   480 

   481 	//__IriSP.trace("__IriSP.playerReady","PLAYER READY !!!!!!!!!!!!");

   482 	IriSP.player = window.document[thePlayer.id];

   483 	//__IriSP.trace("__IriSP.playerReady","API CALL "+__IriSP.player);

   484 	IriSP.MyApiPlayer.ready( IriSP.player );

   485 	//__IriSP.trace("__IriSP.playerReady","API CALL END ");

   486 	

   487 	var url = document.location.href;

   488 	var time = IriSP.retrieveTimeFragment( url );

   489 	//__IriSP.trace("__IriSP.playerReady"," "+url+" "+time );

   490 	IriSP.startPosition = time;

   491 	//__IriSP.trace("__IriSP.playerReady"," LISTENER LAUCHER");

   492 	IriSP.addListeners();	

   493 	//__IriSP.trace("__IriSP.playerReady"," LISTENER END");

   494 	

   495 };

   496 

   497 IriSP.addListeners = function () {

   498 	if ( IriSP.player ) { 

   499 		IriSP.trace("__IriSP.addListeners","ADD  Listener ");

   500 		IriSP.player.addModelListener( "TIME", "__IriSP.positionListener");

   501 		IriSP.player.addControllerListener( "VOLUME", "__IriSP.volumeListener" );

   502 		IriSP.player.addModelListener( 'STATE', '__IriSP.stateMonitor' );

   503 	} else {

   504 		IriSP.setTimeout( "__IriSP.addListeners()", 100 );

   505 	}

   506 

   507 	// et changer les boutons

   508 };

   509 

   510 IriSP.stateMonitor = function ( obj ) { 

   511 

   512 	 if(obj.newstate == 'PAUSED') {

   513 		IriSP.trace( "__IriSP.stateMonitor", "PAUSE" );

   514 		IriSP.MyApiPlayer.changePageUrlOffset( IriSP.currentPosition );			

   515 		IriSP.jQuery( ".ui-icon-play" ).css( "background-position","0px -160px" );

   516 		

   517 	} else if (obj.newstate == 'PLAYING' ){

   518 		

   519 		IriSP.trace( "__IriSP.stateMonitor", "PLAYING "+IriSP.startPosition );

   520 		

   521 		// force buffering even if autostart is disabled. 

   522 		if ( IriSP.config.player.flashvars.autostart == "false" && IriSP.firstplay == false && IriSP.startPosition == 0 ) {

   523 			IriSP.trace("__IriSP.stateMonitor","first stop ???");

   524 			IriSP.MyApiPlayer.play();

   525 			IriSP.firstplay = true;

   526 			IriSP.MyLdt.checkTime( 1 );

   527 		}

   528 		

   529 		// once that the video is loaded, move it to the correct timecode

   530 		if( IriSP.startPosition!=null ){

   531 			IriSP.MyApiPlayer.update( IriSP.startPosition );

   532 			IriSP.startPosition = null;

   533 		}

   534 		

   535 		

   536 		IriSP.jQuery( ".ui-icon-play" ).css( "background-position", "-16px -160px" );

   537 	} else if (obj.newstate == 'BUFFERING'){

   538 		IriSP.trace( "__IriSP.stateMonitor", "BUFFERING : "+IriSP.config.player.flashvars.autostart );

   539 		//changePageUrlOffset(currentPosition);

   540 	}

   541 	

   542 };

   543 

   544 IriSP.positionListener = function(obj) { 

   545 	//__IriSP.trace("__IriSP.positionListener",obj.position);

   546 	IriSP.currentPosition = obj.position; 

   547 	var tmp = document.getElementById( "posit" );

   548 	if (tmp) { tmp.innerHTML = "position: " + IriSP.currentPosition; }

   549 	IriSP.jQuery( "#slider-range-min" ).slider( "value", obj.position);

   550 	IriSP.jQuery( "#amount" ).val(obj.position+" s");

   551 	// display annotation 

   552 	IriSP.MyLdt.checkTime( IriSP.currentPosition );

   553 	

   554 };

   555 

   556 IriSP.volumeListener   = function (obj) { 

   557 	IriSP.currentVolume = obj.percentage; 

   558 	var tmp = document.getElementById("vol");

   559 	if (tmp) { tmp.innerHTML = "volume: " + IriSP.currentVolume; }

   560 };

   561 

   562 

   563 /* dailymotion api 	*/

   564 onDailymotionPlayerReady = function (playerid) {

   565 

   566 	//alert(playerid);

   567 	IriSP.player = document.getElementById( IriSP.config.player.attributes.id );

   568 	IriSP.MyApiPlayer.ready( IriSP.player );

   569 	

   570 	var url = document.location.href;

   571 	var time = IriSP.retrieveTimeFragment( url );

   572 	IriSP.startPosition = time;

   573 	IriSP.DailymotionAddListeners();	

   574 	

   575 	IriSP.MyApiPlayer.ready(playerid);

   576 };

   577 

   578 IriSP.DailymotionAddListeners = function () {

   579 	if ( IriSP.player ) { 

   580 		IriSP.trace( "__IriSP.addListeners","ADD  Listener " );

   581 		//__IriSP.player.addEventListener("onStateChange", "__IriSP.DailymotionPositionListener");

   582 		setTimeout( "__IriSP.DailymotionPositionListener()", 100);

   583 		IriSP.DailymotionPositionListener();

   584 		/* FIXME : works only with jwplayer */

   585 		IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" );

   586 		//__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor');

   587 	} else {

   588 		IriSP.setTimeout( "__IriSP.DailymotionAddListeners()", 100);

   589 	}

   590 };

   591 

   592 IriSP.DailymotionPositionListener = function() { 

   593 	

   594 	IriSP.currentPosition = IriSP.player.getCurrentTime();

   595 	//__IriSP.trace("__IriSP.DailymotionPositionListener",__IriSP.currentPosition);

   596 	//__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition);

   597 	

   598 	IriSP.jQuery( "#slider-range-min" ).slider( "value" , IriSP.currentPosition);

   599 	IriSP.jQuery( "#amount" ).val( IriSP.currentPosition+" s" );

   600 	// afficher annotation 

   601 	/*__IriSP.MyLdt.checkTime(__IriSP.currentPosition);

   602 	*/

   603 	

   604 	setTimeout( "__IriSP.DailymotionPositionListener()", 10 );

   605 };

   606 

   607 /* youtube api 	*/

   608 onYouTubePlayerReady= function (playerid){

   609 

   610 	var url = document.location.href;

   611 	var time = IriSP.retrieveTimeFragment( url );

   612 	IriSP.player = document.getElementById( IriSP.config.player.attributes.id );

   613 	IriSP.startPosition = time;

   614 	

   615 	IriSP.MyApiPlayer.ready( IriSP.player );

   616 	

   617 	IriSP.MyApiPlayer.seek( time );

   618 	IriSP.MyApiPlayer.play();

   619 	

   620 	

   621 	IriSP.YouTubeAddListeners();	

   622 	IriSP.trace( "onYouTubePlayerReady=", time);

   623 	//__IriSP.MyApiPlayer.ready(playerid);

   624 };

   625 

   626 IriSP.YouTubeAddListeners = function () {

   627 	if ( IriSP.player ) { 

   628 		IriSP.trace( "__IriSP.addListeners", "ADD  Listener " );

   629 		IriSP.player.addEventListener( "onStateChange", "__IriSP.YouTubeStateMonitor" );

   630 		setTimeout( "__IriSP.YouTubePositionListener()", 100 );

   631 		

   632 		/* FIXME : works only with jwplayer */

   633 		IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" );

   634 		//__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor');

   635 	} else {

   636 	}

   637 };

   638 

   639 IriSP.YouTubePositionListener = function() { 

   640 	

   641 	IriSP.currentPosition = IriSP.player.getCurrentTime();

   642 	//__IriSP.trace("__IriSP.YouTubePositionListener",__IriSP.currentPosition);

   643 	//__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition);

   644 	

   645 	IriSP.MyLdt.checkTime(IriSP.currentPosition);

   646 	IriSP.jQuery( "#slider-range-min" ).slider( "value", IriSP.currentPosition );

   647 	IriSP.jQuery( "#amount" ).val( IriSP.currentPosition+" s" );

   648 	// afficher annotation 

   649 	IriSP.MyLdt.checkTime( IriSP.currentPosition );

   650 	

   651 	

   652 	setTimeout( "__IriSP.YouTubePositionListener()", 10 );

   653 };

   654 

   655 IriSP.YouTubeStateMonitor = function (obj) { 

   656 	IriSP.player.addModelListener( '__IriSP.YouTubeStateMonitor ', newstate );

   657 	//alert(newstate+" "+obj.newstate);

   658 	 if(newstate == '2') {

   659 		IriSP.trace("__IriSP.stateMonitor","PAUSE");

   660 		IriSP.MyApiPlayer.changePageUrlOffset( IriSP.currentPosition );

   661 		

   662 	} else if (newstate == '1' || newstate == '1') {

   663 		// une fois la video prete a lire  la déplacer au bon timecode 

   664 		if( IriSP.startPosition!=null ) {

   665 			IriSP.MyApiPlayer.update( IriSP.startPosition );

   666 			IriSP.startPosition = null;

   667 		}

   668 	} else if (newstate == '3'){

   669 		IriSP.trace("__IriSP.stateMonitor","BUFFERING : ");

   670 		//changePageUrlOffset(currentPosition);

   671 	}

   672 	

   673 };

   674 

   675 

   676 /* 	utils */

   677 // code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript

   678 /* FIXME: maybe make it a little more robust */

   679 IriSP.stripHtml = function(s){

   680 	return s.replace(/\\&/g, '&amp;').replace(/\\</g, '&lt;').replace(/\\>/g, '&gt;').replace(/\\t/g, '&nbsp;&nbsp;&nbsp;').replace(/\\n/g, '<br />').replace(/'/g, '&#39;').replace(/"/g, '&quot;');

   681 };

   682 

   683 // conversion de couleur Decimal vers HexaDecimal || 000 si fff

   684 /* FIXME : move it somewhere else */

   685 IriSP.DEC_HEXA_COLOR = function (dec) {

   686 	 var hexa='0123456789ABCDEF',hex='';

   687 	 var tmp;

   688 	 while (dec>15){

   689 		  tmp = dec-(Math.floor(dec/16))*16;

   690 		  hex = hexa.charAt(tmp)+hex;

   691 		  dec = Math.floor(dec/16);

   692 	 }

   693 	 hex = hexa.charAt(dec)+hex;

   694 	 if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ }

   695 	 return(hex);

   696 };

   697 

   698 

   699 /* Search  methods	*/

   700 IriSP.SearchOldValue="";

   701 IriSP.searchblockOpen=false;

   702 IriSP.searchblock = function () {

   703 	IriSP.trace( "__IriSP.searchblock", IriSP.searchblockOpen );

   704 	

   705 	if ( IriSP.searchblockOpen == false ) {

   706 		IriSP.jQuery( ".ui-icon-search" ).css( "background-position", "-144px -112px" );

   707 		//__IriSP.jQuery("#LdtSearch").animate({height:26},250);

   708 		IriSP.jQuery("#LdtSearch").show(250);

   709 		/* FIXME : refactor this */

   710 		IriSP.jQuery("#LdtSearchInput").css('background-color','#fff');

   711 		IriSP.jQuery("#LdtSearchInput").focus();

   712 		IriSP.jQuery("#LdtSearchInput").attr('value',IriSP.SearchOldValue);

   713 		IriSP.Search(IriSP.SearchOldValue);

   714 		IriSP.searchblockOpen = true;

   715 	} else {

   716 		IriSP.SearchOldValue = IriSP.jQuery("#LdtSearchInput").attr('value');

   717 		IriSP.jQuery("#LdtSearchInput").attr('value','');

   718 		IriSP.SearchClean();

   719 		IriSP.jQuery(".ui-icon-search").css("background-position","-160px -112px");

   720 		//__IriSP.jQuery("#LdtSearch").animate({height:0},250);

   721 		IriSP.jQuery("#LdtSearch").hide(250);

   722 		IriSP.searchblockOpen = false;

   723 	}

   724 };

   725 

   726 /* Search with typeahead */

   727 IriSP.Search = function ( value ){

   728 

   729 	annotations = IriSP.LDTligne.annotations;

   730 	

   731 	IriSP.trace("__IriSP.Search", annotations.length+" "+value);

   732 	

   733 	var found  = 0;

   734 	var findmem = 0;

   735 	var factor  = 0;

   736 	IriSP.trace(value,value.length);

   737 	var valueS = value.toLowerCase();

   738 	IriSP.trace("__IriSP.Search", annotations.length+" "+valueS);

   739 	if(valueS.length>=3){

   740 		

   741 		for (var i=0; i < annotations.length; ++i){

   742 			annotation = annotations[i];

   743 			

   744 			IriSP.jQuery("#output2").text(annotation.title+" ?= "+value);

   745 			

   746 			chaine1 = annotation.title.toLowerCase();

   747 			chaine2 = annotation.description.toLowerCase();

   748 			chaine3 = annotation.htmlTags.toLowerCase();

   749 			

   750 			if(chaine1.indexOf(valueS,0) !=-1){

   751 				found+=1;	

   752 			}

   753 			if(chaine2.indexOf(valueS,0) !=-1){

   754 				found+=1;	

   755 			}

   756 			if(chaine3.indexOf(valueS,0) !=-1){

   757 				found+=1;	

   758 			}

   759 			

   760 			findmem += found;

   761 			if(found>0){

   762 				factor = found*8;

   763 				IriSP.jQuery("#"+annotation.id).dequeue();

   764 				IriSP.jQuery("#"+annotation.id).animate({height:factor},200);

   765 				IriSP.jQuery("#"+annotation.id).css('border','2px');

   766 				IriSP.jQuery("#"+annotation.id).css('border-color','red');

   767 				IriSP.jQuery("#"+annotation.id).animate({opacity:0.6},200);

   768 				

   769 				IriSP.trace("!!!!!!!!!!!!!!!!!!"," ?= "+annotation.id);

   770 				IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1');

   771 			}else {

   772 				IriSP.jQuery("#"+annotation.id).dequeue();

   773 				IriSP.jQuery("#"+annotation.id).animate({height:0},250);

   774 				IriSP.jQuery("#"+annotation.id).animate({opacity:0.3},200);

   775 			}

   776 			

   777 			found = 0;

   778 		}

   779 		if(findmem==0){

   780 				IriSP.jQuery("#LdtSearchInput").css('background-color','#f6f6f6');

   781 		}

   782 		

   783 	} else if(value.length==0){

   784 		IriSP.SearchClean();

   785 		IriSP.jQuery("#LdtSearchInput").css('background-color','#fff');		

   786 	} else {

   787 		IriSP.SearchClean();

   788 		IriSP.jQuery("#LdtSearchInput").css('background-color','#f6f6f6');

   789 	}

   790 };

   791 

   792 IriSP.SearchClean = function (){

   793 	annotations = IriSP.LDTligne.annotations;

   794 	

   795 	for (var i=0; i < annotations.length; ++i){

   796 			annotation = annotations[i];

   797 			IriSP.jQuery("#"+annotation.id).dequeue();

   798 			IriSP.jQuery("#"+annotation.id).animate({height:0},100);	

   799 			IriSP.jQuery("#"+annotation.id).css('border','0px');

   800 			IriSP.jQuery("#"+annotation.id).css('border-color','red');

   801 			IriSP.jQuery("#"+annotation.id).animate({opacity:0.3},100);

   802 		}

   803 };

   804 

   805 

   806 IriSP.SearchThisSegment = function (annotation){

   807 	/* FIXME: to implement */

   808 					IriSP.jQuery("#LdtSearchInput").text(annotation.title);

   809 					IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotation.title);

   810 					/*__IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description);

   811 					__IriSP.jQuery("#Ldt-SaKeywordText").html("Mots clefs : "+annotationTempo.htmlTags);*/

   812 };

   813 

   814 

   815 /* CLASS Ligne (annotationType) 	*/

   816 

   817 IriSP.LDTligne 	= null;		

   818 __IriSP.Ligne = function( id, title, description, duration ) {

   819 	this.id 		 = id;

   820 	this.title 		 = title;

   821 	this.description = description;

   822 	//

   823 	this.annotations = new Array();

   824 	this.duration = duration;

   825 	this.annotationOldRead = "";

   826 	IriSP.LDTligne = this;

   827 	IriSP.trace("__IriSP.Ligne","CREATE "+IriSP.LDTligne);

   828 };

   829 

   830 __IriSP.Ligne.prototype.addAnnotation = function ( id, begin, end, media, title, description, color, tags ) {

   831 	var myAnnotation = new __IriSP.Annotation(id,begin,end,media,title,description,color,tags,this.duration);

   832 	this.annotations.push(myAnnotation);

   833 	//__IriSP.trace("__IriSP.Ligne.prototype.addAnnotation  ","add annotation "+title);

   834 };

   835 

   836 __IriSP.Ligne.prototype.onClickLigneAnnotation = function( id ) {

   837 	/* TODO implement */

   838 	//changePageUrlOffset(currentPosition);

   839 	//player.sendEvent('SEEK', this.start);

   840 	//__IriSP.trace("SEEK",this.start);

   841 };

   842 

   843 __IriSP.Ligne.prototype.searchLigneAnnotation = function( id ) {

   844 	/* TODO implement */

   845 	/*for (){

   846 	}*/

   847 };

   848 

   849 __IriSP.Ligne.prototype.listAnnotations = function() {

   850 	/* TODO implement */

   851 };

   852 

   853 __IriSP.Ligne.prototype.nextAnnotation = function () {

   854 	

   855 	var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1;

   856 	var annotationCible = this.annotations[annotationCibleNumber];

   857 

   858 	if( annotationCibleNumber<this.annotations.length-1 ){

   859 		IriSP.player.sendEvent( 'SEEK', annotationCible.begin/1000 );

   860 		IriSP.trace( "LIGNE  ", "| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000);

   861 	} else {

   862 		IriSP.player.sendEvent( 'SEEK', this.annotations[0].begin/1000);

   863 	}

   864 		

   865 };

   866 

   867 __IriSP.Ligne.prototype.numAnnotation = function (annotationCible){

   868 	for (var i=0; i < this.annotations.length; ++i){

   869 		if(annotationCible == this.annotations[i]){

   870 			return i;

   871 		}

   872 	}

   873 };

   874 

   875 __IriSP.Ligne.prototype.checkTime = function(time){

   876 	

   877 	var annotationTempo = -1;

   878 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",time);

   879 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",this.annotations.length);

   880 	

   881 	for (var i=0; i < this.annotations.length; ++i){

   882 		annotationTempo = this.annotations[i];	

   883 		

   884 		//__IriSP.SearchThisSegment(annotationTempo);

   885 		

   886 		if (time>annotationTempo.begin/1000 && time<annotationTempo.end/1000){

   887 			

   888 				// different form the previous

   889 				if(annotationTempo!=this.annotationOldRead){

   890 					this.annotationOldRead = annotationTempo;

   891 					IriSP.jQuery("#Ldt-SaTitle").text(annotationTempo.title);

   892 					IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description);

   893 					IriSP.jQuery("#Ldt-SaKeywordText").html("Mots clefs : "+annotationTempo.htmlTags);

   894 					

   895 					//__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown();

   896 					var startPourcent 	= annotationTempo.timeToPourcent((annotationTempo.begin*1+(annotationTempo.end*1-annotationTempo.begin*1)/2),annotationTempo.duration*1); 

   897 					IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000);

   898 					IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000);

   899 					//alert(startPourcent);

   900 					var tempolinkurl  =  IriSP.ignoreTimeFragment(window.location.href)+"#t="+(this.annotations[i].begin/1000);

   901 				}

   902 			break;

   903 		} else {

   904 		annotationTempo = -1;

   905 		}		

   906 		

   907 	}

   908 	// si il y en a pas : retractation du volet 

   909 	if( annotationTempo == -1){

   910 		if(annotationTempo != this.annotationOldRead){

   911 			IriSP.trace("Check : ","pas d'annotation ici ");

   912 			IriSP.jQuery("#Ldt-SaTitle").text("");

   913 			IriSP.jQuery("#Ldt-SaDescription").text("");

   914 			IriSP.jQuery("#Ldt-SaKeywordText").html("");

   915 			IriSP.jQuery('#Ldt-ShowAnnotation').slideUp();

   916 			if(this.annotationOldRead){

   917 				IriSP.jQuery("#"+this.annotationOldRead.id).animate({alpha:'70%'},1000);

   918 			}

   919 			//__IriSP.jQuery("#Ldt-Show-Arrow").animate({left:'0%'},1000);

   920 			this.annotationOldRead = annotationTempo;

   921 		}

   922 	}

   923 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotationTempo);

   924 };

   925 

   926 

   927 /* CLASS Annotation */

   928 

   929 __IriSP.Annotation = function (){

   930 	var id 	= null;

   931 	var begin 			= null;

   932 	var end 			= null;

   933 	var media 			= null;

   934 	var description	= null;

   935 	var title 			= null;

   936 	var color 			= null;

   937 	var tags			= null;

   938 	IriSP.trace("annotation ","réussi");

   939 };

   940 

   941 __IriSP.Annotation = function( id, begin, end, media, title, description, color, tags, duration ){

   942 	this.id 			= id;

   943 	this.begin 			= begin;

   944 	this.end 			= end;

   945 	this.media 			= media;

   946 	this.description 	= description;

   947 	this.title 			= title;

   948 	this.color 			= color;

   949 	this.tags			= tags;

   950 	this.htmlTags		= "";

   951 	this.duration		= duration;

   952 	// draw it 

   953 	this.draw();

   954 	this.drawTags();

   955 	//

   956 	IriSP.trace("Annotation created : ",id);

   957 };

   958 

   959 __IriSP.Annotation.prototype.draw = function(){

   960 	//alert (this.duration);

   961 	var startPourcent 	= this.timeToPourcent(this.begin,this.duration); // temps du media 

   962 	var endPourcent 	= this.timeToPourcent(this.end,this.duration)-startPourcent;

   963 	var divTitle		= this.title.substr(0,55);

   964 	

   965 	//IriSP.jQueryAnnotationTemplate = "<div title='"+IriSP.stripHtml(titleForDiv)+"' 

   966 	//id='"+this.id+"'  class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' 

   967 	//width='100%' style=\"left:"+startPourcent+"%; width:"+endPourcent+"%; 

   968 	//padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; 

   969 	//background:#"+IriSP.DEC_HEXA_COLOR(this.color)+";\" 

   970 	//onClick=\"__IriSP.MyApiPlayer.seek('"+Math.round(this.begin/1000)+"');

   971 	//__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown();\"    ></div> ";

   972 	//alert(this.color+" : "+DEC_HEXA_COLOR(this.color));

   973 		

   974 	IriSP.jQueryAnnotationTemplate = Mustache.to_html(IriSP.annotation_template,

   975 			{"divTitle" : divTitle, "id" : this.id, "startPourcent" : startPourcent,

   976 			"endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(this.color),

   977 			"seekPlace" : Math.round(this.begin/1000)});

   978 	

   979 	IriSP.jQuerytoolTipTemplate = Mustache.to_html(IriSP.tooltip_template, 

   980 				{"title" : this.title, "begin" : this.begin, "end" : this.end,

   981 				"description": this.description});

   982 	

   983 	

   984 	IriSP.jQuery("<div>"+IriSP.jQueryAnnotationTemplate+"</div>").appendTo("#Ldt-Annotations");

   985 	// TOOLTIP BUG ! 

   986 	

   987 	IriSP.jQuery("#"+this.id).tooltip({ effect: 'slide'});

   988 	

   989 	

   990 	IriSP.jQuery("#"+this.id).fadeTo(0,0.3);

   991 	IriSP.jQuery("#"+this.id).mouseover(function() {

   992 		IriSP.jQuery("#"+this.id).animate({opacity: 0.6}, 5);

   993 	}).mouseout(function(){		

   994 		IriSP.jQuery("#"+this.id).animate({opacity: 0.3}, 5);

   995 	});

   996 	IriSP.trace("__IriSP.Annotation.prototype.draw","ADD ANOTATION : "+this.begin+" "+this.end+" "+IriSP.stripHtml(this.title)+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration);

   997 	

   998 };

   999 

  1000 __IriSP.Annotation.prototype.drawTags = function(){

  1001 	/* FIXME : to implement */

  1002 	var KeywordPattern = '<a href=\"\"> '+' </a>';

  1003 	

  1004 	//__IriSP.trace(" !? Tags : ",this.tags);

  1005 	

  1006 	if (this.tags!=undefined){

  1007 		for (var i = 0; i < this.tags.length; ++i){

  1008 			

  1009 			//this.htmlTags += '<span onclick=\"ShowTag('+this.tags[i]['id-ref']+');\"  > '+MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , ";

  1010 			this.htmlTags += '<span> '+IriSP.MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , ";

  1011 			

  1012 		}		

  1013 	}

  1014 };

  1015 

  1016 __IriSP.Annotation.prototype.tootTipAnnotation = function() {

  1017 	// 1 chercher le div correspondant

  1018 	// 2 y mettre les information

  1019 	return this.color + ' ' + this.type + ' apple';

  1020 };

  1021 

  1022 __IriSP.Annotation.prototype.onRollOverAnnotation = function (){

  1023 	this.tootTip();

  1024 };

  1025 

  1026 __IriSP.Annotation.prototype.timeToPourcent = function(time,timetotal){

  1027 	return (parseInt(Math.round(time/timetotal*100)));

  1028 };

  1029  

  1030 

  1031 /* CLASS Tags */

  1032 

  1033 __IriSP.Tags = function(object){

  1034 	this.myTags 	=	object;

  1035 	this.htmlTags 	= 	null;

  1036 	this.weigthMax 	= 	0;

  1037 	//this.mySegments  = 	new array();

  1038 };

  1039 

  1040 __IriSP.Tags.prototype.addAnnotation = function (annotation){

  1041 	for (var i = 0; i < this.myTags.length; ++i){

  1042 		this.myTags[i].mySegments = new Array(); 

  1043 		if (annotation.tags!=null){

  1044 			for (var j = 0; j < annotation.tags.length; ++j){

  1045 				if (this.myTags[i]['id'] == annotation.tags[j]['id-ref']){

  1046 					this.myTags[i].mySegments.push([annotation.begin,annotation.end,annotation.id]);

  1047 					var weigthTempo = this.myTags[i].mySegments.length;

  1048 					var tempo = this.myTags[i].mySegments[weigthTempo-1];

  1049 					//__IriSP.trace ("__IriSP.Tags.prototype.addAnnotation ","  "+this.myTags[i]['meta']['dc:title']+" "+this.myTags[i]['id']+" : "+tempo[0]+" - "+tempo[1]);

  1050 					

  1051 					if (this.weigthMax < weigthTempo ){

  1052 						this.weigthMax = weigthTempo;

  1053 					}

  1054 				}

  1055 			}

  1056 		}

  1057 	}

  1058 };

  1059 

  1060 __IriSP.Tags.prototype.getTitle = function (id){

  1061 	for (var i = 0; i < this.myTags.length; ++i){

  1062 		if(this.myTags[i]['id']==id){

  1063 			return(this.myTags[i]['meta']['dc:title']);

  1064 		}

  1065 	}

  1066 

  1067 };

  1068 

  1069 __IriSP.Tags.prototype.draw = function (){

  1070 

  1071 	IriSP.trace("__IriSP.Tags.prototype.draw"," !!! WELL START " );

  1072 	for (var i = 0; i < this.myTags.length; ++i){

  1073 		IriSP.trace("__IriSP.Tags.prototype.draw"," ADD Tags : "+this.myTags[i]['id']);

  1074 		if(this.myTags[i]['id']!=null){

  1075 		this.htmlTags += '<span onclick=\"MyTags.show( \''+this.myTags[i]['id']

  1076 						+'\');\" style=\"font-size:'  +((this.myTags[i].mySegments.length/this.weigthMax*10)+8)

  1077 						+'px;\" alt=\"'+this.myTags[i].mySegments.length

  1078 						+'\"> '+this.myTags[i]['meta']['dc:title']+' </span>'+' , ';

  1079 		}

  1080 	}

  1081 	

  1082 	IriSP.jQuery('#Ldt-Tags').html(this.htmlTags);

  1083 	IriSP.trace("__IriSP.Tags.prototype.draw"," !!!!  END WMAX= "+this.weigthMax );

  1084 	

  1085 };

  1086 

  1087 __IriSP.Tags.prototype.show = function (id){

  1088 	

  1089 	var timeStartOffsetA	=	100000000000000000000;

  1090 	var timeStartOffsetB	=	100000000000000000000;

  1091 	var timeEndOffsetA		=	0;

  1092 	var timeEndOffsetB		=	0;

  1093 	var timeStartID;

  1094 	var timeEndID;

  1095 	var WidthPourCent;

  1096 	var leftPourCent;

  1097 	var timeStartOffset;

  1098 	

  1099 	// case 1 : seul segment 

  1100 	// case 2 : 2 ou X segments 

  1101 	

  1102 	

  1103 	for (var i = 0; i < this.myTags.length; ++i){

  1104 		if (this.myTags[i]['id']==id){

  1105 			IriSP.trace("######### TAG DRAWing : "," END" );		

  1106 			

  1107 			for (var j = 0; j < this.myTags[i].mySegments.length; ++j){

  1108 				if(timeStartOffset> this.myTags[i].mySegments[j][0]){

  1109 					timeStartOffsetA = this.myTags[i].mySegments[j][0];

  1110 					timeStartOffsetB = this.myTags[i].mySegments[j][1];

  1111 					timeStartID		 = this.myTags[i].mySegments[j][2]

  1112 				}

  1113 				if(timeStartOffset> this.myTags[i].mySegments[j][0]){

  1114 					timeEndOffsetA  = this.myTags[i].mySegments[j][0];

  1115 					timeEndOffsetB  = this.myTags[i].mySegments[j][1];

  1116 					timeEndID		= this.myTags[i].mySegments[j][2]

  1117 				}

  1118 			}

  1119 			

  1120 		}

  1121 	}

  1122 	

  1123 	// -------------------------------------------------

  1124 	// 

  1125 	// -------------------------------------------------

  1126 	

  1127 	leftPourCent 	= IriSP.timeToPourcent((timeStartOffsetA*1+(timeStartOffsetB-timeStartOffsetA)/2),IriSP.MyLdt.duration); 

  1128 	WidthPourCent	= IriSP.timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),IriSP.MyLdt.duration)-leftPourCent; 			

  1129 	//WidthPourCent	= timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),MyLdt.duration)-startPourcent; 			

  1130 	IriSP.jQuery("#Ldt-Show-Tags").css('left',leftPourCent+'%');

  1131 	IriSP.jQuery("#Ldt-Show-Tags").css('width',WidthPourCent+'%');

  1132 	IriSP.jQuery("#Ldt-Show-Tags").text('joijoij');

  1133 	// like arrow script

  1134