$(function() {
  $('div#slideshow div.viewport li').hide();
  $('div#slideshow div.viewport li.active').show();
  $('div#slideshow div.viewport').serialScroll({
		items: 'li',
		axis: 'x',
		duration: 10,
		force: true,
		interval: 10000,
		onBefore: function(e, elem, $pane, $items, pos) {
		  $('div.viewport li.active').removeClass('active').fadeOut(100);
		  $($items[pos]).addClass('active').fadeIn(500);
			$($('div#slideshow div.buttons a').removeClass('active').get(pos)).addClass('active');
		}
  });
  $('div.buttons a').click(function() {
    $('div#slideshow div.viewport').trigger('stop');
    $('div#slideshow div.viewport').trigger('goto', [this.rel]);
  });
});