var active_etalage = null;
var etalage_animated = false;
var etalage_mouse_halted = false;	// gestopt omdat de muis eroverheen is?
var animatie_percentage = 0.0;
var animatie_totale_tijd = 10000;	// milliseconden!
var etalage_etalage_p_div = null;
var prev_timer = null;

function etalage_internal_set_tab( id, bOnOff) {
	var tabje = document.getElementById("etalage_tab" + id.toString());
	var tab_inhoud = document.getElementById("etalage_" + id.toString());
	
	if (tabje && tab_inhoud) {
		tabje.className = bOnOff ? "active" : "inactive";
		tab_inhoud.className = "etalage_inhoud" + (bOnOff ? "_active" : "_inactive");
	}
}

function etalage_show_percentage( iPerc ) {
	if (etalage_p_div) {
		etalage_p_div.style.width = iPerc.toString() + "%";
	}
}

function etalage_set_tab( id ) {
	if (active_etalage) {
		etalage_internal_set_tab( active_etalage, false);
	}
	etalage_internal_set_tab( id, true);
	active_etalage=id;
	if (prev_timer) {
		clearTimeout(prev_timer);
		prev_timer = null
	}
	animatie_percentage = 0.0;
	etalage_animation();
}

function etalage_animation() {
	if (etalage_animated  && !etalage_mouse_halted) {
		if (animatie_percentage>=100) {
			var new_tab = active_etalage < 3 ? active_etalage + 1 : 1;
			etalage_set_tab( new_tab );
		} else {
			animatie_percentage = animatie_percentage + 0.5;
			etalage_show_percentage( animatie_percentage );
			if (prev_timer) clearTimeout(prev_timer);
			prev_timer = setTimeout( "etalage_animation()", (animatie_totale_tijd / 200) );
		}
	}
}

function etalage_animation_halt() {
	etalage_animated = false;
	animatie_percentage = 0;
	etalage_show_percentage(100);
}

function etalage_init( start_tab, bAnimate ) {
	//alert("begin etalage");
	var etal = document.getElementById("etalage");
	if (etal) {
		etal.onmouseout  = function() {etalage_mouse_halted=false;etalage_animation()};
		etal.onmouseover = function() {etalage_mouse_halted=true};

		// loop werkt niet omdat de teller waarde dan altijd de laatste heeft: ergo -> alleen tab  drie word altijd geselecteerd!
		document.getElementById("etalage_tab1").onclick = function() {etalage_set_tab(1)};
		document.getElementById("etalage_tab2").onclick = function() {etalage_set_tab(2)};
		document.getElementById("etalage_tab3").onclick = function() {etalage_set_tab(3)};

		for (var t=1; t<=3; t++) {
			document.getElementById("etalage_" + t.toString()).className = "etalage_inhoud_inactive";
			document.getElementById("etalage_" + t.toString()).style.height = "auto";
		}
		etalage_p_div = document.getElementById("etalage_perc_div");
		etalage_set_tab( start_tab );
		etalage_animated = bAnimate;
		etalage_animation();
		
		// install handlers in each form to halt the etalage!
		var node_list = document.getElementsByTagName('form'); 
		for (var i = 0; i < node_list.length; i++) { 
			node_list[i].onclick = function() {etalage_animation_halt()};
			node_list[i].onkeydown = function() {etalage_animation_halt();return true;};
		}
	}
}