var current_image = 0;

$(function() {
	$('div.image-sequence').append('<div class="selector"><a href="#" class="prev">Previous</a> <span class="locator">Image <span class="current">1</span> of ' + $('div.image-sequence p img').length + '</span> <a href="#" class="next">Next</a></div>');
	$('div.image-sequence p img').hide().click(function() {
		$('div.image-sequence div.selector a.next').click();
	}).css('cursor', 'pointer').attr('title', 'Click for next image');
	showImage(0);
	$('div.image-sequence div.selector a').click(function () {
		if ($(this).hasClass('prev')) {
			if (current_image <= 0) {
				showImage(current_image = $('div.image-sequence p img').length - 1);
			} else {
				showImage(--current_image);
			}
		} else if ($(this).hasClass('next')) {
			if (current_image >= $('div.image-sequence p img').length - 1) {
				showImage(current_image = 0);
			} else {
				showImage(++current_image);
			}
		}
		return false;
	});
});

function showImage(img) {
	/*$('div.image-sequence p img').each(function () {
		if ($(this).css('display') != 'none') {
			$(this).css({position: 'absolute', top: $(this).offset.top, left: $(this).offset.left})
				.fadeOut(500, function () { $(this).css({position: 'static'}); })
		}
	})
		.eq(img)
		.fadeIn(500);*/
	$('div.image-sequence p img').hide().eq(img).show();
	$('div.image-sequence div.selector span.locator span.current').text(img+1);
}