function TableTree_GenAddForm(prompt) {
	result="<form name='"+this.name+"_form'>";
	result+="<table border=1 bordercolordark=#eeeeee bordercolorlight=#000000 width=\"300\" height=\"300\" bgcolor=\"#eeeeee\" cellpadding=1 cellspacing=0>";
	result+="<tr><td valign=middle><table border=0 width=100%><tr><td align=left><b>"+prompt+"</b></td><td align=right><span id='"+this.name+"_popupmenu_default_close' style='cursor:hand'>x</span></td></tr></table>";
	result+="</td></tr>";
	result+="<tr><td valign=top>";
	result+="<table border=0 width=100%><tr valign=top><td width=20% align=right><b>名稱:</b></td><td width=80% align=left><input type=\"text\" name=\"xtitle\"></td></tr></table>";
	result+="<table border=0 width=100%><tr valign=top><td width=20% align=right><b>內容:</b></td><td width=80% align=left><textarea name='xcontent' rows=10 cols=25></textarea></td></tr></table>";
	result+="<table border=0 width=100%><tr valign=top><td width=100% height=40 align=center valign=middle><input type=\"button\" value=\" 確定 \" onclick=\"TableTree_AddDB('"+this.name+"')\"> <input type=\"button\" value=\" 取消 \" onclick=\"TableTree_CancelAddForm('"+this.name+"_display"+"')\"></td></tr></table>";
	result+="</td></tr>";
	result+="</table>";
	result+="</form>";
	
	this.SetLayerContent(this.name+"_display", result);
	this.ShowLayer(this.name+"_display");
}

function TableTree_GenEditForm(prompt) {
	result="<form name='"+this.name+"_form'>";
	result+="<table border=1 bordercolordark=#eeeeee bordercolorlight=#000000 width=\"300\" height=\"300\" bgcolor=\"#eeeeee\" cellpadding=1 cellspacing=0>";
	result+="<tr><td valign=middle><table border=0 width=100%><tr><td align=left><b>"+prompt+"</b></td><td align=right><span id='"+this.name+"_popupmenu_default_close' style='cursor:hand'>x</span></td></tr></table>";
	result+="</td></tr>";
	result+="<tr><td valign=top>";
	result+="<table border=0 width=100%><tr valign=top><td width=20% align=right><b>名稱:</b></td><td width=80% align=left><input type=\"text\" name=\"xtitle\" value=\""+this.treeinfo[this.active_id]+"\"></td></tr></table>";
	result+="<table border=0 width=100%><tr valign=top><td width=20% align=right><b>內容:</b></td><td width=80% align=left><textarea name='xcontent' rows=10 cols=25>"+this.content[this.active_id]+"</textarea></td></tr></table>";
	result+="<table border=0 width=100%><tr valign=top><td width=100% height=40 align=center valign=middle><input type=\"button\" value=\" 確定 \" onclick=\"TableTree_EditDB('"+this.name+"')\"> <input type=\"button\" value=\" 取消 \" onclick=\"TableTree_HideLayer('"+this.name+"_display"+"')\"></td></tr></table>";
	result+="</td></tr>";
	result+="</table>";
	result+="</form>";
	
	this.SetLayerContent(this.name+"_display", result);
	this.ShowLayer(this.name+"_display");
}

function TableTree_GenViewForm(prompt) {
	result="<form name='"+this.name+"_form'>";
	result+="<table border=1 bordercolordark=#eeeeee bordercolorlight=#000000 width=\"300\" bgcolor=\"#eeeeee\" cellpadding=1 cellspacing=0>";
	result+="<tr><td valign=middle><table border=0 width=100% height=30><tr><td align=left><b>"+prompt+"</b></td><td align=right><span id='"+this.name+"_popupmenu_default_close' style='cursor:hand'>x</span></td></tr></table>";
	result+="</td></tr>";
	result+="<tr><td valign=top>";
	result+=this.GenPropertyForm(this.active_id);
	result+="<table border=0 width=100%><tr valign=top><td width=100% height=40 align=center valign=middle><input type=\"button\" value=\" 確定 \" onclick=\"TableTree_HideLayer('"+this.name+"_display')\"></td></tr></table>";
	result+="</td></tr>";
	result+="</table>";
	result+="</form>";
	
	this.SetLayerContent(this.name+"_display", result);
	this.ShowLayer(this.name+"_display");
}

