<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
    <HTML>
      <HEAD>
          <SCRIPT language="JavaScript"><xsl:comment><![CDATA[
           // This function sorts product data
           function sort(key) {

               // Locate the XSL code responsible for sorting product data
               var s = document.XSLDocument.selectNodes("*/xsl:template[@match='products']//xsl:apply-templates/@order-by");
               
               // Replace the value for "order-by" with the new sorting criteria.
	       for (var i = s.nextNode(); i != null; i = s.nextNode()) {
                   i.value = key;
               } 

               // Locate the XSL code responsible for displaying product data
               var d = document.XMLDocument.selectSingleNode("jamcracker_product_info/products");

               // Transform/redisplay product data based on new sorting criteria
               products.innerHTML = d.transformNode(document.XSLDocument);
          }
        ]]></xsl:comment></SCRIPT>
      </HEAD>

      <BODY>
        <TABLE BORDER="0" BGCOLOR="pink">
          <TR>
            <TD COLSPAN="2">
              <DIV ID="products">
                <!-- Load/display the "products" template -->
                <xsl:apply-templates select="jamcracker_product_info/products"/>
              </DIV>
	    </TD>
          </TR>

          <TR>
            <TD ALIGN="CENTER">
              <A HREF="javascript:sort('price_per_unit')">Sort by price</A>
            </TD>
            <TD>
              <A HREF="javascript:sort('name')">Sort by name</A>
            </TD>
          </TR>
        </TABLE>
        
        <P/>
      </BODY>
    </HTML>
  </xsl:template>
  
  <!-- The sort() function will replace the value for order-by shown in
       the following "products" template with "name" or "price_per_unit", 
       depending on which option the user selects.
   -->

  <xsl:template match="products">
    <TABLE CELLSPACING="0" BORDER="0" BGCOLOR="lightblue">

      <!-- Load/display the "item" template -->

      <xsl:apply-templates select="item" order-by="name"/>
    </TABLE>
  </xsl:template>

  <xsl:template match="item">
    <TR>

      <!-- This "item" template displays each individual product's 
           name and price -->

      <TD><B><xsl:value-of select="name"/></B></TD>
      <TD>..........</TD>
      <TD VALIGN="bottom"><xsl:value-of select="price_per_unit"/></TD>
    </TR>
  </xsl:template>
  
</xsl:stylesheet>
