<?xml version="1.0"?>
<xsl:stylesheet
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:xhtml="http://www.w3.org/1999/xhtml"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns:svg="http://www.w3.org/2000/svg"
	version="1.0">

	<!--
		Author: james.ojaste@ec.gc.ca
		License: Creative Commons Attribution-ShareAlike License
					http://creativecommons.org/licenses/by-sa/2.0/
	-->

	<xsl:output method="xml"/>

	<xsl:template match="/naruto">
		<xhtml:html>
			<xhtml:head>
				<xhtml:title>Naruto cards</xhtml:title>
			</xhtml:head>
			<xhtml:body>
				<!-- draw our basic stuff and then refer to
					them by reference later, rather than clutter
					up the generated document -->
				<svg:svg height="0" width="0">
					<svg:defs>
						<svg:pattern id="BG-Body" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse"
								x="0" y="0" width="24" height="20" fill="yellow">
							<svg:rect x="0" y="0" width="25" height="21" fill="lightgreen"/>
							<svg:path stroke="rgb(0,240,100)" stroke-width="2" fill="none"
								d="M23,2 l-4,4 a7,7 0 0,0 -10,10 a5,5 0 0,0 7.5,-7.5
								a3,3 0 0,0 -5,5 a1,1 0 0,0 2,-2 m-7,0 l-3,6 l5,-1"/>
						</svg:pattern>

						<svg:ellipse id="IconChakra" cx="0" cy="0" rx="6" ry="12"
								stroke="black" stroke-width="0.1" transform="rotate(30)"/>
						<svg:g id="IconStrength" transform="scale(1)">
							<svg:circle cx="4" cy="15" r="2" fill="inherit" stroke="black" stroke-width="1"/>
							<svg:path fill="black" stroke="black" stroke-width="0.5"
								d="M5,13 l3,-3 l1,-3 l7,-4 l-4,7 l-3,1 l-3,3 z"/>
						</svg:g>
						<svg:g id="IconSwiftness" transform="scale(1)">
							<svg:path fill="white" stroke="black" stroke-width="1"
								d="M6,16 a5,5 0 0,0 9,-6 a4,4 0 0,0 -9,-6
									a6,6 0 0,0 0,12 m0,-5 a3,3 0 0,0 4,2
									m2,-4 a3,3 0 0,0 -3,-3"/>
						</svg:g>

						<!-- generate the 6 basic image outlines and clipPaths -->
						<xsl:call-template name="build-outline-loop">
							<xsl:with-param name="divots" select="5"/>
						</xsl:call-template>
					</svg:defs>
				</svg:svg>
				<xsl:apply-templates select="card">
					<xsl:sort select="@id"/>
				</xsl:apply-templates>
			</xhtml:body>
		</xhtml:html>
	</xsl:template>

	<!-- display a card -->
	<xsl:template match="card">
		<!-- shift the cards so that we don't overlap -->
		<svg:svg width="224" height="310"
				x="{220*((position() - 1) mod 3)}"
				y="{300*(floor((position() - 1) div 3))}">

			<svg:g transform="scale(1)">
				<!-- card outline -->
				<svg:rect width="200" height="280" rx="5" ry="5" stroke="black" stroke-width="1">
					<xsl:attribute name="fill">
						<xsl:choose>
							<xsl:when test="@type='B'">url(#BG-Body)<!--lightgreen--></xsl:when>
							<xsl:when test="@type='M'">lightblue</xsl:when>
							<xsl:when test="@type='S'">orange</xsl:when>
							<xsl:otherwise>white</xsl:otherwise>
						</xsl:choose>
					</xsl:attribute>
				</svg:rect>

				<!-- chakra cost -->
				<xsl:call-template name="chakra-cost">
					<xsl:with-param name="cost" select="@chakra"/>
					<xsl:with-param name="colour">
						<xsl:choose>
							<xsl:when test="@type='B'">rgb(230,255,230)</xsl:when>
							<xsl:when test="@type='M'">rgb(230,230,255)</xsl:when>
							<xsl:when test="@type='S'">rgb(250,230,50)</xsl:when>
							<xsl:otherwise>white</xsl:otherwise>
						</xsl:choose>
					</xsl:with-param>
				</xsl:call-template>

				<!-- card image -->
				<svg:g transform="translate (10,30)" width="180" height="130">
					<xsl:call-template name="draw-image-block">
						<!--<xsl:with-param name="clipPath">url(#<xsl:value-of select="@id"/>-outline)</xsl:with-param>-->
						<xsl:with-param name="clipPath">url(#clip<xsl:value-of select="number(concat('0',@attack)) + number(concat('0',@defense))"/>)</xsl:with-param>
						<xsl:with-param name="uri" select="img/@src"/>
						<xsl:with-param name="divots" select="number(concat('0',@attack)) + number(concat('0',@defense))"/>
					</xsl:call-template>
				</svg:g>

				<!-- card name -->
				<xsl:apply-templates select="@name"/>

				<!-- attack and defense -->
				<xsl:call-template name="atkdef-symbolic"/>

				<!-- card text and flavour text -->
				<svg:g transform="translate (10,170)" width="180" height="100">
					<svg:rect width="180" height="100"
						stroke="black" stroke-width="1" fill="white"/>

					<xsl:apply-templates select="@rank"/>
					<xsl:apply-templates select="text"/>
					<xsl:apply-templates select="quote"/>
				</svg:g>

				<!-- card type -->
				<svg:g transform="translate (100,168)">
					<svg:text font-family="sans-serif" font-size="7"
							fill="black" text-anchor="middle">
						<xsl:choose>
							<xsl:when test="@duration='S'">Summoning Action</xsl:when>
							<xsl:when test="@duration='IA'">Inherent Ability</xsl:when>
							<xsl:when test="@duration='P'">Preparation</xsl:when>
							<xsl:when test="@duration='I'">Instant</xsl:when>
							<xsl:when test="number(@attack) &gt; 0 and @duration='A'">Attack Action</xsl:when>
							<xsl:when test="number(@defense) &gt; 0 and @duration='A'">Defense Action</xsl:when>
							<xsl:when test="@duration='A'">Action</xsl:when>
						</xsl:choose>
					</svg:text>
				</svg:g>

				<!-- card and set ID -->
				<svg:g transform="translate (0,278)">
					<svg:text font-family="sans-serif" font-size="7" fill="black"
						transform="translate(190,0)" text-anchor="end">
						<xsl:value-of select="@id"/>
					</svg:text>
				</svg:g>
			</svg:g>
		</svg:svg>
	</xsl:template>

<!-- attribute matchers -->
	<xsl:template match="@name">
		<svg:g transform="translate (10,22)">
			<svg:text font-family="sans-serif" font-size="14" font-weight="bold"
					stroke="white" stroke-width="0.2" fill="black">
				<xsl:attribute name="transform">
					<xsl:choose>
						<xsl:when test="string-length(.) &gt; 30">scale(0.7,1)</xsl:when>
						<xsl:when test="string-length(.) &gt; 25">scale(0.8,1)</xsl:when>
						<xsl:when test="string-length(.) &gt; 22">scale(0.9,1)</xsl:when>
						<xsl:otherwise></xsl:otherwise>
					</xsl:choose>
				</xsl:attribute>
				<xsl:value-of select="."/>
			</svg:text>
		</svg:g>
	</xsl:template>

	<xsl:template match="@rank">
		<!-- card ranking; avoid opacity as it doesn't print properly -->
		<svg:text font-family="sans-serif" font-size="100" font-weight="bold"
				fill="rgb(230,230,230)" text-anchor="middle"
				transform="translate (90,90)">
			<xsl:choose>
				<xsl:when test=".='*'">
					<svg:tspan dy="20">*</svg:tspan>
				</xsl:when>
				<xsl:otherwise><xsl:value-of select="."/></xsl:otherwise>
			</xsl:choose>
		</svg:text>
	</xsl:template>

<!-- element matchers -->
	<xsl:template match="quote">
		<svg:text font-family="sans-serif" font-size="10" font-style="italic" fill="black"
				transform="translate (5, {85 - 10*count(quote/br)})">
			<xsl:for-each select="text()">
				<svg:tspan x="0" dy="10">
					<xsl:value-of select="."/>
				</svg:tspan>
			</xsl:for-each>
		</svg:text>
	</xsl:template>

	<xsl:template match="text">
		<!-- SVG doesn't do linewrapping, so we have to explicitly
			provide it.
			It's really too complicated to calculate easily, so
			we have to rely on provided tags.
			Can we also use embedded tags to inline icons?
			-->
		<svg:text font-family="sans-serif" font-size="10" fill="black"
			transform="translate (5,15)">
			<xsl:apply-templates select="*|text()"/>
		</svg:text>
	</xsl:template>
	<xsl:template match="text/node()">
		<xsl:choose>
			<xsl:when test="name(preceding-sibling::*[position()=1])='br'">
				<svg:tspan x="0" dy="10"><xsl:value-of select="."/></svg:tspan>
			</xsl:when>
			<xsl:otherwise>
				<svg:tspan><xsl:value-of select="."/></svg:tspan>
			</xsl:otherwise>
		</xsl:choose>
	</xsl:template>
	<xsl:template match="text/br"></xsl:template>

<!-- called templates -->
	<xsl:template name="atkdef-symbolic">

		<svg:g transform="translate (5,10)">
			<xsl:call-template name="atkdef-symbolic-loop">
				<xsl:with-param name="value" select="number(@attack)"/>
				<xsl:with-param name="icon" select="'#IconStrength'"/>
			</xsl:call-template>
		</svg:g>
		<svg:g transform="translate (5, {10 + @attack*25})">
			<xsl:call-template name="atkdef-symbolic-loop">
				<xsl:with-param name="value" select="number(@defense)"/>
				<xsl:with-param name="icon" select="'#IconSwiftness'"/>
			</xsl:call-template>
		</svg:g>
	</xsl:template>
	<xsl:template name="atkdef-symbolic-loop">
		<xsl:param name="value" select="0"/>
		<xsl:param name="icon" select="''"/>
		<xsl:if test="$value &gt; 0">
			<svg:use xlink:href="{$icon}" y="{$value*25}" fill="none"/>
			<xsl:call-template name="atkdef-symbolic-loop">
				<xsl:with-param name="value" select="$value - 1"/>
				<xsl:with-param name="icon" select="$icon"/>
			</xsl:call-template>
		</xsl:if>
	</xsl:template>

	<xsl:template name="build-outline-loop">
		<xsl:param name="divots" select="0"/>
		<xsl:call-template name="build-outline">
			<xsl:with-param name="divots" select="$divots"/>
		</xsl:call-template>
		<xsl:if test="$divots &gt; 0">
			<xsl:call-template name="build-outline-loop">
				<xsl:with-param name="divots" select="$divots - 1"/>
			</xsl:call-template>
		</xsl:if>
	</xsl:template>
	<xsl:template name="build-outline">
		<xsl:param name="divots" select="0"/>
		<xsl:variable name="outline">
			<xsl:call-template name="generate-image-outline">
				<xsl:with-param name="divots" select="$divots"/>
			</xsl:call-template>
		</xsl:variable>
		<svg:clipPath id="clip{$divots}"><svg:path d="{$outline}"/></svg:clipPath>
		<svg:path id="outline{$divots}" stroke="black" stroke-width="2" fill="none" d="{$outline}"/>
	</xsl:template>

	<xsl:template name="chakra-cost">
		<xsl:param name="cost" select="0"/>
		<xsl:param name="colour" select="'white'"/>

		<xsl:if test="$cost &gt; 0">
			<svg:use xlink:href="#IconChakra" fill="{$colour}" transform="translate({205-$cost*20},16)"/>

			<xsl:call-template name="chakra-cost">
				<xsl:with-param name="cost" select="$cost - 1"/>
				<xsl:with-param name="colour" select="$colour"/>
			</xsl:call-template>
		</xsl:if>
	</xsl:template>

	<xsl:template name="draw-image-block">
		<xsl:param name="clipPath" select="''"/>
		<xsl:param name="uri" select="''"/>
		<xsl:param name="divots" select="0"/>

		<xsl:variable name="outline">
			<xsl:call-template name="generate-image-outline">
				<xsl:with-param name="divots" select="$divots"/>
			</xsl:call-template>
		</xsl:variable>

		<xsl:choose>
			<xsl:when test="$uri != ''">
				<svg:image x="0" y="0" width="180" height="130" preserveAspectRatio="xMidYMid slice"
					stroke="black" stroke-width="2" xlink:href="{$uri}" clip-path="{$clipPath}"/>
			</xsl:when>
			<xsl:otherwise><svg:path stroke="none" fill="white" d="{$outline}"/></xsl:otherwise>
		</xsl:choose>
		<svg:use xlink:href="#outline{$divots}"/>
	</xsl:template>

	<xsl:template name="generate-image-outline">
		<xsl:param name="divots" select="5"/>
			M0,0
			<xsl:choose>
				<xsl:when test="number($divots) = 0">
					<!-- give us a nice rounded nw corner -->
					M10,0 a10,10 0 0,0 -10,10
					l0,120
				</xsl:when>
				<xsl:otherwise>
					l0,5 a11,11 0 <xsl:value-of select="number($divots &gt;= 1)"/>,1 0,20
					l0,5 a11,<xsl:value-of select="11+5*number($divots &lt; 2)"/> 0 <xsl:value-of select="number($divots &gt;= 2)"/>,1 0,20
					l0,5 a11,<xsl:value-of select="11+5*number($divots &lt; 3)"/> 0 <xsl:value-of select="number($divots &gt;= 3)"/>,1 0,20
					l0,5 a11,<xsl:value-of select="11+5*number($divots &lt; 4)"/> 0 <xsl:value-of select="number($divots &gt;= 4)"/>,1 0,20
					l0,5 a11,<xsl:value-of select="11+5*number($divots &lt; 5)"/> 0 <xsl:value-of select="number($divots &gt;= 5)"/>,1 0,20
					l0,5
				</xsl:otherwise>
			</xsl:choose>

			<!-- 10px rounded ne corner -->
			l180,0 l0,-120 a10,10 0 0,0 -10,-10z
	</xsl:template>
</xsl:stylesheet>
