<?php ## version 001
?>
<script language="JavaScript" type="text/javascript">
// variables
var nav_tree = new Array();
var nav_node = new Array();
var nav_type = new Array();
var outmsg="";
// Global settings
var img_dir = "./IMAGE/NATREE";
var img_hsize = 40;
var img_vsize = 10;
var img_spacer = "nav_spacer.gif";
var img_plus = "nav_plus.gif";
var img_spacer = "nav_minus.gif";
var img_box = "nav_minus.gif";
var img_leadline = new Array();
var leadline=new Array();
// option: 1 => display/hide root node
// option: 2 => display/hide icon
// option: 4 => display/hide description
// option: 8 => static/dynamic tree
// option: 16 => show expand all/collapse all options
// option: 32 => no indentation
// option: 64 => no leadline
//--------------------------------------------------------------
function DefineTree(root_node,
div_id, option,
indent_width, indent_height)
{
this.root = root_node; // parent node
this.div_id = div_id, // division id to output display
this.option = option; // tree option
this.indent_width = indent_width; // indentation
this.indent_height = indent_height; // indent_height
}
function CreateTree(root_node,
div_id, option,
indent_width, indent_height)
{ var tid = nav_tree.length;
nav_tree[tid] = new DefineTree(root_node,
div_id, option,
indent_width, indent_height);
return tid;
}
//--------------------------------------------------------------
// Define type of node
function DefineType(tname, img_prefix)
{ this.name = tname;
this.img_open = img_prefix+"_open.gif";
this.img_close = img_prefix+"_close.gif";
this.img_expand = img_prefix+"_expand.gif";
this.img_collapse = img_prefix+"_collapse.gif";
// preload image
var temp_image = new Image(img_hsize, img_vsize);
temp_image.src = this.img_open;
var temp_image = new Image(img_hsize, img_vsize);
temp_image.src = this.img_close;
var temp_image = new Image(img_hsize, img_vsize);
temp_image.src = this.img_expand;
var temp_image = new Image(img_hsize, img_vsize);
temp_image.src = this.img_collapse;
}
function CreateType(tname, img_prefix)
{ var tid = nav_type.length;
nav_type[tid] = new DefineType(tname, img_prefix);
DefineType(tname, img_prefix);
return tid;
}
//--------------------------------------------------------------
// Define the node
function DefineNode(parent, type, state, header, content)
{ this.parent = parent; // parent node
this.state = state; // expand/collapse state
this.detail = state; // content state: open or close
this.type = type; // icon type
this.header = header; // header text
this.content = content; // content text
this.peer = -1; // peer id
this.child = -1; // first child id
this.state_orig = state; // whether it has toggle
}
function CreateNode(parent, type, state, header, content)
{ var id = nav_node.length;
nav_node[id] = new DefineNode(parent, type, state, header, content);
// add to parent
nav_node[id].peer = -1;
if ( parent >= 0)
{ // first child
if ( nav_node[parent].child < 0)
{ nav_node[parent].child = id;
}
// nope, so has to follow the link till last node
else
{ last_node = nav_node[parent].child;
while (nav_node[last_node].peer >= 0)
last_node = nav_node[last_node].peer;
nav_node[last_node].peer = id;
}
}
return id;
}
//--------------------------------------------------------------
function output(msg)
{ outmsg += msg;
}
//--------------------------------------------------------------
function WriteMenu(tree_id)
{ DisplayTree(tree_id, 0);
}
function PrintMenu(tree_id)
{
// Get cookie first
DisplayTree(tree_id, 1);
}
function DisplayTree(tree_id, display)
{ var nav_option;
var root_node;
outmsg="";
// Prepare tree data
root_node = nav_tree[tree_id].root;
nav_option = nav_tree[tree_id].option;
if ( nav_option & 1)
level = -1;
else
level = 0;
// Write expand/collapse all option
if ( nav_option & 16 )
WriteActionAll(tree_id);
// Print out the tree
WriteSubTree(tree_id, root_node, level);
// now print it out
if ( display == 0)
{
if (!(document.getElementById || document.all || document.layers))
{ alert ('Your browser is not supported!');
}
// output data
element = document.getElementById(nav_tree[tree_id].div_id);
element.innerHTML = outmsg;
}
else
document.write(outmsg);
}
//----------------------------------------------------------------
function WriteSubTree(tree_id, node_id, leaf_level )
{
var child_id;
var indent_width, indent_height, node_type, option;
if ( node_id < 0)
return;
// extract node info
indent_width = nav_tree[tree_id].indent_width;
indent_height = nav_tree[tree_id].indent_height;
option = nav_tree[tree_id].option;
node_type = nav_node[node_id].type;
node_static = option & 8;
var level = leaf_level;
if ( option & 1)
level --;
// Write this node data first, don't write main node
if ( level >= -1 )
{
// use table for breaking up column
output('<table border="0" cellspacing="0" cellpadding="0" width=100%>');
//--- determine leader line
// no leader line
if ( option & 64 )
{ if (option & 32)
indent = 1;
else
indent = level * indent_width + 1;
output('<tr><td width='+indent+'px>');
output('<img src='+img_spacer+
' width=' +indent +
' height='+indent_height+'>');
}
else
{ indent = leadline.length * indent_width + 1;
output('<tr><td width='+indent+'px>');
PushLead( nav_node[node_id].peer, 0);
PrintLead();
PopLead();
}
//--- display open/collapse action icon
if ( nav_node[node_id].child >= 0 )
{ // determine action
if (nav_node[node_id].state == "open")
img_src = nav_type[node_type].img_collapse;
else
img_src = nav_type[node_type].img_expand;
// display it
output('<td width='+indent_width+'>');
// don't displah javascript if static
if ( ! node_static)
output('<a href=\'javascript:ToggleState('
+ node_id + ',' + tree_id+ ')\'>');
// display image
output('<img src="'+img_src+'" border=0>');
if ( ! node_static)
output('<\/a>');
} // if child >=0;
else
output("<TD WIDTH=1>");
//--- display item state
if ( option & 2)
output('<TD WIDTH=1px ALIGN=LEFT>');
else
{
output('<TD WIDTH=1px ALIGN=LEFT>');
if ( nav_node[node_id].detail == "open")
img_src = nav_type[node_type].img_open;
else
img_src = nav_type[node_type].img_close;
if ( node_static )
output('<img src="'+img_src+'" border=0>')
else
{
output('<a href=\'javascript:ToggleDetail('+ node_id +
',' + tree_id+ ')\'>');
output('<img src="'+img_src+'" border=0><\/a>')
}
}
//--- display header
output("<td id=navs_tree class="+tree_id+">"+nav_node[node_id].header);
//--- display detail
if ( nav_node[node_id].detail == "open" &&
nav_node[node_id].content != "" &&
! (option & 4) )
{ output("<TR><TD COLSPAN=3 height=100%>");
if ( ! (option & 64) )
{ // lead line for this node
PushLead( nav_node[node_id].peer, 1 );
// determine to print lead line for child node
if ( nav_node[node_id].state == "open")
PushLead( nav_node[node_id].child, 1 );
// print the lead line
PrintLead();
// retrieve child lead line
if ( nav_node[node_id].state == "open")
PopLead();
// retrieve node lead line
PopLead();
}
output("<TD id=navs_content class="+tree_id+">");
output(nav_node[node_id].content);
}
output("<\/table>");
}
//--- Run through all of the parent's child nodes
if (nav_node[node_id].state == "open" || level < 0)
{
child_id = nav_node[node_id].child;
while (child_id >= 0)
{ if ( level >= 0 )
PushLead( nav_node[node_id].peer, 1 );
leaf_level=leaf_level+1;
WriteSubTree(tree_id, child_id, leaf_level);
child_id = nav_node[child_id].peer;
if ( level >= 0 )
PopLead();
} // for each node
}
} // function WriteSubTree
function ToggleState(node_id, tree_id)
{ // toggle the state
ChangeState(node_id, "toggle");
// Rewrite the menu
timeout_id = setTimeout('WriteMenu('+tree_id+')', 50)
}
function ChangeState(node_id, state)
{ if (state == "open")
nav_node[node_id].state = "open";
else if (state == "close")
{ nav_node[node_id].state = "close";
nav_node[node_id].detail = "close";
}
else if (state == "toggle")
{ // toggle the state
if (nav_node[node_id].state == "open")
{ nav_node[node_id].state = "close";
nav_node[node_id].detail = "close";
}
else
nav_node[node_id].state = "open";
}
SaveCookie();
}
function ToggleDetail(node_id, tree_id)
{ // toggle the state
if (nav_node[node_id].detail == "open")
nav_node[node_id].detail = "close";
else
nav_node[node_id].detail = "open";
// Rewrite the menu
timeout_id = setTimeout('WriteMenu('+tree_id+')', 50)
}
//--------------------------------------------------------------
function WriteActionAll(tree_id)
{
// Display collapse all, expand all icon
output('<TABLE id=navs_action class='+tree_id+'>');
output('<TR><TD WIDTH=50%>');
output('<a href=\'javascript:ChangeAll("open",'
+ tree_id + ', -1)\'>');
output('<img src='+img_plus+' border="0"><\/a>Expand All');
output('<TD WIDTH=50%><a href=\'javascript:ChangeAll("close",'
+ tree_id+', -1)\'>');
output('<img src='+img_minus+' border="0"><\/a>Collapse All');
output('<TR><TD><TD>');
output('</TABLE>');
}
function ChangeAll(state, tree_id, node_id)
{ var start_node = 0;
// change current nod
if ( node_id < 0 )
{ node_id = nav_tree[tree_id].root;
start_node = 1;
}
// Check hide root node
if ( nav_tree[tree_id].option & 1 && node_id == nav_tree[tree_id].root )
nav_node[node_id].state = "open";
else
nav_node[node_id].state = state;
// Change child nood
if ( nav_node[node_id].child >= 0 )
ChangeAll(state, tree_id, nav_node[node_id].child);
// Change peer nood
if ( nav_node[node_id].peer >= 0 )
ChangeAll(state, tree_id, nav_node[node_id].peer);
// refresh node if all is done
if ( start_node == 1 )
{ WriteMenu(tree_id);
// Save cookie
SaveCookie();
}
}
//----- LEADER LINE ---------------------------------------------
function PushLead(peer, child)
{
if ( peer == -1)
type_no = 0 + child;
else
type_no = 2 + child;
lid = leadline.length;
leadline[ lid ]= (type_no);
}
function PopLead()
{
leadline.length --;
}
function PrintLead()
{
aout="";
for (var i=1; i < leadline.length; i ++)
aout += "<SPAN class='leadline" + leadline[i] +"'> </SPAN>";
output(aout);
}
//--------------------------------------------------------------
function SaveCookie()
{
var cookie = ",";
for (var i = 0; i < nav_node.length; i ++)
{ if ( nav_node[i].state != nav_node[i].state_orig )
cookie = cookie + i + ",";
}
document.cookie=cookie;
}
//--------------------------------------------------------------
function GetCookie()
{
var cookie_array = document.cookie.split(",");
for (var i = 1; i < cookie_array.length - 1 ; i ++)
{ pos = parseInt(cookie_array[i]);
if (pos < nav_node.length )
{
if (nav_node[pos].state == "open" )
nav_node[pos].state = "close"
else
nav_node[pos].state = "open";
}
}
}
</script>