{% extends "ldt/ldt_utils/workspace_base.html" %}
{% load i18n %}
{% 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>
		{{ 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 class="ldt_player" id="wrapper_{{player_id}}" style="display:none">
		</div>
		<br>
		<div id="button_row">
		    <div id="display_select">
		    	<input type="button" value="{% trans 'popup_player'%}" class="code_button" id="player_button"/><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="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">Modes predefinis</span>
					</a><br>
						<div id="iframe_premode">
							<input type="radio" id="mode_1" name="embed_mode" value="mode1" checked onClick="mode1()" > mode 1.1 </input><br>
							<input type="radio" id="mode_2" name="embed_mode" value="mode2" onClick="mode2()">  mode 2.1 </input><br>
							<input type="radio" id="mode_3" name="embed_mode" value="mode3" onClick="mode3()">  mode 3.1 </input><br>
							<br>
						</div>
						<div id="div_premode">
							<input type="radio" id="mode_1" name="embed_mode" value="mode1" checked onClick="mode1()" > mode 1 </input><br>
							<input type="radio" id="mode_2" name="embed_mode" value="mode2" onClick="mode2()">  mode 2 </input><br>
							<input type="radio" id="mode_3" name="embed_mode" value="mode3" onClick="mode3()">  mode 3 </input><br>
							<br>						
						</div>
					<a id="displayEmbedOptions" class="OptionsEmbedDisplay">
						<span id= "optionsExpArrow" class="expArrow"></span>
						<span id= "optionsCollArrow" class="collArrow"></span>
						<span class="title">Personnaliser votre 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()" > Create Annotation </input><br>
							</div>
							<input type="checkbox" id="segments_checkbox" value="segments" onClick="put_new_code()" > Segments </input><br>
							<input type="checkbox" id="annotations_list_checkbox" value="annotationslist" onClick="put_new_code()"> Annotationslist </input><br>
							<input type="checkbox" id="slideshare_checkbox" value="slideshare" onClick="put_new_code()"> Slideshare </input><br>
							<input type="checkbox" id="social_checkbox" value="social" onClick="put_new_code(); display_social();"> Social </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()"> Partager par email </input><br>
							</div>
							<input type="checkbox" id="annotation_checkbox" value="annotation" onClick="put_new_code()"> Annotation </input><br>
							<input type="checkbox" id="tweet_checkbox" value="tweet" onClick="put_new_code()"> Tweet </input><br>
							<input type="checkbox" id="sparkline_checkbox" value="sparkline" onClick="put_new_code(); display_sparkline();"> Sparkline </input><br>
									<a id="displaySparklineOptions" class="AdvancedOptionsDisplay" style="margin:22px;">
										<span class="title">Personnaliser les couleurs de la courbe</span>
									</a>
								<div id="sparkline_options">
									<div id="color_line_options" style="text-indent:25px;">
										<span class="title">Couleur de la courbe : </span>
										<input type="button" class="color_block blue_grey" title="Blue-Grey" data-hex="7492b4" onClick='set_line_color("7462b4")'></input>
										<input type="button" class="color_block orange" title="Orange" data-hex="ff9933" onClick='set_line_color("ff9933")'></input>
										<input type="button" class="color_block dark_lime" title="Dark-lime" data-hex="a1d600" onClick='set_line_color("a1d600")'></input>
										<input type="button" class="color_block fuschia" title="Fushia" data-hex="ff0179" onClick='set_line_color("ff0179")'></input>
										<input type="button" class="color_block black" title="Black" data-hex="050505" onClick='set_line_color("050505")'></input>
										<input id="sparkline_line_color" class="color_text" type="text" maxlength="7"></input>
									</div>
	
									<div id="fill_color_options" style="text-indent:25px;">
											<span class="title">Couleur sous la courbe : </span>
											<input type="button" class="color_block light_grey" title="Light-Grey" data-hex="aeaeb8" onClick='set_fill_color("aeaeb8")'></input>
											<input type="button" class="color_block brown_orange" title="Brown_orange" data-hex="ebc8a3" onClick='set_fill_color("ebc8a3")'></input>
											<input type="button" class="color_block pastel_green" title="Pastel_green" data-hex="daf4af" onClick='set_fill_color("daf4af")'></input>
											<input type="button" class="color_block pastel_fushia" title="Pastel_fushia" data-hex="da7ba7" onClick='set_fill_color("da7ba7")'></input>
											<input type="button" class="color_block white" title="White" data-hex="ffffff" onClick='set_fill_color("ffffff")'></input>
											<input id="sparkline_fill_color" class="color_text" type="text" maxlength="7"></input>
									</div>
								</div>
							<div>
							<input type="checkbox" id="tagcloud_checkbox" value="tagcloud" onClick="put_new_code()"> Tagcloud </input><br>
							</div>
							<div id='polemic_bloc'>
								<input type="checkbox" id="polemic_checkbox" value="polemic" onClick="put_new_code(); display_polemic();"> Polemic </input><br>
								<a id="displayPolemicOptions" class="AdvancedOptionsDisplay" style="margin:22px;">
									<span class="title">Personnaliser les couleurs des tweets</span>
								</a>
								<div id="polemic_options">
									<div id="color_default_options" style="text-indent:25px;">
										<span class="title">Couleur par default : </span>
										<input type="button" class="color_block grey" title="Grey" data-hex="585858" onClick='set_default_color("585858")'></input>
										<input type="button" class="color_block orange" title="Orange" data-hex="ff9933" onClick='set_default_color("ff9933")'></input>
										<input type="button" class="color_block lime" title="Lime" data-hex="c9ff23" onClick='set_default_color("c9ff23")'></input>
										<input type="button" class="color_block fuschia" title="Fuschia" data-hex="ff0179" onClick='set_default_color("ff0179")'></input>
										<input type="button" class="color_block white" title="White" data-hex="ffffff" onClick='set_default_color("ffffff")'></input>
										<input id="polemic_default_color" class="color_text" type="text" maxlength="7"></input>
									</div>
									<div id="color_found_options" style="text-indent:25px;">
										<span class="title">Couleur des tweets trouves : </span>
										<input type="button" class="color_block purple" title="Purple" data-hex="fc00ff" onClick='set_found_color("fc00ff")'></input>
										<input type="button" class="color_block orange" title="Orange" data-hex="ff9933" onClick='set_found_color("ff9933")'></input>
										<input type="button" class="color_block lime" title="Lime" data-hex="c9ff23" onClick='set_found_color("c9ff23")'></input>
										<input type="button" class="color_block fuschia" title="Fuschia" data-hex="ff0179" onClick='set_found_color("ff0179")'></input>
										<input type="button" class="color_block white" title="White" data-hex="ffffff" onClick='set_found_color("ffffff")'></input>
										<input id="polemic_found_color" class="color_text" type="text" maxlength="7"></input>
									</div>
								</div>
							
						</div>
				</div>
				<textarea id="player_id_code" readonly="readonly" class="ldt_player_code"></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>
	{% endblock %}
			
	{% analytics %}