/*
  Call SetUpCollapseBoxes() on document load to... set up... collapse boxes.
  
  Uses classes to designate functional parts of the boxes.
	.collapse-box	= 		the wrapper containing the functional parts below
	.collapse-trigger =	the element which toggles the collapse state
	.collapse-opened =	items that are only to be displayed when the box is in its open state
	.collapse-closed = 	items that are only to be displayed when the box is in its closed state
*/
function SetUpCollapseBoxes()
{
	$(".collapse-box").each(SetUpCollapseBox);
}

function SetUpCollapseBox(index, elem)
{
	var collapseTriggers = $(elem).find(".collapse-trigger");

	elem.SetCollapsed = SetCollapsed;
	elem.collapsed = false;
	
	for (var i = 0; i < collapseTriggers.length; i++)
	{
		collapseTriggers[i].controlledElem = elem;
		collapseTriggers[i].onclick = ToggleCollapsed;
		collapseTriggers[i].onmouseover = TriggerOver;
		collapseTriggers[i].onmouseout = TriggerOut;
	}
}

function ToggleCollapsed()
{
	var elem = this.controlledElem;
	
	// Toggle collapsed state
	elem.SetCollapsed(!elem.collapsed);
}

function SetCollapsed(value)
{
	var elem = this;
	elem.collapsed = value;
	
	$(elem).find(".collapse-opened").css("display", elem.collapsed ? "none" : "block");
	$(elem).find(".collapse-closed").css("display", elem.collapsed ? "block" : "none");
}

function TriggerOver()
{
	$(this).find(".hoveritem").each(function(index,elem) { $(elem).addClass("cbOver") });
}

function TriggerOut()
{
	$(this).find(".hoveritem").each(function(index,elem) { $(elem).removeClass("cbOver") });;
}