var timer;

function start() {
	if(count > 1) {
		stop_effects();
		clearTimeout(timer);
		//timer = setTimeout("overlay_one_show()", 5000);
		setTimeout ("progress_one()", 5000);
		show();
	}
}

function hero_minus() {

	// If the step is 1 move back to the end slide else go back one slide. 
	if(step == 0) {
		step = count - 1;
	}
	else{
		step = step - 1;
	}
	
	// Stop any overlay effects and then start again from the new position. 
	stop_effects();
	clearTimeout(timer);
	timer = setTimeout("overlay_one_show()", 5000);
	show();
}

function hero_plus() {

	// If the step is 1 move back to the end slide else go back one slide. 
	if(step == (count - 1)){
		step = 0;
	}
	else{
		step = step + 1;
	}
	
	// Stop any overlay effects and then start again from the new position. 
	stop_effects();
	clearTimeout(timer);
	timer = setTimeout("overlay_one_show()", 5000);
	show();
}

function icon_click(id) {
	step = id;

	// Stop any overlay effects and then start again from the new position. 
	stop_effects();
	clearTimeout(timer);
	timer = setTimeout("overlay_one_show()", 5000);
	show();
}

/////////////////////////////////////////////////////////////////////////
//// SHOW THE ANIMATION
/////////////////////////////////////////////////////////////////////////

function turn_on() {
	document.getElementById('hero_icon_'+step).className = "hero_icon_on";
}

function show() {
	for(i=0;i<count;i++) {
		document.getElementById('hero_'+i).style.display = "none";
		document.getElementById('hero_icon_'+i).className = "hero_icon_off";
	}
	turn_on();
	$('hero_'+step).appear();
}

/////////////////////////////////////////////////////////////////////////
//// OVERLAY EFFECTS
/////////////////////////////////////////////////////////////////////////

function overlay_one_show() {
	$('overlay_1').appear();
	new Effect.Move('overlay_1', { x: 400, y: 0, mode: 'relative', duration: 3.0, queue: { position: 'front', scope: 'o1' }  });
	
	$('overlay_2').appear();
	new Effect.Move('overlay_2', { x: -400, y: 0, mode: 'relative', duration: 1.0,  queue: { position: 'front', scope: 'o2' }  });
	new Effect.Move('overlay_1', { x: -400, y: 0, mode: 'relative', queue: { position: 'end', scope: 'o1' } });
	new Effect.Move('overlay_2', { x: 400, y: 0, mode: 'relative', queue: { position: 'end', scope: 'o2' }  });
	
	setTimeout ("progress_one()", 5000);
}

function stop_effects(){
	$('overlay_1').hide();
	$('overlay_2').hide();
}

function progress_one(){
	if (step<(count-1)){
		step++;
	}
	else {
		step=0;
	}
	start();
}