[Javascript] Fwd: Javascript menus

[Nick Wiltshire]

Hi all,

I'm a bit green with JavaScript and am having issues with IE6.

I've written some classes to do some basic JS menus. Why? I need the practise
working with JS scope, plus all the menus out there didn't meet my needs or
were way overpriced....or simply had too restrictive of a license.

This works fairly well in FF, Opera, Konqueror and IE7. IE6 however, renders
the top level, but the mouseovers dont work. Does anyone know how to fix it?

Any other tips, comments, criticisms welcome. Feel free to use the code if
 you like, consider it GPL :)

---------
function clsJSFlexMenu(id)
	{
	this.id = id;
	this.child_panel;
	this.arr_items = new Array();
	this.div = document.createElement("div");

	//set defaults...
	this.div.id = this.id;
	this.orientation = "Vertical";
	this.margin = 0;
	this.border_style = "Solid";
	this.border_width = 1;
	this.border_color = "#000000";
	this.padding = 10;
	this.background_color = "#3991FF";
	this.background_image = "";
	this.background_repeat = "";
	this.hide_delay = 1000;

	this.AppendItem = function(flex_menu_item)
		{
		this.arr_items[this.arr_items.length] = flex_menu_item;
		}

	this.Render = function(target_id)
		{
		var obj_target = document.getElementById(target_id);

		this.div.id = this.id;
		this.div.style.margin = this.margin + "px";
		this.div.style.borderStyle = this.border_style;
		this.div.style.borderWidth = this.border_width + "px";
		this.div.style.borderColor = this.border_color;
		this.div.style.padding = this.padding + "px";
		this.div.style.backgroundColor = this.background_color;
		this.div.style.backgroundImage = this.background_image;
		this.div.style.backgroundRepeat = this.background_repeat;

		this.div.obj_proxy = this;
		this.div.onmouseover = function()
			{
			this.obj_proxy.MouseOver();
			}
		this.div.onmouseout = function()
			{
			this.obj_proxy.MouseOut();
			}

		for(i in this.arr_items)
			{
			this.arr_items[i].Render(this.div, this);
			}

		obj_target.appendChild(this.div);
		}

	this.MouseOver = function()
		{
		}

	this.MouseOut = function()
		{
		//this.MenuTimer(1);
		}

	this.MenuTimer = function(bit)
		{
		if(bit)
			{
			//we need to kill existing timer or we lose the reference and it causes
issues...
			clearTimeout(this.timer);
			var proxy = this;
			this.timer = setTimeout(function(){proxy.Close()}, this.hide_delay);
			}
		else
			{
			clearTimeout(this.timer);
			}
		}

	this.PanelTimer = function(bit)
		{
		//doesn't do anything other than prevent an error
		}

	this.Close = function()
		{
		for(var i in this.arr_items)
			{
			this.arr_items[i].Hide();
			}
		}
	}

function clsJSFlexMenuPanel(id, obj_parent)
	{
	this.id = id;
	this.obj_parent = obj_parent;
	this.arr_items = new Array();
	this.div = document.createElement("div");
	this.state = 0;

	//set defaults...
	this.div.id = this.id;
	this.orientation = "Vertical";
	this.x_behaviour = "Right";
	this.y_behavior = "Down";
	this.x_offset = 0;
	this.y_offset = -25;
	this.margin = 0;
	this.border_style = "Solid";
	this.border_width = 1;
	this.border_color = "#000000";
	this.padding = 10;
	this.background_color = "#B9E0FF";
	this.background_image = "";
	this.background_repeat = "";

	this.obj_parent.child_panel = this;

	this.AppendItem = function(flex_menu_item)
		{
		this.arr_items[this.arr_items.length] = flex_menu_item;
		}

	this.Render = function()
		{
		this.div.style.margin = this.margin + "px";
		this.div.style.borderStyle = this.border_style;
		this.div.style.borderWidth = this.border_width + "px";
		this.div.style.borderColor = this.border_color;
		this.div.style.padding = this.padding + "px";
		this.div.style.backgroundColor = this.background_color;
		this.div.style.backgroundImage = this.background_image;
		this.div.style.backgroundRepeat = this.background_repeat;
		this.div.style.zIndex=999;
		this.div.style.position="absolute";
		this.div.style.display="block";

		this.div.obj_proxy = this;
		this.div.onmouseover = function()
			{
			this.obj_proxy.MouseOver();
			}
		this.div.onmouseout = function()
			{
			this.obj_proxy.MouseOut();
			}

		var e = this.obj_parent.div;
		var tmp_x = 0;
		var tmp_y = 0;

		if(this.x_behaviour == "Right")
			tmp_x += e.offsetWidth;

		if(this.y_behavior == "Down")
			tmp_y += e.offsetHeight;

		while(e.offsetParent)
			{
			tmp_x += e.offsetLeft;
			tmp_y  += e.offsetTop;
			e = e.offsetParent;
			}
		tmp_x += e.offsetLeft;
		tmp_y += e.offsetTop;

		tmp_x += this.x_offset;
		tmp_y += this.y_offset;

		this.div.style.top = tmp_y + "px";
		this.div.style.left = tmp_x + "px";

		for(i in this.arr_items)
			{
			this.arr_items[i].Render(this.div, this);
			}

		document.body.appendChild(this.div);
		}

	this.MouseOver = function()
		{
		this.MenuTimer(0);
		this.PanelTimer(0);
		}

	this.MouseOut = function()
		{
		this.MenuTimer(1);
		this.PanelTimer(1);
		}

	this.Hide = function()
		{
		for(var i in this.arr_items)
			{
			this.arr_items[i].Hide();
			}

		this.div.style.display = "none";
		}

	this.MenuTimer = function(bit)
		{
		this.obj_parent.MenuTimer(bit);
		}

	this.PanelTimer = function(bit)
		{
		if(bit)
			{
			//we need to kill existing timer or we lose the reference and it causes
issues...
			clearTimeout(this.timer);
			var proxy = this;
			this.timer = setTimeout(function(){proxy.Hide();}, 250);
			}
		else
			{
			clearTimeout(this.timer);
			this.obj_parent.PanelTimer(bit);
			}
		}
	}

