{% extends "base.html" %}

{% block extra_head %}
    {# We will always want to show the first image when we're on an album page #}
    {# Start loading now for faster document complete instead of waiting for js to load it #}
    <style>
    body::after{
        position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
        content:url({{ album.medias[0].url }});
    }</style>
    {% if settings.show_map and album.show_map %}
    <link rel="stylesheet" href="{{ theme.url }}/leaflet/leaflet.css" />
    {% endif %}
{% endblock %}

{% block content %}
        <div class="icons">
          {% if settings.show_map and album.show_map %}
          <a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
            title="Show/Hide map" alt="Show/Hide Map (m)" /></a>
          {% endif %}
          <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
            title="Fullscreen" alt="Fullscreen (f)" /></a>
        </div>
        <div id="gallery"></div>

        {% 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">
          {{ album.description }}
        </div>
        {% endif %}
{% endblock %}

{% block late_js %}
    {% macro img_description(media) -%}
      {%- if media.big -%}<a href='{{ media.big_url }}'>Full size</a>{%- endif -%}
	    {# clean up tags and whitespace, including newlines, in the description #}
      {%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%}
      {%- if media.exif -%}
        <div class='film-meta'>
        {%- if media.exif.iso -%}<abbr title='film speed'>{{ media.exif.iso }}</abbr> {%- endif -%}
        {%- if media.exif.exposure -%}<abbr title='exposure'>{{ media.exif.exposure }}</abbr> {%- endif -%}
        {%- if media.exif.fstop -%}<abbr title='aperture'>{{ media.exif.fstop }}</abbr> {%- endif -%}
        {%- if media.exif.focal -%}<abbr title='focal length'>{{ media.exif.focal }}</abbr> {%- endif -%}
        </div>
        {%- if media.exif.gps -%}
          <a title='location' href='https://www.openstreetmap.org/?mlat={{ media.exif.gps.lat }}&amp;mlon={{ media.exif.gps.lon}}&amp;zoom=12&amp;layers=M' target='_blank' class='map' >{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }}{{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }}</a>
        {%- endif -%}
        {%- if media.exif.Make or media.exif.Model -%}
          <abbr title='camera make and model'>{{ media.exif.Make }} {{ media.exif.Model }}</abbr>
        {%- endif -%}
        {%- if media.exif.datetime -%}
          <abbr title='date'>{{ media.exif.datetime }}</abbr>
        {%- endif -%}
      {% endif %}
    {%- endmacro %}

    <script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
    {% if settings.show_map and album.show_map %}
    <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
    <script src="{{ theme.url }}/leaflet/leaflet-providers.js"></script>
    {% endif %}
    <script src="{{ theme.url }}/galleria.min.js"></script>
    <script src="{{ theme.url }}/themes/classic/galleria.classic.min.js"></script>
    <script src="{{ theme.url }}/plugins/history/galleria.history.min.js"></script>
    <script>
    var data = [
      {% for media in album.medias -%}
      {
        title: "{{ media.title }}",
        description: "{{ img_description(media) | e }}",
        thumb: "{{ media.thumbnail }}",
        {% if media.big %}
        big: "{{ media.big_url }}",
        {% endif %}
        {% if media.type == "image" %}
        image: "{{ media.url }}"
        {% endif %}
        {% if media.type == "video" %}
        image: "{{ theme.url }}/img/empty.png",
        layer: "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"
        {% endif %}
      },
      {% endfor %}
    ]

    {% if settings.show_map and album.show_map %}
    var selected =-1;
    /* Init markers */
    var features = new Array();

    function selectMarker(marker) {
        if (selected >= 0 && features[selected] != null) {
            features[selected].setStyle({
                radius: 7,
                fillColor: "#888a85",
                color: "#2e3436",
                weight: 1,
                fillOpacity: 1,
                clickable: true
            });
            features[selected].redraw();
        }

        if (marker != null) {
          marker.setStyle({
              radius: 7,
              fillColor: "#cc0000",
              color: "#ef2929",
              weight: 1,
              fillOpacity: 1,
              clickable: true
          });
          marker.bringToFront();
          map.panTo(marker.getLatLng());
        }
    }

    function onFeatureClick(e) {
      selectMarker(e.target);
      var id = features.indexOf(e.target);
      var galleria = $("#gallery").data("galleria");
      if (selected != id) {
          selected = id;
          galleria.show(id);
      }
    }

    function init_map() {
        /* Make sure we have the map div */
        if ($("#galleria-map").length == 0) {
            $(".galleria-stage").after("<div id='galleria-map'></div>");
            map = L.map('galleria-map');
            L.tileLayer.provider('{{ settings.leaflet_provider }}').addTo(map);
            map.setView([51.505, -0.09], 12);

            {% for media in album.medias %}
              {% if media.exif and media.exif.gps %}
            var lat = {{ media.exif.gps.lat }};
            var lon = {{ media.exif.gps.lon }};
            var marker = L.circleMarker([lat, lon], {
                radius: 7,
                fillColor: "#888a85",
                color: "#2e3436",
                weight: 1,
                fillOpacity: 1,
                clickable: true
            });
            marker.on('click', onFeatureClick);
            features.push(marker);
            marker.addTo(map);
              {% else %}
            features.push(null);
              {% endif %}
            {% endfor %}

            selectMarker(features[selected]);
        }
    }

    function galleryMapToggle() {
        /* Make sure the map is loaded */
        init_map();

        var stage = $(".galleria-stage");
        var mapdiv = $("#galleria-map");
        var icons = $(".icons");

        if (stage.attr.hidden == true) {
            stage.attr.hidden = false;
            $(".galleria-info-link").show();
            mapdiv.hide();
            stage.css("opacity", "1");
            icons.css("background-color", "inherit");
            /* Change display of the Map link */
            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/map.png";
        } else {
            stage.attr.hidden = true;
            $(".galleria-info-link").hide();
            mapdiv.show();
            /* Play with the stage opacity otherwise galleria will go mad */
            stage.css("opacity", "0");
            icons.css("background-color", "#333");
            /* Change display of the Map link */
            $(".gallery-map-toggle img")[0].src = "{{ theme.url }}/img/photo.png";
        }
    }
    {% endif %}

    Galleria.ready(function() {
        /*
        load thumbnails after gallery setup, and download has started
        for the main images, but before the loading of map tiles starts
        in the background. This ensures visible elements are prioritised
        over non-visible elements

        The choice to lazy load thumbnails in batches of 50 was not made
        scientifically. Other numbers may yield better performance.
        */
        this.lazyLoadChunks( 50 );

        this.attachKeyboard({
            right: this.next,
            left: this.prev,
            /* Toggle fullscreen display on press of 'f' key */
            0x46: this.toggleFullscreen,
            {% if settings.show_map and album.show_map %}
            /* Toggle map display on press of 'm' key */
            0x4D: galleryMapToggle,
            {% endif %}
        });

        var gallery = this;
        $('#fullscreen').click(function() {
          gallery.toggleFullscreen();
        });

        $('.icons').appendTo(this.$('container'));

        {% if settings.show_map and album.show_map %}
        $(".gallery-map-toggle").click(galleryMapToggle);
        this.bind('loadfinish', function(e) {
            /*  Triggers every time Galleria has finished loading an image.*/
            if (selected != e.index) {
                selectMarker(features[e.index]);
                selected = e.index;
            }
        });
        {% endif %}
    });

    Galleria.configure({
        imageCrop: false,
        transition: "fade",
        thumbnails: "lazy"
    });
    Galleria.run("#gallery", {dataSource: data});

    </script>
{% endblock %}
