var
inter_level_offset = -30,
menu_item_width = 180,
menu_item_height = 29,
menu_orientation = "vertical",
menu_item_class1 = "left-menu-item",
menu_item_class2 = "left-menu-item-over",
menu_item_align = "left",
menu_item_padding = 10;

var
menu_item_color1 = "#FF0000",
menu_item_color2 = "#740404";

var
init_x, init_y;

var MENU = {
	'items' : [
		{
			'caption' : "WAAR in Almere?", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=2",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "KlimaatTIPS", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'popup' : {
				'items' : [
					{
						'caption' : "Voedsel", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=16",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Warmte", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=13",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Electriciteit", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=14",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Water", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=15",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Wonen", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=17",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Hygiëne & Verzorging", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=18",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Vrije tijd", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=19",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Verkeer & Vervoer", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=20",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Afval", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=21",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Werken", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=22",
							'target' : "_self"
						}
					}
				]
			}
		}
		,
		{
			'caption' : "Klimaat Vrienden", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'popup' : {
				'items' : [
					{
						'caption' : "Almere", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'popup' : {
							'items' : [
								{
									'caption' : "De Paviljoens (kunst)", 
									'menu_item_color1' : "#174285", 
									'menu_item_color2' : "#7697c5", 
									'open' : {
										'url' : "index.php?p=34",
										'target' : "_self"
									}
								}
								,
								{
									'caption' : "Algemeen", 
									'menu_item_color1' : "#174285", 
									'menu_item_color2' : "#7697c5", 
									'open' : {
										'url' : "index.php?p=5",
										'target' : "_self"
									}
								}
								,
								{
									'caption' : "Stichting AAP", 
									'menu_item_color1' : "#174285", 
									'menu_item_color2' : "#7697c5", 
									'open' : {
										'url' : "index.php?p=47",
										'target' : "_self"
									}
								}
								,
								{
									'caption' : "Klimaat en Omgevings Partij", 
									'menu_item_color1' : "#174285", 
									'menu_item_color2' : "#7697c5", 
									'open' : {
										'url' : "index.php?p=51",
										'target' : "_self"
									}
								}
							]
						}
					}
					,
					{
						'caption' : "Nederland", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=12",
							'target' : "_self"
						}
					}
				]
			}
		}
		,
		{
			'caption' : "Waarom windenergie", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=4",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "Groene stroom = GPX", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=32",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "Electrisch Scooter", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=36",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "Hooikist of Zonnekoker", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=40",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "De Kemphaan", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'popup' : {
				'items' : [
					{
						'caption' : "De Boerenmarkt", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=39",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "Oogstfeest 30 sept 07", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=43",
							'target' : "_self"
						}
					}
				]
			}
		}
		,
		{
			'caption' : "Stichting SOS", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=44",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "Zonnepanelen", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'popup' : {
				'items' : [
					{
						'caption' : "installatie op een pannendak", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=49",
							'target' : "_self"
						}
					}
					,
					{
						'caption' : "SDE subsidie", 
						'menu_item_color1' : "#2d5fa6", 
						'menu_item_color2' : "#7697c5", 
						'open' : {
							'url' : "index.php?p=48",
							'target' : "_self"
						}
					}
				]
			}
		}
		,
		{
			'caption' : "Klimaatactiviteit", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=50",
				'target' : "_self"
			}
		}
		,
		{
			'caption' : "Klimaatfestival", 
			'menu_item_color1' : "TRANSPARENT", 
			'menu_item_color2' : "#6f88af", 
			'open' : {
				'url' : "index.php?p=42",
				'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, padding, size, class1, class2, color1, color2, parent, url, target, z) {
        this.caption = caption;
        this.id = menu_items.length;
        menu_items[this.id] = this;
        this.parent = parent;
        this.pos = pos;
        this.align = align;
        this.padding = padding;
        this.size = size;
        this.class1 = class1;
        this.class2 = class2;
        this.color1 = (color1 == 'TRANSPARENT')? '' : color1;
        this.color2 = (color2 == 'TRANSPARENT')? '' : color2;
        this.url = url;
        this.target = target;

        if (color1 == 'TRANSPARENT')
        {
                document.write('<div ID="div' + this.id + '" STYLE="position:absolute; left:' + pos[0] + 'px; top:' + pos[1] + 'px; z-index:' + z + '; 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 + '" onmouseover="menu_mouseover(' + this.id + ')" onmouseout="menu_mouseout(' + this.id + ')" onclick="menu_click(' + this.id + ')" align="' + align + '"><div style="padding-' + align + ':' + padding + 'px;">' + caption + '</div></td></tr></table></div>');
        } else
        {
                document.write('<div ID="div' + this.id + '" STYLE="position:absolute; left:' + pos[0] + 'px; top:' + pos[1] + 'px; z-index:' + z + '; 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 + '"><div style="padding-' + align + ':' + padding + 'px;">' + caption + '</div></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, z) {
        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 item_padding = (sub.items[i].menu_item_padding)? sub.items[i].menu_item_padding : menu_item_padding;
                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, item_padding, size, item_class1, item_class2, item_color1, item_color2, parent, url, target, z);
                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, z+1);
                        y += item_height;
                } else {
                        if (sub.items[i].popup) create_submenu(sub.items[i].popup, x, y+item_height+inter_level_offset, z+1);
                        x += item_width;
                }
        }
}


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

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();
        }
}