var 
inter_level_offset = 0, 
menu_item_width = 120, 
menu_item_height = 30, 
menu_orientation = "vertical", 
menu_item_class1 = "nextlevel_item", 
menu_item_class2 = "nextlevel_item_selected";
menu_item_align = "left";

var
menu_item_color1 = "#CCCCFF", 
menu_item_color2 = "#D0E33B";

var
init_x, init_y;

var MENU = {
	'menu_orientation' : "horizontal", 
	'items' : [

		{
			'caption' : "     onderwerpen", 
			'menu_item_class1' : "toplevel_popup_item", 
			'menu_item_class2' : "toplevel_popup_item_selected", 
			'menu_item_color1' : "#FA002C", 
			'popup' : {
				'items' : [
			



					{		'caption' : "producten",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?s=1",			'target' : "_self"		}	} ,{		'caption' : "verpakkingen",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?s=2",			'target' : "_self"		}	} ,{		'caption' : "portretten",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?s=11",			'target' : "_self"		}	} ,{		'caption' : "in-, en exterieur",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?s=5",			'target' : "_self"		}	} ,{		'caption' : "mensen",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?s=6",			'target' : "_self"		}	} ,{		'caption' : "mode",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?s=7",			'target' : "_self"		}	} ,{		'caption' : "natuur",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?s=8",			'target' : "_self"		}	} ,{		'caption' : "storyboards",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?s=9",			'target' : "_self"		}	} ,{		'caption' : "auto\'s",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?s=12",			'target' : "_self"		}	} ,{		'caption' : "shootingscripts",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?s=13",			'target' : "_self"		}	} ,{		'caption' : "website visuals",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?s=14",			'target' : "_self"		}	} 				
					]
				}
		} ,
		
		{
			'caption' : "     technieken", 
			'menu_item_class1' : "toplevel_popup_item", 
			'menu_item_class2' : "toplevel_popup_item_selected", 
			'menu_item_color1' : "#FB3356", 
			'popup' : {
				'items' : [
					 {		'caption' : "visualising",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?t=1",			'target' : "_self"		}	} , {		'caption' : "illustratie",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?t=2",			'target' : "_self"		}	} , {		'caption' : "animatie",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?t=4",			'target' : "_self"		}	} , {		'caption' : "3 dimensionaal",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?t=5",			'target' : "_self"		}	} , {		'caption' : "conceptuele vormgeving",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?t=7",			'target' : "_self"		}	} , {		'caption' : "moving storyboard",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?t=8",			'target' : "_self"		}	} , {		'caption' : "shootingscript",		'menu_item_class1' : "nextlevel_item1",		'open' : {			'url' : "galerie.php?t=9",			'target' : "_self"		}	} , {		'caption' : "roughs",		'menu_item_class1' : "nextlevel_item",		'open' : {			'url' : "galerie.php?t=10",			'target' : "_self"		}	} 				]
			}
		}
	]
};




var menu_items = [];
var killer = null;

function get_element(id) {
	return document.getElementById ? document.getElementById(id) : document.all[id]
}

function menu_item(caption, pos, align, size, class1, class2, color1, color2, parent, url, target) {
	this.caption = caption;
	this.id = menu_items.length;
	menu_items[this.id] = this;
	this.parent = parent;
	this.pos = pos;
	this.align = align;
	this.size = size;
	this.class1 = class1;
	this.class2 = class2;
	this.color1 = color1;
	this.color2 = color2;
	this.url = url;
	this.target = target;

	document.write('<DIV ID="div' + this.id + '" STYLE="position:absolute; left:' + pos[0] + 'px; top:' + pos[1] + 'px; z-index:4; visibility:hidden"><TABLE WIDTH="' + size[0] + '" BORDER="0" CELLPADDING="0" CELLSPACING="0"><TR><TD ID="cell' + this.id + '" WIDTH="' + size[0] + '" HEIGHT="' + size[1] + '" CLASS="' + class1 + '" BGCOLOR="' + color1 + '" onmouseover="menu_mouseover(' + this.id + ')" onmouseout="menu_mouseout(' + this.id + ')" onclick="menu_click(' + this.id + ')" align="' + align + '">' + caption + '</TD></TR></TABLE></DIV>');

	this.div = get_element('div' + this.id);
	this.cell = get_element('cell' + this.id);

	this.popup = [];
}

