// Global variables
var itemTitle   = new Array(); 
var itemContent = new Array(); 
var itemExpand  = new Array(); 
var numItem     = 0;        
var borderSize  = 0;
var expandId    = "expandDiv";
var closeImage  = "<img src=../image/green_right_arrow.gif border=0> ";
var openImage   = "<img src=../image/red_right_arrow.gif border=0> ";
var layerWidth  = 300;
var layerIndent = 0;
var layerHeight = "<P>";
var layerColor  = "FFFFFF";
var ns4         = (document.layers)? true:false;
var ie4         = (document.all)? true:false;

/*----------------------------------------------------------------*
 * add_expand() - add one expandable item to the layer            *
 *----------------------------------------------------------------*/
function add_expand(title, content) {
  itemTitle[numItem]   = title;
  itemContent[numItem] = content;
  itemExpand[numItem]  = 0;
  numItem++;

} 

/*----------------------------------------------------------------*
 * set_closeImage() - set image for closed status                 *
 *----------------------------------------------------------------*/
function set_closeImage(url) {
  closeImage = "<img src=" + url + " border=0>";
}


/*----------------------------------------------------------------*
 * set_openImage() - set image for open status                    *
 *----------------------------------------------------------------*/
function set_openImage(url) {
  openImage = "<img src=" + url + " border=0>";
}

/*-----------------------------------------------------------------*
 * set_indent() - set indent for the second level to the first one *
 *-----------------------------------------------------------------*/
function set_indent(indent) {
  layerIndent = indent;
}

/*----------------------------------------------------------------*
 * set_height() - set height between first level and second level *
 *----------------------------------------------------------------*/
function set_indent(height) {
  layerHeight = height;
}

/*----------------------------------------------------------------*
 * create_expand() - create expandble layer                       *
 *----------------------------------------------------------------*/
function create_expand(width, height, left, top, border, bgcolor) {
  borderSize = border;
  layerWidth = width;
  layerColor = bgcolor;
  outWidth = width + borderSize;
  document.writeln('<STYLE>');
  document.write('#expandDiv {position:absolute; left:' + left + '; top:' + top + '; width:' + width + '; height:' + height + ';}');
  document.writeln('</STYLE>');
  document.writeln('<DIV ID="expandDiv">');
  document.writeln('<table border=0 cellspacing=8 cellpadding=' + borderSize + ' width=' + layerWidth + '><TR><TD bgcolor=green>');
  document.writeln('<table border=0 cellspacing=0 cellpadding=3 width=100% bgcolor=' + layerColor + '><TR><TD>');
  for (i = 0; i < numItem; i++) {
	document.writeln('<a href="javascript:toggle_expand(' + i + '); display_expand()">' + closeImage + itemTitle[i] + '</a><BR>');
  }
  document.writeln('</TD></TR></TABLE></TD></TR></TABLE>');
  document.writeln('</DIV>');
}


/*---------------------------------------------------------------*
 * toggle_expand() - Toggle an item's expanding attribute        *
 *---------------------------------------------------------------*/
function toggle_expand(num) {
  itemExpand[num] = itemExpand[num] ? 0 : 1;
}


/*---------------------------------------------------------------*
 * display_expand() - Redraw whole layer                         *
 *---------------------------------------------------------------*/
function display_expand() {

  var replaceText = "";

  // prepare table header
  replaceText += '<table border=0 cellspacing=8 cellpadding=' + borderSize + ' width=' + layerWidth + '><TR><TD bgcolor=green>';
  replaceText += '<table border=0 cellspacing=0 cellpadding=3 width=100% bgcolor=' + layerColor + '><TR><TD>';
  
  // prepare content
  for (i = 0; i < numItem; i++) {
	if (itemExpand[i] == 1) {
	  replaceText += "<a href=\"javascript:toggle_expand(" + i 
			+ "); display_expand()\">" + openImage + itemTitle[i] + "</a>" + layerHeight;
	  replaceText += "<table width=" + layerWidth + "><tr><td>";
      for (j = 0; j < layerIndent; j++) {
		replaceText += "&nbsp;";
	  }
	  replaceText += "</td><td>";
	  replaceText += itemContent[i] + "</td></tr></table>";
    }
    else {
	  replaceText += "<a href=\"javascript:toggle_expand(" + i + "); display_expand()\">" 
			+ closeImage + itemTitle[i] + "</a><BR>";
    }
  } 

  // prepare table end
  replaceText += "</TD></TR></TABLE></TD></TR></TABLE>";

  // replace the current content with the new prepared content
  if (ns4) {
    var lyr = document.layers[expandId].document;
    lyr.open();
    lyr.writeln(replaceText);
    lyr.close();
  }
  else {
	document.all[expandId].innerHTML = replaceText;
  }

} // end of function display_expand()