{#  -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'comments_helper.tmpl' as comments with context %}
{% import 'crumbs.tmpl' as ui with context %}
{% block sourcelink %}{% endblock %}

{% block content %}
    <div class="page">
        {{ ui.bar(crumbs) }}
        {% if title %}
            <h1>{{ title|e }}</h1>
        {% endif %}
        {% if post %}
            <p>
                {{ post.text() }}
            </p>
        {% endif %}
        {% if folders %}
        <ul>
            {% for folder, ftitle in folders %}
                <li><a href="{{ folder }}"><i class="glyphicon glyphicon-folder-open"></i>&nbsp;{{ ftitle }}</a></li>
            {% endfor %}
        </ul>
        {% endif %}
        <div id="gallery_container"></div>
        {% if photo_array %}
        <noscript>
        <ul class="thumbnails">
            {% for image in photo_array %}
                <li><a href="{{ image['url'] }}" class="thumbnail image-reference img-responsive" title="{{ image['title'] }}">
                    <img src="{{ image['url_thumb'] }}" alt="{{ image['title'] }}" /></a>
            {% endfor %}
        </ul>
        </noscript>
        {% endif %}
    </div>
{% if site_has_comments and enable_comments %}
{{ comments.comment_form(None, permalink, title) }}
{% endif %}
{% endblock %}

{% block extra_head %}
{{ super() }}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
    .image-block {
        display: inline-block;
    }
    .flowr_row {
        width: 100%;
    }
    </style>
{% endblock %}


{% block extra_js %}
<script src="/assets/js/flowr.plugin.js"></script>
<script>
jsonContent = {{ photo_array_json }};
$("#gallery_container").flowr({
        data : jsonContent,
        height : {{ thumbnail_size }}*.6,
        padding: 15,
        rows: -1,
        render : function(params) {
            // Just return a div, string or a dom object, anything works fine
            img = $("<img />").attr({
                'src': params.itemData.url_thumb,
                'width' : params.width,
                'height' : params.height
            }).css('max-width', '100%');
            link = $( "<a></a>").attr({
                'href': params.itemData.url,
                'class': 'image-reference'
            });
            div = $("<div />").addClass('image-block shadow-z-3').attr({
                'title': params.itemData.title,
                'data-toggle': "tooltip",
            });
            link.append(img);
            div.append(link);
            div.hover(div.tooltip());
            return div;
        },
        itemWidth : function(data) { return data.size.w; },
        itemHeight : function(data) { return data.size.h; },
        complete : function(params) {
            if( jsonContent.length > params.renderedItems ) {
                nextRenderList = jsonContent.slice( params.renderedItems );
            }
        }
    });
$("a.image-reference").colorbox({rel:"gal", maxWidth:"100%",maxHeight:"100%",scalePhotos:true});
</script>
{% endblock %}