function TableTree_GenPropertyForm(id) {
	// replace <br> with space, then replace \n with <br>
	re=/<br>/g;
	t=this.content[id].replace(re, "");

	re=/<BR>/g;
	t=t.replace(re, "");

	re=/\n/g;
	t=t.replace(re, "<br>");

	result="";
	result+="<table border=0 width=100%><tr valign=top><td width=20% align=right><b>名稱:</b></td><td width=80% align=left>"+this.treeinfo[id]+"</td></tr></table>";
	result+="<table border=0 width=100%><tr valign=top><td width=20% align=right><b>內容:</b></td><td width=80% align=left>"+t+"</td></tr></table>";

	return result;
}

function TableTree_GenDelForm(prompt) {
	result="<form name='"+this.name+"_form'>";
	result+="<table border=1 bordercolordark=#eeeeee bordercolorlight=#000000 width=\"300\" bgcolor=\"#eeeeee\" cellpadding=1 cellspacing=0>";
	result+="<tr><td valign=middle><table border=0 width=100%><tr><td align=left><b>"+prompt+"</b></td><td align=right><span id='"+this.name+"_popupmenu_default_close' style='cursor:hand'>x</span></td></tr></table>";
	result+="</td></tr>";
	result+="<tr><td valign=top>";
	result+="<table border=0 width=100%><tr valign=top><td width=100% height=20 align=center>Delete "+this.treeinfo[this.active_id]+"</td></tr></table>";
	result+="<table border=0 width=100%><tr valign=top><td width=100% height=40 align=center valign=middle><input type=\"button\" value=\" 確定 \" onclick=\"TableTree_DelDB('"+this.name+"')\"> <input type=\"button\" value=\" 取消 \" onclick=\"TableTree_HideLayer('"+this.name+"_display"+"')\"></td></tr></table>";
	result+="</td></tr>";
	result+="</table>";
	result+="</form>";
	
	this.SetLayerContent(this.name+"_display", result);
	this.ShowLayer(this.name+"_display");
}

function TableTree_CancelAddForm(layer_id) {
	document.all(layer_id).style.visibility="hidden";
}

function TableTree_AddDB(name) {
	title=document.forms[__trees[name].name+"_form"].xtitle.value;
	content=document.forms[__trees[name].name+"_form"].xcontent.value;
	__trees[name].AddItem(__trees[name].active_id, title, content, 1);
	__trees[name].HideLayer(name+"_display");
	__trees[name].WriteTree();
}

function TableTree_EditDB(name) {
	title=document.forms[__trees[name].name+"_form"].xtitle.value;
	content=document.forms[__trees[name].name+"_form"].xcontent.value;
	__trees[name].EditItem(__trees[name].active_id, title, content);
	__trees[name].HideLayer(name+"_display");
	__trees[name].WriteTree();
}

function TableTree_DelDB(name, frmObj) {
	__trees[name].DeleteItem(__trees[name].active_id);
	__trees[name].HideLayer(name+"_display");
	__trees[name].WriteTree();
}

function TableTree_ShowLayer(layer_id) {
	document.all(layer_id).style.left=window.event.screenX;
	document.all(layer_id).style.top =document.body.scrollTop+window.event.clientY;
	document.all(layer_id).style.visibility="visible";
}

function TableTree_HideLayer(layer_id) {
	document.all(layer_id).style.visibility="hidden";
}

function TableTree_SetLayerContent(layer_id, content) {
	document.all(layer_id).innerHTML=content;	
}	

function TableTree_AddPopupMenuItem(type, id, prompt) {
	if (this.popup_menu[type]==null) 
		this.popup_menu[type]=new Array();
	//this.popup_menu[type][this.popup_menu[type].length]=new Object();
	//this.popup_menu[type][this.popup_menu[type].length-1].id=id;
	//this.popup_menu[type][this.popup_menu[type].length-1].prompt=prompt;	
	this.popup_menu[type][id]=new Object();
	this.popup_menu[type][id].id=id;
	this.popup_menu[type][id].prompt=prompt;		
}

