/*
	function Menu		(caption, id, orientation, itemStyle, menuStyle, menuBodyStyle, menuProperty)
		gethtml;
		show;
		
	function MenuItem	(caption, url, target, id, itemStyle, itemProperty)
		addItem;
		gethtml;
		show (targetTag);
		
	function Property	(mode)
	mode : MenuItemStyle, MenuStyle, MenuBodyStyle;
		set (key, val);
		get (key) > val/false;
		clear ();
		toString (opcode, separate, contentBegin, contentEnd) > string;
		
*/
//---------------------------------------------------------------------------
//- Menu Item----------------------------------------------------------------
//---------------------------------------------------------------------------

function propertySet(key, value){
	var i, l = this.key.length;
	for (i=0; i<=l - 1; i++){
		if (this.key [i] == key){
			this.val [i] = value;
			return;
		}
	}
	this.key [l] = key;
	this.val [l] = value;
	return;
}

function propertyGet(key){
	var i, l = this.key.length;
	for (i=0; i<=l - 1; i++){
		if (this.key [i] == key){
			return this.val [i];
		}
	}
	return false;
}

function propertyClear(){
	this.key.length = 0;
	this.val.length = 0;
	return;
}
function propertyToString(opcode, separate, invertedComma, invertedCommaEnd){
	var i, l = this.key.length;
	var result = "";
	if (!opcode) opcode = ":";
	if (!separate) separate = ";";
	if (!invertedComma){
		for (i=0; i<=l - 1; i++){
			result = result + this.key [i] + opcode + this.val [i] + separate;
		}
	}else{
		for (i=0; i<=l - 1; i++){
			result = result + this.key [i] + opcode + invertedComma + this.val [i] + invertedCommaEnd + separate;
		}
	}
	return result;
}
function Property(mode){
	this.key = new Array ();
	this.val = new Array ();
	this.set = propertySet;
	this.get = propertyGet;
	this.clear = propertyClear;
	this.toString = propertyToString;
	if (mode == "MenuItemStyle"){
		this.set ("background", "");
		this.set ("color", "blue");
//		this.set ("filter", "alpha (enabled=1, opacity=70)");
		this.set ("position", "");
		this.set ("visibility", "");
		this.set ("zIndex", "0");
		this.set ("overflow", "hidden");
		this.set ("cursor", "hand");
		this.set ("font-family", "courier");
		this.set ("font-size", "12px");
	}else if (mode == "MenuStyle"){
		this.set ("background", "");
		this.set ("color", "green");
//		this.set ("filter", "alpha (enabled=1, opacity=70)");
		this.set ("position", "");
		this.set ("visibility", "");
		this.set ("zIndex", "0");
		this.set ("overflow", "hidden");
		this.set ("cursor", "courier");
	}else if (mode == "MenuBodyStyle"){
		this.set ("position", "absolute");
		this.set ("visibility", "hidden");
		this.set ("left", "-10");
		this.set ("top", "-10");
		this.set ("padding", "5");
		this.set ("background", "#8399dc");
		this.set ("filter", "alpha (enabled=1, opacity=70)");
	}else if (mode == "MenuItemProperty"){
	}else if (mode == "MenuProperty"){
	}else if (mode == "MenuBodyProperty"){
	}
	return this;
}

