var openImg = new Image();
openImg.src = "../pictures/outline_minus.gif";
var closedImg = new Image();
closedImg.src = "../pictures/outline_plus.gif";

if (document.images) 


function tn( branch ) //toggle node state - expand/collapse by making it visible or invisible
{
	if ( document.getElementById( branch ) != null )
	{
		var objBranch = document.getElementById( branch ).style;
		
		if ( ( objBranch.display == "block" ) || ( objBranch.display == "" ) )
		{   objBranch.display = "none"; }
		else
		{   objBranch.display = "block"; }
	}
}

function ti( img ) // toggle image between different images for each state
{
	objImg = document.getElementById( img );

	if ( objImg != null )
	{
		if( objImg.src.indexOf('/pictures/outline_plus.gif') > -1 )
		{	objImg.src = openImg.src; }
		else
		{	objImg.src = closedImg.src; }
	}
} 

function expandNode( node, itemHeaderStr )
{
	if ( document.getElementById( node ) != null )
	{
		var objBranch = document.getElementById( node ).style;
		objBranch.display="block";
	}

	var objImg = document.getElementById( itemHeaderStr );

	if ( objImg != null )
	{ objImg.src = openImg.src; }

}

function collapseNode( node, itemHeaderStr )
{
	if ( document.getElementById( node ) != null )
	{
		var objBranch = document.getElementById( node ).style;
		objBranch.display="none";
	}
	
	var objImg = document.getElementById( itemHeaderStr );

	if ( objImg != null )
	{
		objImg.src = closedImg.src;
	}

}

function expandCollapseNode( expand, itemStr, itemHeaderStr )
{
	if ( expand )
	{
		expandNode(	itemStr, itemHeaderStr );
	}
	else
	{
		collapseNode( itemStr, itemHeaderStr );
	}
}


function writeExpandAllHeader( id )
{
	document.writeln('<span class="t"');
	document.write(' onclick="expandCollapseAllCategories();');
	document.write(' swapBothImages('+"'"+id+"');"+'"');
	document.write(' onMouseOver="hiLite('+"'"+ id+"', 'ECButtonHot' );"+'"');
	document.write(' onMouseOut="hiLite('+"'"+ id+"', 'ECButtonCold' );"+'"');
	document.write(" return true"+'">');
	document.write('<img src="/images/outline_plus.gif" id="'+id+'"');
	document.write('alt="Click here to Expand/Collapse All Categories"');
	document.write('border="0" height="23" width="23">&nbsp<u>Expand/Collapse All Categories</u></A></SPAN>');
} 

function hiLite( imgName, imgObjName ) // mouseover/rollover effect 
{
	if (document.images) 
	{
		document.images[ imgName ].src = eval( imgObjName + ".src");
	}
}



/*
	Code for handling Expanding and collapsing all nodes


*/
	
var expand = 1;
var collapse = 2;
var currentState = expand;


// ----- Swap the image for the Expand All headers

function swapToggleImage( img, id )
{
	objImg = document.getElementById(img);

	if ( objImg != null )
	{
		if(objImg.src.indexOf('/images/outline_plus.gif')>-1)
		{
			if (id == img)
			{
				objImg.src = CollapseButtonHot.src;
			}
			else
			{
				objImg.src = CollapseButtonCold.src;
			}
			
			ECButtonHot = CollapseButtonHot;
			ECButtonCold = CollapseButtonCold;
		}
		else
		{
			if (id == img)
			{
				objImg.src = ExpandButtonHot.src;
			}
			else
			{
				objImg.src = ExpandButtonCold.src;
			}
			
			ECButtonHot = ExpandButtonHot;
			ECButtonCold = ExpandButtonCold;
		}
	}
}

function swapBothImages(id)	 // swap Expand the images for both top and bottom "expand all" headers
{
	swapToggleImage("bottom", id );
	swapToggleImage("top", id );
}

function expandCollapseAllCategories() // toggles the expand/collapse state of all nodes and images
{ 
	if ( currentState == expand )
	{
		setNodeStyleProperty( 'SPAN', 'b', 'none' );
        changeAllImages( 'IMG', 'i', false );
		currentState = collapse;
	}
	else
	{
		setNodeStyleProperty( 'SPAN', 'b', 'block' );
        changeAllImages( 'IMG', 'i', true );
        currentState = expand;
	}
}

// Note: I may meld the next two functions together.

/*  
	function changeAllImages sets all image source to either the open or closed image
			 tType (a string) is the tag type, usually "IMG" for images
			 cID (a string) is the class ID
			 setImageToOpen is a boolean denoting whether the caller wants the open image or the closed image\
*/

function changeAllImages( tType, cID, setImageToOpen )  
{  
	numElements = document.getElementsByTagName( tType ).length;
		
	var aElements = document.getElementsByTagName( tType );

	for ( index = 0; index < numElements; index++ ) 
	{
		if ( aElements[ index ].className == cID )
		{
            if ( setImageToOpen )
			{
				aElements[ index ].src = openImg.src;
			}
			else
			{
				aElements[ index ].src = closedImg.src;
			}
		}
	}
   
} 

/*
	function setNodeStyleProperty sets the style.display property
			tType (a string) is the tag type - for the purposes of an outline this is usually either "SPAN" or "DIV"
  			cID (a string) is the class ID
			property (a string) is what style the caller wishes to set the style to, usually either "block" or "none"
*/

function setNodeStyleProperty( tType, cID, property ) 
{   // tType is the Tag type, cID is the class ID, property is the property to set
	numElements = document.getElementsByTagName( tType ).length;
		
	var aElements = document.getElementsByTagName( tType );

	for ( index = 0; index < numElements; index++ ) 
	{
		if ( aElements[ index ].className == cID )
		{
			aElements[ index ].style.display = property;
		}
	}
}




