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

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

{% block css_import %}
{{block.super}}
<link rel="stylesheet" href='{% static "ldt/css/front_player.css" %}' type="text/css"/>
<link rel="stylesheet" href='{% static "ldt/css/embed_popup.css" %}' type="text/css"/>
<link rel="stylesheet" href='{% static "ldt/css/jq-css/jquery.qtip.css" %}' type="text/css"/>
{% if toggle_multisegments %}
<style type="text/css">
	#{{player_id}}_embed_widget_MultiSegments_11, #TagcloudContainer {
	    display: none;
	}
</style>
{% endif %}
{% endblock %}

{% block js_declaration %}
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $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');
        });
      {% if toggle_multisegments %}
        $j(".toggle_multisegments").click(function () {
        	$j("#{{player_id}}_embed_widget_MultiSegments_11").toggle();
        	$j("#TagcloudContainer").toggle();
        });
      {% endif %}
    });
</script>
{% endblock %}

{% block body %}
{{block.super}}

<!-- Player column -->
<div id="player_col_g">
    <h2>{{content.title}}</h2>
    <hr />
    <div class="ldt_player" id="wrapper_{{player_id}}">
    {% include "ldt/ldt_utils/partial/embed_player.html" %}
    </div>
    {% if toggle_multisegments %}
    <button class="toggle_multisegments">{% trans 'Afficher/Masquer les annotations' %}</button>
    {% endif %}
</div>

<!-- Right column -->
{% if toggle_multisegments %}
<div id="player_col_d" style="width: 854px;">
    <div id="TagcloudContainer" class="ext_widget" style="float:right;"></div>
    <div id="Slideshare_ext" class="ext_widget">
    </div>
    <div class="li_h2">
        <h2>{% trans 'All annotations on the media' %}</h2>
    </div>
    <div id="AnnotationsList_ext" class="ext_widget"></div>
    <div id="Social_ext"></div>
</div>
{% else %}
<div id="player_col_d" >
    <div id="Social_ext"></div>
    <div id="Slideshare_ext" class="ext_widget">
    </div>
    <div class="li_h2">
        <h2>{% trans 'All annotations on the media' %}</h2>
    </div>
    <div id="AnnotationsList_ext" class="ext_widget"></div>
</div>
{% endif %}
{% endblock %}

