//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
//--------------------------------------------------------------------------------
// Menu class
// needs event.js, detect.js, utility.js

// menu_items object structure

// menu_items                   - array    - main menu / sub-menu objects
// menu_items[].divider         - string   - optional html/text for main menu item divider - other objects are ignored
// menu_items[].text            - string   - html/text for main menu item
// menu_items[].func            - function - handler when main menu item is clicked
// menu_items[].sub             - array    - sub-menu objects
// menu_items[].sub[].divider   - string   - optional html/text for sub-menu item divider - other objects are ignored
// menu_items[].sub[].text      - string   - html/text for sub-menu item
// menu_items[].sub[].func      - function - handler when sub-menu item is clicked
// menu_items[].sub[].keep_open - boolean  - optional flag to keep sub-menu open after item is clicked

function class_menu (menu_items) {

	// self-referencing variable used for event handlers and class functions
	var objThis = this;

	this.menu_items = menu_items;
	this.menu_div = null;

	// hilite or unhilite the given item type based on the given flag
	function hilite_item (type, item, flag) {
		if (type == 'main' || type == 'sub')
			if (flag) {
				item.style.zIndex = 1;
				item.style.backgroundColor = 'blue';
				item.style.color = 'white';
				item.style.cursor = 'pointer';
			} //if
			else {
				item.style.zIndex = 0;
				item.style.backgroundColor = 'transparent';
				item.style.color = 'black';
				item.style.cursor = 'default';
			} //else
		else {}
	} //function

	// hilite the main item and show the applicable submenu
	function show_submenu (main_div) {
		hilite_item ('main', main_div, true);
		var sub_div = main_div.firstChild.nextSibling;
		if (sub_div) {
			sub_div.style.visibility = 'visible';
			sub_div.style.top = main_div.offsetHeight - parseInt (main_div.style.borderTopWidth) +
				parseInt (main_div.style.paddingTop) - (is_msie_pre8 ? 0 : parseInt (main_div.style.paddingBottom)) + 'px';
			sub_div.style.left = -parseInt (main_div.style.borderLeftWidth) + 'px';
			sub_div.style.width = Math.max (sub_div.offsetWidth,
				main_div.offsetWidth + parseInt (main_div.style.borderLeftWidth) - parseInt (main_div.style.borderRightWidth)) -
				parseInt (sub_div.style.borderLeftWidth) - parseInt (sub_div.style.borderRightWidth) + 'px';
		} //if
	} //function

	// unhilite the main item and hide the applicable submenu
	function hide_submenu (main_div) {
		hilite_item ('main', main_div, false);
		var sub_div = main_div.firstChild.nextSibling;
		if (sub_div)
			sub_div.style.visibility = 'hidden';
	} //function

	// hide all the submenus
	function hide_submenu_all() {
		var main_divs = objThis.menu_div.childNodes;
		for (var i=0;  i<main_divs.length;  i++)
			hide_submenu (main_divs[i]);
	} //function

	// create and return the menu div
	this.create = function () {

		// create the menu div
		this.menu_div = document.createElement ('div');
		if (is_opera)
			this.menu_div.style.display = 'inline';
		this.menu_div.style.font = '12px verdana,arial,helvetica';
		this.menu_div.style.padding = '3px 0 3px 0';

		// create all the main menu items
		for (var i=0;  i<this.menu_items.length;  i++) {

			// create the main menu item div
			var main_div = document.createElement ('div');
			this.menu_div.appendChild (main_div);

			main_div.style.position = 'relative';
			main_div.style.display = 'inline';
			main_div.style.padding = '3px 8px';
			if (this.menu_items[i].divider) {
				set_child (this.menu_items[i].divider, main_div, '&nbsp;');
				continue;
			} //if
			main_div.style.border = '0px solid black';
			if (i < this.menu_items.length - 1)
				main_div.style.borderRightWidth = 0;
			main_div.style.color = 'black';
			main_div.style.textAlign = 'left';
			main_div.style.whiteSpace = 'nowrap';
			set_child (this.menu_items[i].text, main_div, '&nbsp;');
			hookEvent (main_div, 'click', this.menu_items[i].func ? this.menu_items[i].func : function(){});
			hookEvent (main_div, 'click', cancelEvent);
			main_div.onmouseover = function() { show_submenu (this); }
			main_div.onmouseout = function() { hide_submenu (this); }

			// create the submenu div if needed
			if (this.menu_items[i].sub.length) {

				var sub_div = document.createElement ('div');
				main_div.appendChild (sub_div);

				sub_div.style.position = 'absolute';
				sub_div.style.visibility = 'hidden';
				sub_div.style.border = '1px solid black';
				sub_div.style.fontWeight = 'normal';
				sub_div.style.backgroundColor = 'white';

			} //if

			// create all the submenu items
			for (var j=0;  j<this.menu_items[i].sub.length;  j++) {

				// create the submenu item span
				var sub_span = document.createElement ('span');
				sub_div.appendChild (sub_span);
				if (this.menu_items[i].sub[j].divider) {
					set_child (this.menu_items[i].sub[j].divider, sub_span, '&nbsp;');
					hookEvent (sub_span, 'click', cancelEvent);
					continue;
				} //if
				sub_span.style.display = 'block';
				sub_span.style.padding = '2px 5px';
				sub_span.style.color = 'black';
				sub_span.style.whiteSpace = 'nowrap';
				set_child (this.menu_items[i].sub[j].text, sub_span, '&nbsp;');
				hookEvent (sub_span, 'click', this.menu_items[i].sub[j].func ? this.menu_items[i].sub[j].func : function(){});
				if (!this.menu_items[i].sub[j].keep_open)
					hookEvent (sub_span, 'click', hide_submenu_all);
				hookEvent (sub_span, 'click', cancelEvent);
				sub_span.onmouseover = function() { hilite_item ('sub', this, true); }
				sub_span.onmouseout = function() { hilite_item ('sub', this, false); }

			} //for - submenu items

		} //for - main menu items

		return this.menu_div;

	} //function - method

} //function - class