function gotoFrame(frameNum) {
	var $active = $('#slideshow div.active');

    if ( $active.length == 0 ) $active = $('#slideshow div:last');

	if (frameNum == -1) {
		// go back
	    var $next =  $('#frame' + (parseInt($active.attr("id").substring(5)) - 1)).length 
			? $('#frame' + (parseInt($active.attr("id").substring(5)) - 1))
			: $('#frame5');
	} else if (frameNum == 0) {
		//go forward
	    // use this to pull the images in the order they appear in the markup
	    var $next =  $active.next().length ? $active.next()
	        : $('#slideshow div:first');
	} else {
		// go to specific number
		var $next = $('#frame' + frameNum);
	}
	
	$active.addClass('last-active');

	// UPDATE NAVIGATION ICONS
	
	$(".slideshowNav li a").removeClass('selected');
	$("#goto" + $next.attr("id")).addClass('selected');


	$next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });

	clearInterval (frameCaller);
	frameCaller = setInterval( "gotoFrame(0)", 6000 );
}

$(function() {
    frameCaller = setInterval( "gotoFrame(0)", 6000 );

});