jQuery(document).ready(function() {
	play_class = 'play';
	jQuery('#imagecycle').after('<div class="imagecycle-controller" id="imagecycle_controller"><ul><li class="first"><a id="imagecycle_first"></a></li><li class="prev"><a id="imagecycle_prev"></a></li><li class="pause"><a id="imagecycle_pause"></a></li><li class="next"><a id="imagecycle_next"></a></li><li class="last"><a id="imagecycle_last"></a></li></ul></div>');
	jQuery('#imagecycle_pause').click(function() {
		_parent = jQuery(this).parent();
		if(_parent.hasClass(play_class)) {
			_parent.removeClass(play_class);
			jQuery('#imagecycle').cycle('resume');
		} else {
			_parent.addClass(play_class);
			jQuery('#imagecycle').cycle('pause');
		}
	});
	jQuery('#imagecycle_first').click(function() {
		jQuery('#imagecycle').cycle(0);
	});
	jQuery('#imagecycle_last').click(function() {
		options = jQuery('#imagecycle').data('cycle.opts');
		jQuery('#imagecycle').cycle(options.elements.length - 1);
	});
	
	jQuery('#imagecycle').show().cycle({
		fx: 'fade',
		easing: 'easeInOutBack',
		speed: '2000',
		timeout: '5000',
		pause: true,
		sync: true,
		random: false,
		before: function(a,n,o,f) {jQuery('span', this).css('display', 'none');},
		after: function(a,n,o,f) {jQuery('span', this).animate({opacity: 'show'},200);},
		next: '#imagecycle_next',
		prev: '#imagecycle_prev'
		
	});
	
	jQuery('#imagecycle').parent().css('width', jQuery('#imagecycle').css('width'));
});