function selectPhoto(i){
  if (typeof i == 'string') {
    if (i.match(/^[+-]\d+$/)) {
      selectPhoto(eval('photo_links.getClickIndex()'+i));
    } else if (i.match(/^\d+$/)) {
      selectPhoto(Number(i));
    }
  } else {
    if (typeof i == 'number') {
      photo_links.click(i);
    }
    var actual_i = photo_links.getClickIndex();
    $('#photo').attr('src', photos[actual_i]);
    $('#caption').html(captions[actual_i]);
    $('span.current-photo').text(photo_links.getClickIndex()+1);
  }
}
  
$(function(){
  photo_links = $('#toc').scrollable({
    size: 9,
    vertical: true,
    items: '#thumbnaillist',
    globalNav: true
  }).navigator({
    naviItem: 'a',
    indexed: true
  }).mousewheel({api: true});
  $('#toc li').click(function(){
    selectPhoto($('#thumbnaillist').index(this));
    return false;
  });
  $('#showcase').append(
    $('<div id="photo-nav"><span>'+
        '<a href="#" onClick="selectPhoto(\'-1\');">&laquo; </a>'+
        '<span class="current-photo">'+String(photo_links.getClickIndex()+1)+'</span> of '+
        '<span class="photo-count">'+photo_links.getSize()+'</span>'+
        '<a href="#" onClick="selectPhoto(\'+1\');"> &raquo;</a>'+
      '</span></div>'
    )
  );
});