/**
 * Laju Menue-Fader
 *
 * @copy (c) 2011 by Manuel Peuster all rights reserved.
 * @author Manuel Peuster
 * @mail manuel (at) peuster (dot) de
 */

/**
* Config 
*/
var CONFIG_OID = "submenu";
var CONFIG_FADE_TIME = 300; 
var CONFIG_SWITCH_TIMEOUT = 1000;


//some global vars
var timeoutIds = new Array();
var active_id = -1;
var locked = false;


/**
 * Activates menu with - id
 * run on mouseover
 * @param id
 * @param selected_id
 * @return null
 */
function activate_submenu(id, selected_id) {
	if(active_id == -1)
		active_id = selected_id;
		
	//run only if not active 
	if(id == active_id)	
		return;
		
	//prevent timeout stacking	
	clearAllTimeouts();
	
	//switch menu
	active_id = id;
	switchMenuTo(id);
}


/**
 * Sets tiemer to deactivate menu. only if not locked.
 * run on mouse out
 * @param id
 * @param selected_id
 * @return null
 */
function deactivate_submenu(id, selected_id) {
	if(active_id == selected_id)
		return;
		
	//switch back to selected_id
	timeoutIds[timeoutIds.length + 1] = setTimeout("deactivate(" + selected_id + ")", CONFIG_SWITCH_TIMEOUT);
}


/**
 * Deactivate menu if not locked
 * @param {Object} id
 */
function deactivate(id) {
	if(!locked) 
		switchMenuTo(id); //switch only if not locked
	else
		timeoutIds[timeoutIds.length + 1] = setTimeout("deactivate(" + id + ")", CONFIG_SWITCH_TIMEOUT); //set new timer for next check
}


/**
 * Locks deactivating
 */
function lock_submenu() {
	locked = true;
}


/**
 * Unlocks deactivating
 */
function unlock_submenu() {
	locked = false;
}


/**
 * Fade out old menu - switch to id - fade in new menu
 * @param id
 * @return null
 */
function switchMenuTo(id) {
	//get object
	var menu = document.getElementById(CONFIG_OID);
	menu.fadeNewColor;
	menu.fadeNewContent;
	
	//select color and content
	switch(id) {
		case 2:
			menu.fadeNewColor = "#FFD47E";
			menu.fadeNewContent = document.getElementById("submenu_2").innerHTML;
			break;	
		case 3:
			menu.fadeNewColor = "#7D9CE4";
			menu.fadeNewContent = document.getElementById("submenu_3").innerHTML;
			break;	
		case 4:
			menu.fadeNewColor = "#DDDDDD";
			menu.fadeNewContent = document.getElementById("submenu_4").innerHTML;
			break;	
		default:
			menu.fadeNewColor = "#E6FC7C";	
			menu.fadeNewContent = document.getElementById("submenu_1").innerHTML;
	}
	
	//set start values
	menu.fadeTimeLeft = CONFIG_FADE_TIME;
	menu.fadeContextSwitched = false;
	
	//start fading
	if(menu.style.backgroundColor != menu.fadeNewColor)
		setTimeout("fade(" + id + "," + new Date().getTime() + ")", 30);
}


/**
 * recursive fade function
 * @param id
 * @param lastTick
 * @return null
 */
function fade(id, lastTick) {
	var menu = document.getElementById(CONFIG_OID);
	var deltaTicks = new Date().getTime() - lastTick;
	
	//countdown
	menu.fadeTimeLeft -= deltaTicks;
	
	if(menu.fadeTimeLeft > 0) {
		//fade out
		menu.style.opacity = (menu.fadeTimeLeft / CONFIG_FADE_TIME);
		setTimeout("fade(" + id + "," + new Date().getTime() + ")", 30);
	}else if(menu.fadeTimeLeft > -CONFIG_FADE_TIME) {
		//switch content and color
		if(!menu.fadeContextSwitched)
			switchContext();
		//fade in
		menu.style.opacity =  -(menu.fadeTimeLeft / CONFIG_FADE_TIME);
		setTimeout("fade(" + id + "," + new Date().getTime() + ")", 30);
	}else {
		//stop recursion
		return;	
	}
}


/**
 * switch color and content
 * @return null
 */
function switchContext() {
	//change color and content
	var menu = document.getElementById(CONFIG_OID);
	menu.fadeContextSwitched = true;
	menu.style.backgroundColor = menu.fadeNewColor;
	menu.innerHTML = menu.fadeNewContent;
}


/**
 * clear all timeouts in array 'timeoutIds'
 * @return
 */
function clearAllTimeouts() {  
 	for(key in timeoutIds ){  
		clearTimeout(timeoutIds[key]);  
	}  
}