jQuery(document).ready(function($) {

	$('#slideshow')
		.before("<div id='navig'>")
		.cycle({
			fx: 'fade',
			timeout: 11000,
			speed: 2000,
			cleartype: 0,
			cleartypeNoBg: false,
			pager: '#navig',
			pagerAnchorBuilder: function(idx, slide) {
				return '<li class="slide' + idx + '"><a href="#"></a></li>';
		}//,
		//pause: 1
	});

	$("#navig li").click(function() {
		
		$('#slideshow').cycle('pause'); 
	});
	
	$("a.btnpause").click(function() {
		
		$('#slideshow').cycle('pause'); 
	});
	
	$("a.btnplay").click(function() {
		
		$('#slideshow').cycle('resume');
	});
	
	$(function() {
	   $('.btnpause').hover( function(){
	      $(this).css('background-position', '0 -20px');
	   },
	   function(){
	      $(this).css('background-position', '0 0');
	   });
	});
	
	$(function() {
	   $('.btnplay').hover( function(){
	      $(this).css('background-position', '0 -20px');
	   },
	   function(){
	      $(this).css('background-position', '0 0');
	   });
	});
});