function autofade() {
	intervalHandle = setInterval(function() {
		var currentItem = $('#step4 .items li.current');
		currentItem.fadeOut(1000);
		if (jQuery.browser.msie) {currentItem.hide();}
		(currentItem.next().length == 0) ? nextItem = $('#step4 .items').children(':first') : nextItem = currentItem.next();
		$('.current').removeClass('current');
		nextStep = $('#step4 .links li[class='+nextItem.attr('class')+'] div');
		
		//fadein
		nextItem.fadeIn(1000).add(nextStep).addClass('current');
		
		//animate arrow
		pageOffset = $('.container').offset();
		stepOffset = nextStep.offset();
		$('#arrow').animate({'left':stepOffset.left-pageOffset.left+108}, 500);

	}, 4000);
}	
	
$(document).ready(function(){
	autofade();
	
	//start and stop autofade when hovering over step4
	$('#step4').hover(function() {
		clearInterval(intervalHandle);
	}, function() {
		autofade();
	});
	
	//animate everything when clicked
	$('#step4 .links li').click(function() {
		var theStep = $(this).attr('class');
		var nextItem = $('#step4 .items li[class='+theStep+']');
		if (jQuery.browser.msie) {$('li.current').hide();}
		$('li.current').stop(true, true).fadeOut(1000).add('#step4 .links div').removeClass('current');
		nextItem.stop(true, true).fadeIn(1000).addClass('current');
		$(this).children('div').addClass('current');
		
		//animate arrow
		pageOffset = $('.container').offset();
		stepOffset = $(this).offset();
		$('#arrow').stop(false,true).animate({'left':stepOffset.left-pageOffset.left+108}, 500);
	});
});