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]).
      attr('alt', 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\');" class="prev"><img src="/images/prev.png" alt="&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\');" class="next"><img src="/images/next.png" alt="&raquo;" /></a>'+
      '</span></div>'
    ).hide()
  ).hover(
    function(){ $('#photo-nav').fadeIn('fast') },
    function(){ $('#photo-nav').fadeOut('fast') }
  )
  $('#showcase #caption').hover(
    function(){ return false; },
    function(){ return false; }
  )
});