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

function removeFromArray(array, item)
{
    index = array.indexOf(item);
    if (index > -1)
        array.splice(index, 1);
}

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'));
    paramView = (urlParams.get('view'));
    params = { "year": paramYear, "month": paramMonth, "dimension": paramDimension, "genre": paramGenre, "theme": paramTheme, "place": paramPlace, "tag": paramTag, "photo": paramPhoto, "help": paramHelp }

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

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

        var availableOptions = [];
        var selectedOptions = [];

        // filter data depending of parameters
        function filterData(selectedOptions)
        {
            function CheckItem(name, selectedElements)
            {
                return function(item)
                {
                    if (selectedElements.length == 0)
                        return true;
                    for (elem of selectedElements)
                    {
                        if (elem == "all")
                            return true;
                        if (item[name] == elem)
                            return true;
                    }
                    return false;
                }
            }

            function CheckTag(item)
            {
                for (tag of selectedOptions.tags)
                {
                    if (tag == "all")
                        return true;
                    if (!item.tags.includes(tag))
                        return false;
                }
                return true;
            }

            function CheckDimension(item)
            {
                if (selectedOptions.dimensions.length == 0)
                    return true;
                for (dimension of selectedOptions.dimensions)
                {
                    if (dimension == "all")
                        return true;
                    if (item.dimension.split("x")[0] == dimension)
                        return true;
                }
                return false;
            }

            data = data.filter(CheckTag);
            data = data.filter(CheckDimension);
            data = data.filter(CheckItem("year", selectedOptions.years));
            data = data.filter(CheckItem("photo", selectedOptions.photos));
            data = data.filter(CheckItem("month", selectedOptions.months));
            data = data.filter(CheckItem("genre", selectedOptions.genres));
            data = data.filter(CheckItem("theme", selectedOptions.themes));
            data = data.filter(CheckItem("place", selectedOptions.places));
            data = data.filter(CheckItem("help", selectedOptions.helps));
        }

        // gather data from json to make form
        function gatherData()
        {
            var photos = []; var years = []; var months = []; var genres = [];
            var themes = []; var places = []; var tags = []; var dimensions = []; var helps = [];

            function makeItem(item, array, displayName, min, max)
            {
                if (item >= min && item <= max)
                {
                    if (array.indexOf(displayName) === -1)
                        array.push(displayName);
                }
            }

            for (i of data)
            {
                if (photos.indexOf(i.photo) === -1 && i.photo != "" && i.photo != "—")
                    photos.push(i.photo);
                if (months.indexOf(i.month) === -1 && i.month != "" && i.month != "—")
                    months.push(i.month);
                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 (helps.indexOf(i.help) === -1 && i.help != "" && i.help != "—")
                    helps.push(i.help);
                if (i.year != "" && i.year != "—")
                {
                    makeItem(i.year, years, "50s", 1956, 1959);
                    makeItem(i.year, years, "60s", 1960, 1969);
                    makeItem(i.year, years, "70s", 1970, 1979);
                    makeItem(i.year, years, "80s", 1980, 1989);
                    makeItem(i.year, years, "90s", 1990, 1999);
                    makeItem(i.year, years, "00s", 2000, 2009);
                    makeItem(i.year, years, "10s", 2010, 2016);
                }
                if (i.dimension != "" && i.dimension != "—")
                {
                    makeItem(i.dimension.split("x")[0], dimensions, "18", 0, 19);
                    makeItem(i.dimension.split("x")[0], dimensions, "20", 20, 29);
                    makeItem(i.dimension.split("x")[0], dimensions, "30", 30, 39);
                    makeItem(i.dimension.split("x")[0], dimensions, "40", 40, 49);
                    makeItem(i.dimension.split("x")[0], dimensions, "50", 50, 59);
                    makeItem(i.dimension.split("x")[0], dimensions, "60", 60, 69);
                    makeItem(i.dimension.split("x")[0], dimensions, "70", 70, 79);
                    makeItem(i.dimension.split("x")[0], dimensions, "80", 80, 89);
                    makeItem(i.dimension.split("x")[0], dimensions, "90", 90, 99);
                    makeItem(i.dimension.split("x")[0], dimensions, "100", 100, 109);
                }
                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();
            helps.sort();
            places.sort(Intl.Collator().compare);
            tags.sort(Intl.Collator().compare);
            dimensions.sort(function(a, b) { return a - b; });
            var targetMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
            months.sort(function(a, b) { return targetMonths.indexOf(a) - targetMonths.indexOf(b); });
            var targetPhotos = ["none", "bad", "ok", "good"];
            photos.sort(function(a, b) { return targetPhotos.indexOf(a) - targetPhotos.indexOf(b); });

            return {"photos": photos, "years": years, "months": months, "genres": genres, "themes": themes, "places": places, "tags": tags, "dimensions": dimensions, "helps": helps};
        }

        // gather data from url to check available options
        function gatherURLdata()
        {
            selectedYears = [];
            selectedDimensions = [];
            selectedPhotos = params.photo;
            if (selectedPhotos.includes("exist"))
            {
                if (selectedPhotos.indexOf("bad") === -1) selectedPhotos.push("bad");
                if (selectedPhotos.indexOf("ok") === -1) selectedPhotos.push("ok");
                if (selectedPhotos.indexOf("good") === -1) selectedPhotos.push("good");
            }
            selectedMonths = params.month;
            selectedGenres = params.genre;
            selectedThemes = params.theme;
            selectedPlaces = params.place;
            selectedTags = params.tag;
            selectedHelps = params.help;
            for (p of params.year)
            {
                if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
                if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
                if (p == "70s") for (i = 1970; i <= 1979; i++) selectedYears.push(i);
                if (p == "80s") for (i = 1980; i <= 1989; i++) selectedYears.push(i);
                if (p == "90s") for (i = 1990; i <= 1999; i++) selectedYears.push(i);
                if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
                if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
            }
            for (p of params.dimension)
            {
                if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
                if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
                if (p == "30") for (i = 30; i <= 39; i++) selectedDimensions.push(i);
                if (p == "40") for (i = 40; i <= 49; i++) selectedDimensions.push(i);
                if (p == "50") for (i = 50; i <= 59; i++) selectedDimensions.push(i);
                if (p == "60") for (i = 60; i <= 69; i++) selectedDimensions.push(i);
                if (p == "70") for (i = 70; i <= 79; i++) selectedDimensions.push(i);
                if (p == "80") for (i = 80; i <= 89; i++) selectedDimensions.push(i);
                if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
                if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
            }
            return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
                    "places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
        }

        var originalData = data;
        var originalAvailableOptions = gatherData();

        selectedOptions = gatherURLdata();
        filterData(selectedOptions);

        $("input.reinit").click(function()
        {
            $('input').prop("disabled", false);
            $('input').prop("checked", false);
            $('select').val("");
            data = originalData;
            availableOptions = originalAvailableOptions;
            params = {};
            updateMenu(availableOptions);
        });

        // menu initial generation
        $.getScript("scripts/explorer_menu.js", function()
        {
            generateMenu(originalAvailableOptions);
            availableOptions = gatherData();

            userActionHandle(availableOptions);
            URLGeneration(originalAvailableOptions);
            updateMenu(availableOptions);

            function handleVisualFilterChanges()
            {
                function makeFilterChanges()
                {
                    selectedOptions = gatherURLdata();
                    data = originalData;
                    filterData(selectedOptions);
                    availableOptions = [];
                    availableOptions = gatherData();
                    updateMenu(availableOptions);
                }

                // handle tags
                function handleTags()
                {
                    $('input[name="tags"]').change(function()
                    {
                        params["tag"] = []; // remove filter
                        if (this.checked)
                        {
                            $('select[name="tag"] option[value=""]').prop('selected', true);
                            $('select[name="tag"]').attr('disabled', 'disabled');
                            $(".box.tags span:not(.first) select").parent().remove();
                        }
                        else
                            $('select[name="tag"]').removeAttr('disabled');

                        makeFilterChanges();
                    });

                    $('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
                    {
                        params.tag = []; // collect all tags from all dropdowns
                        $('.box.tags .item-cont select[name="tag"]').each(function()
                        {
                            if (params.tag.indexOf(this.value) === -1 && this.value != "")
                                params.tag.push(this.value);
                        });
                        
                        if (this.value != "")
                        {
                            createNewElem = true; // if we modify an existing element to a value, we don't delete it
                            $('.box.tags select').each(function()
                            {
                                if ($(this).val() == "")
                                    createNewElem = false;
                            });
                            if (createNewElem)
                            {
                                html = '<span><span class="inline">&#x203B;&nbsp;</span><select name="tag">';
                                html += '<option value="">Aucun filtre</option>';
                                for (a of originalAvailableOptions.tags)
                                    html += '<option value="' + a + '">' + a + '</option>';
                                html += '</select></span>';
                                $(".box.tags .item-cont").append(html);
                            }
                        }
                        else
                        {
                            // if the element has no value, we delete it
                            $(this).parent().remove();
                        }

                        makeFilterChanges();
                    });
                }
                handleTags();

                function visualFilterCheckboxItem(name)
                {
                    $('input[name="' + name + 's"]').change(function()
                    {
                        params[name] = []; // remove filter
                        makeFilterChanges();
                    });

                    $('input[name="' + name + '"]').change(function()
                    {
                        if (this.checked)
                        {
                            if (this.id == "exist") // photos special case
                            {
                                params[name].push("bad");
                                params[name].push("ok");
                                params[name].push("good");
                            }
                            params[name].push(this.id);
                        }
                        else
                        {
                            if (this.id == "exist") // photos special case
                            {
                                removeFromArray(params[name], "bad");
                                removeFromArray(params[name], "ok");
                                removeFromArray(params[name], "good");
                            }
                            removeFromArray(params[name], this.id);
                        }
                        
                        makeFilterChanges();
                    });
                }

                function visualFilterListItem(name)
                {
                    $('input[name="' + name + 's"]').change(function()
                    {
                        params[name] = []; // remove filter
                        if (this.checked)
                        {
                            $('select[name="' + name + '"] option[value=""]').prop('selected', true);
                            $('select[name="' + name + '"]').attr('disabled', 'disabled');
                        }
                        else
                            $('select[name="' + name + '"]').removeAttr('disabled');

                        makeFilterChanges();
                    });

                    $('select[name="' + name + '"]').change(function()
                    {
                        if (this.value == "" && name == "place")
                            params[name].pop();
                        else
                            params[name].push(this.value);

                        makeFilterChanges();
                    });
                }

                visualFilterCheckboxItem("photo");
                visualFilterCheckboxItem("year");
                visualFilterCheckboxItem("month");
                visualFilterCheckboxItem("genre");
                visualFilterCheckboxItem("theme");
                visualFilterCheckboxItem("dimension");
                visualFilterCheckboxItem("help");
                visualFilterListItem("place");
            }
            handleVisualFilterChanges();
        });

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

        // gallery vars
        window.pageSize = 14;
        window.paintingList = [];

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

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

                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 class="list-preview" data-fancybox="exposition-list" href="';
                if (i.photo == "none")
                    result += 'images/unknown.jpg';
                else
                    result += 'photos/paintings/normal/' + i.number + '.jpg'
                result += '" data-fancybox-index="' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
                result += "</tr>";

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


                // gallery
                paintingList.push(i.number);
                if (paintingList.length % (pageSize + 1) == 0)
                    canDisplay = false;

                paintingHtml = '<div class="gallery-item ';
                if (canDisplay)
                        paintingHtml += 'active">';
                else
                    paintingHtml += 'inactive">';

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

        var targetPage = 0;
        if (urlParams.get('page') != "")
            targetPage = urlParams.get('page');

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

            // pagination configuration
            window.currentPage = 0;
            window.previousArray = []
            $.getScript("scripts/pagination.js", function() {
                paginationInit(data, paintingList, true);

                if (targetPage > 0)
                    $("#pagination").pagination('go', targetPage);
            });
        }
        else
        {
            $("article.explorer p.no-result").css("display", "block");
            $("article.explorer p.result").css("display", "none");
        }

        function setGallery()
        {
            $("table").hide();
            $("#gallery").show();
            window.localStorage.setItem('explorer-view', 'gallery');
        }

        function setTable()
        {
            $("#gallery").hide();
            $("table").show();
            window.localStorage.setItem('explorer-view', 'table');
        }

        if (paramView == "gallery")
            setGallery();
        else if (paramView == "table")
            setTable();
        else
        {
            if (res)
            {
            explorerView = window.localStorage.getItem('explorer-view');
            if (explorerView == "gallery")
                setGallery();
            else if (explorerView == "table")
                setTable();
            }
        }

        // fancybox configuration
        $.getScript("scripts/fancybox.js", function() {
            fancyboxInit(data, true);
        });
    });
});