/* Scriptmodule voor verandering menu-afbeeldingen v1.0
   
   (C) 2006 vizi

   DOM, ECMA-262 en Javascript compatible implementatie van mouseovers, 
   
   Geen event handling in XHTML nodig; detectie dmv classnaam 'hoverimg'
   
   Plaats:  /scripts/class_menuchange.js
   Revisie: april 2006

 */

// Zet enkele variabelen.
var curr_item = 0;                            // Onthoud menu-item dat deze keer wordt veranderd.
var change_delay = 7500;                      // Elke 7,5 seconden wisselt een menu-afbeelding.
var motion_step = 28;                         // Tijd tussen twee verplaatsingsstappen.
var timeout_flag = null;                      // Nog geen actieve timeout.
var curr_category;                            // Temp var voor categorie.
var curr_home_pfx;                            // Prefix ivm hogere afbeeldingen op homepage.
var curr_image_type;                          // Vlag voor type plaatje: 0: about, 1: expertise en projecten.
var curr_image_src;                           // Temp var voor url menu-afbeelding.
var motion_function;                          // Temp var voor aanroepen timeouts.
var menu_id = ['nav-ai', 'nav-oe', 'nav-pp']; // Array met de id's van de menu-items.

// Ordinaire browser sniffing om animatie in Safari te voorkomen.
var is_safari = (navigator.appVersion.indexOf('Safari') > -1) ? true : false;

// Init: start de timeout voor het wisselen.
// 
function menuchange_init(e)
{
	timeout_flag = setTimeout(menuchange_step, (3 * change_delay));
}

// Eigenlijke functie: wissel een menu-afbeelding.
// 
function menuchange_step(e)
{
	// Twee opties: wisseling van 'about igb' plaatje, of van project/expertise plaatje.
	if (curr_item == 0)
	{
		curr_images[curr_item][1] = (curr_images[curr_item][1] == menu_images[0]) ? 1 : (curr_images[curr_item][1] + 1);
		curr_category = null;
		curr_image_type = "_0";
	}
	else
	{
		curr_images[curr_item][1]++;
		curr_category = curr_images[curr_item][0];
		
		// Wijst voorbij aantal afbeeldingen in array? Dan volgende categorie, en evt helemaal naar 'nul'.
		if (curr_images[curr_item][1] > menu_images[1][curr_category])
		{
			curr_images[curr_item][1] = 1;
			curr_images[curr_item][0]++;
			if (curr_images[curr_item][0] == menu_images[1].length) curr_images[curr_item][0] = 1;
		}
		curr_image_type = "_1";
	}
	
	// Bepaal prefix (home of niet?).
	curr_home_pfx = (document.getElementById("igb").className == 'home') ? "_home" : "";
	
	// Bouw link naar de betreffende afbeelding.
	curr_image_src = "url(/images/bg_li_nav" + curr_home_pfx + "/photo" + curr_image_type;
	if (curr_category != null) curr_image_src += "_" + curr_images[curr_item][0];
	curr_image_src += "_0" + curr_images[curr_item][1] + ".jpg)";

	var menu_item = document.getElementById(menu_id[curr_item]);
	var menu_item_div = menu_item.getElementsByTagName("div")[0];

	if (!is_safari)
	{
		// Geen Safari? Zet dan animatie in werking.
		menu_item.motionStatus = 0;
		menu_item.motionImage = curr_image_src;
		motion_function = "menumove_step('" + menu_id[curr_item] + "')";
		setTimeout(motion_function, motion_step);
	}
	else
	{
		// Wel Safari? Dan alleen wisselen...
		menu_item_div.style.backgroundImage = curr_image_src;
	}
	//window.status = "Inf: " + curr_images[curr_item][0] + " :: " + curr_images[curr_item][1] + " :: " + curr_image_src;
	
	// Rouleer het menu-item dat wordt gewisseld.
	curr_item = (curr_item == 2) ? 0 : (curr_item + 1);
	
	// Volgende recursie.
	timeout_flag = setTimeout(menuchange_step, change_delay);
}


// Helperfunctie: schuif menu-afbeelding uit beeld zodat onderliggende afbeelding zichtbaar wordt.
//
function menumove_step(item_id)
{
	var menu_item = document.getElementById(item_id);
	var menu_item_div = menu_item.getElementsByTagName("div")[0];

	if (menu_item.motionStatus == 0) menu_item.style.backgroundImage = menu_item.motionImage;

	// Hang correcte class aan menu-item.
	menu_item_div.className = "motion-step-" + menu_item.motionStatus;

	// Check of we al bij laatste stap zijn.
	if (menu_item.motionStatus == 27)
	{
		// Ja, dan nieuwe afbeelding naar voren halen en divje wissen.
		menu_item_div.style.backgroundImage = menu_item.motionImage;
		menu_item_div.className = "motion-step-0";
	}
	else
	{
		// Nee, dan nog een iteratie.
		menu_item.motionStatus++;
		motion_function = "menumove_step('" + item_id + "')";
		setTimeout(motion_function, motion_step);
	}
}


// Hang script in window.onload ketting.
window.targetMenuchangeHandler = menuchange_init;
dispatch(window, "load", "targetMenuchangeHandler");