{% extends "base.html" %}
{% block content %}
  <header>
    {% if album.breadcrumb %}
    <h2>
      {% for url, title in album.breadcrumb %}
      <a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
      {% endfor -%}
    </h2>
    <hr>
    {% endif %}
  </header>

  {% set numbers = ["zero", "one", "two", "three", "four", "five", "six",
  "seven", "eight", "nine", "ten", "eleven", "twelve"] %}
  {% set column_size = settings.colorbox_column_size %}
  {% set nb_columns = (12 / column_size)|int %}
  {% set column_size_t = numbers[column_size] %}

  {% if album.albums %}
  {% for alb in album.albums %}
    {% if loop.index % nb_columns == 1 %}
    <div id="albums" class="row">
    {% endif%}
      <div class="{{ column_size_t }} columns thumbnail
                  {% if loop.index % nb_columns == 1 %}alpha{% endif%}
                  {% if loop.index % nb_columns == 0 %}omega{% endif%}">
        <a href="{{ alb.url }}">
          <img src="{{ alb.thumbnail }}" class="album_thumb"
              alt="{{ alb.title }}" title="{{ alb.title }}" /></a>
        <span class="album_title">{{ alb.title }}</span>
      </div>
    {% if loop.last or loop.index % nb_columns == 0 %}
    </div>
    {% endif%}
  {% endfor %}
  {% endif %}

  {% if album.medias %}
  {% macro img_description(media) -%}
    {% if media.big %} data-big="{{ media.big }}"{% endif %}
    {% if media.exif %}
      {% if media.exif.datetime %}
        data-date=", {{ media.exif.datetime }}"
      {% endif %}
    {% endif %}
  {%- endmacro %}

  <div id="gallery" class="row">
    {% for media in album.medias %}
      {% set media_title = media.title if media.title else media.filename %}
      {% if media.type == "image" %}
      <div class="{{ column_size_t }} columns thumbnail
                  {% if loop.index % nb_columns == 1 %}alpha{% endif%}
                  {% if loop.index % nb_columns == 0 %}omega{% endif%}">
        {% if 'sigal.plugins.media_page' in settings.plugins %}
        <a href="{{ media.filename}}.html" class="gallery"
          title="{{ media_title }}"
          data-href="{{ media.filename }}" {{ img_description(media) }}>
        {% else %}
        <a href="{{ media.filename }}" class="gallery"
          title="{{ media_title }}"
          {{ img_description(media) }}>
        {% endif %}
          <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
              title="{{ media_title }}" /></a>
      </div>
      {% endif %}
      {% if media.type == "video" %}
        {% set mhash = media.filename|replace('.', '')|replace(' ', '') %}
        <div class="{{ column_size_t }} columns thumbnail
                    {% if loop.index % nb_columns == 1 %}alpha{% endif%}
                    {% if loop.index % nb_columns == 0 %}omega{% endif%}">
          {% if 'sigal.plugins.media_page' in settings.plugins %}
          <a href="{{ media.filename }}.html" data-href="#{{ mhash }}"
          {% else %}
          <a href="#{{ mhash }}" class="gallery" inline='yes' title="{{ media.filename }}"
          {% endif %}
            {% if media.big %} data-big="{{ media.big }}"{% endif %}>
            <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
                title="{{ media_title }}" /></a>
        </div>
        <!-- This contains the hidden content for the video -->
        <div style='display:none'>
          <div id="{{ mhash }}">
            <video controls>
            <source src='{{ media.filename }}' type='{{ media.mime }}' />
            </video>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
  {% endif %}

  {% if album.zip %}
  <div id="additionnal-infos" class="row">
    <p><a href="{{ album.zip }}"
        title="Download a zip archive with all images">Download ZIP</a></p>
  </div>
  {% endif %}

  {% if album.description %}
  <div id="description" class="row">
    {{ album.description }}
  </div>
  {% endif %}
{% endblock %}

{% block footer %}
  {% if album.medias %}
  {% if settings.use_assets_cdn %}
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  {% endif %}
  <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ theme.url }}/js/jquery-1.10.2.min.js"%3E%3C/script%3E'))</script>
  <script src="{{ theme.url }}/js/jquery.colorbox.min.js"></script>
  <script src="{{ theme.url }}/js/jquery.touchSwipe.min.js"></script>

  <script>
    $(".gallery").colorbox({
      rel:"gallery",
      transition:"none",
      maxWidth: "90%",
      maxHeight: "90%",
      scalePhotos: true,
      current: "{current} / {total}",
      title: function () {
        title = this.title;
        if(this.hasAttribute("data-big")) {
          title += " (full size)".link(this.getAttribute("data-big"));
        }
        if(this.hasAttribute("data-date")) {
          title += this.getAttribute("data-date");
        }
        return title;
      },
      {% if 'sigal.plugins.media_page' in settings.plugins %}
      href: function () {
        return this.getAttribute("data-href");
      },
      {% endif %}
      inline: function() {
        return this.hasAttribute("inline");
      }
    });

    $(document).bind('cbox_open', function(){
      $("#cboxOverlay, #colorbox").swipe({
        swipeLeft:function(event, direction, distance, duration, fingerCount) {
          $.colorbox.next();
        },
        swipeRight:function(event, direction, distance, duration, fingerCount) {
          $.colorbox.prev();
        },
        tap:function(event, target){
          $.colorbox.close()
        }}).unbind("click");
    });
  </script>
  {% endif %}
{% endblock %}