function TableTree_GenPopupMenu(type) {
	menu="<table border=1 bordercolordark=#eeeeee bordercolorlight=#000000 width=\"150\" bgcolor=\"#eeeeee\" cellpadding=1 cellspacing=0>";
	menu=menu+"<tr height='15' valign='middle'><td id='"+type+"_close' align='right' style='cursor:hand'>x</td></tr>";
	for (i in this.popup_menu[type]) {
		menu=menu+"<tr height='30' valign='middle'>";
		menu=menu+"<td id='"+type+"_"+this.popup_menu[type][i].id+"' style='cursor:hand'>"+this.popup_menu[type][i].prompt+"</td>";
		menu=menu+"</tr>";	
	}
	menu=menu+"</table>";
	this.popup_menu_string[type]=menu;
	document.all(type).innerHTML=menu;	
}

function TableTree_BuildPopupMenu(type) {
	menu="<table border=1 bordercolordark=#eeeeee bordercolorlight=#000000 width=\"150\" bgcolor=\"#eeeeee\" cellpadding=1 cellspacing=0>";
	menu=menu+"<tr height='15' valign='middle'><td id='"+type+"_close' align='right' style='cursor:hand'>x</td></tr>";
	for (i in this.popup_menu[type]) {
		menu=menu+"<tr height='30' valign='middle'>";
		menu=menu+"<td id='"+type+"_"+this.popup_menu[type][i].id+"' style='cursor:hand'>"+this.popup_menu[type][i].prompt+"</td>";
		menu=menu+"</tr>";	
	}
	menu=menu+"</table>";
	this.popup_menu_string[type]=menu;
	//document.all(type).innerHTML=menu;	
}

function TableTree_ExpandTree(id) {
	var ss = document.all[this.name+"_img_"+id].src;
	if (ss.indexOf('m.gif') >= 0) {
		document.all[this.name+"_tb_"+id].style.display = 'none';
	  document.all[this.name+"_img_"+id].src = '/clientside/tabletree/images/p.gif';
	  this.node_status[id]=0;
	} else {
		if (document.all[this.name+"_tb_"+id]==null) return;
	  document.all[this.name+"_tb_"+id].style.display = 'block';
	  document.all[this.name+"_img_"+id].src = '/clientside/tabletree/images/m.gif';
		this.node_status[id]=1;
	}
}

function TableTree_ActivateItem(id) {
	//alert("activateItem:"+id);
	document.all(this.name+"_td_"+this.active_id).bgColor="";
	document.all(this.name+"_anchor_"+this.active_id).style.color="#000000";
	this.active_id=id;	
	document.all(this.name+"_td_"+id).bgColor="#6495ED";
	document.all(this.name+"_anchor_"+id).style.color="#FFFFFF";
}
	
function TableTree_ClickItem(id) {
	info=new Array();
	info=id.split("_");
	switch (info[1]) {
		case "img":	// click to expand or collapse tree
			this.ExpandTree(info[2]);
		break;
		
		case "anchor":	// click on an item
			this.ActivateItem(info[2]);
			if (window.event.button==2 && this.bCanEdit) {
				// right button
				window.event.cancelBubble=true;
				document.all(this.name+"_popupmenu_default").style.left=window.event.screenX;
				document.all(this.name+"_popupmenu_default").style.top =document.body.scrollTop+window.event.clientY;
				document.all(this.name+"_popupmenu_default").style.visibility="visible";
			}

			if (window.event.button==1) {
				if (document.all(this.name+"_popupmenu_default").style.visibility=="visible") 
					document.all(this.name+"_popupmenu_default").style.visibility="hidden";
			}
			this.WriteTree();
			return;
		break;
		
		case "popupmenu":
			document.all(this.name+"_popupmenu_default").style.visibility="hidden";
			document.all(this.name+"_display").style.visibility="hidden";
			switch (info[3]) {
				case "add":
					this.GenAddForm(this.popup_menu[this.name+"_popupmenu_default"]["add"].prompt);
				break;

				case "edit":
					this.GenEditForm(this.popup_menu[this.name+"_popupmenu_default"]["edit"].prompt);
				break;
				
				case "delete":
					this.GenDelForm(this.popup_menu[this.name+"_popupmenu_default"]["delete"].prompt);
				break;
				
				case "property":
					this.GenViewForm(this.popup_menu[this.name+"_popupmenu_default"]["property"].prompt);
				break;
				
				case "showproperty":
					this.bShowProperty=true;
					this.WriteTree();
				break;

				case "hideproperty":
					this.bShowProperty=false;
					this.WriteTree();
				break;
				
				case "serialize":
					this.SerializeTree();
				break;

				case "unserialize":
					this.UnSerializeTree();
				break;
				
				case "up":
					this.UpItem();
				break;
			}
		break;
	}
}

