<?xml-stylesheet href="http://www.w3.org/StyleSheets/base.css" type="text/css"?><?xml-stylesheet href="http://www.w3.org/2002/02/style-xsl.css" type="text/css"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"  xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:cards="http://www.nimbustier.net/2004/09/cardsml">

<!-- Output method XML -->
<xsl:output method="xml" 
  indent="yes"
  omit-xml-declaration="no" 
  encoding="utf-8" 
  media-type="image/svg+xml"
/>

<xsl:param name="svgCardsDir" select="'http://www.nimbustier.net/publications/web/cardsML/cards/'"/>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>cardsML viewer</title>
  </head>
  <body>
    <h1>cardsML viewer</h1>

    <p>This XSLT style sheet takes a cardsML document and turns it into an SVG representation of it.</p>
    <!-- Useful when used with the XSLT-online servlet -->
    <!-- Make sure to set the @@@ value to the URI of the published XSLT -->
    <form action="http://www.w3.org/2000/06/webdata/xslt" method="get">
      <div>
        <input type="hidden" name="xslfile" value="@@@" />
        <p><label>URI of the cardsML: <input type="text" name="xmlfile" value="@@@" /></label></p>
        <p><input type="submit" value="Process" /><input type="reset" /></p>
      </div>
    </form>


    <address><a href="http://www.nimbustier.net/nimbustier/">Dominique Haza&#235;l-Massieux</a> - $Id: make-cards-table.xsl,v 1.4 2004/09/15 14:27:08 dom Exp $</address>
    </body>
</html>

<svg xmlns="http://www.w3.org/2000/svg">
<!-- List of SVG cards file names -->
<defs><image height="72" width="50" xlink:href="01_of_clubs_A.svg" id="x1_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="01_of_diamonds_A.svg" id="x1_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="01_of_hearts_A.svg" id="x1_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="01_of_spades_A.svg" id="x1_spades" /></defs>
<defs><image height="72" width="50" xlink:href="02_of_clubs.svg" id="x2_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="02_of_diamonds.svg" id="x2_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="02_of_hearts.svg" id="x2_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="02_of_spades.svg" id="x2_spades" /></defs>
<defs><image height="72" width="50" xlink:href="03_of_clubs.svg" id="x3_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="03_of_diamonds.svg" id="x3_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="03_of_hearts.svg" id="x3_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="03_of_spades.svg" id="x3_spades" /></defs>
<defs><image height="72" width="50" xlink:href="04_of_clubs.svg" id="x4_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="04_of_diamonds.svg" id="x4_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="04_of_hearts.svg" id="x4_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="04_of_spades.svg" id="x4_spades" /></defs>
<defs><image height="72" width="50" xlink:href="05_of_clubs.svg" id="x5_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="05_of_diamonds.svg" id="x5_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="05_of_hearts.svg" id="x5_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="05_of_spades.svg" id="x5_spades" /></defs>
<defs><image height="72" width="50" xlink:href="06_of_clubs.svg" id="x6_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="06_of_diamonds.svg" id="x6_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="06_of_hearts.svg" id="x6_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="06_of_spades.svg" id="x6_spades" /></defs>
<defs><image height="72" width="50" xlink:href="07_of_clubs.svg" id="x7_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="07_of_diamonds.svg" id="x7_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="07_of_hearts.svg" id="x7_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="07_of_spades.svg" id="x7_spades" /></defs>
<defs><image height="72" width="50" xlink:href="08_of_clubs.svg" id="x8_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="08_of_diamonds.svg" id="x8_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="08_of_hearts.svg" id="x8_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="08_of_spades.svg" id="x8_spades" /></defs>
<defs><image height="72" width="50" xlink:href="09_of_clubs.svg" id="x9_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="09_of_diamonds.svg" id="x9_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="09_of_hearts.svg" id="x9_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="09_of_spades.svg" id="x9_spades" /></defs>
<defs><image height="72" width="50" xlink:href="10_of_clubs.svg" id="x10_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="10_of_diamonds.svg" id="x10_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="10_of_hearts.svg" id="x10_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="10_of_spades.svg" id="x10_spades" /></defs>
<defs><image height="72" width="50" xlink:href="jack_of_clubs_fr.svg" id="xjack_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="jack_of_diamonds_fr.svg" id="xjack_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="jack_of_hearts_fr.svg" id="xjack_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="jack_of_spades_fr.svg" id="xjack_spades" /></defs>
<defs><image height="72" width="50" xlink:href="king_of_clubs_fr.svg" id="xking_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="king_of_diamonds_fr.svg" id="xking_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="king_of_hearts_fr.svg" id="xking_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="king_of_spades_fr.svg" id="xking_spades" /></defs>
<defs><image height="72" width="50" xlink:href="queen_of_clubs_fr.svg" id="xqueen_clubs" /></defs>
<defs><image height="72" width="50" xlink:href="queen_of_diamonds_fr.svg" id="xqueen_diamonds" /></defs>
<defs><image height="72" width="50" xlink:href="queen_of_hearts_fr.svg" id="xqueen_hearts" /></defs>
<defs><image height="72" width="50" xlink:href="queen_of_spades_fr.svg" id="xqueen_spades" /></defs>
<svg id="north" y="10" x="100" width="225" height="87">
<rect width="224" height="86" stroke="gray" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
<text x="100" y="10" width="24" height="15">Nord</text>
</svg>
<svg id="south" y="320" x="100" width="225" height="87">
<rect width="224" height="86" stroke="gray" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
<text x="100" y="10" width="24" height="15">Sud</text>
</svg>
<svg id="east" y="76" x="326" width="74" height="324">
<rect width="73" height="323" stroke="gray" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
<text x="0" y="120" width="24" height="15">Est</text>
</svg>
<svg id="west" y="76" x="15" width="85" height="324">
<rect width="84" height="323" stroke="gray" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
<text x="50" y="120" width="35" height="15">Ouest</text>
</svg>
<svg id="north_play" y="116" x="187" width="50" height="72"/>
<svg id="south_play" y="236" x="187" width="50" height="72"/>
<svg id="east_play" y="176" x="228" width="50" height="72"/>
<svg id="west_play" y="176" x="146" width="50" height="72"/>
</svg>


