$(document).ready(function(){

	$('.cycle')
	.before('<div id="cyclenav">') 
	.cycle({
		fx: 'fade', 
		timeout: 22000,
		speed: 500,
		prev: '#prev',
		next: '#next',
		pager:  '#cyclenav'
	});
	
	$('#slideshow').before('<ul id="nav">').cycle({ 
	    fx:     'fade', 
	    speed:  500, 
	    timeout: 0, 
	    pager:  '#nav', 
	    timeout: 22000,
	    speed: 500,
	    prev: '#prev',
	    next: '#next',
	     
	    // callback fn that creates a thumbnail to use as pager anchor 
	    pagerAnchorBuilder: function(idx, slide) { 
	        return '<li><a href="#"><img src="' + slide.src + '" width="55" height="37" /></a></li>'; 
	    } 
	});

});