function TableTree_AddRoot(str, content, status) {
	index=this.treeinfo.length;
	this.treeinfo[index]=str;
	this.content[index]=content;
	this.node_status[index]=status;
	this.parent[index]=index;
	this.id++;
	return 0;
}

function TableTree_AddItem(parent_id, str, content, status) {
	newid=this.id;
	str=="" ? str="New Item "+newid : null;
	this.id++;
	if (this.tree[parent_id]==null) {
		this.tree[parent_id]=new Array();
	}
	this.tree[parent_id][this.tree[parent_id].length]=newid;
	this.treeinfo[newid]=str;
	this.content[newid]=content;
	this.node_status[newid]=status;
	this.parent[newid]=parent_id;

	if (this.rank[parent_id]==null) {
		this.rank[parent_id]=new Array();
	}
	
	this.attr[newid]=new Object();
	
	this.rank[parent_id][this.rank[parent_id].length]=newid;
	return newid;
}

function TableTree_EditItem(id, str, content) {
	this.treeinfo[id]=str;
	this.content[id]=content;
}

function TableTree_DeleteItem(id) {
	if (id==0) {
		alert("Root can't be deleted!");
		return;
	}
		
	// delete children first
	if (this.tree[id]!=null) {
		if (this.tree[id].length!=0) {
			for (i in this.tree[id]) {
				this.DeleteItem(this.tree[id][i]);
			}
		}
	}
	parent_id=this.parent[id];
	// remove current node from its parent's child list
	for (i in this.tree[parent_id]) {
		if (this.tree[parent_id][i]==id) {
			delete this.tree[parent_id][i];
			//this.tree[parent_id].length--;			
			break;
		}
	}
	
	// delete rank
	for (i in this.rank[parent_id]) {
		if (this.rank[parent_id][i]==id) {
			delete this.rank[parent_id][i];
			//this.tree[parent_id].length--;			
			break;
		}
	}

	delete this.treeinfo[id];
	delete this.content[id];
	delete this.node_status[id];
	delete this.tree[id];
	
	if (id==this.active_id) { 
		this.active_id=this.parent[id];
		this.ActivateItem(this.active_id);
		this.WriteTree();
	}	
}

function TableTree_WriteTree() {
	if (this.treeinfo.length==0) {
		alert("No root defined!");
		return;
	}
	this.genResult="<table border=1 bordercolor=black bordercolordark=white bordercolorlight=black cellPadding=0 cellSpacing=0 width=100%>\n";
	this.genResult+="<tr><td valign=top><br>\n";
	prefix=this.WriteRoot();
	if (this.tree!=null) {
		//alert(this.tree);
		if (this.tree.length>0) 
			this.WriteItem(0, prefix, "0",-1);
	}
	this.genResult+="<br></td></tr>";
	
	if (this.bShowProperty) {
		icon="<span id=\""+this.name+"_popupmenu_default_hideproperty\" style=\"cursor:hand\">Hide Property</span>";
	} else {
		icon="<span id=\""+this.name+"_popupmenu_default_showproperty\" style=\"cursor:hand\">Show Property</span>";
	}	
	this.genResult+="<tr><td align=right>"+icon+"</td></tr>";

	if (this.bShowProperty) {
		this.genResult+="<tr><td valign=top bgcolor=#eeeeee><br>";
		this.genResult+=this.GenPropertyForm(this.active_id);
		this.genResult+="<br></td></tr>";
	}	
	
	this.genResult+="</table>\n";
	
	if (this.renderArea=="") {
		alert("Please specify rendering area");
	} else {
		//alert(this.renderArea);
		document.all(this.renderArea).innerHTML=this.genResult;
	}
	this.ActivateItem(this.active_id);
}

