$(document).ready(function() {
	
	var bottom =  ('<div id="bottom">');
		bottom += ('<em id="prevbtn"></em>');
		bottom += (' &middot; ');
		bottom += ('<em id="nextbtn"></em>');
		bottom += ('</div>');
		/*bottom += ('<p id="caption"></p>');*/
		
	$(bottom).appendTo('#navigation');
	$('<a>Previous</a>').attr({'id' : 'prev' , 'href' : '#'}).appendTo('#prevbtn').attr('id');
	$('<a>Next</a>').attr({'id' : 'next' , 'href' : '#'}).appendTo('#nextbtn').attr('id');
	
	$('.gallery').cycle({
		prev: '#prev',
		next: '#next',
		speed: 500,
		timeout: 0,
		after: onAfter
	});
	
	$('#container').center(); //vertical and horizontal
	
});

function onAfter(curr,next,opts) {
	var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
	$('#caption').html(caption);
}