$(function(){
	
	/*
	
	1. Hide all but the first slide
	2. Set a timer to fade the other slides in to place
	3. loop through all slides
	
	*/
	
	hero_count = 1
	
	$('.hero_wrapper').hide()
	
	$('.hero_wrapper:first').show().addClass("current_hero")
	
	if($('.hero_wrapper').length > 1){
		//Only do this if there's 2 or more slides
		hero_slide = setTimeout("slide()", 4000)
	}
	
	
	
	
})

function slide(){
	
	
		hero_count ++
		
		if(hero_count > $('.hero_wrapper').length){
			hero_count = 1
		}
		
		$('.current_hero').animate({
			opacity: "0"
		}, 800, "easeInOutCirc").removeClass("current_hero")
		
		$('.hero_wrapper:nth-child('+(hero_count)+')').css({opacity: 0}).show().animate({
			opacity: "1"	
		}, 800, "easeInOutCirc").addClass("current_hero")
		
		clearTimeout("hero_slide")
		hero_slide = setTimeout("slide()", 4000)
	
	
}