{% extends "front/front_base.html" %}
{% load i18n %}
{% load thumbnail %}

{% block title %}Lignes de temps : {% trans 'Annotate' %} "{{content.title}}"{% endblock %}

{% block css_import %}
{{block.super}}
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/front_player.css" type="text/css"/>
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/embed_popup.css" type="text/css"/>
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/jq-css/jquery.qtip.css" type="text/css"/>
{% endblock %}

{% block js_declaration %}
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js"></script>
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.qtip.min.js"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();
</script>
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/LdtPlayer.min.js"></script>
<script type="text/javascript">
    __IriSP.lib = {
        jQuery:"{{LDT_MEDIA_PREFIX}}js/jquery.min.js",
        jQueryUI:"{{LDT_MEDIA_PREFIX}}js/jquery-ui.min.js",
        jQueryToolTip:"{{LDT_MEDIA_PREFIX}}js/jquery.tools.min.js",
        swfObject:"{{LDT_MEDIA_PREFIX}}js/swfobject.js",
        cssjQueryUI:"{{LDT_MEDIA_PREFIX}}css/jq-css/themes/base/jquery-ui.css"                          
    };
</script>
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/embed_popup.js"></script>
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/ZeroClipboard.js"></script>
<script type="text/javascript">
    $j(document).ready(function(){
        ZeroClipboard.setMoviePath( '{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/ZeroClipboard10.swf' );
        clip = new ZeroClipboard.Client();
        $j("#clipboard_button").html(clip.getHTML(32,32));
        clip.setHandCursor(true);
        clip.setText('{{ldt_id}}');
        $j("#clipboard_button").qtip({
            style: {
                classes: 'ui-tooltip-dark ui-tooltip-rounded qtipldt'
            }
        });
    });
</script>
{% endblock %}

{% block body %}
{{block.super}}
<!-- Player column -->
<div id="player_col_g">
    <ul class="floatlist" id="top_media">
        <li id="title_media"><h2>{{content.title}}</h2></li>
        <!--li id="media_share">
            <ul class="floatlist">
                <li class="share_li">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Twitter</a>
                    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
                </li>
                <li class="share_li" style="padding-top: 3px">
                    <a name="fb_share">Partager</a> 
                    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
                </li>
                <li class="share_li">
                    <g:plusone size="medium" annotation="none"></g:plusone>
                    <script type="text/javascript">
                      (function() {
                        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                        po.src = 'https://apis.google.com/js/plusone.js';
                        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                      })();
                    </script>
                </li>
            </ul>
        </li -->
    </ul>
    <!--img src="img/placeholder.png" alt="ICI LE PLAYER" width="550" height="420" /-->
    <div class="ldt_player" id="wrapper_{{player_id}}">
    {% include "ldt/ldt_utils/partial/embed_player.html" %}
    </div>
</div>

<!-- Right column -->
<div id="player_col_d">
    <div class="li_h2">
        <h2>{% trans 'All annotations on the media' %}</h2>
    </div>
    <ul class="floatlist" id="annot_media">
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li class="selected">
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
        <li>
            <img class="fl img_media" src="{{LDT_MEDIA_PREFIX}}img/annot_icon_80x45.png" width="80" height="45" />
            <div class="fl une_annot">
                <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
                <p class="fr pink font_11">00:12:12 - 00:15:13</p>
                <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
            </div>
        </li>
    </ul>
</div>
{% endblock %}