/* ----------------------------------------------------------------
   ----------------------------------------------------------------
   ----------------------------------------------------------------
   
	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(){
		
	}