var hero_slides, activeSlide, activeIx, hero_timer;
$(document).ready(function()
{		
		/*UL is only used as placeholder, only LI inner HTML is used, style w/o reling on ul/li*/	
		hero_slides = $('#hero_slideshow > li');
		activeIx = 0;
		activeSlide = null;
		
		$('#hero_slideshow').hide();				

		hero_slides.each(function(i){
			$('<a href="#'+ (i+1) +'" rel="'+ i +'">&nbsp;</a>').appendTo('#heronav');
		});

		loadSlide(activeIx);

		$('#heronav a').click(function(event){
			event.preventDefault();				
			clearInterval(hero_timer);	// reset timer
			hero_timer = setInterval('autoPlay()', 10000);
			activeIx = parseInt($(this).attr('rel'));						
			loadSlide(activeIx);
		});
		
		hero_timer = setInterval('autoPlay()', 10000);
});

function loadSlide(ix)
{
	var topSlide = $('#hero_slideTop');
	var bottomSlide = $('#hero_slideBottom');
	var nextSlide = (activeSlide == topSlide) ? bottomSlide : topSlide;
	if(topSlide.is(':visible'))
	{
		bottomSlide.empty().append(hero_slides.eq(activeIx).html());
		topSlide.fadeOut(600);				
	} else {								
		topSlide.empty().append(hero_slides.eq(activeIx).html());
		topSlide.fadeIn(600);
	}			
	$('#heronav a').removeClass('active');
	$('#heronav a').eq(ix).addClass('active');
	activeSlide = nextSlide;			
}
function autoPlay()
{
	activeIx = (activeIx+1 >= hero_slides.length) ? 0 : activeIx+1;
	loadSlide(activeIx);			
}