{% load i18n %}
{% load set_var %}
{% load analytics %}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{LANGUAGE_CODE}}" lang="{{LANGUAGE_CODE}}">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache" content="no store" />
		<meta http-equiv="Expires" content="-1" />
		<title>Ligne de Temps - IRI</title>
		<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js"></script>
		<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.qtip.min.js"></script>
		<script type="text/javascript">
			var $j = jQuery.noConflict();
		</script>
		<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/embed_popup.js"></script>
		
		<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/workspace.css" type="text/css"/>
		<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/embed_popup.css" type="text/css"/>
		<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/jq-css/jquery.qtip.css" type="text/css"/>
        <script type="text/javascript">
        function iframe_event(){
			var code_embed=document.getElementById("player_id_code");
			iframeUrl= "{{iframe_url}}&polemic={{polemic}}&show_mic_record={{show_mic_record}}&annotations_list={{annotations_list}}";
			player_width=570;
			player_height=678;
			frame = document.createElement("iframe");
		    frame.width = 570;
		    frame.height = 678;
		    frame.src = iframeUrl;
		    frame.frameBorder = 0;
		   	frame.seamless = "seamless";
		   	$j("#wrapper_{{player_id}}").html(frame);
		   	iframe_code="<iframe src='"+iframeUrl+"' width='570' height='678' seamless='seamless'></iframe>";
			$j("#player_id_code").val(iframe_code);
			$j("#player_id_code").focus();
			$j("#player_id_code").select();
		}	
		</script>
		
		<script type="text/javascript">
			function div_event(){
				var new_code=document.getElementById("embed_code_var").value;
				var code_embed=document.getElementById("player_id_code");
			   	$j("#wrapper_{{player_id}}").html(new_code);
				code_embed.value= new_code;
				$j("#player_id_code").focus();
				$j("#player_id_code").select();	
			}	
		</script>
		
		<script type="text/javascript">
			function toggle() {
				var element = document.getElementById("wrapper_{{player_id}}");
				var text = document.getElementById("displayPlayer");
				if(element.style.display==="none") {
			    	element.style.display="block";
					text.innerHTML = "{% trans 'Hide Player' %}";
			  	}
				else {
			    	element.style.display="none";
					text.innerHTML = "{% trans 'Show Player' %}";
				}
			} 
		</script>
	</head>

	<body id="init_embed_popup">
		<textarea id="embed_code_var" readonly="readonly" class="ldt_player_code" style="display:none">{{ embed_rendered.player }}</textarea>
		<div id='ldt_id>
			<div id='ldt_id_title'>{% trans 'project id' %} <span id="project_id_select">({% trans 'Select' %})</span> : <input id="project_id_input" value="{{ldt_id}}"/></div>
        </div>
    
        <a id="displayPlayer" href="javascript:toggle();">{% trans 'Show Player' %}</a>
		<div class="ldt_player" id="wrapper_{{player_id}}" style="display:none">
			{% include "ldt/ldt_utils/partial/embed_player.html" %}  
		</div>
		<div id="button_row">
		    <div id="display_select">
		    	<input type="button" value="{% trans 'popup_player'%}" id="player_button"/><input id="seo_body_button" type="button" value="{% trans 'popup_seo_body' %}"/><input id="seo_meta_button" type="button" value="{% trans 'popup_seo_meta' %}"/><input id="links_button" type="button" value="{% trans 'popup_links' %}"/>
		    </div>
		</div>
		
		<div>
				<br></br>
				<code id ="code_{{player_id}}" >		
					<div  id="player_code">
						<br><div align="center">
							<input type="radio" name="player_code_type" value="div" checked onClick="div_event()" > {% trans 'Use the div integration mode' %}</input><br>
							<input type="radio" name="player_code_type" value="iframe" onClick="iframe_event()">  {% trans 'Use the iframe integration mode' %}</input><br>
						</div></br>
						<textarea id="player_id_code" readonly="readonly" class="ldt_player_code">{{ embed_rendered.player }}</textarea>
					</div>
					<div id="seo_body_code"><textarea id="seo_body_id_code" readonly="readonly" class="ldt_player_code" >{{ embed_rendered.seo_body }}</textarea></div>
					<div id="seo_meta_code"><textarea id="seo_meta_id_code" readonly="readonly" class="ldt_player_code">{{ embed_rendered.seo_meta }}</textarea></div>		
				</code>
				<br>
				<div id="links_code" class="ldt_player_code">{% include "ldt/ldt_utils/partial/embed_links.html" %}</div>
				</br>
		</div>
			
		<a href="{{json_url}}?escape=true&mimetype=text/plain" class="ldt_json_link" >{% trans 'clik here to see the project content' %}</a>		
{% analytics %}		
	</body>
</html>