function mShow(id, isInsert){
	var id = document.getElementById (id);
	this.html = this.gethtml ();
	if (isInsert){
		id.innerHTML = id.innerHTML + this.html;
	}else{
		id.innerHTML = this.html;
	}
}
function handleMenuBoxShow(boxId, valId, captionId, direction){
	menuBox = document.getElementById (boxId);
	textArea = document.getElementById (valId);
	captionBox = document.getElementById (captionId);

	menuBox.innerHTML = textArea.value;
	menuBoxHeight = menuBox.getBoundingClientRect ().bottom - menuBox.getBoundingClientRect ().top;
	menuBoxWidth = menuBox.getBoundingClientRect ().right - menuBox.getBoundingClientRect ().left;
//menuBox.style.visibility = "visible";
//textArea.style.visibility = "visible";	
//textArea.innerHTML = "ok";
//alert (menuBox.innerHTML);
	
	if (direction == "downward"){
		menuBox.style.left = captionBox.getBoundingClientRect ().left - 2;
		menuBox.style.top = captionBox.getBoundingClientRect ().bottom - 2;
	}else if (direction == "upward"){
		menuBox.style.left = captionBox.getBoundingClientRect ().left - 2;
		menuBox.style.top = captionBox.getBoundingClientRect ().top - menuBoxHeight - 2;
	}else if (direction == "rightward"){
		menuBox.style.left = captionBox.getBoundingClientRect ().right - 2;
		menuBox.style.top = captionBox.getBoundingClientRect ().top - 2;
	}else if (direction == "leftward"){
		menuBox.style.left = captionBox.getBoundingClientRect ().left - menuBoxWidth;
		menuBox.style.top = captionBox.getBoundingClientRect ().top - 2;
	}else if (direction == "mouse"){
		menuBox.style.left = event.clientX - 7;
		menuBox.style.top = event.clientY - 7;
	}else{
		menuBox.style.left = captionBox.getBoundingClientRect ().left - 2;
		menuBox.style.top = captionBox.getBoundingClientRect ().bottom - 2;
	}
	menuBox.style.visibility = "visible";
	menuBox.style.height = "";
//	alert (menuBox.outerHTML);
}
function handleMenuBoxHide(boxId, delayTime){
	var menuBox = document.getElementById (boxId);
	var a, b, c, d;
	var x, y;
	
	a = menuBox.getBoundingClientRect ().left;
	b = menuBox.getBoundingClientRect ().top;
	c = menuBox.getBoundingClientRect ().right;
	d = menuBox.getBoundingClientRect ().bottom;
	
	x = event.clientX;
	y = event.clientY;
	
	if (!delayTime){
		if (x < a + parseInt (menuBox.style.padding) || y < b + parseInt (menuBox.style.padding) || x > c - parseInt (menuBox.style.padding) || y > d - parseInt (menuBox.style.padding)){
			menuBox.style.visibility = "hidden";
		}
	}else{
		window.setTimeout ("if ("+x+" < "+a+" + parseInt (menuBox.style.padding) || "+y+" < "+b+" + parseInt (menuBox.style.padding) || "+x+" > "+c+" - parseInt (menuBox.style.padding) || "+y+" > "+d+" - parseInt (menuBox.style.padding)){menuBox.style.visibility = \"hidden\";}", delayTime);
	}
}
function mGetHTML(addSpace, isHorizonal){
	var i, obj, objVisibility, objHeight;
	var space = "&nbsp;";
	var menuBox, captionBox;
	
	objVisibility = "hidden";
	objHeight = "1px";
	if (addSpace){
		space = space + addSpace;
	}
	if (isHorizonal){
		space = "";
	}
	if (this.type == "MenuItem"){
		if (!isHorizonal){
			this.html = "<div " + this.property.toString ("=", " ", "'", "'") + " style='" + this.style.toString ().replace ("'", "") + "'>" + space + this.caption + "</div>";
		}else{
			this.html = "<div " + this.property.toString ("=", " ", "'", "'") + " style='" + this.style.toString ().replace ("'", "") + "'>" + this.caption + "</div>";
		}
	}else if (this.type == "Menu"){
		if (this.parent.orientation == "horizonal"){
			isHorizonal = true;
		}else{
			isHorizonal = false;
		}
		if (this.item.length < 1){
			return false;
		}
		if (this.orientation == "multiple"){
			objVisibility = "visible";
			objHeight = "";
			this.body = "<div id='" + this.property.get ("id") + "_body' style='visibility=" + objVisibility + ";overflow=hidden;width=;height=" + objHeight + ";'>";
			for (i=1; i<=this.item.length; i++){
				this.body = this.body + this.item [i - 1].gethtml ();
			}
			this.body = this.body + "</div>";
			obj = document.getElementById (this.property.get ("id") + "_textarea");
			menuBox = this.property.get ("id") + "_menubody";
			captionBox = this.title.property.get ("id");
			obj.value = this.body;
			this.title.property.set ("onmousedown",  "if (" +menuBox+ ".style.visibility != \"visible\"){handleMenuBoxShow (\""+menuBox+"\", \""+obj.id+"\", \""+captionBox+"\", \""+this.direction+"\");}");
			this.title.property.set ("onmouseover",  "if (" +menuBox+ ".style.visibility != \"visible\"){handleMenuBoxShow (\""+menuBox+"\", \""+obj.id+"\", \""+captionBox+"\", \""+this.direction+"\");}");
			this.title.property.set ("onmouseup",  "");
			this.html = "<div " + this.property.toString ("=", " ", "'", "'") + " style='" + this.style.toString () + "'>" + this.title.gethtml (space, isHorizonal);
			this.html = this.html + "</div>";

		}else if (this.position == "relative"){
			if (this.parent.orientation == "horizonal"){
				objVisibility = "visible";
				objHeight = "";
			}			
			this.body = "<div id='" + this.property.get ("id") + "_body' style='visibility=" + objVisibility + ";overflow=hidden;width=;height=" + objHeight + ";'>";
			for (i=1; i<=this.item.length; i++){
				this.body = this.body + this.item [i - 1].gethtml (space + this.space, isHorizonal);
			}
			this.body = this.body + "</div>";
			
			if (this.parent.orientation == "horizonal"){
				obj = document.getElementById (this.property.get ("id") + "_textarea");
				menuBox = this.parent.property.get ("id") + "_menubody";
				captionBox = this.title.property.get ("id");
				
				obj.value = this.body;
				this.title.property.set ("onmouseover",  "handleMenuBoxShow (\""+menuBox+"\", \""+obj.id+"\", \""+captionBox+"\", \""+this.direction+"\");");
			}
			this.html = "<div " + this.property.toString ("=", " ", "'", "'") + " style='" + this.style.toString () + "'>" + this.title.gethtml (space, isHorizonal);
			if (this.parent.orientation != "horizonal"){
				this.html = this.html + this.body;
			}
			this.html = this.html + "</div>";
		}else if (this.position == "absolute"){
			this.html = "<table " + this.property.toString ("=", " ", "'", "'") + " style='" + this.style.toString () + "'><tr>";
			for (i=1; i<=this.item.length - 1; i++){
				this.html = this.html + "<td valign=center align=left>" + this.item [i - 1].gethtml () + "</td><td valign=center align=center style='font-size:10px'>|</td>";
			}
			this.html = this.html + "<td valign=center align=left>" + this.item [i - 1].gethtml () + "</td>";
			this.html = this.html + "</tr></table>";
			
		}
	}
	return this.html;
}

