var first = 0;
var active = 0;

function displayTitle()
{
    document.getElementById('title').innerHTML = title;
}

function displayDescription()
{
    document.getElementById('legend').innerHTML = '<span class="year">' + items[(active * 4) + 1] + '</span><br />' + 
                                                  items[(active * 4) + 2] + '<br /><br />' +
                                                  '<span class="credits">' + items[(active * 4) + 3] + '</span>';
    document.getElementById('count').innerHTML = (active + 1) + ' / ' + (items.length / 4);
}

function displayPhoto()
{
    document.getElementById('photo').innerHTML = '<img src="photos/' + gallery + '/' + items[active * 4] + '" width="400" height="300" />';
}

function displayItems()
{
    var content;
    var item  = first;
    var count = 0;

    if (item - 8 < 0)
    {
        content = '<a class="left" href="#" onclick="return(selectPhoto(' + ((items.length / 4) + item - 8) + ', true));"></a>';
    }
    else
    {
        content = '<a class="left" href="#" onclick="return(selectPhoto(' + (item - 8) + ', true));"></a>';
    }
    while (count < 8)
    {
        content += '<a class="' + (item == active ? 'active' : 'item' ) + '" href="#" onclick="return(selectPhoto(' + (item) + ', false));"><img src="photos/' + gallery + '/' + items[item * 4] + '" width="80" height="60" border="0" /></a>';
        count ++;
        item ++;
        if (item >= (items.length / 4))
        {
            item = 0;
        }
    }
    document.getElementById('items').innerHTML = content + '<a class="right" href="#"  onclick="return(selectPhoto(' + item + ', true));"></a>';
}

function selectPhoto(index, jump)
{
    if (!jump && index == active)
    {
        return;
    }
    if (jump)
    {
        first = index;
    }
    active = index;
    displayDescription();
    displayPhoto();
    displayItems();
    return(false);
}