{% extends "telemeta/base.html" %}
{% load telemeta_tags %}
{% load i18n %}

{% block head_title %}{% trans "Item" %} : {% if item.title %}{{ item.title }}{% else %}{{ item.public_id}}{% endif %} - {{ block.super }}{% endblock %}

{% block stylesheets %}
{{ block.super }}
      <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}timeside/skins/lab/style.css" />
      <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/player.css" />
{% endblock %}

{% block extra_javascript %}

{% if item %}

<script src="{{ STATIC_URL }}telemeta/js/popupdiv.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}telemeta/js/playlist.js" type="text/javascript"></script>

{% if item.file or item.url %}
 {% if access == 'full' or perms.telemeta.can_play_all_items %}
    <script src="{{ STATIC_URL }}SoundManager2/script/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}timeside/js/timeside.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}telemeta/js/playerLoader.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}telemeta/js/divmarker.js" type="text/javascript"></script>
 {% endif %}
{% endif %}

<script type="text/javascript">
    {% if item.file or item.url %}
     {% if access == 'full' or perms.telemeta.can_play_all_items %}
        //initializing soundManager default properties
        soundManager.flashVersion = 9;
        soundManager.url = "{{ STATIC_URL }}timeside/swf/";
        soundManager.debugMode = false;
        soundManager.allowPolling = true;
        soundManager.useHTML5Audio = false;
        soundManager.preferFlash = false;

        //initializing the visualizers to be passed to the player
        {% block graphers %}
        var visualizers = {};
        {% for v in visualizers %}
            visualizers["{{v.name}}"] = "{% url 'telemeta-item-visualize' item.public_id v.id 'WIDTH' 'HEIGHT' %}";
        {% endfor %}
        {% endblock graphers %}

        {% if user.is_superuser %}
             loadPlayer('{% url "telemeta-item-analyze-xml" item.public_id %}',
              "{% url "telemeta-item-export" item.public_id 'mp3' %}", undefined, '{{item.id}}', visualizers,
              CURRENT_USER_NAME,  //undefined if !user.is_authenticated
              true); //true because superuser
        {% else %}
           loadPlayer('{% url "telemeta-item-analyze-xml" item.public_id %}',
             "{% url "telemeta-item-export" item.public_id 'mp3' %}", undefined, '{{item.id}}', visualizers,
             CURRENT_USER_NAME,  //undefined if !user.is_authenticated
             false); //false because not superuser
        {% endif %}
     {% endif %}
    {% endif %}
    //playlists:
    {% if user.is_authenticated %}
        {% for playlist in playlists %}
            playlistUtils.addPlaylist('{{ playlist.playlist.title }}','{{playlist.playlist.public_id}}');
        {% endfor %}
            jQuery(window).ready(function(){
                var anchor = jQuery('#_add_to_playlist');
                if(anchor.length){
                    anchor.unbind('click').click(function(){
                        playlistUtils.showAddResourceToPlaylist(anchor,'item','{{item.id}}',gettrans('item added to the selected playlist'));
                        return false;
                    });
                }
            });
    {% endif %}
</script>

{% if "video" in mime_type %}
<script src="{{ STATIC_URL }}video.js/dist/video.min.js" ></script>
<link href="{{ STATIC_URL }}video.js/dist/video-js.min.css" rel="stylesheet">
{% endif %}

{% endif %}
{% endblock %}

{% if item %}

{% block title %}
<div class='row'>
    <div class="col-md-12">
     <img src="{{ STATIC_URL }}telemeta/images/item.png" alt="item" style="vertical-align:middle" /> Item : {{ item }}
    </div>
</div>
{% endblock %}