function MenuItem(caption, url, target, id, itemStyle, itemProperty){
	this.show = mShow;
	this.gethtml = mGetHTML;
	this.type = "MenuItem";
	this.caption = "&nbsp;" + caption + "&nbsp;";
	this.parent = "";
	this.isTitle = false;
	if (!itemStyle){
		this.style = new Property ("MenuItemStyle");
	}else{
		this.style = itemStyle;
	}
	if (!itemProperty){
		idgen ++;
		this.property = new Property ();
		this.property.set ("id", this.type + "_" + idgen + "_" + id);
		this.property.set ("onmouseover", "this.style.background=\"blue\";this.style.color=\"yellow\";");
		this.property.set ("onmouseout", "this.style.background=\"" + this.style.get ("background") + "\";this.style.color=\"" + this.style.get ("color") + "\";");
		if (url){
			if (target){
				this.property.set ("onmousedown", "this.style.background=\"blue\";this.style.color=\"white\";window.open (\"" + url + "\", \"" + target + "\");");
			}else{
				this.property.set ("onmousedown", "this.style.background=\"blue\";this.style.color=\"white\";window.open (\"" + url + "\");");
			}
		}else{
			this.property.set ("onmousedown", "this.style.background=\"blue\";this.style.color=\"white\";");
		}
		this.property.set ("onmouseup", "this.style.background=\"" + this.style.get ("background") + "\";this.style.color=\"" + this.style.get ("color") + "\";");
		this.property.set ("onselectstart", "window.event.returnValue=false;");
		this.property.set ("id", this.type + "_" + idgen + "_" + id);
	}else{
		this.property = itemProperty;
	}
	this.html = "";
}

//---------------------------------------------------------------------------
//- Menu --------------------------------------------------------------------
//---------------------------------------------------------------------------

