jQuery(document).ready(function($)
{
    $.getJSON("data.json", function(data)
    {
        for (i of data)
        {
            if (i.photo == "ok" || i.photo == "good")
            {
                paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
                $(".gallery").append(paintingHtml);
            }
        }

        $('[data-fancybox="exposition"]').fancybox(
        {
            infobar: false,
            toolbar: true,
            smallBtn: false,
            buttons: ["arrowLeft", "arrowRight", "close"],
            arrows: false,
            transitionEffect: "fade",
            baseClass: 'fancybox-custom-layout',
            mobile: {
                preventCaptionOverlap: true,
            },

            caption: function(instance, item)
            {
                var idx = item.opts.fancyboxIndex - 1; // painting number
                if (item.opts.fancyboxIndex >= 1000)
                    idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit

                function generateCartel()
                {
                    cartel = '<div id="info"><span class="info">';
                    cartel += '<a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>';
                    cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
                    if (data[idx].month != '—')
                        cartel += data[idx].month + '&nbsp;';
                    if (data[idx].year != '—')
                        cartel += data[idx].year;
                    cartel += '</span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
                    if (data[idx].dimension != '—')
                        cartel += ' (' + data[idx].dimension + ')';
                    cartel += '</span>';
                    if (data[idx].comment != '—')
                        cartel += '<span class="comment">' + data[idx].comment + '</span>';
                    cartel += '</div>';
                    return cartel;
                }

                return generateCartel();
            }
        });
    });
});