//Variale `list` is imported from JSON with query_handler.php.
//var lists = JSON.parse(document.getElementById("lists-json").innerText);
var list_id = $("#query-list")[0].innerText;
//Get list id from <var> tag created in query-handler.php.
var list = null;
if(lists.hasOwnProperty(list_id)){
    list = lists[list_id];
} else {
    list = lists["master"];
    //If the list id in the query is invalid, go back to the main list.
}

if(list.hasOwnProperty("external") && list.external){
    setTimeout(function(){location.assign(list["link"])}, 600);
    //If the list specified in the query has the external property, then redirect to the external link. Note that because external lists in the master list are links to external URLs, the only situation where this will arise is if someone manually enters the list name into the query. I use setTimeout in order to allow the rest of the code to run.
    list["title"] = `Redirecting to List of ${list["title"]}...`;
    list["list"] = [];
    //It takes a second to redirect, so put some filler on the page while the reader waits.
}

$("#list-title")[0].innerHTML = list.title;
if(list.hasOwnProperty("description")){
    $("#list-description")[0].innerHTML = list.description;
}
//Generate the article header from the list's title and description.

if(list.hasOwnProperty("ordered") && list.ordered){
    $("#list-container")[0].innerHTML += "<ol id='list'></ol>";
    //Create an ordered list of the list has attribute "ordered":true.
} else if (list.hasOwnProperty("inline") && list.inline){
    $("#list-container")[0].innerHTML += "<span id='list'></span>";
    //Inline lists do not use HTML list tags but instead display list elements side by side.
} else {
    $("#list-container")[0].innerHTML += "<ul id='list'></ul>";
    //By default, lists are unordered.
}

$("#lists")[0].innerHTML += "<br /><a id='list-return-link' href='index.php?page=lists&list=master'>Return to Master List &#8617;</a>";
//Add a return link to the bottom of the article.

if(!list.hasOwnProperty("type")){
    list["type"] = "default";
}

switch(list["type"]){
    case "master":
        //The master list has its own special format to follow.
        for(id in lists){
            if(lists[id].hasOwnProperty("hidden") && lists[id].hidden){
                continue;
            }
            var tooltip = "";
            if(lists[id].hasOwnProperty("description")){
                tooltip=lists[id]["description"];
                //When hovering over a list in the directory, display its description as a tooltip.
            }
            var link = `href='index.php?page=lists&list=${id}' target='self_'`;
            //By default, lists have internal links that change the query value to that list's title. Internal links should open in the same tab.
            if(lists[id].hasOwnProperty("external") && lists[id].external){
                link = `href='${lists[id]["link"]}' target='blank_'`;
                //For external lists, use their link instead of an internal link. External links should open in a new tab.
            }
            var item = `<li title="${tooltip}"><a ${link}>${lists[id].title}</a></li>`;
            $("#list")[0].innerHTML += item;
            //The Master List contains a link to every other list in the JSON file.
        }
        $("#list-return-link")[0].style.display="none";
        //"Return to Master List" link is not needed on Master List itself.
        break;
    case "quotes":
        //Make the quotes section look like a quote board on Goodreads.
        for(quote of list.list){
            var item = "<p>";
            if(quote.hasOwnProperty("title")){
                item += `<b>${quote.title}</b><br />`;
                //Add a title if the quote has one (e.g. "The Litany Against Fear").
            }
            item += `&ldquo;${quote.quote.replaceAll("\n","<br />")}&rdquo;<br>`;
            //Add the text of the quote.
            if(quote.hasOwnProperty("card") && !quote.hasOwnProperty("quotee")){
                quote.quotee="";
                //If a flavor text doesn't have a quotee, then don't write "Unknown".
            }

            item += `&nbsp;&mdash; ${quote.hasOwnProperty("quotee") ? quote.quotee : "Unknown"}`;
            //Add the quotee's name, or "Unknown" if one is not specified.
            if(quote.hasOwnProperty("source")){
                if(quote.hasOwnProperty("quotee") && quote.quotee!=""){
                    item += ", "
                    //Unless there is no quotee, separate the quotee from the source with ", "
                }
                item += quote.source;
                //Add the source if the quote has one.
            }

            if(quote.hasOwnProperty("card")){
                if(quote.quotee!=""||quote.hasOwnProperty("source")){
                    item += `, `;
                    //Separate quotee or source from card title with ", "
                }
                item += `<a target='_blank' href='https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=${quote.multiverseid}'>${quote.card}</a> (Magic: the Gathering)`
            }
            item += "</p><hr />";
            //Delimit the quotes with a horizontal rule.
            $("#list")[0].innerHTML += item;
        }
        break;
    case "key-value":
        //Handle key-value or term-definition type data.
        for(pair of list.list){
            var item = "";
            if(pair.hasOwnProperty("link")){
                item = `<span class="list-key"><a href="${pair.link}" target="blank_">${pair["k"]}</a></span>`
            } else {
                item = `<span class="list-key">${pair["k"]}</span>`
            }
             item += ` &mdash; ${pair["v"]}`;
             $("#list")[0].innerHTML += `<li>${item}</li>`;
        }
        break;
    case "albums":
        document.getElementById("lists").style.textAlign="center";
        //Center the rows of album covers on the page.
        for(album of list.list){
            var tooltip = `${album.title} &mdash; ${album.artist} (${album.year})`;
            //Display album data when hovering over cover art.
            var item = `<img title="${tooltip}" src="${album.cover}" class="list-album-cover" />`;
            //Display the album cover. Can be an external link or internal path.
            if(album.hasOwnProperty("link")){
                item = `<a href='${album.link}' target='blank_'>${item}</a>`;
                //If there's a link to the album, put it on the cover.
            }
            item = `<div class="list-album">${item}<br />${album.title}<br />${album.artist}<br />${album.year}</div>`;
            $("#list")[0].innerHTML += `${item}`;
        }
        break;
    default:
        for(item of list.list){
            $("#list")[0].innerHTML += `<li>${item}</li>`;
        }
}