client/player/src/js/LdtPlayer.js
changeset 30 2f27e07f9974
parent 29 d969ba10156c
child 51 28d21b2123ba
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/player/src/js/LdtPlayer.js	Fri Aug 06 16:29:21 2010 +0200
@@ -0,0 +1,956 @@
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+   ----------------------------------------------------------------
+   
+	LDTPlayer is created by http://www.iri.centrepompidou.fr
+	2010-06-14 - version 0.08
+	
+	init By Samuel Huron < samuel.huron (at) cybunk (dot) com >
+	use JQUERY 			-	Compatible v1.3.2 :: Optimal 1.4
+	use TOOLTIP FOR JQ	- 
+	use JQUERY UI 		-	for theme management
+	use JWPLAYER 		-	but you can change it with other things
+	use Media Fragment 	- 	inspired by HTML5 exemple from Silvia Pfeiffer
+	for #t=  //	http://annodex.net/~silvia/itext/mediafrag.html
+	
+	
+	
+	TODO : ////////////////////////////////////////
+
+	- ajouter le share embed 
+	- gestion créer une annotation simple 
+	- bouton graphique design : pause / stop
+	- gestion des tags 
+	- creation du mode radio 
+	
+   ----------------------------------------------------------------
+*/
+
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	INIT player LDT  */
+
+	//LdtShareTool = "<!-- AddThis Button BEGIN -->\n <div class='addthis_toolbox addthis_default_style'> \n<a href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c349bb933426b8c' class='addthis_button_compact'>Share</a><span class='addthis_separator'>|</span> \n <a class='addthis_button_facebook'></a> \n <a class='addthis_button_myspace'></a> \n <a class='addthis_button_google'></a> \n <a class='addthis_button_twitter'></a> \n </div> \n <script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c349bb933426b8c'></script>/n<!-- AddThis Button END -->";
+	
+	LdtShareTool = ""+
+				 "\n<a onclick=\"LdtApiPlayer.share('delicious');\" title='partager avec delicious'><span class='share shareDelicious'>&nbsp;</span></a>"+		
+				 "\n<a onclick=\"LdtApiPlayer.share('facebook');\" title='partager avec facebook'> <span class='share shareFacebook'>&nbsp;</span></a>"+
+				 "\n<a onclick=\"LdtApiPlayer.share('twitter');\" title='partager avec twitter'>  <span class='share shareTwitter'>&nbsp;</span></a>"+
+				 "\n<a onclick=\"LdtApiPlayer.share('myspace');\" title='partager avec Myspace'>  <span class='share shareMySpace'>&nbsp;</span></a>"+
+				 "\n<a onclick=\"LdtApiPlayer.share('jamespot');\" title='partager avec JamesPot'>  <span class='share shareJamesPot'>&nbsp;</span></a>";
+	
+	var DIVROOTID;
+	
+	function playerLdt (width,height,file,divId,MySwfPath,AudioVideo){
+		
+		if (AudioVideo==true){
+		// VIDEO 
+			$jIRI("#"+divId).append("<div id=\"Ldt-Root\"><div id=\"ldt-Show\">\n	<div id=\"Ldt-ShowAnnotation-video\" class=\"demo\" >\n	<div id=\"Ldt-SaTitle\"></div>\n	<div id=\"Ldt-SaDescription\"></div>\n <div style='text-align:right; float:right;' >\n \n "+LdtShareTool+"\n \n <div onclick=\"$jIRI('#Ldt-ShowAnnotation').slideUp();\" style='color:#ffffff;float:right;padding-right:10px;padding-left:10px;padding-bottom:5px;' >X</div>	</div>		</div>		<div id=\"Ldt-PlaceHolder\">\n			<a href=\"http://www.adobe.com/go/getflashplayer\">Get flash</a> to see this player	\n		</div>\n	</div>\n	<div id=\"Ldt-controler\" class=\"demo\">\n		<div class=\"Ldt-Control1\" >\n			<button id=\"ldt-CtrlPlay\" onclick=\"LdtApiPlayer.play()\">Play</button>\n			<button id=\"ldt-CtrlNext\" onclick=\"LDTligne.nextAnnotation()\">next</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=\"LdtApiPlayer.share()\">Share</button>\n			<button id=\"ldt-CtrlSound\" onclick=\"LdtApiPlayer.mute()\">Sound</button>\n</div>\n	</div><div class='cleaner'>&nbsp;</div></div>");
+			
+		} else {
+		// AUDIO  
+		$jIRI("#"+divId).append("<div id=\"Ldt-Root\"><div id=\"Ldt-PlaceHolder\" style=\"visibility:hidden;height:0px;display:none;\">\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=\"LdtApiPlayer.play()\">Play</button>\n			<button id=\"ldt-CtrlNext\" onclick=\"LDTligne.nextAnnotation()\">next</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=\"LdtApiPlayer.share()\">Share</button>\n			<button id=\"ldt-CtrlSound\" onclick=\"LdtApiPlayer.mute()\">Sound</button>\n		</div>\n <div class='cleaner'>&nbsp;</div> \n <div id=\"Ldt-Show-Arrow-container\"> <div id=\"Ldt-Show-Arrow\"> </div> <!--<div id=\"Ldt-Show-Tags\" style=\"background-color:#000;width:10px;\">xx </div> --> </div>\n	</div> <div>	<div id=\"ldt-Show\">\n	</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></div>\n<div id=\"Ldt-SaKeyword\">\n<div id=\"Ldt-SaKeywordText\" style='text-align:left; float:left;font-size:10px;width:500px;' >  </div>\n <div class='cleaner'>&nbsp;</div> <div style='text-align:right; float:right;' >\n \n "+LdtShareTool+"\n \n <!--<div onclick=\"$jIRI('#Ldt-ShowAnnotation').slideUp();\" style='color:#8c8a8c;float:right;padding-right:10px;padding-left:10px;padding-bottom:5px;' >X</div>	--> </div>\n <div class='cleaner'>&nbsp;</div></div>  <div id=\"Ldt-Tags\" style=\"display:none;\" > My tags </div></div>  <div id=\"output\" class=\"demo\"  style=\"display:none;\"></div>");
+		}
+		//DIVROOTID=divId;
+		//$jIRI("#Ldt-Root").css('visibility','hidden');
+		//$jIRI("#Ldt-Root").css('display','none');
+		loadJson(width,height,file,MySwfPath);
+	}
+
+
+	/*
+	$('#loading').ajaxStart(function() {
+		$(this).show();
+		$('#result').hide();
+	}).ajaxStop(function() {
+		$(this).hide();
+		$('#result').fadeIn('slow');
+	}); 
+	*/
+	
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	LOAD JSON AND PARSE IT 	*/
+
+	var MyLdt;
+	var MyTags;
+	var Durration;
+	var playerLdtWidth;
+	var playerLdtHeight;
+
+	$('#log').ajaxError(function(event, request, settings){
+		$(this).append("<li>Error requesting page " + settings.url + "</li>");
+	});
+	
+	function loadJson (width,height,urlJson,MySwfPath){
+		
+		playerLdtWidth=width;
+		playerLdtHeight=height;
+		
+		$jIRI.ajax({
+					  dataType: 'jsonp',
+					  url:urlJson,
+					  success : function(json){
+					  
+						//alert("ICI : "+json);
+						
+						if(json == ""){
+							alert("ERREUR DE CHARGEMENT JSON");
+						} else {
+						  
+						  
+							/* # CREATE MEDIA  							*/
+							/* # JUSTE ONE PLAYER FOR THE MOMENT		*/
+							$jIRI("<div></div>").appendTo("#output");
+							MyMedia = new  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']);
+							MyMedia.createPlayer(playerLdtWidth,playerLdtHeight,json.medias[0]["meta"]["item"]["value"],MySwfPath);	
+							
+							/* # CREATE THE FIRST LINE  				*/
+							MyLdt = new 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 					*/
+							MyTags =  new Tags (json.tags);
+						
+							/* CREATE THE ANNOTATIONS  				    */
+							/* JUSTE FOR THE FIRST TYPE   			 	*/
+							$jIRI.each(json.annotations, function(i,item) {
+								if (item.meta['id-ref'] == MyLdt.id) {
+									MyLdt.addAnnotation(
+												item.id,
+												item.begin,
+												item.end,
+												item.media,
+												item.content.title,
+												item.content.description,
+												item.content.color,
+												item.tags);
+										}
+									MyTags.addAnnotation(item);
+							});	
+							$jIRI.each(json.lists, function(i,item) {
+								trace("lists","");
+							});	
+							$jIRI.each(json.views, function(i,item) {
+								trace("views","");
+							});	
+							/* END PARSING ----------------------- */
+						}
+										
+					},error : function(data){
+						  alert("ERROR : "+data);
+					}
+				  });	
+	}
+	function callbackLdts(json){
+	
+		alert("CALLBACK");
+		
+	}	
+	function trace (msg,value){
+		$jIRI("<div>"+msg+" : "+value+"</div>").appendTo("#output");
+	}
+
+
+
+
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	Class Media */
+/*
+
+		"http://advene.liris.cnrs.fr/ns/frame_of_reference/ms":"o=0",
+		"id":"kia_closeup",
+		"url":"D:/Thibaut/Outils_techno/IRI-LignesDeTemps/media/video/kia_closeup_BQ.flv",
+		"dc:creator":"tcavalie",
+		"dc:created":"2010-05-04T00:00:00",
+		"dc:contributor":"tcavalie",
+		"dc:modified":"2010-05-04T00:00:00",
+		"dc:creator.contents":"Abbas Kiarostami",
+		"dc:created.contents":"1990",
+		"dc:title":"Close Up is a very very long title",
+		"dc:description":"Analyse de Close Up",
+		"dc:duration":"689266"
+	*/
+	function Media (id,url,duration,title,description){
+		this.id 		 = id;
+		this.url 		 = url;
+		this.title 		 = title;
+		this.description = description;
+		this.duration 	 = duration;
+
+		this.lignes 	  = new Array();
+		this.updatePlayer = updatePlayerMedia;
+		this.getDuration  = getMediaDuration;
+		this.createPlayer = createPlayerMedia;
+		
+		trace("Media ID :",id);
+		trace("Media URL :",this.url);
+		trace("- content : color",url);
+		trace("- content : audio",title);
+	}
+	function createPlayerMedia(width,height,MyStreamer,MySwfPath){
+		LdtApiPlayer = new APIplayer(width,height,this.url,this.duration,MyStreamer,MySwfPath);
+		//createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath);
+	}
+	function updatePlayerMedia(){
+		
+	}
+	function getMediaDuration(){
+		return (this.duration);
+	}
+	function getMediaTitle(){
+		return (this.title);
+	}
+
+
+
+
+
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON ()   */
+	function createInterface (width,height,duration){
+		
+		//$jIRI("#Ldt-Root").css('display','visible');
+		trace("CREATE INTERFACE ",width+","+height+","+duration+",");
+		
+		$jIRI(function() {		
+			$jIRI("#Ldt-Annotations").width(width-(75*2));
+			$jIRI("#Ldt-Show-Arrow-container").width(width-(75*2));
+			//$jIRI("#Ldt-Show-Arrow-container").width(width-(75*2));
+			$jIRI("#Ldt-ShowAnnotation-audio").width(width-10);
+			$jIRI("#Ldt-ShowAnnotation-video").width(width-10);
+			$jIRI("#Ldt-SaKeyword").width(width-10);
+			$jIRI("#Ldt-controler").width(width-10);
+			$jIRI("#Ldt-Control").attr("z-index","100");
+			
+			 $jIRI("#Ldt-ShowAnnotation").click(function () { 
+				 //$jIRI(this).slideUp(); 
+			});
+
+			var LdtpPlayerY = $jIRI("#Ldt-PlaceHolder").attr("top");
+			var LdtpPlayerX = $jIRI("#Ldt-PlaceHolder").attr("left");
+			
+			$jIRI("#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) {
+					
+					//$jIRI("#amount").val(ui.value+" s");
+					//player.sendEvent('SEEK', ui.value)
+					LdtApiPlayer.seek(ui.value);
+					//changePageUrlOffset(ui.value);
+					//player.sendEvent('PAUSE')
+				}
+			});
+			$jIRI("#amount").val($jIRI("#slider-range-min").slider("value")+" s");
+			
+			$jIRI(".Ldt-Control1 button:first").button({
+				icons: {
+					primary: 'ui-icon-play'
+				},
+				text: false
+			}).next().button({
+				icons: {
+					primary: 'ui-icon-seek-next'
+				},
+				 text: false
+			});
+			
+			$jIRI(".Ldt-Control2 button:first").button({
+				icons: {
+					primary: 'ui-icon-transferthick-e-w'//,
+					//secondary: 'ui-icon-volume-off'
+				},
+				text: false
+			}).next().button({
+				icons: {
+					primary: 'ui-icon-volume-on'
+				},
+				 text: false
+			});
+		
+			// version radio 
+			//$jIRI("#Ldtplayer1").css('display','none');
+			//$jIRI("#Ldt-Root").show();
+			MyTags.draw();
+		});	
+	}
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	UTIL */
+
+// code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript
+	function stripHtml(s)
+	{
+		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;');
+	}
+
+/*   Conversion de couleur Decimal vers HexaDecimal || 000 si fff */
+	function DEC_HEXA_COLOR(dec)
+	{
+		 var hexa='0123456789ABCDEF',hex=''
+		 while (dec>15)
+		 {
+			  tmp = dec-(Math.floor(dec/16))*16;
+			  hex = hexa.charAt(tmp)+hex;
+			  dec = Math.floor(dec/16);
+		 }
+		 hex = hexa.charAt(dec)+hex;
+		 if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ }
+		 return(hex);
+	}
+
+
+
+
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	API player - work in progress */ 
+	function APIplayer (width,height,url,duration,streamerPath,MySwfPath){
+		
+		this.player 			= null;
+		this.hashchangeUpdate 	= null;
+		
+		this.width				= width;
+		this.height				= height;
+		this.url				= url;
+		this.duration			= duration;
+		this.streamerPath		= streamerPath;
+		this.MySwfPath			= MySwfPath;
+		
+		this.pause 				= APIpPause;
+		this.ready				= APIpReady;
+		this.play 				= APIpPlay;
+		this.seek 				= APIpSeek;
+		this.update				= APIpUpdate;
+		this.mute				= APIpMute;
+		this.share				= APIpShare;
+		MyApiPlayer				= this;
+		
+		createPlayer(width,height,this.url,this.duration,this.streamerPath,this.MySwfPath);
+		
+	}
+	
+	function APIpCreate(){
+		
+	}
+	function APIpReady(player){
+		//alert("ready");
+		createInterface(this.width,this.height,this.duration);
+		this.player	= player;
+
+		// hashchange EVENT
+		if (window.addEventListener){
+		// pour FIREFOX  hashchange EVENT
+			window.addEventListener("hashchange", function() {
+			  var url = location.href;
+			  var time = retrieveTimeFragment(url);
+			  trace("hashchange",time);
+			  if(LdtApiPlayer.hashchangeUpdate==null){
+				LdtApiPlayer.seek(time);
+			  }else{
+				LdtApiPlayer.hashchangeUpdate=null;
+			  }
+			}, false);
+		 
+		} 
+		else if (window.attachEvent){
+		// FOR IE hashchange EVENT
+			window.attachEvent("onhashchange", function() {
+			  trace("hashchange",time);
+			  var url = location.href;
+			  var time = retrieveTimeFragment(url);
+			  if(LdtApiPlayer.hashchangeUpdate==null){
+				LdtApiPlayer.seek(time);
+			  }else{
+				LdtApiPlayer.hashchangeUpdate=null;
+			  }
+			}, false);
+		}
+		
+	}
+	function APIpPause(){
+		this.hashchangeUpdate = true;
+		this.player.sendEvent('PAUSE');
+	}
+	function APIpPlay(){
+		this.hashchangeUpdate = true;
+		this.player.sendEvent('PLAY');
+	}
+	function APIpMute(){
+		this.player.sendEvent('MUTE');
+	}
+	function APIpShare(network){
+	
+		MyMessage = "Je regarde :";
+		MyURLNow = window.location.href;	
+		//alert(network+" : "+MyURLNow);
+		
+		if(network == "facebook"){
+		 
+		 //window.title = 
+		 
+				shareURL = "http://www.facebook.com/share.php?u=";			
+				//http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.addthis.com%2F%3Fsms_ss%3Dfacebook
+		 
+			}else if(network == "twitter"){
+			
+				shareURL  = "http://twitter.com/home?status="+MyMessage;	
+		
+			}else if(network == "myspace"){
+				shareURL ="http://www.myspace.com/Modules/PostTo/Pages/?u=";
+			
+			}else if(network == "delicious"){
+				shareURL = "http://delicious.com/save?url=";
+			
+			}else if(network == "JamesPot"){
+			alert(network+" non actif pour l'instant : "+MyURLNow);
+			
+		}
+		
+		window.location.href = shareURL+encodeURIComponent(MyURLNow);
+	}
+	function APIpSeek(time){
+		this.player.sendEvent('SEEK', time);
+		changePageUrlOffset(time);
+	}	
+	function APIpUpdate(time){
+		this.hashchangeUpdate = true;
+		this.player.sendEvent('SEEK', time);
+	}	
+	function changePageUrlOffset(time) {
+	  trace("changeURL",time);
+      // update page url
+	  location.hash = "#t=" + time;
+      //document.displayurl.offseturl.value = location.href;
+      window.location.href = location.href;
+    }
+
+
+	
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	CREER JW PLAYER  creation + listener */
+
+	var currentPosition = 0; 
+	var currentVolume   = 50; 
+	var player 			= null;
+	var startPosition 	= null;
+
+	function playerReady(thePlayer) {
+		
+		player = window.document[thePlayer.id];
+		LdtApiPlayer.ready(player);
+		trace("PLAYER READY ","");
+		var url = location.href;
+		var time = retrieveTimeFragment(url);
+		trace("PLAYER READY SEEK IF NEEDED",time);
+		startPosition = time;
+		addListeners();	
+	}
+	function addListeners() {
+		if (player) { 
+			player.addModelListener("TIME", "positionListener");
+			player.addControllerListener("VOLUME", "volumeListener");
+			player.addModelListener('STATE', 'stateMonitor');
+			//http://developer.longtailvideo.com/trac/wiki/Player5Events
+		} else {
+			setTimeout("addListeners()",100);
+		}
+
+		// et changer les boutons
+	}
+	function stateMonitor(obj) { 
+	
+		 if(obj.newstate == 'PAUSED')
+        {
+			trace("PAUSE : ","");
+			changePageUrlOffset(currentPosition);			
+			
+		} else if (obj.newstate == 'PLAYING'){
+			// une fois la video prete a lire  la déplacer au bon timecode 
+			if(startPosition!=null){
+				LdtApiPlayer.update(startPosition);
+				startPosition = null;
+			}
+		} else if (obj.newstate == 'BUFFERING'){
+			trace("BUFFERING : ","");
+			//changePageUrlOffset(currentPosition);
+		}
+		
+	}
+	function positionListener(obj) { 
+		currentPosition = obj.position; 
+		var tmp = document.getElementById("posit");
+		if (tmp) { tmp.innerHTML = "position: " + currentPosition; }
+		$jIRI("#slider-range-min").slider("value", obj.position);
+		$jIRI("#amount").val(obj.position+" s");
+		// afficher annotation 
+		MyLdt.checkTime(currentPosition);
+	}
+	function volumeListener(obj) { 
+		currentVolume = obj.percentage; 
+		var tmp = document.getElementById("vol");
+		if (tmp) { tmp.innerHTML = "volume: " + currentVolume; }
+	}	
+	function createPlayer(width,height,url,duration,streamerPath,MySwfPath) {
+	
+		myUrlFragment = url.split(streamerPath);
+		file = myUrlFragment[1];
+		streamer = streamerPath;
+		
+		var flashvars = {
+			streamer:streamer,
+			file:file, 
+			//live:"true",
+			autostart:"true",
+			controlbar:"none"
+		}
+
+		var params = {
+			allowfullscreen:"true", 
+			allowscriptaccess:"always",
+			wmode:"transparent"
+		}
+
+		var attributes = {
+			id:"Ldtplayer1",  
+			name:"Ldtplayer1"
+		}
+
+		swfobject.embedSWF(MySwfPath, "Ldt-PlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes);
+	}
+
+
+
+
+	
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	MEDIA FRAGMENT FUNCTION*/
+
+    // when the hash on the window changes, also do an offset
+    // jump to time offset action
+    function jumpToTimeoffset(form) {
+		var time = form.time.value;
+		changePageUrlOffset(time);
+    }
+    // parse the time hash out of the given url
+    function retrieveTimeFragment(url) {
+      var pageoffset = 0;
+	  var offsettime = 0;
+	  
+      if (url.split("#")[1] != null) {
+		pageoffset = url.split("#")[1];
+			if (pageoffset.substring(2) != null) {
+				offsettime = pageoffset.substring(2);
+			}
+		}
+		return offsettime;
+    }  
+	function ignoreTimeFragment(url){
+	 if (url.split("#")[1] != null) {
+	 pageurl= url.split("#")[0];
+	 }
+	 return pageurl;
+	}
+
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+ Class Ligne (annotationType) */
+/*	
+		"id":"dp_1",
+		"dc:creator":"tcavalie",
+		"dc:created":"2010-04-04T19:09:44",
+		"dc:contributor":"perso",
+		"dc:modified":"15/2/2008",
+		"dc:title":"dqsdkljfh qklsdhf very very very long",
+		"dc:description":"sdfg sdfg sdfg sdfg"
+	*/
+	
+	var LDTligne 			= null;		
+	function Ligne (){
+		this.id 			= id;
+		this.title 			= title;
+		this.description 	= description;
+		this.annotations 	= new Array();
+		this.annotationOldRead = "";
+		this.addAnnotation  = addAnnotationligne;
+		this.clickAnnotation= onClickLigneAnnotation;
+		this.checkTime 		= checkTimeLigne;
+		this.nextAnnotation	= onClickNextAnnotation;
+	}
+	function Ligne (id,title,description,duration){
+		this.id 		 = id;
+		this.title 		 = title;
+		this.description = description;
+		//
+		this.annotations = new Array();
+		this.addAnnotation = addLigneAnnotation;
+		this.checkTime 	= checkTimeLigne;
+		this.nextAnnotation	= onClickNextAnnotation;
+		this.numAnnotation = numAnnotationTimeLine;
+		this.duration = duration;
+		LDTligne = this;
+		trace("LIGNE  ","créer "+LDTligne);
+	}	
+	function addLigneAnnotation(id,begin,end,media,title,description,color,tags){
+		var myAnnotation = new Annotation(id,begin,end,media,title,description,color,tags,this.duration);
+		this.annotations.push(myAnnotation);
+		trace("LIGNE  ","add annotation ");
+	}
+	function onClickLigneAnnotation(id){
+		//changePageUrlOffset(currentPosition);
+		//player.sendEvent('SEEK', this.start);
+		//trace("SEEK",this.start);
+	}
+	function searchLigneAnnotation(id){
+		/*for (){
+		}*/
+	}
+	function listAnnotations (){
+	
+	}
+	function onClickNextAnnotation(){
+		var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1;
+		var annotationCible = this.annotations[annotationCibleNumber];
+
+		if(annotationCibleNumber<this.annotations.length-1){
+			annotationCible.begin
+			player.sendEvent('SEEK', annotationCible.begin/1000);
+trace("LIGNE  ","| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000);
+		}else{
+			player.sendEvent('SEEK', this.annotations[0].begin/1000);
+		}
+		
+		
+	}
+	function numAnnotationTimeLine(annotationCible){
+		for (var i=0; i < this.annotations.length; ++i){
+			if(annotationCible == this.annotations[i]){
+				return i;
+			}
+		}
+	}
+	function checkTimeLigne(time){
+		var annotationTempo = -1;
+		
+		for (var i=0; i < this.annotations.length; ++i){
+			if (time>this.annotations[i].begin/1000 && time<this.annotations[i].end/1000){
+				var annotationTempo = this.annotations[i];	
+					// si différentes de la précédente
+					if(annotationTempo!=this.annotationOldRead){
+						this.annotationOldRead = annotationTempo;
+						//trace("Check : ","annotation ici : "+i+" title "+annotationTempo.title);
+						//$jIRI('#Ldt-ShowAnnotation').slideUp();
+						//http://api.jquery.com/delay/  -> 1.4
+						//$jIRI("#Ldt-SaTitle").delay(100).text(annotationTempo.title);
+						//$jIRI("#Ldt-SaDescription").delay(100).text(annotationTempo.description);
+						//$jIRI('#Ldt-ShowAnnotation').delay(100).slideDown();
+						
+						$jIRI("#Ldt-SaTitle").text(annotationTempo.title);
+						$jIRI("#Ldt-SaDescription").text(annotationTempo.description);
+						
+						$jIRI("#Ldt-SaDescription").text(annotationTempo.description);
+						$jIRI("#Ldt-SaKeywordText").html(annotationTempo.htmlTags);
+						
+						$jIRI('#Ldt-ShowAnnotation').slideDown();
+						
+						
+						startPourcent 	= timeToPourcent((annotationTempo.begin*1+(annotationTempo.end-annotationTempo.begin)/2),annotationTempo.duration); 
+						
+						$jIRI("#Ldt-Show-Arrow").css('left',startPourcent+'%');
+						//alert(moyennePosition);
+						var tempolinkurl  =  ignoreTimeFragment(window.location.href)+"#t="+(this.annotations[i].begin/1000);
+					}
+				break;
+			} 
+			
+		}
+		// si il y en a pas : retractation du volet 
+		if( annotationTempo == -1){
+			if(annotationTempo!=this.annotationOldRead){
+				trace("Check : ","pas d'annotation ici ");
+				$jIRI('#Ldt-ShowAnnotation').slideUp();
+				this.annotationOldRead = annotationTempo;
+			}
+		}
+		
+	}
+
+
+
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+  CLASSE Annotation */
+/*
+
+		"begin":"767",
+		"end":"785",
+		"id":"dp_1_sp_3",
+		"media":"kia_closeup",
+		"content": {
+						"mimetype":"application/x-ldt-structured",
+						"title":"mon titre",
+						"description":"ma description en &lt;b&gt;gras&lt;/b&gt; .",
+						"color":"16763904",
+						"audio":{"src":"","mimetype":"audio/mp3","href":""}
+					},
+		"meta":
+				{
+					"id-ref":"dp_1",
+					"dc:creator":"tcavalie",
+					"dc:created":"2010-04-04T19:09:44",
+					"dc:contributor":"perso",
+					"dc:modified":"9/10/2007"
+				}
+	*/
+	
+	function Annotation (){
+		this.id 			= null;
+		this.begin 			= null;
+		this.end 			= null;
+		this.media 			= null;
+		this.description	= null;
+		this.title 			= null;
+		this.color 			= null;
+		this.onRollOver 	= onRollOverAnnotation;
+		this.onClick 		= onClickAnnotation;
+		this.toolTip 		= rollOverAnnotation;
+		this.draw 			= drawAnnotation;
+		this.drawTags		= drawTagsAnnotation;
+		this.tags			= null;
+		trace("annotation ","réussi")
+	}	
+	function Annotation (id,begin,end,media,title,description,color,tags,duration){
+		this.id 			= id;
+		this.begin 			= begin;
+		this.end 			= end;
+		this.media 			= media;
+		this.description 	= description;
+		this.title 			= title;
+		this.color 			= color;
+		this.tags			= tags;
+		this.htmlTags		= "";
+		this.duration		= duration;
+		//
+		this.onRollOver 	= onRollOverAnnotation;
+		// this.onClick 	= onClickAnnotation;
+		this.toolTip 		= tootTipAnnotation;
+		this.draw 			= drawAnnotation;
+		this.drawTags		= drawTagsAnnotation;
+		// this.show 		= showAnnotationNotice;
+		// draw it 
+		this.draw();
+		this.drawTags();
+		//
+		trace("Annotation created : ",id);
+	}	
+	function drawAnnotation (){
+		//alert (this.duration);
+		startPourcent 	= timeToPourcent(this.begin,this.duration); // temps du média 
+		endPourcent 	= timeToPourcent(this.end,this.duration)-startPourcent;
+		$AnnotationTemplate = "<div title='"+stripHtml(this.title)+"' id='"+this.id+"'  class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' width='100%' style=\"left:"+startPourcent+"%; width:"+endPourcent+"%; padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background:#"+DEC_HEXA_COLOR(this.color)+";\" onClick=\"LdtApiPlayer.seek('"+Math.round(this.begin/1000)+"');$jIRI('#Ldt-ShowAnnotation').slideDown();\"    ></div> ";
+		//alert(this.color+" : "+DEC_HEXA_COLOR(this.color));
+		
+		$toolTipTemplate = "<div class='Ldt-tooltip'>"
+							+"<div class='title'>"+stripHtml(this.title)+"</div>"
+							+"<div class='time'>"+this.begin+" : "+this.end+"</div>"
+							+"<div class='description'>"+stripHtml(this.description)+"</div>"
+							+"</div>";
+		
+		
+		$jIRI("<div>"+$AnnotationTemplate+"</div>").appendTo("#Ldt-Annotations");
+		$jIRI("#"+this.id).tooltip({ effect: 'slide'});
+		
+		
+		$jIRI("#"+this.id).fadeTo(0,0.3);
+		$jIRI("#"+this.id).mouseover(function() {
+			$jIRI("#"+this.id).animate({opacity: 0.6}, 5)
+		}).mouseout(function(){		
+			$jIRI("#"+this.id).animate({opacity: 0.3}, 5)
+		});
+		//trace(" ### ","ADD ANOTATION : "+this.begin+" "+this.end+" "+stripHtml(this.title)+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration);
+		
+	}	
+	
+	function drawTagsAnnotation(){
+		KeywordPattern = '<a href=\"\"> '+' </a>';
+		
+		//trace(" !? Tags : ",this.tags);
+		
+		if (this.tags!=undefined){
+			for (var i = 0; i < this.tags.length; ++i){
+				
+				//this.htmlTags += '<span onclick=\"ShowTag('+this.tags[i]['id-ref']+');\"  > '+MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , ";
+				this.htmlTags += '<span> '+MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , ";
+				
+			}		
+		}
+	}
+	
+	function tootTipAnnotation() {
+		// 1 chercher le div correspondant
+		// 2 y mettre les information
+		return this.color + ' ' + this.type + ' apple';
+	}
+	function onRollOverAnnotation(){
+		this.tootTip();
+	}		
+	function timeToPourcent(time,timetotal){
+		return (parseInt(Math.round(time/timetotal*100)));
+	}
+
+
+
+
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+  CLASSE Tags */
+function Tags (object){
+	this.myTags 	=	object;
+	this.htmlTags 	= 	null;
+	this.weigthMax 	= 	0;
+	//this.mySegments  = 	new array();
+}
+Tags.prototype.addAnnotation = function (annotation){
+	for (var i = 0; i < this.myTags.length; ++i){
+		this.myTags[i].mySegments = new Array(); 
+		if (annotation.tags!=null){
+			for (var j = 0; j < annotation.tags.length; ++j){
+				if (this.myTags[i]['id'] == annotation.tags[j]['id-ref']){
+					this.myTags[i].mySegments.push([annotation.begin,annotation.end,annotation.id]);
+					var weigthTempo = this.myTags[i].mySegments.length
+					var tempo = this.myTags[i].mySegments[weigthTempo-1];
+					trace (" ADD Tags : ","  "+this.myTags[i]['meta']['dc:title']+" "+this.myTags[i]['id']+" : "+tempo[0]+" - "+tempo[1]);
+					
+					if (this.weigthMax < weigthTempo ){
+						this.weigthMax = weigthTempo;
+					}
+				}
+			}
+		}
+	}
+}
+Tags.prototype.getTitle = function (id){
+	for (var i = 0; i < this.myTags.length; ++i){
+		if(this.myTags[i]['id']==id){
+			return(this.myTags[i]['meta']['dc:title']);
+		}
+	}
+
+}
+Tags.prototype.draw = function (){
+
+	trace("########### TAG DRAW "," WELL START " );
+	for (var i = 0; i < this.myTags.length; ++i){
+		//trace(" ADD Tags : ",this.myTags[i]['id']);
+		if(this.myTags[i]['id']!=null){
+		this.htmlTags += '<span onclick=\"MyTags.show( \''+this.myTags[i]['id']
+						+'\');\" style=\"font-size:'  +((this.myTags[i].mySegments.length/this.weigthMax*10)+8)
+						+'px;\" alt=\"'+this.myTags[i].mySegments.length
+						+'\"> '+this.myTags[i]['meta']['dc:title']+' </span>'+' , ';
+		}
+	}
+	
+	$jIRI('#Ldt-Tags').html(this.htmlTags);
+	trace("######### TAG DRAWing : "," END WMAX= "+this.weigthMax );
+	
+}
+Tags.prototype.show = function (id){
+	
+	var timeStartOffsetA	=	100000000000000000000;
+	var timeStartOffsetB	=	100000000000000000000;
+	var timeEndOffsetA		=	0;
+	var timeEndOffsetB		=	0;
+	var timeStartID;
+	var timeEndID;
+	
+	// case 1 : seul segment 
+	// case 2 : 2 ou X segments 
+	
+	
+	for (var i = 0; i < this.myTags.length; ++i){
+		if (this.myTags[i]['id']==id){
+			trace("######### TAG DRAWing : "," END" );		
+			
+			for (var j = 0; j < this.myTags[i].mySegments.length; ++j){
+				if(timeStartOffset> this.myTags[i].mySegments[j][0]){
+					timeStartOffsetA = this.myTags[i].mySegments[j][0];
+					timeStartOffsetB = this.myTags[i].mySegments[j][1];
+					timeStartID		 = this.myTags[i].mySegments[j][2]
+				}
+				if(timeStartOffset> this.myTags[i].mySegments[j][0]){
+					timeEndOffsetA  = this.myTags[i].mySegments[j][0];
+					timeEndOffsetB  = this.myTags[i].mySegments[j][1];
+					timeEndID		= this.myTags[i].mySegments[j][2]
+				}
+			}
+			
+		}
+	}
+	
+	// -------------------------------------------------
+	// 
+	// -------------------------------------------------
+	
+	leftPourCent 	= timeToPourcent((timeStartOffsetA*1+(timeStartOffsetB-timeStartOffsetA)/2),MyLdt.duration); 
+	WidthPourCent	= timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),MyLdt.duration)-startPourcent; 			
+	$jIRI("#Ldt-Show-Tags").css('left',leftPourCent+'%');
+	$jIRI("#Ldt-Show-Tags").css('width',WidthPourCent+'%');
+	// like arrow script
+	
+	
+	
+}
+
+
+		
+/* ----------------------------------------------------------------
+   ----------------------------------------------------------------
+	Class tracess */
+	
+	function Tracer (){
+		
+	}
+	function addTrace(){
+		
+	}
+	
+	
+	
\ No newline at end of file