menu_item.prototype.add_child = function(child_id) {
	this.popup[this.popup.length] = child_id;
}

menu_item.prototype.show = function() {
	this.div.style.visibility = "visible";
}

menu_item.prototype.hide = function() {
	this.div.style.visibility = "hidden";
}

menu_item.prototype.move = function(x,y) {
	this.pos[0] += x;
	this.pos[1] += y;
	this.div.style.left=this.pos[0] + 'px';
	this.div.style.top=this.pos[1] + 'px';
}

menu_item.prototype.select = function() {
	this.cell.className = this.class2;
	this.cell.bgColor = this.color2;
	for (var i in this.popup) {
		menu_items[this.popup[i]].show();
		menu_items[this.popup[i]].unselect();
	}
}

menu_item.prototype.unselect = function() {
	for (var i in this.popup) {
		menu_items[this.popup[i]].unselect();
		menu_items[this.popup[i]].hide();
	}
	this.cell.className = this.class1;
	this.cell.bgColor = this.color1;
}

function menu_mouseover(id) {
	if (killer != null) clearTimeout(killer);
	killer = null;
	var p = menu_items[id].parent;
	for (var i in menu_items) {
		if (menu_items[i].parent == p) {
			if (i == id) menu_items[id].select();
			else menu_items[i].unselect();
		}
	}
}

function collapse() {
	for (var i in menu_items) {
		if (menu_items[i].parent == -1) {
			menu_items[i].unselect();
		}
	}
}

function menu_mouseout(id) {
	killer = setTimeout("collapse()", 100);
}

function menu_click(id) {
	if (menu_items[id].url!="") {
		var target = (menu_items[id].target!="")? menu_items[id].target : "_self";
		window.open(menu_items[id].url, target);
	}
}

function create_submenu(sub, x, y) {
	var parent = menu_items.length - 1;
	var orientation = (sub.menu_orientation)? sub.menu_orientation : menu_orientation;
	for (var i in sub.items) {
		var item_width = (sub.items[i].menu_item_width)? sub.items[i].menu_item_width : menu_item_width;
		var item_height = (sub.items[i].menu_item_height)? sub.items[i].menu_item_height : menu_item_height;
		var item_class1 = (sub.items[i].menu_item_class1)? sub.items[i].menu_item_class1 : menu_item_class1;
		var item_class2 = (sub.items[i].menu_item_class2)? sub.items[i].menu_item_class2 : menu_item_class2;
		var item_color1 = (sub.items[i].menu_item_color1)? sub.items[i].menu_item_color1 : menu_item_color1;
		var item_color2 = (sub.items[i].menu_item_color2)? sub.items[i].menu_item_color2 : menu_item_color2;

		var pos = [x,y];
		var item_align = (sub.items[i].menu_item_align)? sub.items[i].menu_item_align : menu_item_align;
		var size = [item_width,item_height];
		var url = (sub.items[i].open)? sub.items[i].open.url : "";
		var target = (sub.items[i].open)? sub.items[i].open.target : "";

		var new_item = new menu_item(sub.items[i].caption, pos, item_align, size, item_class1, item_class2, item_color1, item_color2, parent, url, target);
		if (parent>-1) menu_items[parent].add_child(new_item.id);
		else new_item.show();
		if (orientation == "vertical") {
			if (sub.items[i].popup) create_submenu(sub.items[i].popup, x+item_width+inter_level_offset, y);
			y += item_height;
		} else {
			if (sub.items[i].popup) create_submenu(sub.items[i].popup, x, y+item_height+inter_level_offset);
			x += item_width;
		}
	}
}


function menu_init(x, y) {
	init_x = x;
	init_y = y;
	create_submenu(MENU, x, y);
}

function menu_move(x, y) {
	var dx = x - init_x;
	var dy = y - init_y;
	init_x += dx;
	init_y += dy;
	for (var i in menu_items) {
		menu_items[i].move(dx,dy);
		if (menu_items[i].parent==-1) menu_items[i].show();
	}
}