<xsl:template match="/cards:cards">
  <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="425px"
   height="425px" xml:base="{$svgCardsDir}">
    <rect x="0" y="0" width="425" height="425" fill="green" stroke="black" stroke-width="2"/>
    <xsl:for-each select="cards:hand">
      <svg>
      <xsl:apply-templates select="document('')/xsl:stylesheet/svg:svg/svg:svg[@id=current()/@position]/@*" />
      <xsl:apply-templates select="document('')/xsl:stylesheet/svg:svg/svg:svg[@id=current()/@position]/*" />

      <!-- so that cards get aligned vertically (rather than horizontally) -->
      <xsl:variable name="verticalAlignment" select="@position='west' or @position='east'"/>

      <!-- 1 for East, 0 otherwise -->
      <xsl:variable name="rightHand" select="(@position='east')"/>
      <xsl:for-each select="cards:card">
        <image>
          <xsl:variable name="pos" select="position() - 1"/>
          <xsl:attribute name="x">
            <xsl:value-of select="not($verticalAlignment) * $pos * 25 + $verticalAlignment * 24 * $rightHand"/>
          </xsl:attribute>
          <xsl:attribute name="y">
            <xsl:value-of select="not($verticalAlignment) * 15 + $verticalAlignment * $pos * 36"/>
          </xsl:attribute>
          <xsl:apply-templates select="document('')/xsl:stylesheet/svg:svg/svg:defs/svg:image[@id=concat('x',current()/@value,'_',current()/@color)]/@*[not(local-name()='id')]"/>
        </image>
      </xsl:for-each>
      </svg>
    </xsl:for-each>
    <xsl:for-each select="cards:trick">
      <xsl:for-each select="cards:card">
        <svg>
          <xsl:apply-templates select="document('')/xsl:stylesheet/svg:svg/svg:svg[@id=concat(current()/@playedBy,'_play')]/@*" />
          <image>
            <xsl:apply-templates select="document('')/xsl:stylesheet/svg:svg/svg:defs/svg:image[@id=concat('x',current()/@value,'_',current()/@color)]/@*[not(local-name()='id')]"/>
          </image>
        </svg>
      </xsl:for-each>
    </xsl:for-each>
  </svg>
</xsl:template>

<!-- default: Identity Transformation -->
<xsl:template match="*|@*|comment()|text()">
  <xsl:copy>
    <xsl:apply-templates select="*|@*|comment()|text()"/>
  </xsl:copy>
</xsl:template>



</xsl:stylesheet>