function generateMenu(availableOptions)
{
    function createPhotoName(photo)
    {
        if (photo == "none") return "☆ manquant";
        if (photo == "bad") return "★ mauvais";
        if (photo == "ok") return "★★ acceptable";
        if (photo == "good") return "★★★ bon";
    }

    function createYearName(year)
    {
        if (year == "50s") return "1956 - 1959";
        if (year == "60s") return "1960 - 1969";
        if (year == "70s") return "1970 - 1979";
        if (year == "80s") return "1980 - 1989";
        if (year == "90s") return "1990 - 1999";
        if (year == "00s") return "2000 - 2009";
        if (year == "10s") return "2010 - 2016";
    }

    function createDimensionName(dimension)
    {
        if (dimension == "18") return "< 20cm";
        if (dimension == "20") return "20cm - 29cm";
        if (dimension == "30") return "30cm - 39cm";
        if (dimension == "40") return "40cm - 49cm";
        if (dimension == "50") return "50cm - 59cm";
        if (dimension == "60") return "60cm - 69cm";
        if (dimension == "70") return "70cm - 79cm";
        if (dimension == "80") return "80cm - 89cm";
        if (dimension == "90") return "90cm - 99cm";
        if (dimension == "100") return ">= 100cm";
    }

    function createHelpName(photo)
    {
        if (photo == "yes") return '<img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui';
        if (photo == "no") return "Non";
    }

    hasExist = false;
    for (photo of availableOptions.photos)
    {
        if (!hasExist && (photo == "bad" || photo == "ok" || photo == "good"))
        {
            html = '<span><input type="checkbox" id="exist" name="photo" value="exist"></input>\n';
            html += '<label for="exist">Disponible</label></span>';
            $(".box.photos .item-cont .generated").append(html);
            hasExist = true;
        }
        html = '<span><input type="checkbox" id="' + photo + '" name="photo" value="' + photo + '"></input>\n';
        html += '<label for="' + photo + '">' + createPhotoName(photo) + '</label></span>';
        $(".box.photos .item-cont .generated").append(html);
    }

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

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

    for (genre of availableOptions.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 .generated").append(html);
    }

    for (theme of availableOptions.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 .generated").append(html);
    }

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

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

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

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


function updateMenu(availableOptions)
{
    function checkItem(name, array)
    {
        $('.' + name + ' .item-cont span input').each(function()
        {
            if (!array.includes($(this).prop("value")))
            {
                if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
                    $(this).parent().addClass("filter");
                if ($(this).prop("value") == "exist") // special case for "exist" in photos
                {
                    if (array.includes("none") && !array.includes("bad") && !array.includes("ok") && !array.includes("good"))
                        $(this).parent().addClass("filter");
                    else
                        $(this).parent().removeClass("filter");
                }
            }
            else
                $(this).parent().removeClass("filter");
        });
    }

    function checkListItem(name, array)
    {
        $('.' + name + ' select option').each(function()
        {
            if (!array.includes($(this).prop("value")))
            {
                if ($(this).prop("value") != "")
                {
                    $(this).hide();
                    $(this).attr('disabled', 'disabled'); // for iOS
                }
            }
            else
            {
                $(this).show();
                $(this).removeAttr('disabled'); // for iOS
            }
        });
    }

    checkItem("photos", availableOptions.photos);
    checkItem("years", availableOptions.years);
    checkItem("months", availableOptions.months);
    checkItem("genres", availableOptions.genres);
    checkItem("themes", availableOptions.themes);
    checkItem("dimensions", availableOptions.dimensions);
    checkItem("help", availableOptions.helps);

    checkListItem("places", availableOptions.places);
    checkListItem("tags", availableOptions.tags);
}


function URLGeneration(availableOptions)
{
    // 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 filtre</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 && name != "place")
        {
            html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="' + name + '">';
            html += '<option value="">Aucun filtre</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, availableOptions.places);
    URLlistSelector(".box.tags", "tag", paramTag, availableOptions.tags);

    // URL special case for photos with "exist"
    if (paramPhoto.includes("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(availableOptions)
{
    // 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);
            }
        });
    }

    $("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");

    // 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);
            }
        });
    }



    // 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.frame").addClass('active');
        $(".style-select.list").removeClass('active');
        window.localStorage.setItem('explorer-view', 'gallery');
    });
    $(".style-select.list").click(function()
    {
        $("#gallery").hide();
        $("table").show();
        $(".style-select.frame").removeClass('active');
        $(".style-select.list").addClass('active');
        window.localStorage.setItem('explorer-view', 'table');
    });
}