Process Children Before Parents Recursively!

Hi all,

With the following xml structure:

-<dfile>
  - <df_data_row>
      <document_id>13</document_id>
      <name>About Us</name>
      <parent>0</parent>
      - <df_data_row>
        <document_id>57</document_id>
        <name>About Sub 1</name>
        <parent>13</parent>
        - <df_data_row>
            <document_id>58</document_id>
            <name>About Sub Sub 1</name>
            <parent>57</parent>
          </df_data_row>
      </df_data_row>
    </df_data_row>
  </dfile>

And this xslt stylesheet:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.1"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:param name="url"/>
  <xsl:output method="html" encoding="ISO-8859-1"/>

  <xsl:template match="/">
  <script language="javascript">
    function loadMenus() {
      <xsl:for-each select="//df_data_row">
	  <xsl:if test="child::df_data_row">
	    <xsl:call-template name="sub_menus"/>
	  </xsl:if>
	</xsl:for-each>
	writeMenus();
    }
  </script>
  <script language="JavaScript">loadMenus();</script>
  </xsl:template>

  <xsl:template name="sub_menus">
  window.mnu_<xsl:value-of select="document_id"/> = new Menu('<xsl:value-of
select="name"/>','Verdana, Arial, Helvetica,
sans-serif',11,'ffffff','000033','cce3f8','ffffff','left','top',2,2,300,2,1,
true,true,true,0);

    <xsl:call-template name="menu_items"/>
  </xsl:template>



<xsl:template name="menu_items">
  <xsl:for-each select="child::df_data_row">
    <xsl:choose>
	<xsl:when test="child::df_data_row">
	  mnu_<xsl:value-of
select="parent::df_data_row/document_id"/>.addMenuItem(mnu_<xsl:value-of
select="document_id"/>,"document.location.href='index.php?pg=<xsl:value-of
select="document_id"/>'");
	</xsl:when>
	<xsl:otherwise>
	  mnu_<xsl:value-of
         select="parent::df_data_row/document_id"/>.addMenuItem("<xsl:value-

         of select="name"/>", "document.location.href='index.php?pg=
         <xsl:value-of select="document_id"/>'" );
	</xsl:otherwise>
   </xsl:choose>
  </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

I am generating these results:

<script language="javascript">
  function loadMenus() {

    window.mnu_13 = new Menu('About Us','Verdana, Arial, Helvetica,
sans-serif',11,'ffffff','000033','cce3f8','ffffff','left','top',2,2,300,2,1,
true,true,true,0);

mnu_13.addMenuItem(mnu_57,"document.location.href='index.php?pg=57'");

window.mnu_57 = new Menu('About Sub 1','Verdana, Arial, Helvetica,
sans-serif',11,'ffffff','000033','cce3f8','ffffff','left','top',2,2,300,2,1,
true,true,true,0);

mnu_57.addMenuItem("About Sub Sub 1", "document.location.href='
index.php?pg=58'");

writeMenus();
}

For those who know JavaScript ('eeek!!!') you notice a problem.

Because the style sheet processes from outside nodes to inner nodes,
references to child menus are being outputted before the menu itself is
being generated ('ie: mnu_57), creating errors.

I would really appreciate if some one can demonstrate how I would alter the
logic of this style sheet, so that all child menus are generated before
their parents (recursively). Thus I should be error free.

I would appreciate any help!!!!!!!!!!

Cheers,
Adam