{% extends "ldt/ldt_utils/workspace_base.html" %}
{% load i18n %}
{% load front_tags %}
{% load analytics %}
	{% block js_import %}
		{{ block.super }}
		<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" src="{{LDT_MEDIA_PREFIX}}js/embed_popup.js"></script>
		<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jscolor/jscolor.js"></script>
		{{ content_form.media.js }}
	{% endblock %}
		
	{% block js_declaration %}
		<script type="text/javascript">
			var $j = jQuery.noConflict();
			var iframe_url='{{iframe_url}}';
			var external_url='{{external_url}}';
        	var polemic='{{polemic}}';
        	var show_mic_record='{{show_mic_record}}';
        	var annotations_list='{{annotations_list}}';
        	var player_id='{{player_id}}';
        	var translate_show="{% trans 'Show Player' %}";
        	var translate_hide="{% trans 'Hide Player' %}";
        	var WEB_URL='{{WEB_URL}}';
        	var LDT_MEDIA_PREFIX='{{LDT_MEDIA_PREFIX}}';
        	var LANGUAGE_CODE='{{LANGUAGE_CODE}}';
        	var json_url='{{json_url}}';
        	var player_id='{{player_id}}';
        	var segment_api='{% url segment_api_empty resource_name="segments" api_name="1.0" %}';
        	var creator_name='{{request.user.username}}';
        	$j(document).ready(function(){
        		init_events();
        	});
        	
		</script>
	{% endblock %}
	{% block css_import %}
		{{ block.super }}
		{{ content_form.media.css }}
		<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/style.css" />
		<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"/>
		
	{% endblock %}
		

	{% block content %}
		<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>
		<br>
		<div id="button_row">
		    <div id="display_select">
		    	<input id="player_button" type="button" class="code_button" value="{% trans 'popup_player'%}"/>
		    	<input id="seo_body_button" type="button" class="code_button" value="{% trans 'popup_seo_body' %}"/>
		    	<input id="seo_meta_button" type="button" class="code_button" value="{% trans 'popup_seo_meta' %}"/>
		    	<input id="links_button" type="button" class="code_button" value="{% trans 'popup_links' %}"/>
		    </div>
		</div>
		
		
		<div style="float: left;">
			<div id="links_code" class="ldt_player_code">{% include "ldt/ldt_utils/partial/embed_links.html" %}</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>
			
			<div  id="player_code">
				<div class="configuration">
					<br><div id="embed_options"><br> {% trans 'Integration mode' %} 
							<input type="radio" id="type_embed_div" name="player_code_type" value="div" checked onClick="div_event()" > {% trans 'div' %} </input>
							<input type="radio" id="type_embed_iframe" name="player_code_type" value="iframe" onClick="iframe_event()">  {% trans 'iframe' %} </input><br>
						</div>	
						<div id="player_size">
							{% trans 'Player Size : ' %}
							<input type="text" class="number_area" id="player_width" onchange="put_new_code();"></input> x 
							<input type="text" class="number_area" id="player_height" onchange="put_new_code();"></input>
						</div>
						<a id="displayPreMode" class="OptionsEmbedDisplay">
							<span id= "preModeExpArrow" class="expArrow"></span>
							<span id= "preModeCollArrow" class="collArrow"></span>
							<span class="title">{% trans 'Preset Modes' %}</span>
						</a><br>
							<div id="iframe_div_premode" class="embedPersonnalisation">
								<input type="radio" id="mode_1" name="embed_mode" value="mode1" checked onClick="mode1()" > {% trans 'Basic configuration' %} </input><br>
								<input type="radio" id="mode_2" name="embed_mode" value="mode2" onClick="mode2()">  {% trans 'Polemic configuration' %} </input><br>
								<input type="radio" id="mode_3" name="embed_mode" value="mode3" onClick="mode3()">  {% trans 'Polemic configuration with tagcloud, annotationsList and Social widgets' %} </input><br>
								<br>
							</div>
	
						<a id="displayEmbedOptions" class="OptionsEmbedDisplay">
							<span id= "optionsExpArrow" class="expArrow"></span>
							<span id= "optionsCollArrow" class="collArrow"></span>
							<span class="title">{% trans 'Create your own configuration' %}</span>
						</a><br>
							<div id="embed_personnalisation" class="embedPersonnalisation">
								<div id="createannotation_block">
									<input type="checkbox" id="createannotation_checkbox" value="createannotation" onClick="put_new_code(); display_createannotation();" > 
										<span class="infostooltip title" data-title="createAnnotation" data-desc="{% trans 'Displays a form to create a new annotation' %}">CreateAnnotation</span>
									</input><br>
									<div id="createannotation_options" class="embedPersonnalisationSecondLevel">
										<input type="checkbox" id="show_mic_record_checkbox" value="{% trans 'audio annotation' %}" onClick="put_new_code()" > 
											<span class="infostooltip title" data-title="{% trans 'Audio annotation' %}" data-desc="{% trans 'Allows the user to record an annotation' %}">{% trans 'Audio annotation' %}</span>	
										 </input><br>
										 <input type="radio" name="annotation_tag" id="default_tags" checked onClick="put_new_code();">{% trans 'Use most used tags  ' %}</input>
										 <input type="radio" name="annotation_tag" id="set_tags">
										 	<span class="infostooltip title" data-title="{%trans 'Set your own tags : ' %}" data-desc="{% trans 'Write your tags separeted by a comma' %}">{%trans 'Set your own tags : ' %}</span>
										 	<input type="text" id="tag_list" class="tags_area" onChange="put_new_code()"></input>
										 </input>
									</div>
								</div>
								<input type="checkbox" id="segments_checkbox" value="segments" onClick="put_new_code()" >
									<span class="infostooltip title" data-title="Segments" data-desc="{% trans 'Displays segments of a media as rectangles on an horizontal line' %}">Segments</span>	
								</input><br>
								<input type="checkbox" id="annotations_list_checkbox" value="annotationslist" onClick="put_new_code()">
									<span class="infostooltip title" data-title="Annotationlist" data-desc="{% trans 'Show a list of annotations' %}">AnnotationsList</span>	
								</input><br>
								<div id='polemic_bloc'>
									<input type="checkbox" id="polemic_checkbox" value="polemic" onClick="put_new_code(); display_polemic();"> 
										<span class="infostooltip title" data-title="Polemic" data-desc="{% trans 'Shows the polemical timeline, i.e. tweets colored according to the polemical syntax' %}">Polemic</span>
									</input><br>
										<div id="polemic_options" class="embedPersonnalisationSecondLevel">
											<div id="displayPolemicOptions">{% trans 'Display in the polemic timeline : ' %}
												<input type="radio" id="tweet_polemic" name="polemic_annotation_type" checked onClick="put_new_code()">{% trans 'only tweets' %} </input>
												<input type="radio" id="all_polemic" name="polemic_annotation_type" onClick="put_new_code()">{% trans 'all annotations' %} </input><br>
												<a id="displayPolemicColorOptions" class="AdvancedOptionsDisplay">
													<span class="title">{% trans "Personalize tweet's color" %}</span>
												</a>
											</div>
											<div id="polemic_color_options" class="embedPersonnalisation">
												<div id="color_default_options">
													<span class="title">{% trans "Default color" %} </span>
													<input id="polemic_default_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="8"></input>
												</div>
												<div id="polemics_colors">
													<span class="title">{% trans "Polemic's color : ++ : " %} </span>
													<input id="polemic_ok_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="8"></input>
													<span class="title">	-- :	</span>
													<input id="polemic_ko_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="8"></input>
													<span class="title">	== :	</span>
													<input id="polemic_ref_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="8"></input>
													<span class="title">	? :	</span>
													<input id="polemic_q_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="8"></input>
												</div>
												<div id="color_found_options">
													<span class="title">{% trans "Found color" %}</span>
													<input id="polemic_found_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="8"></input>
												</div>
											</div>
										</div>
								</div>
								<div>
									<input type="checkbox" id="sparkline_checkbox" value="sparkline" onClick="put_new_code(); display_sparkline();">
										<span class="infostooltip title" data-title="Sparkline" data-desc="{% trans 'Displays a curve showing the volume of tweets across time' %}">Sparkline</span>
									</input><br>
									<div id="sparkline_options" class="embedPersonnalisationSecondLevel">
										<a id="displaySparklineOptions" class="AdvancedOptionsDisplay">
											<span class="title">{% trans "personalize sparkline's color" %}</span>
										</a>
										<div id="sparkline_color_options" class="embedPersonnalisation">
											<div id="color_line_options">
												<span class="title">{% trans 'line color' %} </span>
												<input id="sparkline_line_color" class="codeColor_text color {hash:true,caps:false}" onchange='put_new_code();' type="text" maxlength="7"></input>
											</div>
			
											<div id="fill_color_options">
													<span class="title">{% trans 'fill color' %} </span>
													<input id="sparkline_fill_color" class="codeColor_text color {hash:true,caps:false}" onchange='put_new_code();' type="text"  maxlength="7"></input>
											</div>
										</div>
									</div>
								</div>
								<input type="checkbox" id="slideshare_checkbox" value="slideshare" onClick="put_new_code()">
									<span class="infostooltip title" data-title="Slideshare" data-desc="{% trans 'Displays a div in order to watch the slides displayed in the media' %}">Slideshare</span>
								</input><br>
								<div>
								<input type="checkbox" id="social_checkbox" value="social" onClick="put_new_code(); display_social();"> 
									<span class="infostooltip title" data-title="Social" data-desc="{% trans ' Adds buttons to share an URL on social networks' %}">Social</span>
								</input><br>
								<div id="social_options" class="embedPersonnalisation">
									 <input type="checkbox" id="show_url_checkbox" value="show_url" checked onClick="put_new_code()"> Url </input>
									 <input type="checkbox" id="show_twitter_checkbox" value="show_twitter" checked onClick="put_new_code()"> Twitter </input>
									 <input type="checkbox" id="show_fb_checkbox" value="show_fb" checked onClick="put_new_code()"> Facebook </input>
									 <input type="checkbox" id="show_gplus_checkbox" value="show_gplus" checked onClick="put_new_code()"> Google Plus </input>
									 <input type="checkbox" id="show_mail_checkbox" value="show_mail" checked onClick="put_new_code()"> {% trans 'share with email' %} </input><br>
								</div>
								</div>
								<input type="checkbox" id="annotation_checkbox" value="annotation" onClick="put_new_code()">
									<span class="infostooltip title" data-title="Annotation" data-desc="{% trans ' Displays information relative to a single segment/annotation while it is being played' %}">Annotation</span>
								</input><br>
								<input type="checkbox" id="tweet_checkbox" value="tweet" onClick="put_new_code()">
									<span class="infostooltip title" data-title="Tweet" data-desc="{% trans 'Show the contents on a tweet when clicked (in Polemic Widget)' %}">Tweet</span>
								</input><br>
								<input type="checkbox" id="tagcloud_checkbox" value="tagcloud" onClick="put_new_code()">
										<span class="infostooltip title" data-title="Tagcloud" data-desc="{% trans 'Shows a tag cloud' %}">Tagcloud</span>
								</input><br>
							</div>
					<textarea id="player_id_code" readonly="readonly" class="ldt_player_code" onClick="select_code();"></textarea>
				</div>
				
		</div>
		 <a id="displayPlayer" href="javascript:toggle();">{% trans 'Show Player' %}</a>
        <div id="player_div" style="display:none">
	  		<button type="button" class="refresh_button" id="refresh_player_button" title="Rafraichir le player" >
			<img src="{{LDT_MEDIA_PREFIX}}img/arrow_refresh.png" id="refresh_player" ></img>
			</button>
			<div class="ldt_player" id="wrapper_{{player_id}}"></div>
		</div>
	{% endblock %}
			
	{% analytics %}