tsaSlideShow = new SlideShow('tsaPictureShow',{
    delay: 8000,
    transition: 'fadeThroughBackground',
    duration: 800,
    autoplay: true
});

var self = this;

// these will control the slideshow
var navs = $('tsaNewsSlideshow').getElements('.nav li');

// add click events to the elements
navs.each(function(element, index){
	element.addEvent('click', function(){
		// going to figure the current index of the slideshow
		// and change the transition to go the "right" way
		// so it feels like a typical "panel" kind of widget
		var currentIndex = self.tsaSlideShow.slides.indexOf(self.tsaSlideShow.current);
		var transition = (currentIndex < index) ? 'pushLeft' : 'pushRight';
		// ignoring the last two lines this is really
		// quite simple, the indicies of the nav elements
		// and the slide elements match ... so just show the index
		self.tsaSlideShow.show(index, { transition: transition });
	});
});

// morph the style of the nav elements
this.tsaSlideShow.addEvent('show', function(slideData){
	navs[slideData.previous.index].morph('.normal');
	navs[slideData.next.index].morph('.current');
});

// set the initial slide to current
navs[0].morph('.current');

$('tsaNewsSlideshow').show();