{% load i18n sanitize chimere_tags %}
<h2 class='ui-widget ui-state-default ui-corner-all ui-widget-header'>{{ marker.name }}</h2>
<div class='detail_content'>
    {% if marker.default_pictures or marker.default_pictures or marker.default_multimedia_items%}
    <div class='small-gallery'>
    {% for picture in marker.default_pictures %}
        {% multimedia_render picture %}
    {%endfor%}
    {% for multimedia_item in marker.default_multimedia_items %}
        {% multimedia_render multimedia_item %}
    {%endfor%}
    </div>
    {%endif%}
<div>
    {% if dated %}
    <p class='detail_start_date'><label>{% trans "Date:" %}</label> <span>{{marker.start_date|date:"D d M Y"}}
    {% if marker.end_date %} - {{marker.end_date|date:"D d M Y"}}</p>{% endif %}</span>
    {% endif %}
    {% if marker.description %}
    <p class='description'>{{ marker.description|sanitize:"p b i br hr strong em img:src:alt span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}</p>
    {% endif %}
    {% for property in marker.getProperties %}
    <p class='{{property.propertymodel.getNamedId}}'>{{ property.value|sanitize:"p b i br hr strong em img:src:alt span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}</p>
    {% endfor %}
    {% if marker.origin %}<p class='detail_source'><strong>{% trans "Source:" %}</strong> <span>{{marker.origin}}</span></p>{% endif %}
    {% if marker.license %}<p class='detail_license'><strong>{% trans "License:" %}</strong> <span>{{marker.license}}</span></p>{% endif %}
    {% if marker.multimedia_items %}<p class='detail_multimedia'>
    <a href='#' class='show_gallery_link'>{% trans "Show multimedia gallery" %}</a>
    </p>{% endif %}
    </div>
    <p class='detail_amendment'><a href='{% if marker.route %}{% url chimere:editroute-item area_name_slash|default_if_none:"" marker.route.pk "" %}{%else%}{% url chimere:edit-item area_name_slash|default_if_none:"" marker.pk "" %}{%endif%}'>
        {% trans "Submit an amendment" %}
    </a>
    {% if moderator_emails %}
    <a href="mailto:?from={{moderator_emails}}&subject={% trans "Propose amendment" %}&body={% trans "I would like to propose an amendment for this item:"%} {{share_url}}">
        {% trans "Propose amendment" %}
    </a>{%endif%}</p>
    {% if share_networks %}
    <p class='detail_share'>
    {% if simple %}{% trans "Share on"%}{% for share_network in share_networks %}
    <a href='{{share_network.1}}'>{{share_network.0}}</a>
    {% endfor %}{%else%}
    <ul class='share'>
        <li>{% trans "Share"%}</li>{% for share_network in share_networks %}
        <li><a href='{{share_network.1}}'><img src="{{share_network.2}}" alt="{{share_network.0}}"/></a></li>
    {% endfor %}</ul>{% endif %}
    </p>
{% endif %}
</div>
{% if marker.multimedia_items %}
<div id='gallery-{{time_now}}' class='gallery'>
    <div class='tabs'>
        <ul>{% for item in marker.multimedia_items %}
            <li><a href="#tab-{{time_now}}-{{ forloop.counter }}">{{ item.name }}</a></li>{% endfor %}
        </ul>
        {% for multimedia_item in marker.multimedia_items %}
        <div id="tab-{{time_now}}-{{ forloop.counter }}" class='{% ifequal multimedia_item.multimedia_type.media_type 'V' %}video{% else %}other{% endifequal %}'>
            {% multimedia_render multimedia_item %}
        </div>{% endfor %}
    </div>
</div>
{% endif %}
<script language='javascript' type='text/javascript'>
$('html').addClass('js-on');
$(document).ready(function(){
    $("#gallery-{{time_now}}").dialog({title:"{{marker.name}}", autoOpen: false,
                           height: "auto", width: "auto",
        open: function(event,ui) {
            $('.tabs').tabs({
                select: function(event, ui) {
                    //pause all medias
                    $('video').each(function(index){$(this).pause()});
                    $('audio').each(function(index){$(this).pause()});
                    //start current tabvideo
                    $('ui.panel video').each(function(index){
                        //prevents a Flash-Bug in IE with newest Flash-Player
                        $(this).reinitMedia({queue: true})
                        .play()
                    ;});
                    $('ui.panel audio').each(function(index){
                        //prevents a Flash-Bug in IE with newest Flash-Player
                        $(this).reinitMedia({queue: true})
                        .play()
                    ;});
                }
            });
            $('div.media-player').jmeEmbedControls();
            $('.video div.media-player').bind('useractive', function(){
                $('div.media-controls', this).stop().animate({opacity: 1});
            }).bind('userinactive', function(){
                $('div.media-controls', this).stop().animate({opacity: 0});
            });
            $("#gallery-{{time_now}}").dialog("option", "height", 'auto');
            $("#gallery-{{time_now}}").dialog("option", "width", 'auto');
            $("#gallery-{{time_now}}").dialog("option", "position",
                                               ['center', 'center']);
        },
        close: function(event, ui){
            //pause all medias
            $('video').each(function(index){$(this).pause()});
            $('audio').each(function(index){$(this).pause()});
            $('.tabs').tabs('destroy');

        }
    });
    $('div.media-player').jmeEmbedControls();
    $('.show_gallery_link').click(function(){
        $("#gallery-{{time_now}}").dialog('open');
        return false;
    });
    $("a[rel^='prettyPhoto']").prettyPhoto({
        show_title: false,
        social_tools: ''
    });
});
</script>
