{% load i18n sanitize chimere_tags %}
<a href='#' class='close_img'>{% trans "Close"%}</a>
<h4>{{ marker.name }}</h4>
<div id='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%}
    {% for item in marker.multimedia_items %}
        {% multimedia_render item %}
    {%endfor%}
    </div>
    {%endif%}
    <div>
        {% if dated %}
        <p id='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 %}
        <div id='description_long_{{marker.pk}}' class='description'>{{ marker.description|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}</div>
        {% endif %}
        {% for property in marker.getProperties %}{% if property.value %}
        <div class='properties' id='{{property.propertymodel.getAttrName}}'><strong>{{property.propertymodel.name}}</strong> : {% if 'http://' in property.value or 'https://' in property.value %}<a href='{{ property.value|sanitize:""}}'>{%endif%}{{ property.value|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4 table td tr th"|safe}}{% if 'http://' in property.value or 'https://' in property.value %}</a>{%endif%}</div>
        {%endif%}{% endfor %}
    </div>
</div>
<div id='detail_footer'>
    <div id='detail-action-bar'>
        {%if routing_enabled%}<a class='detail_from' href='#'>{% trans "From" context "routing" %}</a>
        | <a class='detail_to' href='#'>{% trans "To" context "routing" %}</a>
        | {% endif %}<a class='detail_zoomin' href='#'>{% trans "Zoom in" %}</a>
        | <a class='detail_zoomout' href='#'>{% trans "Zoom out" %}</a>
    </div>
    <ul class='share'>
        <li><a href="{{modif_by_email}}">{% trans "Propose a modification" %}</a></li>
        <li class='sep'>&ndash;</li>
    </ul>
    {% share_bar marker.name %}
    {% comment %}
    <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 a modification" %}
    </a>
    {% endcomment %}
</div>
<script language='javascript' type='text/javascript'>
<!--
$('html').addClass('js-on');
$(function(){
    $("#gallery-{{marker.pk}}").dialog({title:"{{marker.name}}", autoOpen: false,
                           height: "auto", width: "auto", dialogClass:'no-titlebar'});
    $('div.media-player').jmeEmbedControls();
    $('.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()
            ;});
        }
    });
    $('.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-{{marker.pk}}").bind( "dialogopen", function(event, ui) {
    $("#gallery-{{marker.pk}}").dialog("option", "height", 'auto');
    $("#gallery-{{marker.pk}}").dialog("option", "width", 'auto');
    $("#gallery-{{marker.pk}}").dialog("option", "position", ['center', 'center']);
});
$("#gallery-{{marker.pk}}").bind( "dialogclose", function(event, ui) {
    //pause all medias
    $('video').each(function(index){$(this).pause()});
    $('audio').each(function(index){$(this).pause()});
});
$('#show_gallery_link').click(function(){
    $("#gallery-{{marker.pk}}").dialog('open');
    return false;
});
// -->
</script>