{% 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.qtip.min.js"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();
</script>
<script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/LdtPlayer-release.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'
            }
        });
    });
    $j(document).ready(function () {          
        $j("#id_search").bind('hastext', function () {
            $j("#search_submit").addClass('search_valid').removeClass('search_invalid');
            $j("#search_submit").removeAttr('disabled');         
        });
        $j("#id_search").bind('notext', function () {
            $j("#search_submit").addClass('search_invalid').removeClass('search_valid');
            $j("#search_submit").attr('disabled', 'disabled');
        });
        $j("#slides_container h2").click(function () {
            if($j("#slides_container h2").hasClass('triangle_down')){
            	// We hide the slides
                $j("#slides_container .triangle_down").addClass('triangle_right').removeClass('triangle_down');
                $j("#slides_container .Ldt-SlideShare").hide();
            }
            else if($j("#slides_container h2").hasClass('triangle_right')){
                // We show the slides
                $j("#slides_container .triangle_right").addClass('triangle_down').removeClass('triangle_right');
                $j("#slides_container .Ldt-SlideShare").show();
            }
        });
    });
</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 id="slides_container">
	        <h2 class="li_h2 triangle_down"><a href="#">Slides</a></h2>
    </div>
    <div class="li_h2">
        <h2>{% trans 'All annotations on the media' %}</h2>
    </div>
    <div id="annot_media"></div>
</div>
{% endblock %}