jQuery(document).ready(function($)
{
    const urlParams = new URLSearchParams(window.location.search);
    const pageId = urlParams.get('number');
    if (pageId > 1000)
        i = pageId - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
    else
        i = pageId - 1; // index is 0

    $.getJSON("data.json", function(data)
    {
        if (!data[i]) // the number specified in URL does not exist
        {
            $(".container").css("display", "none");
            $("#info").css("display", "none");
            $("article").append('<p class="center">Aucun tableau n\'existe pour cet index.</p>');
        }

        function GetNumber()
        {
            if (data[i].number > 1000)
                return "Inédit";
            return data[i].number;
        }

        // page title
        $("head title").append(GetNumber());

        // photo
        if (data[i].photo != "none")
            $(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
        else
            $(".photo img").attr("src", "images/unknown.jpg");
        $(".photo img").attr("alt", "Tableau " + data[i].number);

        // metadata
        $(".metadata .content.number").append(GetNumber());
        if (data[i].month != "—")
            $(".metadata .content.date").append(data[i].month + " " + data[i].year);
        else
            $(".metadata .content.date").append(data[i].year);

        $(".metadata .content.dimension").append(data[i].dimension);
        $(".metadata .content.support").append(data[i].support);
        $(".metadata .content.genre").append(data[i].genre);
        $(".metadata .content.theme").append(data[i].theme);
        $(".metadata .content.place").append(data[i].place);

        if (data[i].photo == "none") photoState = "aucune";
        if (data[i].photo == "bad") photoState = "mauvais";
        if (data[i].photo == "ok") photoState = "acceptable";
        if (data[i].photo == "good") photoState = "bon";
        $(".metadata .content.photo").append(photoState);

        if (data[i].help == "yes")
            $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
        else
            $(".metadata .content.help").append("non");

        if (data[i].tags != "—")
            $(".metadata .content.tag").append(data[i].tags);
        else 
            $(".metadata .content.tag").parent().css("display", "none");

        if (data[i].comment != "—")
            $(".metadata .content.comment").append(data[i].comment);
        else 
            $(".metadata .content.comment").parent().css("display", "none");

        if (data[i].photo != "none")
            $(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg");
        else
            $(".metadata .content.original").parent().css("display", "none");

        // cartel
        $("#info .title").append(data[i].title);
        if (data[i].month != "—")
            $("#info .year").append(data[i].month + " " + data[i].year);
        else
            $("#info .year").append(data[i].year);
        
            format = data[i].paint + " sur " + data[i].support.toLowerCase();
        
        if (data[i].dimension != "—")
            format += " (" + data[i].dimension + ")";
        $("#info .format").append(format);

        if (data[i].comment != "—")
            $("#info .comment").prepend(data[i].comment);
        else
        $("#info .comment").css("display", "none");
    });
});