function toggleSubdir( evt )
{
	var element = getTarget( evt );

	if( element.alt == 'expanded' )
	{
		element.src = '/pics/sys/s_folderCollapsed.png';
		element.alt = 'collapsed';

		var subList = getSubList( element );
		if( subList )
			subList.style.display = 'none';
	}
	else
	{
		element.src = '/pics/sys/s_folderExpanded.png';
		element.alt = 'expanded';

		var subList = getSubList( element );
		if( subList )
			subList.style.display = 'block';
	}
}

function getSubList( element )
{
	var node = element.nextSibling;
	while( node && node.nodeName != 'UL' )
		node = node.nextSibling;
	return node;
}

function getTarget( evt )
{
	evt = evt ? evt : event;
	return ( evt.target ? evt.target : evt.srcElement );
}

function createTreeview( element, offset )
{
	var node = element.firstChild;
	var subList;

	/* disable list-points and left padding for the first list */
	element.style.listStyle = 'none';
	if( !offset )
	{
		element.style.paddingLeft = '0';
		offset = 0;
	}

	while( node )
	{
		/* filter Lists-Items */
		if( node.nodeName == 'LI' )
		{

			/* ListItem has a SubList */
			if(( subList = getChildByTag( node, 'UL' ) ) != null )
			{
				var img = document.createElement('img');
				img.setAttribute('src', '/pics/sys/s_folderCollapsed.png');
				img.setAttribute('alt', 'collapsed');
				img.style.paddingRight = '4px';
				img.onmousedown = toggleSubdir;
				node.insertBefore( img, node.firstChild );

				subList.style.display = 'none';

				/* apply Treeview to subList */
				createTreeview( subList, offset + 1 );
			}
			else
				node.style.paddingLeft='20px';
		}

		node = node.nextSibling;
	}
}

function getChildByTag( element, tag )
{
	var node = element.firstChild;

	while( node )
	{
		if( node.nodeName == tag )
			return node;

		node = node.nextSibling;
	}

	return null;

}