/* ----------------------------------------------------------------

   ----------------------------------------------------------------

   ----------------------------------------------------------------

	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');

	}