jQuery(document).ready(function($)
{
    $.getJSON("data.json", function(data)
    {
        var paintingList = [];

        canDisplay = true;
        for (i of data)
        {
            if (i.photo == "ok" || i.photo == "good")
            {
                paintingList.push(i.number);
                if (paintingList.length % (14 + 1) == 0)
                    canDisplay = false;
                
                if (canDisplay)
                {
                    paintingHtml = '<a class="active" 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>';
                }
                else
                {
                    paintingHtml = '<a class="inactive" data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
                }
                $(".gallery").append(paintingHtml);
            }
        }

        /*var targetPage = 0;
        urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('page') != "")
            targetPage = urlParams.get('page');*/


        var previousArray = []
        var options = 
        {
            dataSource: paintingList,
            pageSize: 14,
            //pageRange: null,
            callback: function (response, pagination)
            {                
                //window.history.pushState('', '', '/exposition-pagination.html?page=' + pagination.pageNumber); // careful, back button is broken with that
                //window.console && console.log(response, pagination);

                if (previousArray.length > 0)
                {
                    for (i of previousArray)
                        $('[data-fancybox-index="'+i+'"]').removeClass("active").addClass("inactive");
                }

                previousArray = response;

                $.each(response, function(index, item)
                {
                    $('[data-fancybox-index="'+item+'"]').removeClass("inactive").addClass("active");
                    $('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
                });
            }
        };

        $('#pagination').pagination(options);

        /*if (targetPage > 0)
            $("#pagination").pagination('go', targetPage);*/


        $('[data-fancybox="exposition"]').fancybox(
            {
                selector: '.gallery a',
                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();
                },

                beforeShow : function(instance, current)
                {
                    if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
                        $('#pagination').pagination('next');

                    if (current.opts.fancyboxIndex < previousArray[0])
                        $('#pagination').pagination('previous');
                },

            });
    });
});