{% extends "galerie/Base.html" %}


{% block nadpis1a %}
{{galerie.nazev}}: {{ obrazek.popis | default:"Fotka" }}
{% endblock %}


{# přecházení mezi fotkami pomocí šipek #}
{% block script %}
  {% with obrazky_predchozi|last as predchozi_obrazek %}
  {% with obrazky_dalsi|first as dalsi_obrazek %}
      <script type="text/javascript">
          $(document).ready(function() {
            $(document).keydown(function(e) {
                // jestliže je aktivní formulář na přidávání komentářů, neodcházej
                if ($(document.activeElement).parents("#komentarform").length > 0) {
                    return;
                }
                {% if predchozi_obrazek %}
                    // doleva
                    if (e.which == 37) {
                        window.location.assign("../{{ predchozi_obrazek.pk }}#nahoru");
                    }
                {% endif %}
                {% if dalsi_obrazek %}
                    // doprava
                    if (e.which == 39) {
                        window.location.assign("../{{ dalsi_obrazek.pk }}#nahoru");
                    }
                {% endif %}
                if (e.which == 27) {
                    window.location.assign("../#obsah");
                }
            });

            $("#prostredni").click(function() {
                $("#prostredni").parent().append("<p style='text-align: center;'>Prohrál jsi</p>");
                $("#prostredni").off("click");
            });
        })
      </script>
  {% endwith %}
  {% endwith %}
{% endblock %}

{% block content %}


  <h2>
    {% for g in cesta %}
        <a href="../../{{ g.pk }}">{{ g.nazev }}</a>{% if not forloop.last %} >{% endif %}
    {% endfor %}
  </h2>


  <div class="galerie">
    {% if obrazky_predchozi %}
      {% with obrazky_predchozi|last as predchozi_obrazek %}
        <div>
          <a title="Předchozí" class="predchozi_obrazek" href="../{{predchozi_obrazek.pk}}#nahoru"></a>
        </div>
      {% endwith %}
    {% endif%}
    <img src="{{obrazek.obrazek_stredni.url}}"
         height="{{vyska}}"
         width="{{sirka}}"
         alt="{{obrazek.popis}}"
         class="obrazek" id="nahoru">
         
    {% if obrazky_dalsi %}
      {% with obrazky_dalsi|first as dalsi_obrazek %}
        <div>
          <a title="Další" class="dalsi_obrazek" href="../{{dalsi_obrazek.pk}}#nahoru"></a>
        </div>
      {% endwith %}
    {% endif%}
  </div>
  <!--<div>-->
  <!--<a href="{{ obrazek.obrazek_velky.url }}">Obrázek v plné velikosti</a>-->
  <!--</div>-->

  {# Popisek fotky #}
  <div class="popis">
    {% if preview %}
    <form action=".#nahoru" method="post" id="komentarform">
      {% csrf_token %}
      <table>
        <tr><td><label>Aktuální komentář:</label></td><td>{{obrazek.popis}}</td>
        {{form.as_table}}
        <tr><td></td><td><input name="odeslat" type="submit" value="Změň komentář"></td></tr>
      </table>
    </form>
    {% else %}
      {% if obrazek.popis %}
        {{obrazek.popis}}
      {% endif %}
    {% endif %}
  </div>

  <div class="galerie_nahledy">
    {# odkaz na predchozi galerii #}
    <div class="navigace">
      {% if predchozi_galerie %}
        Předchozí: <a href="../../{{predchozi_galerie.pk}}/{{predchozi_galerie.obrazek_set.last.pk}}/#nahoru">
          {{predchozi_galerie}}
        </a>
      {% endif %}
      {# nahledy predchozich obrazku #}
      {% for obrazek in obrazky_predchozi %}
      <a href="../{{obrazek.pk}}#nahoru"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a>
      {% endfor %}
    </div>

    <img src={{obrazek.obrazek_maly.url}}
       height="{{obrazek.obrazek_maly.height}}"
       width="{{obrazek.obrazek_maly.width}}"
       alt="{{obrazek.popis}}"
       class="obrazek"
       id="prostredni">

    <div class="navigace">
      {# nahledy nasledujicich obrazku #}
      {% for obrazek in obrazky_dalsi %}
      <a href="../{{obrazek.pk}}#nahoru"><img src="{{obrazek.obrazek_maly.url}}" height="100"></a>
      {% endfor %}
      {# odkaz na nasledujici galerii #}
      {% if nasledujici_galerie %}
        Následující: <a href="../../{{nasledujici_galerie.pk}}/{{nasledujici_galerie.obrazek_set.first.pk}}/#nahoru">
          {{nasledujici_galerie}}
        </a>
      {% endif %}
    </div>
  </div>
{% endblock %}