function clsJSFlexMenuItem(id, obj_parent)
	{
	this.id = id;
	this.obj_parent = obj_parent;
	this.div = document.createElement("div");
	this.state = 0;

	//set defaults...
	this.div.id = this.id;
	this.margin = 0;
	this.border_style = "Solid";
	this.border_width = 1;
	this.border_color = "#000000";
	this.padding = 10;
	this.background_color = "#B9FFFF";
	this.background_image = "";
	this.background_repeat = "";
	this.text_align = "Left";

	this.font_color = "#000000";
	this.link_text = "Test";

	this.obj_parent.AppendItem(this);

	this.Render = function(obj_target)
		{
		while(this.div.childNodes.length)
			{
			this.div.removeChild(this.div.firstChild);
			}

		this.div.style.margin = this.margin + "px";
		this.div.style.borderStyle = this.border_style;
		this.div.style.borderWidth = this.border_width + "px";
		this.div.style.borderColor = this.border_color;
		this.div.style.padding = this.padding + "px";
		this.div.style.backgroundColor = this.background_color;
		this.div.style.backgroundImage = this.background_image;
		this.div.style.backgroundRepeat = this.background_repeat;
		this.div.style.textAlign = this.text_align;
		this.div.style.color = this.font_color;

		this.div.obj_proxy = this;
		this.div.onmouseover = function()
			{
			this.obj_proxy.MouseOver();
			}
		this.div.onmouseout = function()
			{
			this.obj_proxy.MouseOut();
			}

		this.div.appendChild(document.createTextNode(this.link_text));

		obj_target.appendChild(this.div);
		}

	this.Hide = function()
		{
		if(this.child_panel)
			this.child_panel.Hide();
		}

	this.MouseOver = function()
		{
		this.MenuTimer(0);
		this.obj_parent.PanelTimer(0);

		if(this.child_panel)
			{
			this.child_panel.Render();

			if(this.child_panel.timer)
				{
				this.child_panel.PanelTimer(0);
				}
			}
		}

	this.MouseOut = function()
		{
		this.MenuTimer(1);

		if(this.child_panel)
			this.child_panel.PanelTimer(1);
		}

	this.MenuTimer = function(bit)
		{
		this.obj_parent.MenuTimer(bit);
		}

	this.PanelTimer = function(bit)
		{
		if(bit)
			{}
		else
			{
			this.obj_parent.PanelTimer(bit);
			}
		}
	}

//create a test menu
flexmenu1 = new clsJSFlexMenu("flexmenu1");
	flexmenuitem1 = new clsJSFlexMenuItem("flexmenuitem1", flexmenu1);
		flexmenupanel1 = new clsJSFlexMenuPanel("flexmenupanel1", flexmenuitem1);
			flexmenuitem11 = new clsJSFlexMenuItem("flexmenuitem11", flexmenupanel1);
			flexmenuitem12 = new clsJSFlexMenuItem("flexmenuitem12", flexmenupanel1);
	flexmenuitem2 = new clsJSFlexMenuItem("flexmenuitem2", flexmenu1);
		flexmenupanel2 = new clsJSFlexMenuPanel("flexmenupanel2", flexmenuitem2);
			flexmenuitem21 = new clsJSFlexMenuItem("flexmenuitem21", flexmenupanel2);
				flexmenupanel21 = new clsJSFlexMenuPanel("flexmenupanel21",
flexmenuitem21);
					flexmenuitem211 = new clsJSFlexMenuItem("flexmenuitem211",
flexmenupanel21);
flexmenu1.Render("Navigation");

-------------------------------------------------------