function collapsableBox(obj)
{
	var  box = obj;
	var title = box.getElementsByTagName('h1')[0];

	//title.style.background = "#00d url('layoutimg/right-fade_white2.png') repeat-y right";


	var button = document.createElement('img');
	button.className = 'upbutton';
	button.src = '/js/collapsableBox/circleButtonUp.gif';
	if(window.event)
		button.style.marginTop = '-2px';
	else
		button.style.marginTop = '2px';
	title.appendChild(button);
	//<img src='/js/collapsableBox/circleButton.gif' class='upbutton'></img>


//	box.style.height = '9px';
//	var info = box.getElementsByTagName('span')[0];
//	info.style.display = 'none';
//	info.style.height = '0px';

	xAddEventListener(title, "click", collapse, false);

}

function expand(e)
{
	var info = e.target.parentNode;
	info.getElementsByTagName('div')[0].style.display = 'block';
	//info.style.height = null;

	var title = info.getElementsByTagName('h1')[0];
	title.style.borderBottom = 'solid 1px black';

	var button = e.target.parentNode.getElementsByTagName('img')[0];
	button.src = '/js/collapsableBox/circleButtonUp.gif';

	xRemoveEventListener(title, "click", expand, false);
	xAddEventListener(title, "click", collapse, false);
}

function collapse(e)
{
	//document.write("hello");
	var info = e.target.parentNode;
	info.getElementsByTagName('div')[0].style.display = 'none';
	//info.style.height = '0px';

	var title = info.getElementsByTagName('h1')[0];
	title.style.borderBottom = '0px';

	var button = e.target.parentNode.getElementsByTagName('img')[0];
	button.src = '/js/collapsableBox/circleButtonDown.gif';

	xRemoveEventListener(title, "click", collapse, false);
	xAddEventListener(title, "click", expand, false);



}



//============================================================
function collapsableBoxify(className)
{
	if(!className)
		className='collapsableBoxify';

	var boxArr = getElementsByClassName(className)

//document.write(boxArr.length);
	for(i=0;   i < boxArr.length;  i++)
	{
		collapsableBox(boxArr[i]);
	}
}