function TableTree_WriteRoot() {
	this.genResult+="<table border=0 cellPadding=0 cellSpacing=0>\n";
	prefix="<td valign=top>"+this.blank+"</td>\n";
	if (this.tree[0]!=null) {
		concat="";
		if (this.tree[0].length!=0) {
			if (this.node_status[0]) 
				icon=this.openicon;
			else
				icon=this.closedicon;			
			concat="<td valign=top><span style=\"cursor:hand\">"+this.img(this.name+"_img_0", icon)+"</span></td>\n";		
		} else {
			concat="<td valign=top>"+this.img(this.name+"_img_0",this.leaficon)+"</td>\n";
		}
	} else {
		icon=this.openicon;
		concat="<td valign=top>"+this.img(this.name+"_img_0",this.leaficon)+"</td>\n";	
	}	
	this.genResult=this.genResult+"<tr>\n"+prefix+concat+"<td valign=top id=\""+this.name+"_td_0\"><span id=\""+this.name+"_anchor_0\" style=\"cursor:hand\" oncontextmenu=\"return false;\">"+this.treeinfo[0]+"</span></td>\n</tr>\n";
	this.genResult=this.genResult+"</table>\n";

	return ("<td valign=top>"+this.blank);
}

function TableTree_img(id, src) {
	return "<img id="+id+" border=0 src=\"/clientside/tabletree/images/"+src+"\" width=19 height=21>";
}

function TableTree_WriteItem(pid, prefix, parentids, parentislast) {
	if (parentislast==1)
		prefix+="<td valign=top>"+this.blank;
	else if (parentislast==0)
		prefix+="<td valign=top>"+this.ii;
		
	if (this.node_status[pid]) 
		the_style="style='display:block'";
	else
		the_style="style='display:none'";

	this.genResult=this.genResult+"<table id='"+this.name+"_tb_"+pid+"' border=0 cellPadding=0 cellSpacing=0 width=100% "+the_style+">\n<tr><td valign=top>\n";
	
	//alert(this.rank[pid]);
	for (i in this.rank[pid]) {
		childid=this.rank[pid][i];

		this.genResult=this.genResult+"    ";
		this.genResult=this.genResult+"<table border=0 cellPadding=0 cellSpacing=0>\n";
		if ((this.tree[pid].length-1)==i) {
			concat="<td valign=top>"+this.ll+"</td>";
			parentislast=1;
		} else {
			concat="<td valign=top>"+this.tt+"</td>";
			parentislast=0;
		}
		
		if (this.tree[childid]!=null) {
			if (this.tree[childid].length!=0) {				
				if (this.node_status[childid]) 
					icon=this.openicon;
				else
					icon=this.closedicon;	
				this.genResult=this.genResult+"<tr>"+prefix+concat+"<td valign=top><span style=\"cursor:hand\">"+this.img(this.name+"_img_"+childid,icon)+"</span>\n</td>\n";
			}
		} else {
			this.genResult=this.genResult+"<tr>"+prefix+concat+"<td valign=top>"+this.img(this.name+"_img_"+childid, this.leaficon)+"</td>";
		}
		
		if (this.active_id==childid) {
			bgcolor=" bgcolor='#6495ED'";
		} else {
			bgcolor="";
		}
		
		if (this.curStatus=="rename" && childid==this.active_id) {
			this.genResult=this.genResult+"<td id='"+this.name+"_td_"+childid+"' valign=top"+bgcolor+"><span id='"+this.name+"_anchor_"+childid+"' style='cursor:hand' oncontextmenu='return false'><input type='text' name='rename_text' value='"+this.treeinfo[childid]+"'> <input type='button' value=' OK ' onclick='renameItem(\""+childid+"\",\"ok\")'> <input type='button' value=' Cancel ' onclick='renameItem(\""+childid+"\",\"cancel\")'></span></td></tr>\n";
		} else {
			this.genResult=this.genResult+"<td id='"+this.name+"_td_"+childid+"' valign=top"+bgcolor+"><span id='"+this.name+"_anchor_"+childid+"' style='cursor:hand' oncontextmenu='return false'>"+this.treeinfo[childid]+"</span></td></tr>\n";
		}
		
		this.genResult=this.genResult+"</table>\n";
		if (this.tree[childid]!=null)
			if (this.tree[childid].length!=0) 
				this.WriteItem(childid, prefix, parentids+"_"+childid, parentislast);
	}
	this.genResult=this.genResult+"</table>\n";				
}

