$(document).ready(function(){ 
		
		
		$('#cycleGallery').append('<div class="controls"><a href="#" class="back"></a><a href="#" id="pausePlay"></a><a href="#" class="forward"></a></div>	<div class="caption">Caption</div>');
		$('#cycleGallery .caption').hide();
		$('#cycleGallery .controls').hide();
		
		
		$('#slides').cycle({ 
			fx:     'fade', 
			timeout: 3300, 
			speed:   700,
			before: onBefore,
    	    next:   '#cycleGallery .controls .forward',
	        prev:   '#cycleGallery .controls .back'
  
		}); 
 		
		function onBefore() {
			$('#cycleGallery .caption').html($(this).attr('alt'));
		} 
		
		$('#cycleGallery').hover(
        	function() { 
				$('#cycleGallery .caption').slideDown('50'); 
				$('#cycleGallery .controls').slideDown('50'); 			
			},
        	function() { 
				$('#cycleGallery .caption').slideUp('50'); 
				$('#cycleGallery .controls').slideUp('50'); 
			}
    	);

		$('#cycleGallery .controls #pausePlay').click(function() {
			if($(this).hasClass('play')) {
				$(this).removeClass('play'); 
				$('#slides').cycle('resume'); 
			} else {
				$(this).addClass('play'); 
				$('#slides').cycle('pause'); 
			}
			return false; 
		});

		
	});