$(document).ready(function(){
    $('.slideshow')
	.before('<div id="nav">')
	.cycle({
		fx: 'fade',
		pause: 5,
		// prev: '#prev',
		// next: '#next',
		pager: '#nav'
	})
	.find('img')
	.click(showFeatureDetails);
	$('.slideshow_features div')
	.mouseover(function(){
	  	$('.slideshow').cycle('pause');
    });
	$('.resume').click(function(){
		$('.slideshow_features div').css('left','-9999px');
		$(this).add('.shadow').hide();
		$('.slideshow').css('cursor','pointer').cycle('next').cycle('resume');
		$('#nav,#next,#prev').show();
    });
	var position = $('#nav').position();
	$('#prev').css('left',(position.left-20)+'px');
});
function showFeatureDetails(e)
{
	e.preventDefault();
	$(this).parent().css('cursor','auto').cycle('pause');
	var index = $('.slideshow img').index(this);
	var curr = $('.slideshow_features div').get(index);
	$(curr).css('left','20px');
	$('.resume, .shadow').show();
	$('#nav,#next,#prev').hide();
}