// This is the main part of the code that handles drawing the fan art gallery including the index page and displaying each piece of fan art

function drawIndex()
{
        var title = document.getElementById("title_nav")

        title.innerHTML = "<center><h1>" + artist + "'s Fan Art</h1><p>Click on any image to see a larger version</p><p><a href='../../fracshuns_fan_art.htm'>Back to Fracshun's Fan Art</a></p>"
        var display = document.getElementById("display_area")

        var i
        var html = ""

        for (i = 0; i < Picture_List.length; i++) {
                html += "<img src='Thm/" + Picture_List[i].thumbFile + "' vspace=5 hspace=5 width=" +
                        Picture_List[i].thumbWidth + " height=" + Picture_List[i].thumbHeight + " style='border: 2px solid #FFFF33' alt='Dragon Booster Fan Art' onclick='javascript:showImage(" + i + ")'>\n"
        }

        display.innerHTML = "<hr><center>" + html + "<hr>"
}

function showImage(index)
{
        var title = "<center><h2>"

        if (index != 0)
                title += "<a href='javascript:showImage(" + (index-1) + ")'>Prev</a>"
        else
                title += "Prev"

        title += " | <a href='javascript:drawIndex()'>Gallery Index</a> | "

        if (index < (Picture_List.length - 1))
                title += "<a href='javascript:showImage(" + (index+1) + ")'>Next</a>"
        else
                title += "Next"

        title += "</h2><p align='center'><a href='../../fracshuns_fan_art.htm'>Back to Fracshun's Fan Art</a></p>"

        document.getElementById("title_nav").innerHTML = title

        var body = "<table border bordercolorlight='#aaaaaa' align='center'><tr><td><img src='Art/" +
                Picture_List[index].imageFile + "' height=" + Picture_List[index].imageHeight +
                " width=" + Picture_List[index].imageWidth +
                " alt='Dragon Booster Fan Art: " + Picture_List[index].caption +
                "'></td></tr></table><h1 align='center'>" + Picture_List[index].caption +
                "</h1><h3 align='center'>by " + artist + "</h3>"

        document.getElementById("display_area").innerHTML = body
}