function Menu_addItem(MenuItem){
	var menubody;
	MenuItem.parent = this;
	this.item [this.item.length] = MenuItem;
//	if (this.itemStyle){
//		MenuItem.style = this.itemStyle;
//	}
	if (this.orientation == "horizonal"){
		menubody = this.property.get ("id") + "_menubody";
		menubodyA = menubody + ".getBoundingClientRect ().left > event.clientX";
		menubodyB = menubody + ".getBoundingClientRect ().top > event.clientY";
		menubodyC = menubody + ".getBoundingClientRect ().right < event.clientX";
		menubodyD = menubody + ".getBoundingClientRect ().bottom < event.clientY";
		MenuItem.title.property.set ("onmouseup", "");
		MenuItem.title.property.set ("onmouseout", "if ("+menubodyC+" || "+menubodyA+" || "+menubodyD+" || "+menubodyB+"){" + menubody + ".style.visibility = \"hidden\";}");
	}
	return true;
}
function Menu(caption, id, orientation, itemStyle, menuStyle, menuBodyStyle, menuProperty){
	this.show = mShow;
	this.gethtml = mGetHTML;
	this.addItem = Menu_addItem;
	this.type = "Menu";
	this.caption = caption;
	this.direction = "downward";
	this.orientation = orientation;		//vertical, horizonal, multiple
	
	if (!this.orientation){
		this.orientation = "vertical";
	}
	if (orientation == "horizonal"){
		this.position = "absolute";
	}else{
		this.position = "relative";
	}
	if (orientation == "multiple"){
		this.direction = "mouse";
	}
	this.parent = "";
	this.space = "&nbsp;";
	this.item = new Array ();
	this.itemStyle = itemStyle;
	this.style = menuStyle;
	if (!this.style){
		this.style = new Property ("MenuStyle");
	}

	this.property = menuProperty;
	if (!this.property){
		this.property = new Property ();
		this.property.set ("onselectstart", "window.event.returnValue=false;");
		if (this.orientation == "horizonal"){
			this.property.set ("align", "");
		}
	}
	if (id){
		this.property.set ("id", id);
	}else{
		this.property.set ("id", this.type + "_" + idgen);
		idgen ++;
	}
	
	this.bodyStyle = menuBodyStyle;
	if (!this.bodyStyle){
		this.bodyStyle = new Property ("MenuBodyStyle");
	}
	id_textarea = this.property.get ("id") + "_textarea";
	document.write ("<div style='z-index:0; position:absolute;left:1px;right:1px;'><textarea id='" + id_textarea + "' style='visibility=hidden; display:none;'>empty&nbsp;</textarea></div>");
	id_menubox = this.property.get ("id") + "_menubody";
	if (this.orientation == "multiple"){
		document.write ("<div onmouseout='handleMenuBoxHide (\""+id_menubox+"\", 500);' id='" + id_menubox + "' style='" + this.bodyStyle.toString () + "'>&nbsp;</div>");
	}else{
		document.write ("<div onmouseout='handleMenuBoxHide (\""+id_menubox+"\");' id='" + id_menubox + "' style='" + this.bodyStyle.toString () + "'>&nbsp;</div>");
	}
	if (this.caption){
		this.title = new MenuItem (caption, this.id);
		this.title.isTitle = true;
		this.title.caption = caption;
		this.title.parent = this;
		this.title.style.set ("color", this.style.get ("color"));
//		this.title.style.set ("color", "green");
		this.title.style.set ("background", this.style.get ("background"));
		this.title.property.set ("onmouseover", "this.style.cursor=\"hand\";this.style.color=\"red\"");
		this.title.property.set ("onmouseout", "this.style.color=\"" + this.style.get ("color") + "\"");
		this.title.property.set ("onmouseup", "if ("+this.property.get ("id") + "_body.style.visibility!=\"hidden\"){"+this.property.get ("id") + "_body.style.height=\"1px\";"+this.property.get ("id") + "_body.style.visibility=\"hidden\";}else{"+this.property.get ("id") + "_body.style.height=\"\";"+this.property.get ("id") + "_body.style.visibility=\"visible\";}");
		this.title.property.set ("onmousedown", "");
	}
}
var idgen = 0;
//===========================================================================