// remove place and tag from url when unnecessary
function onSubmit() {
    $("select[name=place]").each(function() {
        if ($(this).val() == "")
            $(this).remove();
    });

    $("select[name=tag]").each(function() {
        if ($(this).val() == "")
            $(this).remove();
    });
    return true;
}

jQuery(document).ready(function($)
{
    // get URL parameters
    urlParams = new URLSearchParams(window.location.search);
    paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
    paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
    paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
    paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
    paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
    paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
    paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
    paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
    paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));

    $.getJSON("data.json", function(data)
    {

/**********/
/** MENU **/
/**********/

        var genres = [];
        var themes = [];
        var places = [];
        var tags = [];

        function generateMenu()
        {
            for (i of data)
            {
                if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
                    genres.push(i.genre);
                if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
                    themes.push(i.theme);
                if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
                    places.push(i.place);
                if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
                {
                    splitTags = i.tags.split(", ");
                    for (splitTag of splitTags) {
                        if (tags.indexOf(splitTag) === -1)
                        {
                            tags.push(splitTag);
                        }
                    }
                }
            }

            genres.sort();
            themes.sort();
            places.sort(Intl.Collator().compare);
            tags.sort(Intl.Collator().compare);

            for (genre of genres)
            {
                html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
                html += '<label for="' + genre + '">' + genre + '</label></span>';
                $(".box.genres .item-cont").append(html);
            }

            for (theme of themes)
            {
                html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
                html += '<label for="' + theme + '">' + theme + '</label></span>';
                $(".box.themes .item-cont").append(html);
            }

            $(".box.places select").append('<option value="">Aucun</option');
            for (place of places)
                $(".box.places select").append('<option value="' + place + '">' + place + '</option');

            $(".box.tags select").append('<option value="">Aucun</option');
            for (tag of tags)
                $(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');


            function URLGeneration()
            {
                // populate checkboxes depending on URL
                function URLcheckBoxSelector(names, name, urlParam)
                {
                    if (urlParam == "all")
                    {
                        $('input[name="'+names+'"]').prop("checked", true);
                        $('input[name="'+name+'"]').prop("disabled", true);
                        $('input[name="'+name+'"]').prop("checked", true);
                    }
                    else
                    {
                        for (a of urlParam)
                        {
                            $('input[id="'+a+'"]').prop("checked", true);
                        }
                    }
                }

                // populate list depending on URL
                function URLlistSelector(selector, name, param, names)
                {
                    if (param.length >= 1)
                        $(selector + ' select').parent().remove();
                    for (a of param)
                    {
                        html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
                        html += '<option value="">Aucun</option>';
                        for (i of names)
                        {
                            if (i == a)
                                html += '<option value="' + i + '" selected>' + i + '</option>';
                            else
                                html += '<option value="' + i + '">' + i + '</option>';
                        }
                        html += '</select></span>';
                        $(selector + ' .item-cont').append(html);
                    }
                    if (!param.includes("all") && param.length >= 1)
                    {
                        html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
                        html += '<option value="">Aucun</option>';
                        for (i of names)
                            html += '<option value="' + i + '">' + i + '</option>';
                        html += '</select></span>';
                        $(selector + ' .item-cont').append(html);
                    }
                }

                URLcheckBoxSelector("years", "year", paramYear)
                URLcheckBoxSelector("months", "month", paramMonth);
                URLcheckBoxSelector("dimensions", "dimension", paramDimension);
                URLcheckBoxSelector("genres", "genre", paramGenre);
                URLcheckBoxSelector("themes", "theme", paramTheme);
                URLcheckBoxSelector("places", "place", paramPlace);
                URLcheckBoxSelector("tags", "tag", paramTag);
                URLcheckBoxSelector("photos", "photo", paramPhoto);
                URLcheckBoxSelector("helps", "help", paramHelp);
                URLlistSelector(".box.places", "place", paramPlace, places);
                URLlistSelector(".box.tags", "tag", paramTag, tags);

                // URL special case for photos with "exist"
                if (paramPhoto == "exist")
                {
                    $('input[id="exist"]').prop("checked", true);
                    $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
                    $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
                    $('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
                }
            }

            function userActionHandle()
            {
                // if "all" is selected, check all other options and disable them
                function allCheckBoxSelected(names, name)
                {
                    $('input[id="' + names + '"]').click(function()
                    {
                        if ($(this).prop("checked") == true)
                        {
                            $('input[name="' + name + '"]').prop("checked", true);
                            $('input[name="' + name + '"]').prop("disabled", true);
                        }
                        else if ($(this).prop("checked") == false)
                        {
                            $('input[name="' + name + '"]').prop("checked", false);
                            $('input[name="' + name + '"]').prop("disabled", false);
                        }
                    });
                }

                // for places and tags
                function listOptionSelected(selector, name, names)
                {
                    $(selector).on('change', 'select[name="' + name + '"]', function()
                    {
                        if (this.value != "")
                        {
                            createNewElem = true; // if we modify an existing element to a value, we don't delete it
                            $(selector + ' select').each(function()
                            {
                                if ($(this).val() == "")
                                    createNewElem = false;
                            });
                            if (createNewElem)
                            {
                                html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
                                html += '<option value="">Aucun</option>';
                                for (a of names)
                                    html += '<option value="' + a + '">' + a + '</option>';
                                html += '</select></span>';
                                $(selector + " .item-cont").append(html);
                            }
                        }
                        else
                        {
                            // if the element has no value, we delete it
                            $(this).parent().remove();
                        }
                    });
                }

                $("input").prop("checked", false); // by default, uncheck all options
                allCheckBoxSelected("years", "year");
                allCheckBoxSelected("months", "month");
                allCheckBoxSelected("dimensions", "dimension");
                allCheckBoxSelected("genres", "genre");
                allCheckBoxSelected("themes", "theme");
                allCheckBoxSelected("places", "place");
                allCheckBoxSelected("tags", "tag");
                allCheckBoxSelected("photos", "photo");
                allCheckBoxSelected("helps", "help");
                listOptionSelected(".box.places", "place", places);
                listOptionSelected(".box.tags", "tag", tags);

                // special case for photos with "exist"
                $('input[id="exist"]').click(function()
                {
                    if ($(this).prop("checked") == true)
                    {
                        $('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
                        $('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
                        $('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
                    }
                    else
                    {
                        $('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
                        $('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
                        $('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
                    }
                });
            }

            // menu configurer show / hide
            $("article.explorer h2").click(function()
            {
                if ($(this).hasClass("active"))
                {
                    $(this).removeClass("active");
                    $("form").slideUp(200);
                }
                else
                {
                    $(this).addClass("active");
                    $("form").slideDown(200);
                }
            });

            // menu configurer child on mobile show/hide
            if ($(window).width() <= 600)
            {
                $("article.explorer .box h3").click(function()
                {
                    if ($(this).parent().hasClass("active"))
                    {
                        $(this).parent().removeClass("active");
                        $(this).parent().children(".item-cont").slideUp(200);
                    }
                    else
                    {
                        $(this).parent().addClass("active");
                        $(this).parent().children(".item-cont").slideDown(200);
                    }
                });
            }

            userActionHandle();
            URLGeneration();
        }

/*********************/
/** TABLE & GALLERY **/
/*********************/

        function checkYear(year)
        {
            if (paramYear == "all")                                         return true;
            if (paramYear.includes("50s") && year >= 1950 && year <= 1959)  return true;
            if (paramYear.includes("60s") && year >= 1960 && year <= 1969)  return true;
            if (paramYear.includes("70s") && year >= 1970 && year <= 1979)  return true;
            if (paramYear.includes("80s") && year >= 1980 && year <= 1989)  return true;
            if (paramYear.includes("90s") && year >= 1990 && year <= 1999)  return true;
            if (paramYear.includes("00s") && year >= 2000 && year <= 2009)  return true;
            if (paramYear.includes("10s") && year >= 2010 && year <= 2020)  return true;
            return false;
        }

        function checkMonth(month)
        {
            if (paramMonth == "all") return true;
            if (paramMonth.includes("01") && month == "Janvier")    return true;
            if (paramMonth.includes("02") && month == "Février")    return true;
            if (paramMonth.includes("03") && month == "Mars")       return true;
            if (paramMonth.includes("04") && month == "Avril")      return true;
            if (paramMonth.includes("05") && month == "Mai")        return true;
            if (paramMonth.includes("06") && month == "Juin")       return true;
            if (paramMonth.includes("07") && month == "Juillet")    return true;
            if (paramMonth.includes("08") && month == "Août")       return true;
            if (paramMonth.includes("09") && month == "Septembre")  return true;
            if (paramMonth.includes("10") && month == "Octobre")    return true;
            if (paramMonth.includes("11") && month == "Novembre")   return true;
            if (paramMonth.includes("12") && month == "Décembre")   return true;
            return false;
        }

        function checkDimension(dimension)
        {
            if (paramDimension == "all")                                                                             return true;
            if (paramDimension.includes("18") && dimension.split("x")[0] >= 18 && dimension.split("x")[0] <= 19)     return true;
            if (paramDimension.includes("20") && dimension.split("x")[0] >= 20 && dimension.split("x")[0] <= 29)     return true;
            if (paramDimension.includes("30") && dimension.split("x")[0] >= 30 && dimension.split("x")[0] <= 39)     return true;
            if (paramDimension.includes("40") && dimension.split("x")[0] >= 40 && dimension.split("x")[0] <= 49)     return true;
            if (paramDimension.includes("50") && dimension.split("x")[0] >= 50 && dimension.split("x")[0] <= 59)     return true;
            if (paramDimension.includes("60") && dimension.split("x")[0] >= 60 && dimension.split("x")[0] <= 69)     return true;
            if (paramDimension.includes("70") && dimension.split("x")[0] >= 70 && dimension.split("x")[0] <= 79)     return true;
            if (paramDimension.includes("80") && dimension.split("x")[0] >= 80 && dimension.split("x")[0] <= 89)     return true;
            if (paramDimension.includes("90") && dimension.split("x")[0] >= 90 && dimension.split("x")[0] <= 99)     return true;
            if (paramDimension.includes("100") && dimension.split("x")[0] >= 100 && dimension.split("x")[0] <= 109)  return true;
            return false;
        }

        function checkGenre(genre)
        {
            if (paramGenre == "all")
                return true;
            if (paramGenre.includes(genre))
                return true;
            return false;
        }

        function checkTheme(theme)
        {
            if (paramTheme == "all")
                return true;
            if (paramTheme.includes(theme))
                return true;
            return false;
        }

        function checkPlace(place)
        {
            if (paramPlace == "all")
                return true;
            if (paramPlace.includes(place))
                return true;
            return false;
        }

        function checkTag(tag)
        {
            if (paramTag == "all")
                return true;
            splitTag = tag.split(", ");

            for (t of splitTag)
            {
                if (paramTag.includes(t))
                    return true;
            }
            return false;
        }

        function checkPhoto(photo)
        {
            if (paramPhoto == "all") return true;
            if (paramPhoto.includes("none") && photo == "none") return true;
            if (paramPhoto.includes("bad") && photo == "bad")   return true;
            if (paramPhoto.includes("ok") && photo == "ok")     return true;
            if (paramPhoto.includes("good") && photo == "good") return true;
            if (paramPhoto.includes("exist") && (photo == "bad" || photo == "ok" || photo == "good")) return true;
            return false;
        }

        function checkHelp(help)
        {
            if (paramHelp == "all") return true;
            if (paramHelp.includes("no") && help == "no")   return true;
            if (paramHelp.includes("yes") && help == "yes") return true;
            return false;
        }

        function generateTable()
        {
            hasResult = false;
            numberOfItem = 0;

            for (i of data)
            {
                if (urlParams.toString() === "") // no parameter in URL
                    res = false;
                else
                    res = true;

                // check URL parameters and compute result
                if (paramYear != "")        res = res && checkYear(i.year);
                if (paramMonth != "")       res = res && checkMonth(i.month);
                if (paramDimension != "")   res = res && checkDimension(i.dimension);
                if (paramGenre != "")       res = res && checkGenre(i.genre);
                if (paramTheme != "")       res = res && checkTheme(i.theme);
                if (paramPlace != "")       res = res && checkPlace(i.place);
                if (paramTag != "")         res = res && checkTag(i.tags);
                if (paramPhoto != "")       res = res && checkPhoto(i.photo);
                if (paramHelp != "")        res = res && checkHelp(i.help);

                if (!res)
                    continue;

                hasResult = true;
                numberOfItem++;

                // table
                $("table").css("display", "block");

                result = "<tr>";
                result += "<td>" + i.number + "</td>";
                result += "<td>" + i.title + "</td>";
                result += "<td>" + (i.month != "—" ? i.month + "&nbsp;" : "") + i.year + "</td>";
                result += "<td>" + i.dimension + "</td>";
                result += "<td>" + i.genre + "</td>";
                result += "<td>" + i.theme + "</td>";
                result += "<td>" + i.place + "</td>";
                result += "<td>" + i.tags + "</td>";

                if (i.photo == "good")
                    result += '<td class="photo">&#x2605;&#x2605;&#x2605;</td>';
                else if (i.photo == "ok")
                    result += '<td class="photo">&#x2605;&#x2605;</td>';
                else if (i.photo == "bad")
                    result += '<td class="photo">&#x2605;</td>';
                else if (i.photo == "none")
                    result += '<td class="photo">&#x2606;</td>';

                if (i.help == "yes")
                    result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"></td>'
                else
                    result += '<td>&nbsp;</td>'

                result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg" alt="Voir"></a></td>';
                result += "</tr>";

                $("table").append(result);

                // gallery
                paintingHtml = '<div class="gallery-item">';
                if (i.photo == "none")
                {
                    paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
                    paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></a>'
                }
                else
                {
                    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>'
                }
                paintingHtml += '<span class="item-title">' + i.title;
                if (i.year != '—')
                    paintingHtml += ' (' + i.year + ')';
                paintingHtml += '</span></div>';
                $(".gallery").append(paintingHtml);
            }
            $(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
            return hasResult;
        }

        $(".gallery").hide();
        $(".style-select").hide();

        generateMenu();
        var res = generateTable();

        if (res) // display table or no result depending of computed result
        {
            $(".style-select").show();
            $("article.explorer h2").removeClass("active")
            $("form").slideUp(200);
            $("article.explorer p.result").css("display", "block");
        }
        else
        {
            $("article.explorer p.no-result").css("display", "block");
            $("article.explorer p.result").css("display", "none");
        }

        // on mobile, show only the first item slided down
        if ($(window).width() <= 600)
        {
            $("article.explorer .container .box").each(function()
            {
                if (!$(this).hasClass('active'))
                {
                    $(this).children(".item-cont").slideUp(200);
                }
            });
        }

        // change display: gallery/table
        $(".style-select.frame").click(function()
        {
            $("table").hide();
            $(".gallery").show();
        })
        $(".style-select.list").click(function()
        {
            $(".gallery").hide();
            $("table").show();
        })


        // fancybox configuration
        $('[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();
            }
        });
    });
});