function TableTree_UpItem() {
	parent_id=this.parent[this.active_id];
	for (i in this.rank[parent_id]) {
		if (this.rank[parent_id][i]==this.active_id) {
			curRank=i;
			rank=i;
			break;
		}	
	}

	curRank--;
  bSwitched=false;
	do {
		if (curRank < 0) break;
		if (this.rank[parent_id][curRank]!=null) {
			x=this.rank[parent_id][curRank];
			//alert(x);
			this.rank[parent_id][curRank]=this.active_id;
			this.rank[parent_id][rank]=x;
			bSwitched=true;
		}	
		curRank--;
	} while (!bSwitched);		
	//alert(this.rank[parent_id]);
	if (bSwitched) { 
		this.WriteTree();
	}	
}

function TableTree_SerializeTree2() {
	// prepare new id after serialize
	newid=0;
	newids=new Array();
	
	for (i in this.treeinfo) {
		newids[i]=newid;
		newid++;
	}

	result="";
	for (i in this.treeinfo) {
		//result=result+"id="+i+this.fdl+"newid="+newids[i]+this.fdl+"parent_id="+this.parent[i]+this.fdl+"new_parent_id="+newids[this.parent[i]]+this.fdl+"info="+this.treeinfo[i]+this.rdl;
		result=result+"id="+newids[i]+this.fdl+"parent_id="+newids[this.parent[i]]+this.fdl+"title="+this.treeinfo[i]+this.fdl+"content="+this.content[i]+this.rdl;		
	}	
	this.serialized=result;
	
	return result;
}

function TableTree_SerializeTree() {
	// prepare new id after serialize
	newid=0;
	this.serialized_ids=new Array();

	this.serialized_ids[0]=0;
	this.serialized_id=1;
		
	// Root
	this.serialized="id%=%0"+this.fdl+"parent_id%=%0"+this.fdl+"title%=%"+this.treeinfo[0]+this.fdl+"content%=%"+this.content[0]+this.rdl;
	this.SerializeTraverse(0);	

	//alert(this.serialized);
	return result;
}

function TableTree_SerializeTraverse(id) {
	for (i in this.rank[id]) {
		childid=this.rank[id][i];
		newid=this.serialized_id;
		
		this.serialized_id++;
		this.serialized_ids[childid]=newid;
		
		//alert(this.parent[childid]);
		newparentid=this.serialized_ids[this.parent[childid]];
		
		this.serialized+="id%=%"+newid+this.fdl+"parent_id%=%"+newparentid+this.fdl+"title%=%"+this.treeinfo[childid]+this.fdl+"content%=%"+this.content[childid]+this.rdl;
		if (this.tree[childid]!=null)
			if (this.tree[childid].length!=0) 
				this.SerializeTraverse(childid);
	}	
}
	
function TableTree_UnSerializeTree() {
	this.treeinfo		=new Array();
	this.content		=new Array();
	this.tree				=new Array();
	this.node_status=new Array();
	this.parent			=new Array();
	this.rank				=new Array();
	this.id=0;
	
	records=new Array();
	records=this.serialized.split(this.rdl);
	for (i in records) {
		record=records[i];
		if (record=="") continue;
		fields=new Array();
		info=new Array();
		fields=record.split(this.fdl);
		for (j in fields) {
			re=/(.+)(%=%)(.*)/g;
			index=fields[j].replace(re, "$1");
			value=fields[j].replace(re, "$3");
			info[index]=value;
			//alert(index+"="+value);
		}	
		this.treeinfo[info["id"]]=info["title"];
		this.parent[info["id"]]=info["parent_id"];
		if (this.tree[info["parent_id"]]==null) 
			this.tree[info["parent_id"]]=new Array();
		if (info["id"]!=0)
			this.tree[info["parent_id"]][this.tree[info["parent_id"]].length]=info["id"];	

		if (this.rank[info["parent_id"]]==null) 
			this.rank[info["parent_id"]]=new Array();
		if (info["id"]!=0)
			this.rank[info["parent_id"]][this.rank[info["parent_id"]].length]=info["id"];
		
		this.node_status[info["id"]]=1;
		this.content[info["id"]]=info["content"];
		//alert(this.content[info["id"]]);
		delete fields;
		delete info;
		this.id++;
	}			
	//alert(this.tree[0]);
	this.WriteTree();
}

