{% extends "theend/home.html" %}
{% load static %}

{% block title %}{{super}} » Tag "{{tag}}"{% endblock %}

{% block js_declare %}
        <script type="text/javascript" src="{% static 'theend/js/init.js' %}"></script>
        <script type="text/javascript" src="{% static 'theend/js/model.js' %}"></script>
        <script type="text/javascript" src="{% static 'theend/js/ldt-serializer.js' %}"></script>
        <script type="text/javascript" src="{% static 'theend/js/ldt-annotate.js' %}"></script>
        
    {% block js_page_specific %}
        <script type="text/javascript" src="{% static 'theend/js/tagplayer.js' %}"></script>
        <script type="text/javascript">
            IriSP.endpoints = {
                mashup_by_tag : "{% url ldt.ldt_utils.views.json.mashup_by_tag %}",
                annotations_by_timecode : "{% url segment_api resource_name='segments' api_name='1.0' iri_id='__CONTENT_ID__' begin='__BEGIN__' end='__END__' %}",
                post_annotation : "{% url api_dispatch_list resource_name='annotations' api_name='1.0' %}",
                tag_page : "{% url level2_tag tag='__TAG__' %}"
            };
            $(function() {
                IriSP.tagplayer({
                    tag : "{{tag}}"
                });
            });
        </script>
    {% endblock %}
    
        <script type="text/javascript">
            if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
                var res = window.localStorage.getItem("resolution") || "SD";
            } else {
                var res = "SD";
            }
            IriSP.video_url_transform = function(url) {
                return url.replace(/[SH]D(\.[a-z0-9]+)$/,res + "$1");
            }
            $(function() {
                $(".sdhdgroup").addClass(res);
                $(".sdhdbtn").click(function() {
                    var newres = $(this).attr("title");
                    if (res !== newres) {
                        window.localStorage.setItem("resolution", newres);
                        document.location.reload();
                    }
                    return false;
                });
            });
        </script>

{% endblock %}

{% block main_content %}
        <header>
            <div id="title_vp">
                <a href="{% url level2_home %}" class= "link_prev link_img">
                    <img alt="Retour" src="{% static 'theend/img/retour.png' %}" />
                </a>
                <h1>{% block h1 %}{{tag}}{% endblock %}</h1>
            </div>
        </header>

        <section>

            <div id="title_sequence" class="float_sequence">
                <ul></ul>
            </div>

            <!-- Video -->
            <div class="video_wrap">
                <div id="video_sequence">
                    <div class="video-wait"></div>
                </div>
            </div>
            <!-- /Video -->

            <div id="tag_container">

                <form id="form_tag">
                    <input type="text" name="tag" placeholder="Entrez vos tags ici" />
                    <input type="submit" value="OK" />
                </form>

                <div id="tag_sequence" class="float_sequence">
                    <ul></ul>
                </div>

            </div>
        </section>

        <!-- Controls container -->
        <footer id="controlContainer">
            <section id="controlbar">
                <div class="container_hcentering">
                    <a id="btnInfo" class="btn" href="#" title="info"></a>

                    <div class="sdhdgroup">
                        <a id="btnSD" class="sdhdbtn" href="#" title="SD"></a>
                        <div class="sdhdbtn sdhdsep"></div>
                        <a id="btnHD" class="sdhdbtn" href="#" title="HD"></a>
                    </div>

                    <div id="progressContainer" class="floatL">

                        <div id="progressBar" class="progress_bar"></div>

                        <ul id="progressTime">
                            <li id="current" class="floatL">
                                00:00
                            </li>
                            <li id="duration" class="floatR">
                                00:00
                            </li>
                        </ul>

                    </div>
    {% block control_buttons %}
                    <a id="btnBck" class="btn txt_hidden" href="#" title="Back"></a>

                    <!-- <a id="btnPlayPause" class="btn txt_hidden" href="#" title="play/pause"></a>
                    -->
                    <a id="btnFwd" class="btn txt_hidden" href="#" title="Forward"></a>

                    <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Choice"></a>
    {% endblock %}
                </div>
            </section>
            <!-- /Controlbar container -->
        </footer>
{% endblock %}