{% 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_width='{{player_width}}';
        	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>
        <a id="displayPlayer" href="javascript:toggle();">{% trans 'Show Player' %}</a>
        <div id="player_div" style="display:none">
	  		<button type="button" id="refresh_player_button" title="Rafraichir le player" >
			<img src="{{LDT_MEDIA_PREFIX}}img/refresh_button.jpg" id="refresh_player" ></img>
			</button>
			<div class="ldt_player" id="wrapper_{{player_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>	
					<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">
							<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 slideshare and tagcloud' %} </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" style="text-indent:25px;">
									<input type="checkbox" id="show_mic_record_checkbox" value="show_mic_record" onClick="put_new_code()" > 
										<span class="infostooltip title" data-title="Show_Mic_Record" data-desc="{% trans 'allows the user to record an annotation' %}">Show Mic Record</span>	
									 </input><br>
								</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>
								<a id="displayPolemicOptions" class="AdvancedOptionsDisplay" style="margin:22px;">
									<span class="title">{% trans "personalize tweet's color" %}</span>
								</a>
								<div id="polemic_options">
									<div id="color_default_options" style="text-indent:25px;">
										<span class="title">{% trans "default color" %} </span>
										<input type="button" class="blockCo grey" title="Grey" onClick='set_default_color("585858")'></input>
										<input type="button" class="blockCo orange" title="Orange" onClick='set_default_color("ff9933")'></input>
										<input type="button" class="blockCo lime" title="Lime" onClick='set_default_color("c9ff23")'></input>
										<input type="button" class="blockCo fuschia" title="Fuschia" onClick='set_default_color("ff0179")'></input>
										<input type="button" class="blockCo white" title="White" onClick='set_default_color("ffffff")'></input>
										<input id="polemic_default_color" class="codeColor_text color {hash:true,caps:false}" onchange="put_new_code();" type="text" maxlength="7"></input>
									</div>
									<div id="color_found_options" style="text-indent:25px;">
										<span class="title">{% trans "found color" %}</span>
										<input type="button" class="blockCo purple" title="Purple" data-hex="fc00ff" onClick='set_found_color("fc00ff")'></input>
										<input type="button" class="blockCo orange" title="Orange" data-hex="ff9933" onClick='set_found_color("ff9933")'></input>
										<input type="button" class="blockCo lime" title="Lime" data-hex="c9ff23" onClick='set_found_color("c9ff23")'></input>
										<input type="button" class="blockCo fuschia" title="Fuschia" data-hex="ff0179" onClick='set_found_color("ff0179")'></input>
										<input type="button" class="blockCo white" title="White" data-hex="ffffff" onClick='set_found_color("ffffff")'></input>
										<input id="polemic_found_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="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>
									<a id="displaySparklineOptions" class="AdvancedOptionsDisplay" style="margin:22px;">
										<span class="title">{% trans "personalize sparkline's color" %}</span>
									</a>
								<div id="sparkline_options">
									<div id="color_line_options" style="text-indent:25px;">
										<span class="title">{% trans 'line color' %} </span>
										<input type="button" class="blockCo blue_grey" title="Blue-Grey" data-hex="7492b4" onClick='set_line_color("7462b4")'></input>
										<input type="button" class="blockCo orange" title="Orange" data-hex="ff9933" onClick='set_line_color("ff9933")'></input>
										<input type="button" class="blockCo dark_lime" title="Dark-lime" data-hex="a1d600" onClick='set_line_color("a1d600")'></input>
										<input type="button" class="blockCo fuschia" title="Fushia" data-hex="ff0179" onClick='set_line_color("ff0179")'></input>
										<input type="button" class="blockCo black" title="Black" data-hex="050505" onClick='set_line_color("050505")'></input>
										<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" style="text-indent:25px;">
											<span class="title">{% trans 'fill color' %} </span>
											<input type="button" class="blockCo light_grey" title="Light-Grey" data-hex="aeaeb8" onClick='set_fill_color("aeaeb8")'></input>
											<input type="button" class="blockCo brown_orange" title="Brown_orange" data-hex="ebc8a3" onClick='set_fill_color("ebc8a3")'></input>
											<input type="button" class="blockCo pastel_green" title="Pastel_green" data-hex="daf4af" onClick='set_fill_color("daf4af")'></input>
											<input type="button" class="blockCo pastel_fushia" title="Pastel_fushia" data-hex="da7ba7" onClick='set_fill_color("da7ba7")'></input>
											<input type="button" class="blockCo white" title="White" data-hex="ffffff" onClick='set_fill_color("ffffff")'></input>
											<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>
							<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" style="text-indent:25px;">
								 <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>
	{% endblock %}
			
	{% analytics %}