var __trees=new Array();
function TableTree(name, renderArea) {
	this.name				=name;
	this.treeinfo		=new Array();
	this.content		=new Array();
	this.tree				=new Array();
	this.node_status=new Array();
	this.parent			=new Array();
	this.rank				=new Array();
	this.attr				=new Array();		// For item customized attributes

	this.openicon="m.gif";
	this.closedicon="p.gif";
	this.leaficon="c.gif";

	this.id=0;
	this.blank="<img border=0 src=\"/clientside/tabletree/images/blank.gif\" width=19 height=21>";
	this.ii   ="<img border=0 src=\"/clientside/tabletree/images/i.gif\" width=19 height=21>";
	this.tt   ="<img border=0 src=\"/clientside/tabletree/images/t.gif\" width=19 height=21>";
	this.ll   ="<img border=0 src=\"/clientside/tabletree/images/l.gif\" width=19 height=21>";

	this.genResult="";
	this.active_id=0;
	this.curStatus="";

	this.renderArea=renderArea;
	this.bShowProperty=true;
		
	this.AddRoot=TableTree_AddRoot;
	this.AddItem=TableTree_AddItem;
	this.EditItem=TableTree_EditItem;
	this.WriteTree=TableTree_WriteTree;
	this.WriteRoot=TableTree_WriteRoot;
	this.WriteItem=TableTree_WriteItem;
	this.ExpandTree=TableTree_ExpandTree;
	this.ActivateItem=TableTree_ActivateItem;
	this.GenAddForm=TableTree_GenAddForm;
	this.GenDelForm=TableTree_GenDelForm;
	this.GenEditForm=TableTree_GenEditForm;
	this.GenViewForm=TableTree_GenViewForm;
	this.GenPropertyForm=TableTree_GenPropertyForm;
	this.ShowLayer=TableTree_ShowLayer;
	this.HideLayer=TableTree_HideLayer;
	this.SetLayerContent=TableTree_SetLayerContent;
	this.CancelAddForm=TableTree_CancelAddForm;
	this.SerializeTree=TableTree_SerializeTree;
	this.UnSerializeTree=TableTree_UnSerializeTree;
	this.UpItem=TableTree_UpItem;
	this.SerializeTraverse=TableTree_SerializeTraverse;
	
	this.DeleteItem=TableTree_DeleteItem;
	//this.SerializeTree=TableTree_SerializeTree;
	this.ClickItem=TableTree_ClickItem;
	this.img=TableTree_img;		
	
	// Serialize related;
	this.fdl="###";		// field delimiter;
	this.rdl="@@@";		// record delimiter
	this.serialized;
	this.serialized_ids;
	this.serialized_id;
	this.bCanEdit=true;
	
	// menu related
	this.popup_menu=new Array();
	this.popup_menu_string=new Array();
	this.AddPopupMenuItem=TableTree_AddPopupMenuItem
	this.GenPopupMenu=TableTree_GenPopupMenu;
	this.BuildPopupMenu=TableTree_BuildPopupMenu;

	//create default menu
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "add", "Add Item");
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "edit", "Edit Item");
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "delete", "Delete Item");
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "property", "Property");
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "up", "Up");
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "serialize", "Serialize Tree");
	this.AddPopupMenuItem(this.name+"_popupmenu_default", "unserialize", "Un-serialize Tree");
	
	this.GenPopupMenu(this.name+"_popupmenu_default");
		
	// extended handler
	this.ClickItemExt=null;
	
	__trees[this.name]=this;
}

function TableTree_GetElement() {
	re=/(.+)(_)(.+)(_)(.+)/g;			// e.g., tree1_td_1, tree1_anchor_2
	r=window.event.srcElement.id.match(re);
	//alert(window.event.srcElement.id);
	if (r!=null) {
		var info;
		info=new Array();
		info=window.event.srcElement.id.split("_");
		if (__trees[info[0]]!=null) 
			__trees[info[0]].ClickItem(window.event.srcElement.id);	
	}
}