using depth of node

Good day all,
I have a collapsible menu that displays a list of Merchants (onload). On
click the Merchant expands to display all the "Super" or Primary Locations.
On clicking a Primary location the SubLocations and Primary Location's
Terminals are displayed.
On clicking a SubLocation its Terminals, and possible child Locations are
displayed, and so-on.
I was originally using images (M,L,T) and a 'set' margin to show the
relationship of each element. I have recently decide to use text instead of
the images to increase download time (the menu can be thousands long if the
user types 'A' into a quick search box because the query returns any
merchant with the letter 'A' in its name.
Because I am calling the same template to match a child location, no matter
if its the first child of a primary location or if its the nth child of the
nth sub location, the arrows(text) makes it difficult to determine the
relationship. The only help I have for this is using the parent locations
name in the title attribute of the child location being looked at.
what I would like to do is use the depth of the current location and
multiply that number by a fixed margin width (possibly 5). this way each sub
location would be indented 5 more pixels than its parent, hopefully clearing
up some of the confusion.
below is the template for each child location:

<xsl:template name="ChildLocation">
		<xsl:param name="Parent"/>
			<xsl:for-each select="//Location[@locParentID=$Parent]">
				<xsl:sort select="@locName"/>
			<xsl:variable name="ChildParent" select="@locID"/>
			<UL class="clsHasKids">
				<LI class="3">
		<!-- i have taken the margin out of the LI element because I want to use
the depth to multiply by a fixed number (posibly 5px)-->
				<xsl:attribute name="style">margin-Left:8px</xsl:attribute>


					<xsl:text>   </xsl:text>
					<span class="marker" id="Arrow"
onclick="javascript:if(this.innerText=='&#8594;')this.innerText='&#8595;';
else this.innerText='&#8594;'">&#8594;</span>
					<span id="{generate-id()}"
onclick="parent.right.GetDetails('L',{@locID})" class="notSelected"
onMouseOver="style.textDecoration='underline'; window.status='Get Details
for {@locName}';return true" onMouseOut="style.textDecoration='';
window.status='';return true">
					<xsl:attribute name="title">Sub Location of <xsl:value-of
select="//Location[@locID=$Parent]/@locName"/></xsl:attribute>
							<xsl:text> </xsl:text><xsl:value-of
select="translate(@locName,$quot,$apos)"/>
						</span>
					</LI>
					<xsl:call-template name="ChildTerminal">
						<xsl:with-param name="locParent"><xsl:value-of
select="@locID"/></xsl:with-param>
					</xsl:call-template>

					<xsl:call-template name="ChildLocation">
						<xsl:with-param name="Parent"><xsl:value-of
select="$ChildParent"/></xsl:with-param>
					</xsl:call-template>
				</UL>
			</xsl:for-each>
		</xsl:template>

any help would be appreciated.
thanks again,
kb

Keith Brooks
Software Developer
Global eTelecom
Keith@xxxxxxxxxxxxxxxxxx


 XSL-List info and archive:  http://www.mulberrytech.com/xsl/xsl-list