function changeHeroImages() {
	var active = $E('#hero .active');
	var next = active.getNext();
	if (!next) {
		next = active.getParent().getFirst();
	}
	
	active.fx = active.effect('opacity', {duration: 1000}).start(0);
	next.fx = next.effect('opacity', {duration: 1000}).start(1);

	active.removeClass('active');
	next.addClass('active');
	
	heroTracking();
	
	// transition again in 10 more seconds
	changeHeroImages.delay(10000);
}

function heroTracking() {
	try {
		var active = $E('#hero .active');
		var tag = 'hero-' + 
			/(?:hero_)?([^/]+)\.[^/\.]+\)$/.exec(active.getStyle('backgroundImage'))[1]
			+ '-' + 
			(active.getParent().getChildren().indexOf(active) + 1);
		pageTracker._trackPageview(tag);
	} catch (err) { }
}

window.addEvent('domready', function(){
	var heroList = $E("#hero ul");
	// if there is more than one hero image, fade between them every 10 seconds
	if (heroList.getChildren().length > 1) {
		heroList.getChildren().each(function (hero, index) {
			// locate all li elements at the same position
			hero.setStyle('position', 'absolute');
			
			// the first hero is initially active
			if (index == 0) {
				hero.setStyle('opacity', 1 );
				hero.addClass("active");
			} else {
				hero.setStyle('opacity', 0 );
			}
		});
		heroTracking();
		
		// switch hero images after 10 seconds
		changeHeroImages.delay(10000);
	}
});