$(function() {
	$('.button-jcarousel').each(function() {
		var carousel = $(this).find('.button-jcarousel-items');
		var panel = carousel.after('<div class="button-jcarousel-panel"></div>').next();
		var pauseButton = panel.append('<div class="button-jcarousel-panel-item button-jcarousel-pause"><a class="pause-button pause-button-paused button-jcarousel-panel-item-link" tabindex="0"></a></div>').find('.pause-button');
		var prevButton = panel.append('<div class="button-jcarousel-panel-item button-jcarousel-prev"><a class="prev-button button-jcarousel-panel-item-link">Prev</a></div>').find('.prev-button');
		var nextButton = panel.append('<div class="button-jcarousel-panel-item button-jcarousel-next"><a class="next-button button-jcarousel-panel-item-link">Next</a></div>').find('.next-button');

		carousel.jcarousel({
			visible: 1,
			scroll: 1,
			buttonNextHTML: null,
			buttonPrevHTML: null,
			wrap: 'circular',
			itemVisibleInCallback: function(carousel, li, offset) {
				pauseButton.click().click();
			}
		});

		pauseButton.click(function() {
			var button = $(this);
			if (button.is('.pause-button-paused')) {
				button.addClass('pause-button-playing');
				button.removeClass('pause-button-paused');
				button.html('<span class="pause-button-text">Pause</span>');
				carousel.jcarousel('startAuto', 12);
			} else {
				button.removeClass('pause-button-playing');
				button.addClass('pause-button-paused');
				button.html('<span class="pause-button-text">Play</span>');
				carousel.jcarousel('stopAuto', 0);
			}
		});

		prevButton.click(function() {
			carousel.jcarousel('prev');
			return false;
		});
		
		nextButton.click(function() {
			carousel.jcarousel('next');
			return false;
		});

		pauseButton.click();
	});
});