var LinksDiv;
var AlbumCoverDiv;
var Image;

var LinkTemplate = "<a href='#' class=\"photoLink\" onclick=\"setMainImage('[ImageFileName]')\">[LinkText]</a>";
var AlbumCoverTemplate = "<img class=\"thumb\" src=\"[ImageFileName]\" onclick=\"AlbumLinkClick('[ImageGroup]')\"/>"
var FileNamePH = "[ImageFileName]";
var LinkTextPH = "[LinkText]";
var ImageGroupPH = "[ImageGroup]";

window.onload = function Page_Load()
{
    LinksDiv = document.getElementById("photoLinks");
    Image = document.getElementById("mainImage");
    AlbumCoverDiv = document.getElementById("thumbs");
    buildThumbnails();
    
    setMainImage(ImageList[0][1]);
    buildAlbumLinkBar(0);
}

function AlbumLinkClick(strImageGroup)
{
    LinksDiv.innerHTML = "";
    setMainImage(ImageList[strImageGroup][1]);
    buildAlbumLinkBar(strImageGroup);
}

function setMainImage(strFileName)
{
    Image.src = "Images/" + strFileName;
}

function buildBottomLink(strLinkText, strFileName)
{
    var strLink = LinkTemplate.replace(FileNamePH, strFileName);
    strLink = strLink.replace(LinkTextPH, strLinkText);
    return strLink;
}

function buildAlbumCover(strFileName, strImageGroup)
{
    var strImage = AlbumCoverTemplate.replace(FileNamePH, "Images/" + strFileName);
    strImage = strImage.replace(ImageGroupPH, strImageGroup);
    return strImage;
}

function buildThumbnails()
{
    for(x in ImageList)
        AlbumCoverDiv.innerHTML += buildAlbumCover(ImageList[x][0], x);
}

function buildAlbumLinkBar(strImageGroup)
{
    LinksDiv.innerHTML = "";
    for(var i = 1; i < ImageList[strImageGroup].length; ++i)
        LinksDiv.innerHTML += buildBottomLink(i, ImageList[strImageGroup][i]);
}