//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
// rollup class
// needs utility.js

function class_rollup (arg_header, arg_body, arg_footer, arg_parent) {

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

	// instant or smooth rollup
	this.instant_rollup = true;

	// the top-level HTML DOM object
	this.htmlDomObject = null;

	// rollup elements for accessing attributes/styles
	// use with caution - understand the code first!
	//
	//                    main_div
	//               /        |       \
	//     header_table   body_div   footer_div
	//           |
	//       header_tr
	//        /     \
	// header_td   toggle_td
	//                 |
	//            toggle_span
	//
	this.main_div = null;
	this.header_table = null;
	this.header_tr = null
	this.header_td = null;
	this.toggle_span = null;
	this.toggle_td = null;
	this.body_div = null;
	this.footer_div = null;

	// displayed html to expand/collapse the rollup
	var collapse_html = '\u25B2';
	var expand_html = '\u25BC';

	// set the displayed collapse html
	this.set_collapse_html = function (html) {
		collapse_html = (html ? html : '\u25B2');
		if (this.main_div.style.display != 'none')
			this.toggle_span.innerHTML = collapse_html;
	} //function - method

	// set the displayed expand html
	this.set_expand_html = function (html) {
		expand_html = (html ? html : '\u25BC');
		if (this.main_div.style.display == 'none')
			this.toggle_span.innerHTML = expand_html;
	} //function - method

	// set the header html/object
	this.set_header = function (header) {
		set_child (header, this.header_td, ' ');
	} //function - method

	// set the body html/object
	this.set_body = function (body) {
		set_child (body, this.body_div, ' ');
	} //function - method

	// set the footer html/object
	this.set_footer = function (footer) {
		set_child (footer, this.footer_div, ' ');
	} //function - method

	// create the main div and attach it to the parent
	this.main_div = this.htmlDomObject = document.createElement ('div');
	if (arg_parent)  arg_parent.appendChild (this.htmlDomObject);
	this.main_div.style.border = '1px solid black';

	// create the rollup toggle span
	this.toggle_span = document.createElement ('span');
	this.toggle_span.style.border = '1px solid transparent';
	this.toggle_span.onclick = function() { objThis.toggle(); }
	this.toggle_span.onmouseover = function() { this.style.borderColor='black'; this.style.cursor='pointer'; }
	this.toggle_span.onmouseout = function() { this.style.borderColor='transparent'; this.style.cursor='default'; }
	this.toggle_span.innerHTML = collapse_html;

	// create the header table and td's
	this.header_table = create_table (1, 2);
	this.header_table.cellSpacing = '0px';
	this.header_table.cellPadding = '3px';
	this.header_table.style.backgroundColor = 'LightSteelBlue';
	this.header_table.style.borderBottom = '1px solid gray';
	this.header_table.style.width = '100%';
	this.header_tr = this.header_table.firstChild.firstChild;
	this.header_td = this.header_tr.firstChild;
	this.set_header (arg_header);
	this.toggle_td = this.header_td.nextSibling;
	this.toggle_td.align = 'right';
	this.toggle_td.style.width = '1%';
	this.toggle_td.appendChild (this.toggle_span);

	// create the body div
	this.body_div = document.createElement ('div');
	this.body_div.style.overflow = this.body_div.style.overflowx = 'auto';
	this.set_body (arg_body);

	// create the footer div
	this.footer_div = document.createElement ('div');
	this.footer_div.style.backgroundColor = 'LightSteelBlue';
	this.footer_div.style.borderTop = '1px solid gray';
	this.footer_div.style.padding = '3px';
	this.set_footer (arg_footer);

	// attach the rollup element nodes to the main div node
	this.main_div.appendChild (this.header_table);
	this.main_div.appendChild (this.body_div);
	this.main_div.appendChild (this.footer_div);

	// information for rollup timers in expand/collapse
	var timer = {
		'id' : null,
		'delta' : function (height) { return Math.max (4, Math.min (8, height/32)); },
		'interval' : 8,
		'status' : 'expanded'};

	// body_div height (default is '' = full height)
	var body_height = '';

	// set the body height
	this.set_body_height = function (height) {
		this.body_div.style.height = body_height = height;
	} //function - method

	// get the body height without displaying it (for expanding)
	function get_body_height() {
		if (body_height)  return parseInt (body_height);
		objThis.body_div.style.visibility = 'hidden';
		var height_old = objThis.body_div.style.height;
		objThis.body_div.style.height = body_height;
		var height_full = objThis.body_div.offsetHeight;
		objThis.body_div.style.height = height_old;
		objThis.body_div.style.visibility = 'visible';
		return height_full;
	} //function

	// slide show data - used in collapse
	this.slide_show = {
		'i' : 0,       // current slide
		'slides' : []  // slides
	} // slide_show

	// expand the rollup using a timer
	this.expand = function() {
		if (timer.id)  clearInterval (timer.id);
		this.body_div.style.display = 'block';
		this.body_div.style.overflow = this.body_div.style.overflowx = 'hidden';
		this.toggle_span.style.borderStyle = 'dotted';
		this.toggle_span.innerHTML = collapse_html;
		var height = (timer.status == 'collapsing' ? this.body_div.offsetHeight : 0);
		var height_full = get_body_height();
		var delta = (this.instant_rollup ? height_full : timer.delta (height_full));
		var interval = (this.instant_rollup ? 0 : timer.interval);
		timer.status = 'expanding';
		timer.id = setInterval (function() {
			height = Math.min (height_full, height + delta);
			if (height < height_full)
				objThis.body_div.style.height = height + 'px';
			else {
				objThis.body_div.style.overflow = objThis.body_div.style.overflowx = 'auto';
				objThis.toggle_span.style.borderStyle = 'solid';
				objThis.body_div.style.height = body_height;
				timer.status = 'expanded';
				clearInterval (timer.id);
			} //else
		}, interval);
	} //function - method

	// collapse the rollup using a timer - do slide show if slides exist
	this.collapse = function() {
		if (timer.id)  clearInterval (timer.id);
		this.body_div.style.display = 'block';
		this.body_div.style.overflow = this.body_div.style.overflowx = 'hidden';
		this.toggle_span.style.borderStyle = 'dotted';
		this.toggle_span.innerHTML = expand_html;
		var height = this.body_div.offsetHeight;
		var height_full = height;
		var delta = (this.instant_rollup ? height_full : timer.delta (height_full));
		var interval = (this.instant_rollup ? 0 : timer.interval);
		timer.status = 'collapsing';
		timer.id = setInterval (function() {
			height = Math.max (0, height - delta);
			if (height > 0)
				objThis.body_div.style.height = height + 'px';
			else {
				objThis.body_div.style.overflow = objThis.body_div.style.overflowx = 'auto';
				objThis.toggle_span.style.borderStyle = 'solid';
				objThis.body_div.style.display = 'none';
				timer.status = 'collapsed';
				clearInterval (timer.id);
				if (objThis.slide_show.slides.length > 0) {
					objThis.slide_show.i = (objThis.slide_show.i + 1) % objThis.slide_show.slides.length;
					objThis.set_body (objThis.slide_show.slides[objThis.slide_show.i]);
					objThis.expand();
				} //if
			} //else
		}, interval);
	} //function - method

	// toggle the rollup
	this.toggle = function() {
		if (timer.status == 'collapsing' || timer.status == 'collapsed')
			this.expand();
		else
			this.collapse();
	} //function - method

	// show the footer
	this.show_footer = function() {
		this.footer_div.style.display = 'block';
	} //function - method

	// hide the footer
	this.hide_footer = function() {
		this.footer_div.style.display = 'none';
	} //function - method

}  //function - class