{% extends "catalogue/viewer_base.html" %}
{% load i18n %}
{% load static from staticfiles %}
{% load catalogue_tags %}
{% load thumbnail %}


{% block title %}{{ picture.pretty_title }}{% endblock %}


{% block body-id %}picture-viewer{% endblock %}


{% block js-dependencies %}
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
{% endblock %}


{% block no-menu-extra %}
<li><a class="square button plus inactive" href="#">+<!--&#x2795;--><!-- heavy plus sign --></a></li><li><a class="square button minus inactive" href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a></li>
{% endblock %}


{% block menu %}
<li><a style="width: 50%;display: inline-block;" class="square button plus inactive" href="#">+<!--&#x2795;--><!-- heavy plus sign --></a><a style="width: 50%;display: inline-block;" class="square button minus inactive" href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a></li>


<li><a href="{{ picture.get_absolute_url }}" id="menu-book" data-box="book-short">
    <img src="{% thumbnail picture.image_file '80x200' as thumb %}{{ thumb.url }}{% empty %}{{ picture.image_file.url }}{% endthumbnail %}"
        width="80"
        alt="{{ picture.pretty_title }}"
        title="{{ picture.pretty_title }}">
</a></li>


<li><a href="#picture-objects" class="dropdown"><span class="label">{% trans "Objects" %}</span></a></li>
<li><a href="#picture-themes" class="dropdown"><span class="label">{% trans "Themes" %}</span></a></li>


<li id="menu-info"><a href="#info" data-box="info">
    <span class="label">{% trans "Infobox" %}</span>
</a></li>

<li id="sponsors">
    {% for sponsor in sponsors %}
        {% thumbnail sponsor.logo "80x200" as logo %}
            <a href="{{ sponsor.url }}" target="_blank"><img src="{{ logo.url }}" alt="{{ sponsor.name }}" /></a>
        {% endthumbnail %}
    {% endfor %}
</li>

{% endblock %}

{% block main %}
	<div id="picture-view">
	  {% thumbnail picture.image_file "700x500" as pic %}
	  <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}" 
	       data-original-width="{{picture.width}}" data-original-height="{{picture.height}}"
           data-original-url="{{ picture.image_file.url }}"
	       data-width="{{pic.width}}" data-height="{{pic.height}}" style="background-image: url('{{pic.url}}');  width: {{pic.width}}px; height: {{pic.height}}px;">
	  </div>
	  {% endthumbnail %}
	</div>
{% endblock %}


{% block footer %}
{{ picture.html_file.read|safe }}

<div id="info" class="box">
	  <div class="sponsors">
	    <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" ></img>
	    </a>
        {% for sponsor in sponsors %}
            {% thumbnail sponsor.logo "220x220" as logo %}
                <a href="{{ sponsor.url }}" target="_blank"><img src="{{ logo.url }}" alt="{{ sponsor.name }}" /></a>
            {% endthumbnail %}
        {% endfor %}
	  </div>

    {% book_info picture %}
</div>

<div class="box Picture-item" id="book-short">
    {{ picture.short_html }}
</div>

{% endblock %}