// sh_panels.js
// Contains code for generating panels (tabbed show/hide)
// and animated show/hide style div control.
// Last Updated: 26 June 2006, 16:46



/***
 * ShowHide()
 * Created: 25 June 2006, 19:24
 * Purpose: simple show/hide script with some animation.
 * Argument(s):	sName = name of object variable being assigned
 *		sTarget = id of div element that is expanding/contracting
 *		sControls = id of div containing expand/contract controls
 *		iMaxHeight = height (in px) of div once expanded
 *		iMinHeight = height (in px) of div once contracted
 *		iFrameDelay = milliseconds to elapse between animation "frames"
 *		iSmoothness = the higher the number, the smoother  (usually about 20)
 *		bTextLink = true if a text link should be used, false for a button
 *		sExpandText = what the expand control should say
 *		sContractText = what the contract control should say
 * Compatibility: IE 6, FF 1.5, Opera 8, Netscape 8
 **/

// check for ie (for padding issues)
var ie = (navigator.userAgent.indexOf("IE") != -1)?true:false;

function ShowHide(sName, sTarget, sControls, iMaxHeight, iMinHeight, iFrameDelay, iSmoothness, bTextLink, sExpandText, sContractText) {
	this.name = sName;
	this.target = document.getElementById(sTarget);
	this.control_div = document.getElementById(sControls);
	this.smoothness = iSmoothness;
	this.frame_delay = iFrameDelay;
	this.target_min_height = iMinHeight;
	this.target_max_height = iMaxHeight;
	this.expand_text = sExpandText;
	this.contract_text = sContractText;

	// control var, don't edit!
	this.max_int = this.target_max_height + this.smoothness;

	// set initial expand control...
	this.text_link = bTextLink;
	if (this.text_link) {
		// text link
		this.control_div.innerHTML = '<a href="javascript:'+this.name+'.expand();">'+this.expand_text+'</a>';
	}
	else {
		// button link
		this.control_div.innerHTML = '<input type="button" value="'+this.expand_text+'" onclick="javascript:'+this.name+'.expand();" />';
	}

	// defining object functions
	this.expand = grow;
	this.contract = shrink;
}

function grow() {
	// "disable" controls for growing/shrinking
	if (this.text_link) {
		this.control_div.innerHTML = '<span style="font-size:8pt;">&nbsp;</span>';
	}
	else {
		this.control_div.innerHTML = '<input type="button" value="Expanding ..." disabled="disabled" />';
	}
	// get current height in px, and add portion to it
	var cur_height = this.target.style.height.split("px");
	var int_height = parseInt(cur_height[0]);
        if (int_height < this.target_max_height) {
		// add portion of height
		this.target.style.height = parseInt(int_height + ((this.max_int - int_height)/this.smoothness)) + "px";
                setTimeout(this.name+".expand()",this.frame_delay)
        }
	else {
		// we're done adding height, display controls again
		if (this.text_link) {
			this.control_div.innerHTML = '<a href="javascript:'+this.name+'.contract();">'+this.contract_text+'</a>';
		}
		else {
			this.control_div.innerHTML = '<input type="button" value="'+this.contract_text+'" onclick="javascript:'+this.name+'.contract();" />';
		}
	}
}

function shrink() {
	// same as above, but opposite operations
	if (this.text_link) {
		this.control_div.innerHTML = '<span style="font-size:8pt;">&nbsp;</span>';
	}
	else {
		this.control_div.innerHTML = '<input type="button" value="Contracting ..." disabled="disabled" />';
	}
	var cur_height = this.target.style.height.split("px");
	var int_height = parseInt(cur_height[0]);
        if (int_height > this.target_min_height) {
		// subtract portion of height
		this.target.style.height = parseInt(int_height - (int_height/this.smoothness)) + "px";
                setTimeout(this.name+".contract()",this.frame_delay)
        }
	else {
		if (this.text_link) {
			this.control_div.innerHTML = '<a href="javascript:'+this.name+'.expand();">'+this.expand_text+'</a>';
		}
		else {
			this.control_div.innerHTML = '<input type="button" value="'+this.expand_text+'" onclick="javascript:'+this.name+'.expand();" />';
		}
	}
}



/******************************************
 * PanelSet()
 * Created: 26 June 2006, 13:26
 * Purpose: show/hide for set of "panels"
 * Argument(s):	sName = name of object variable being assigned
 *		sControls = id of div containing panels
 *		aPanelID = array of panel ids to be in the panelset
 *			   [example - 'new Array("panel_id1","panel_id2")' is a valid argument.]
 *		aPanelNames = array of panel names to display in the actual tabs
 *			      array length must coincide with the previous argument's array length
 *		sActiveClassName = CSS classname to assign to an active panel
 *		sInactiveClassName = CSS classname to assign to an inactive panel
 * Compatibility: IE 6+, FF 1.5+, Opera 8.5+
 **/



function PanelSet(sName, sControls, aPanelID, aPanelNames, sActiveClassName, sInactiveClassName) {
	this.name = sName;
	this.pcontrol_div = document.getElementById(sControls);
	this.panel_array = aPanelID;
	this.panel_name_array = aPanelNames;
	this.active_classname = sActiveClassName;
	this.inactive_classname = sInactiveClassName;

	this.showPanel = func_showPanel;
	this.updateControls = func_updateControls;
}

// Hides/Shows panel
function func_showPanel (panel_id) {
	for (var i=0; i<this.panel_array.length; i++) {
		if (this.panel_array[i] == panel_id) {
			document.getElementById(this.panel_array[i]).style.display = 'block';
		}
		else {
			document.getElementById(this.panel_array[i]).style.display = 'none';
		}
	}
	this.updateControls();
}

// Updates panel controls
// (style change to distinguish which panel is active)
function func_updateControls () {
	this.pcontrol_div.innerHTML = '';
	for (var i=0; i<this.panel_array.length; i++) {
		if (document.getElementById(this.panel_array[i]).style.display == 'block') {
			this.pcontrol_div.innerHTML += '<div class="'+this.active_classname+'"><img src="'+images_a[i]+'" height="25" /></div>';
		}
		else {
			this.pcontrol_div.innerHTML += '<div class="'+this.inactive_classname+'"><a href="javascript:'+this.name+'.showPanel(\''+this.panel_array[i]+'\');"><img src="'+images_b[i]+'" onmouseover="this.src=\''+images_a[i]+'\';" onmouseout="this.src=\''+images_b[i]+'\';" height="25" /></a></div>';
		}
	}
}