{% extends "ldt/ldt_raw_base.html" %}

{% load i18n %} {# form of creation of content #}
{% load adminmedia %}

{% block js_import %}
	{{ block.super }}
    <script type="text/javascript" src="{{MEDIA_URL}}admin/js/core.js" ></script>
    <script type="text/javascript" src="{% url jsi18n %}" ></script>
    <script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.nyroModal.min.js"></script>    
    <script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.textchange.min.js"></script>    
	{{ content_form.media.js }}
{% endblock %}

{% block css_import %}
	{{ block.super }}
	{{ content_form.media.css }}
	<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/ldt.css" />
	<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/ldtform.css" />
{% endblock %}


{% block js_declaration %}
	<script type="text/javascript">
	window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
	$(document).ready(function() {
		$("#close_button").click(function (e) {
			e.preventDefault();
			parent.$.nmTop().close();
		});
		$("#submit_button_write").click(function(e) {
			$(".submitcontent-loader-content").show();
		});
		$(".media_fields").hide();
		$("#media_field_"+$("#id_content-media_input_type").val()).show();
		$("#id_content-media_input_type").change(function(e) {
			$(".media_fields").hide();
			$("#media_field_"+$(e.target).val()).show();
		});
        // The textinput's id for external url is id_media-src
        $('#id_media-src').bind('textchange', function(e) { testUrlValue(e); });
	});
    function testUrlValue(e){
        // First, we remove the current thumbnail if there is one.
        if($('#media_field_create').children().size()>2){
            $('#external_thumbnail').remove();
            $('#media_fields_div').height(50);
        }
        // If the pasted text is a youtube url, we get the default thumbnail of the video and display it.
        url = $('#id_media-src').val();
        if(url.match("youtube") && url.match("[\\?&]v=([^&#]*)")){
            results = url.match("[\\?&]v=([^&#]*)");
            vid = ( results === null ) ? url : results[1].substring(0,11);
            if(vid.length===11){
                //$('#id_content-description').val($('#media_field_create') + '<img src="http://img.youtube.com/vi/'+vid+'/default.jpg" alt="Youtube Thumbnail"/>');
                $('#media_field_create').append('<img id="external_thumbnail" src="http://img.youtube.com/vi/'+vid+'/default.jpg" alt="Youtube Thumbnail"/>');
                $('#media_fields_div').height(150);
            }
        }
    }
	
	
    </script>
{% endblock %}

{% block body %}
	{% if content_form.errors %}
	<div id="content-form-error">
		<p>{% trans "The operation could not be performed because one or more error(s) occurred.<br />Please resubmit the content form after making the following changes:" %}</p>
		<ul>
		{% for field in content_form %}
		{% if field.errors%}<li>{{field.name}} : {{ field.errors|striptags }}</li>{% endif %}
		{% endfor %}
		</ul>
	</div>
	{% endif %}

	{% if media_form.errors %}
	<div id="media-form-error">
		<p>{% trans "The operation could not be performed because one or more error(s) occurred.<br />Please resubmit the media form after making the following changes:" %}</p>
		<ul>
		{% for field in media_form %}
		{% if field.errors%}<li>{{field.name}} : {{ field.errors|striptags }}</li>{% endif %}
		{% endfor %}
		</ul>
	</div>
	{% endif %}

	<div id="add_content" class="span-18 last">
	<div class="projectscontentstitle">{% trans "Create content" %}</div>
	<form action="{{create_content_action}}" method="POST" enctype="multipart/form-data" >
	<div id="contentformhidden">
		{% csrf_token %}
		<input type="hidden" name="form_status" value="{{form_status}}" id="content_form_status" />
		{% for hidden in form.hidden_fields %}
	    	{{ hidden }}
	    {% endfor %}
	    {{content_form.iri_id}}
    </div>
    <div id="contentformfields" class="span-18 last">
	<div id="contentleft" class="span-9">
		<div>{{ content_form.src.errors }}{{ content_form.src.label_tag }}{{content_form.src}}</div>
		<div>{{ content_form.videopath.errors }}{{ content_form.videopath.label_tag }}{{content_form.videopath}}</div>
		<div>{{ content_form.title.errors }}{{ content_form.title.label_tag }}{{content_form.title}}</div>
		<div>{{ content_form.description.errors }}{{ content_form.description.label_tag }}{{content_form.description}}</div>
		<div>{{ media_form.external_id.errors }}{{ media_form.external_id.label_tag }}{{media_form.external_id}}</div>
		<div>{{ media_form.external_publication_url.errors }}{{ media_form.external_publication_url.label_tag }}{{media_form.external_publication_url}}</div>
	</div>
	<div id="contentright" class="span-9 last" >
		<div>{{ content_form.external_id.errors }}{{ content_form.external_id.label_tag }}{{content_form.external_id}}</div>
		<div>{{ content_form.duration.errors }}{{ content_form.duration.label_tag }}{{content_form.duration}}</div>
		<div>{{ content_form.content_creation_date.errors }}{{ content_form.content_creation_date.label_tag }}{{content_form.content_creation_date}}</div>
		<div>{{ content_form.tags.errors }}{{ content_form.tags.label_tag }}{{content_form.tags}}</div>
		<div>{{ content_form.media_input_type.errors }}{{ content_form.media_input_type.label_tag }}{{content_form.media_input_type}}</div>
		<div id="media_fields_div">
			<div id="media_field_link" class="media_fields">{{ content_form.media_obj.errors }}{{ content_form.media_obj.label_tag }}{{content_form.media_obj}}</div>
			<div id="media_field_upload" class="media_fields">{{ media_form.media_file.errors }}{{ media_form.media_file.label_tag }}{{media_form.media_file}}</div>
			<div id="media_field_url" class="media_fields">{{ media_form.external_src_url.errors }}{{ media_form.external_src_url.label_tag }}{{ media_form.external_src_url }}</div>
			<div id="media_field_create" class="media_fields">{{ media_form.src.errors }}{{ media_form.src.label_tag }}{{ media_form.src }}</div>
		</div>
		
	</div>
	</div>
	<div id="submitcontent" class="span-18 last">
		<div id="submitcontent-loader" class="span-10">
			<div id="submitcontent-loader-img" class="submitcontent-loader-content span-10 last"><img alt="loader" src="{{LDT_MEDIA_PREFIX}}img/ajax-loader-220x19.gif"/></div>
			<div id="submitcontent-loader-msg" class="submitcontent-loader-content span-10 last">{% trans "media file is being processed please wait." %}</div>
			<span>&nbsp;</span>
		</div>
		<div id="submitcontent-buttons" class="span-8 last">
			<button id="close_button"  value="close">{% trans 'close_cancel' %}</button>
			{% if iri_id %}<button type="submit" value="prepare_delete" name="submit_button">{% trans "delete" %}</button>{% endif %}
			<button type="submit" value="write" name="submit_button" id="submit_button_write">{% trans "write" %}</button>
		</div>
	</div> 
	</form>
	</div>
{% endblock %}
