
function showHideInfo(evt,mainmenu_id){
	if ($(mainmenu_id + '_info')) {
		
		if ($('main' + mainmenu_id)) {
			var offsetLeft = $('main' + mainmenu_id).offsetLeft;
		}else{
			var offsetLeft = $('submenu_' + mainmenu_id).offsetLeft;
		}
		
		if($('mainmenu')){
			var offsetLeftParent = $('mainmenu').offsetLeft;
		}else{
			var offsetLeftParent = $('submenu').offsetLeft;
		}
		
		if($('main'+mainmenu_id)){
			var width = $('main'+mainmenu_id).getStyle("width").replace('px','');
		}else{
			var width = $('submenu_'+mainmenu_id).getStyle("width").replace('px','');
		}
		
		if($('main'+mainmenu_id)){
			var offsetLeft = $('main'+mainmenu_id).offsetLeft;
		}else{
			var offsetLeft = $('submenu_'+mainmenu_id).offsetLeft;
		}
		/*
		 * offsetLeft is positie (left) van het element waar je over met de muis over gaat
		 */

		var pLeft = offsetLeft-offsetLeftParent;
		var subwidth = $('submenu').getStyle("width").replace('px','');

		if (evt.type == "mouseover") {
			$(mainmenu_id + '_info').setStyle({
				display: "inline"
			});
			
			var widthInfo  = $(mainmenu_id + '_info').offsetWidth;
			var w =  $(mainmenu_id + '_info').offsetWidth;
			
			if((widthInfo+pLeft+15) > subwidth){
				pLeft -= (widthInfo+pLeft+15)-subwidth;
			}
			
			$(mainmenu_id + '_info').setStyle({
				paddingLeft: pLeft+"px"
			});
			
		}
		else {
			$(mainmenu_id + '_info').setStyle({
				display: "none",
				paddingLeft: "0px"
			});
		}
		
		
	}
}
function showSubMenu(evt,mainmenu_id){
	
	$$("#mainmenu ul li").each(function(s){
		s.removeClassName("mainmenu_clicked");
	});
	
	$$("#submenu .submenu").each(function(s){
		s.setStyle({display:"none"});
	});
	
	if(mainmenu_id == "start"){ //bij start ook submenu van alles tonen
		if($('submenu_all')){
			$('submenu_all').setStyle({display:"block"});
		}
	}else{
		if($('submenu_'+mainmenu_id)){
			$('submenu_'+mainmenu_id).setStyle({display:"block"});
		}
	}
	
	if($('main'+mainmenu_id)){
		$('main'+mainmenu_id).addClassName("mainmenu_clicked");
	}
}

function setMenuListeners(menu_item){
	if ($('main' + menu_item)) {
		Event.observe($('main' + menu_item), "mouseover", showHideInfo.bindAsEventListener(this, menu_item));
		Event.observe($('main' + menu_item), "mouseout", showHideInfo.bindAsEventListener(this, menu_item));
		Event.observe($('main' + menu_item), "click", showSubMenu.bindAsEventListener(this, menu_item));
	}
}

function setSubMenuListeners(submenu_item){

	if ($('submenu_' + submenu_item)) {
		Event.observe($('submenu_' + submenu_item), "mouseover", showHideInfo.bindAsEventListener(this, submenu_item));
		Event.observe($('submenu_' + submenu_item), "mouseout", showHideInfo.bindAsEventListener(this, submenu_item));
	}
	/*else{
		if(typeof(console) != "undefined")
			console.log("not element with id "+submenu_item);
	}*/
}

function init_menu(e, group, submenu, menu_group){
	$$('#mainmenu ul li').each(function(ul){
		var id = ul.id.replace('main','');
		setMenuListeners(id);
	});

	$$('.submenu ul li').each(function(li){
		var id = li.id.replace('submenu_','');
		setSubMenuListeners(id);
	});
	
	if(submenu == 'basic'){
		showSubMenu(null,"start");
	}else{
		showSubMenu(null,group);
		if($('submenu_'+group+'_'+submenu)){
			$('submenu_'+group+'_'+submenu).addClassName('submenu_clicked');
		}
	}
}