{% block title_buttons %}
<div>
    <a href="{% url "telemeta-item-detail" previous %}">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </button>
    </a>
    {% if user.is_authenticated and perms.telemeta.change_mediaitem %}
    <a href="{% url "telemeta-item-edit" item.public_id %}">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-pencil"></span> {% trans "Edit" %}
      </button>
    </a>
    <a href="{% url "telemeta-item-copy" item.public_id %}">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-new-window"></span> {% trans "Copy" %}
      </button>
    </a>
    {% endif %}
    {% if user.is_authenticated %}
    <a id="_add_to_playlist" href='#'>
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-pushpin"></span> {% trans "List" %}
      </button>
    </a>
    {% endif %}
    <a id="_share" href='#'>
      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#share">
        <span class="glyphicon glyphicon-share-alt"></span> {% trans "Share" %}
      </button>
    </a>
    <a href="{% url "telemeta-item-detail" next %}">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </button>
    </a>
</div>
{% endblock title_buttons %}

{% block content %}

{% if access == 'none' and not perms.telemeta.can_play_all_items %}

<div>
{% trans "This archive is not available online, please contact the CREM. Thank you."%}
</div>

{% else %}

<div class="{% if item.file %}{% if access == 'full' or perms.telemeta.can_play_all_items %}with-rightcol{% endif %}{% endif %}">

    {% if item.file or item.url %}

    {% block player %}

    {% if access == 'full' or perms.telemeta.can_play_all_items %}

    <div id="player_maximized" class="ts-skin-lab">
       <div id="player_header">
        <a href="#" class="toggle">Minimize</a>
        <a href="#" class="embed_player_frame">&lt;/&gt;</a>
       </div>
        <div class="wazing"></div>
    </div>
    <div id="rightcol" style="{% if LANGUAGE_BIDI %}float: left;{% else %}float: right;{% endif %}padding-bottom:0;">
        <div id="player_minimized" class="ts-skin-lab">
            <a href="#" class="toggle">Maximize</a>
            <a href="#" class="embed_player_frame">&lt;/&gt;</a>
            <div class="wazing"></div>
            <div id="player" class="ts-player">
            </div>
        </div>

    {% if "video" in mime_type %}
     {% include "telemeta/inc/mediaitem_video.html" %}
     <script>
     (function(){
         var v = document.getElementsByTagName('video')[0]
         var t = Timeside;
         v.addEventListener('timeupdate',function(event){
             t.player.setSoundPosition(v.currentTime);
             },false);
             })();
     </script>
    {% endif %}

        <!-- </div> -->
        <div id="tabs_container">
            <!-- this div will be hidden when everything is fully loaded-->
            <span id="loading_span" href="#"><img style="vertical-align:middle" alt="wait" src="{{ STATIC_URL }}telemeta/images/wait.gif" />&nbsp;
                <span id="loading_span_text">Loading...</span></span>
            <a id="tab_analysis" style="display:none" class ="tab" href="#">{% trans "File" %}</a><!--
             do not let space here as it appears in the document!!!!!
            --><a id="tab_markers" style="display:none" class="tab" href="#">{% trans "Markers" %}</a>
        </div>

        <div class="markers" id="markers_div_id"></div>

        <div class="analyzer" id="analyzer_div_id">
            <table width="100%">
                <tr class="analyzer-title">
                    <td>{% trans "Property" %}</td>
                    <td>{% trans "Value" %}</td>
                    <td>{% trans "Unit" %}</td>
                </tr>
            </table>
        </div>
        <!--</div>-->

        {% if audio_export_enabled or perms.telemeta.can_download_all_items or user.is_superuser %}
        <div class="exporter">
                {% for format in export_formats %}
                <a href="{% url "telemeta-item-export" item.public_id format.extension %}">
                    <img src="{{ STATIC_URL }}telemeta/images/{{ format.extension }}.png" style="vertical-align:middle" alt="{{ format.extension }}" /></a>
                {% endfor %}
        </div>
        {% endif %}

    </div>

    {% else %}

    <div id="rightcol" style="float: right;">
        <div id="no-sound-access">
            {% trans "You don't have access to the media of this item." %} {% trans "Please contact the administrators to get more rights." %} <a href="{% url "telemeta-flatpage" 'legal_notices' %}" target="_blank">{% trans "Click here" %}</a>
        </div>
    </div>

    {% endif %}

    {% endblock player %}

    {% endif %}

    {% block infos %}
    <div class="infos">
        {% block general_info %}
        <dl class="listing">
            {% dl_field item "title" placeholder %}
            {% dl_field item "alt_title" %}
            {% dl_field item "collector" placeholder %}
            <dt>{% field_label item "collection" %}</dt>
            <dd><a href="{% url "telemeta-collection-detail" item.collection.public_id %}">{{ item.collection.title }}</a></dd>
            <dt>{% trans "Recording date" %}</dt>
            <dd>{% if item.recorded_from_date %}{{ item.recorded_from_date }}{% endif %}{% if item.recorded_from_date and item.recorded_to_date%} - {% endif %}{% if item.recorded_to_date %}{{ item.recorded_to_date}}{% endif %}</dd>
            <dt>{% trans "Access type" %}</dt>
            <dd>{% trans item.public_access %}</dd>
        </dl>
        {% endblock general_info %}
    </div>
    <div class="extraInfos">
        {% block geoethnic_data %}
        <div>
            <h4><a href="#">{% trans "Geographic and cultural informations" %}</a></h4>
            <dl class="listing">
                <dt>{% trans "Location" %}</dt>
                <dd>{% if item.location %}{{ item.location.name }}{% endif %}</dd>
                {% dl_field item "location_comment" %}
                {% dl_field item "cultural_area" %}
                {% dl_field item "language" %}
                {% if item.language_iso %}
                <dt>{% trans "Language (ISO norm)" %}</dt>
                <dd>{{ item.language_iso.name|to_utf8 }}</dd>
                {% endif %}
                {% dl_field item "ethnic_group" placeholder %}
                <dt>{% trans "Ethnographic context" %}</dt>
                <dd>{{ item.context_comment|html_line_break|safe }}</dd>
                {% dl_field item "keywords" join with ", " %}
            </dl>
        </div>
        {% endblock geoethnic_data %}
    </div>

    <div class="extraInfos">
        {% block musical_data %}
        <div>
            <h4><a href="#">{% trans "Musical informations" %}</a></h4>
            <dl class="listing">
                {% if item.moda_execut %}
                {% dl_field item "moda_execut" %}
                {% endif %}
                {% dl_field item "vernacular_style" %}
                {% dl_field item "generic_style" %}
                {% dl_field item "author" %}
            </dl>
            {% if item.performances %}
            <div class="instruments">
                <table class="instruments">
                    <thead>
                        <tr>
                            <td>{% field_label "MediaItemPerformance" "instruments_num" %}</td>
                            <td>{% field_label "MediaItemPerformance" "instrument" %}</td>
                            <td>{% field_label "MediaItemPerformance" "alias" %}</td>
                            <td>{% field_label "MediaItemPerformance" "musicians" %}</td>
                        </tr>
                    </thead>
                    <tbody>
                        {% for performance in item.performances.all %}
                        <tr>
                            <td>{{ performance.instruments_num }}</td>
                            <td>{{ performance.instrument|default:"" }}</td>
                            <td>{{ performance.alias|default:"" }}</td>
                            <td>{{ performance.musicians }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </div>
        {% endblock musical_data %}
    </div>

    <div class="extraInfos">
        {% block archive_data %}
        <div>
            <h4><a href="#">{% trans "Archiving data" %}</a></h4>
            <dl class="listing">
                {% dl_field item "code" %}
                {% dl_field item "old_code" %}
                {% dl_field item "track" %}
                {% dl_field item "collector_selection" %}
                {% dl_field item "creator_reference" %}
                {% if item.external_references %}
                 <dt>{% trans "Published references" %}</dt>
                 <dd>{{ item.external_references|html_line_break|safe }}</dd>
                {% endif %}
                <dt>{% trans "Remarks" %}</dt>
                <dd>{{ item.comment|html_line_break|safe }}</dd>
                {% if last_revision %}
                <dt>{% trans "Last modification" %}</dt>
                <dd>{{ last_revision.time }} {% if user.is_authenticated %}(<a href="{% url "telemeta-profile-detail" last_revision.user.username %}">{{last_revision.user.username}}</a>){% endif %}</dd>
                {% endif %}
            </dl>
        </div>
        {% endblock archive_data %}
    </div>
    <div class="extraInfos">
        {% block technical_data %}
        <div class="folded">
            <h4><a href="#">{% trans "Technical data" %}</a></h4>
            <div>
                <dl class="listing">
                    {% dl_field item "media_type" %}
                    {% if not item.file %}
                    {% dl_field item "approx_duration" %}
                    {% endif %}
                    {% if item.size %}
                    <dt>{% trans "Item size" %}</dt>
                     <dd>{{ item.size|filesizeformat }}</dd>
                    {% endif %}
                    <!--
                    {% for format in formats %}
                     {% dl_field format "media_type" %}
                     {% dl_field format "physical_format" %}
                     {% dl_field format "original_code" %}
                     {% dl_field format "original_number" %}
                     {% dl_field format "original_status" %}
                     {% dl_field format "original_location" %}
                     {% dl_field format "original_state" %}
                     {% dl_field format "original_audio_quality" %}
                     <dt>{% trans "Comments" %}</dt>
                     <dd>{{ format.original_comments|html_line_break|safe }}</dd>
                     {% dl_field format "tape_wheel_diameter" %}
                     {% dl_field format "tape_thickness" %}
                     {% dl_field format "tape_speed" %}
                     {% dl_field format "tape_vendor" %}
                     {% dl_field format "tape_reference" %}
                     {% dl_field format "sticker_presence" %}
                    {% endfor %} -->
                </dl>

            </div>
        </div>
        {% endblock technical_data %}
    </div>
    {% endblock infos %}
</div> <!-- with-rightcol -->

{% if related_media %}
<div class="extraInfos">
    {% block related %}
        {% include "telemeta/inc/mediaitem_related.html" %}
    {% endblock related %}
</div>
{% endif %}

{% if auto_zoom %}
<script type="text/javascript">
 togglePlayerMaximization();
</script>
{% endif %}

    {% block dublincore %}
    <a href="{% url "telemeta-item-dublincore" item.public_id %}" style="float:left;margin-top:0.5em;margin-bottom:1em">
      <button type="button" class="btn btn-default">
        <img src="{{ STATIC_URL}}telemeta/images/dublin_core.png" /> Dublin Core
      </button>
    </a>
    {% endblock dublincore %}

{% endif %}


{% block modal %}
{% if item %}
<div id="share" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><b>{% trans "Share" %}</b></h4>
      </div>
      <div class="modal-body">
        <p><b>{% trans "Share the link"%}</b></p>
         <input class="share" name="share_url" value="{{ site }}{% url "telemeta-item-detail" item.public_id %}" title="{% trans "Share the link"%}" onclick="this.focus();this.select()" size="68">
        <br><br>
        {% if item.file %}
            <p><b>{% trans "Share the audio player" %}</b></p>
             <input class="share" name="share_audio_player" value="<iframe width='361' height='215' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{{ site }}{% url "telemeta-item-player" item.public_id 346 130 %}'></iframe>" title="{% trans "Share the audio player" %}" onclick="this.focus();this.select()" size="68">
            <br><br>
            {% if "video" in mime_type %}
            <p><b>{% trans "Share the video player" %}</b></p>
             <input class="share" name="share_video_player" value="<iframe width='640' height='480' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{{ site }}{% url "telemeta-item-video-player" item.public_id 640 480 %}'></iframe>" title="{% trans "Share the video player" %}" onclick="this.focus();this.select()" size="68">
            {% endif %}
        {% endif %}
       </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% endblock content %}

{% block delete %}
{% if user.is_authenticated and perms.telemeta.delete_mediaitem %}
    <a href="#" onclick="if(confirm(gettrans('delete the item permanently?'))){window.location.href='{% url "telemeta-item-delete" item.public_id %}';};return false;" style="float:right;margin-top:0.5em;margin-bottom:1em">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-trash"></span> {% trans "Delete" %}
      </button>
    </a>
{% endif %}
{% endblock %}

{% else %}
<p>No such item</p>
{% endif %}
