<xsl:stylesheet version="1.0"
		xmlns:svg="http://www.w3.org/2000/svg"
		xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
		xmlns:xlink="http://www.w3.org/1999/xlink">
	<xsl:output method="xml" />
	<xsl:preserve-space elements="*" />

	<!-- AltovaXML /xslt1 Kingmaker.xsl /in Kingmaker.xml /out Kingmaker.svg -->

	<xsl:template match="/map">
		<svg:svg version="1.1">
			<svg:script>
				// scripting works, but I can't load jQuery for some reason
				function toggle (id)
				{
					//alert (event.target.parentNode.className.baseVal);

					var node = document.getElementById (id);
					if (node.style.visibility == 'hidden')
						node.style.visibility = "visible";
					else node.style.visibility = "hidden";
				}
			</svg:script>
			<svg:style type="text/css">
				text {
					font-size: 0.2pt;
					font-weight: bold;
				}
				text.symbol {
					font-size: 0.3pt;
				}
				.legend text {
					font-family: sans-serif;
					font-size: 8pt;
				}
				.legend .menu {
					font-size: 10pt;
				}
				.menu.bg {
					fill: rgb(240,240,240);
					stroke: black;
					stroke-width: 0.3;
				}
				.border {
					stroke-width: 0.2;
					stroke-linecap: square;
				}
				.city text {
					font-family: serif;
					font-weight: bold;
					font-size: 0.2pt;
				}
				.hexGrid {
					stroke-width: 0.01;
					stroke: black;
					fill: none;
				}
				.hexGrid text {
					font-family: sans-serif;
					fill: black;
					stroke: none;
				}
				.icon {
					stroke: black;
					stroke-width: 0.02;
				}
				.river, .lake {
					fill: none;
					stroke: lightblue;
					stroke-width: 0.2;
					stroke-linecap: round;
					opacity: 0.5;
				}
				.lake {
					fill: lightblue;
					stroke-width: 0.01;
				}
				.road {
					stroke: rgb(120,60,30);
					stroke-width: 0.15;
					stroke-linecap: round;
					fill: none;
				}
				.small.road {
					stroke-width: 0.05;
					opacity: 0.3;
				}
				.red {
					stroke: red;
				}
				<xsl:apply-templates select="region|terrain" mode="css"/>
			</svg:style>

			<svg:comment>Define a few icons</svg:comment>

			<svg:defs>
				<!-- colors -->
				<svg:linearGradient id="bgOther"><svg:stop stop-color="white"/></svg:linearGradient>
				<!-- improvements -->
				<svg:linearGradient id="bgCity"><svg:stop stop-color="rgb(220,220,230)"/></svg:linearGradient>
				<svg:linearGradient id="bgFarm"><svg:stop stop-color="rgb(240,255,200)"/></svg:linearGradient>
				<svg:linearGradient id="bgMine"><svg:stop stop-color="rgb(240,230,220)"/></svg:linearGradient>
				<svg:linearGradient id="bgFort"><svg:stop stop-color="rgb(220,230,240)"/></svg:linearGradient>
				<!-- resources -->
				<svg:linearGradient id="bgHerbal"><svg:stop stop-color="rgb(200,255,220)"/></svg:linearGradient>
				<svg:linearGradient id="bgLair"><svg:stop stop-color="rgb(220,220,230)"/></svg:linearGradient>
				<svg:linearGradient id="bgMineral"><svg:stop stop-color="rgb(230,220,200)"/></svg:linearGradient>
				<svg:linearGradient id="bgStructure"><svg:stop stop-color="rgb(220,220,230)"/></svg:linearGradient>
				<svg:linearGradient id="bgWater"><svg:stop stop-color="rgb(200,220,255)"/></svg:linearGradient>

				<!-- markers -->
				<svg:marker id="markerCity" markerUnits="userSpaceOnUse" viewBox="-0.2 -0.2 0.4 0.4" markerWidth="0.4" markerHeight="0.4" orient="auto">
					<svg:circle cx="0" cy="0" r="0.2" fill="white" stroke="black" stroke-width="0.03" opacity="0.5"/>
				</svg:marker>

				<!-- icons -->
				<svg:symbol id="symbolLandmark" overflow="visible"><xsl:call-template name="symbolLandmark"/></svg:symbol>
				<svg:symbol id="symbolOther" overflow="visible"><xsl:call-template name="symbolOther"/></svg:symbol>
				<!-- improvements -->
				<svg:symbol id="symbolCity" overflow="visible"><xsl:call-template name="symbolCity"/></svg:symbol>
				<svg:symbol id="symbolFarm" overflow="visible"><xsl:call-template name="symbolFarm"/></svg:symbol>
				<svg:symbol id="symbolFort" overflow="visible"><xsl:call-template name="symbolFort"/></svg:symbol>
				<svg:symbol id="symbolMine" overflow="visible"><xsl:call-template name="symbolMine"/></svg:symbol>
				<!-- resources -->
				<svg:symbol id="symbolHerbal" overflow="visible"><xsl:call-template name="symbolHerbal"/></svg:symbol>
				<svg:symbol id="symbolLair" overflow="visible"><xsl:call-template name="symbolFort"/></svg:symbol>
				<svg:symbol id="symbolMineral" overflow="visible"><xsl:call-template name="symbolMineral"/></svg:symbol>
				<svg:symbol id="symbolStructure" overflow="visible"><xsl:call-template name="symbolStructure"/></svg:symbol>
				<svg:symbol id="symbolWater" overflow="visible"><xsl:call-template name="symbolWater"/></svg:symbol>

				<!-- hex boundaries -->
				<svg:clipPath id="HexClip">
					<svg:path d="M 0 -1.1547 L 1 -0.577 L 1 0.577 L 0 1.1547 L -1 0.577 L -1 -0.577 L 0 -1.1547 z"/>
				</svg:clipPath>
			</svg:defs>

			<svg:comment>Render the map</svg:comment>
			<svg:g transform="translate(0,30) scale(40)">
				<svg:comment>Render terrain type and minor roads</svg:comment>
				<svg:g id="Terrain">
					<xsl:apply-templates select="land/hex" mode="terrain"/>
				</svg:g>

				<svg:comment>Include any embedded images</svg:comment>
				<svg:g id="Texture">
					<xsl:apply-templates select="import"/>
				</svg:g>

				<svg:comment>Render rivers</svg:comment>
				<svg:g id="Rivers">
					<xsl:apply-templates select="water/river"/>
				</svg:g>

				<svg:comment>Render lakes</svg:comment>
				<svg:g id="Lakes">
					<xsl:apply-templates select="water/lake"/>
				</svg:g>

				<svg:comment>Render major roads</svg:comment>
				<svg:g id="Roads">
					<xsl:apply-templates select="roads/road"/>
					<xsl:comment>Minor roads are rendered as part of the hex background</xsl:comment>
				</svg:g>

				<svg:comment>Render political borders</svg:comment>
				<svg:g id="Borders">
					<xsl:apply-templates select="land/hex" mode="borders"/>
				</svg:g>

				<svg:comment>Render the hex grid, hex numbers and annotations</svg:comment>
				<svg:g id="Annotations">
					<xsl:apply-templates select="land/hex" mode="overlay"/>
				</svg:g>
			</svg:g>

			<svg:comment>Render the border legend</svg:comment>
			<svg:g class="legend" transform="translate(10,19)">
				<svg:g onclick="toggle('BordersLegend')">
					<svg:rect class="menu bg" x="-4" y="-15" width="130" height="20"/>
					<svg:text fill="black" class="menu">Borders</svg:text>
				</svg:g>
				<svg:g id="BordersLegend" style="visibility:hidden;" onclick="toggle('Borders')">
					<svg:rect class="menu bg" x="-4" y="5" width="130" height="{(count(region) + 1)*20 + 6}"/>
					<xsl:apply-templates select="region" mode="legend">
						<xsl:with-param name="height" select="20"/>
					</xsl:apply-templates>
				</svg:g>
			</svg:g>

		</svg:svg>
	</xsl:template>

	<!-- CSS definitions for terrain and region coding -->
	<xsl:template match="region" mode="css">
		.<xsl:value-of select="@name"/> { stroke: <xsl:value-of select="@color"/>; }
		.<xsl:value-of select="@name"/> text {stroke: none;}
	</xsl:template>

	<xsl:template match="terrain" mode="css">
		.<xsl:value-of select="@name"/> { stroke: none; fill: <xsl:value-of select="@color"/>; }
	</xsl:template>

	<!-- region legend block -->
	<xsl:template match="region" mode="legend">
		<xsl:param name="height" select="20"/>
		<xsl:variable name="position" select="count(preceding-sibling::region) + 1"/>
		<!-- precede the first item with a general item -->
		<xsl:if test="$position=1">
			<svg:g fill="black">
				<svg:rect x="0" y="9" width="15" height="15" fill="white" stroke="black" />
				<svg:text x="19" y="21">Toggle borders</svg:text>
			</svg:g>
		</xsl:if>
		<svg:g fill="{@color}" class="{@name}">
			<svg:rect x="0" y="{$height * $position + 9}" width="15" height="15"/>
			<svg:text x="19" y="{$height * $position + 21}"><xsl:value-of select="."/></svg:text>
		</svg:g>
	</xsl:template>

	<!-- imported image -->
	<xsl:template match="import">
		<xsl:variable name="indent" select="1 - round(@row) mod 2"/>
		<xsl:variable name="y" select="1.732 * @row"/>
		<xsl:variable name="x" select="(2 * @col + $indent)"/>

		<svg:image x="{$x}" y="{$y}" width="{2.1 * @width}" height="{2 * @height}" opacity="{@opacity}" xlink:href="{@href}"/>
	</xsl:template>

	<!-- draw a hex -->
	<xsl:template match="hex" mode="terrain">
		<xsl:variable name="indent" select="1 - @row mod 2"/>
		<xsl:variable name="y" select="1.732 * @row"/>
		<xsl:variable name="x" select="(2 * @col + $indent)"/>
		<!-- copy some attributes so we can reference them in a comparison later -->
		<xsl:variable name="row" select="number(@row)"/>
		<xsl:variable name="col" select="number(@col)"/>

		<svg:g class="terrain" transform="translate({$x},{$y})">
			<svg:g clip-path="url(#HexClip)" clip-rule="evenodd">
				<!-- Draw the terrain type -->
				<svg:rect x="-1" y="-1.2" width="2" height="2.4" class="{@terrain}"/>

				<!-- Draw the roads -->
				<xsl:if test="count(road) + count(@improvement)">
					<svg:path class="small road">
						<xsl:attribute name="d">
							<!-- Check the neighbouring hexes to see if we should draw a road -->
							<xsl:if test="count(../hex[@row=($row - 1) and @col=($col + $indent)]/road)"><!-- NE -->
								<!--<svg:path d="M0,0 L1,-1.732"/>-->
								M0,0 L0.4,-0.9
							</xsl:if>
							<xsl:if test="count(../hex[@row=($row) and @col=($col + 1)]/road)"><!-- E -->
								M0,0 L1,0
							</xsl:if>
							<xsl:if test="count(../hex[@row=($row + 1) and @col=($col + $indent)]/road)"><!-- SE -->
								M0,0 L1,1.732
							</xsl:if>
							<xsl:if test="count(../hex[@row=($row + 1) and @col=($col - 1 + $indent)]/road)"><!-- SW -->
								M0,0 L-0.58,0.8
							</xsl:if>
							<xsl:if test="count(../hex[@row=($row) and @col=($col - 1)]/road)"><!-- W -->
								M0,0 L-1,0
							</xsl:if>
							<xsl:if test="count(../hex[@row=($row - 1) and @col=($col -1 + $indent)]/road)"><!-- NW -->
								M0,0 L-1,-1.732
							</xsl:if>
						</xsl:attribute>
					</svg:path>
				</xsl:if>
			</svg:g>
		</svg:g>
	</xsl:template>

	<xsl:template match="hex" mode="borders">
		<xsl:variable name="indent" select="1 - @row mod 2"/>
		<xsl:variable name="y" select="1.732 * @row"/>
		<xsl:variable name="x" select="(2 * @col + $indent)"/>
		<!-- copy some attributes so we can reference them in a comparison later -->
		<xsl:variable name="row" select="number(@row)"/>
		<xsl:variable name="col" select="number(@col)"/>
		<xsl:variable name="region" select="@region"/>

		<svg:g class="borders" transform="translate({$x},{$y})" clip-path="url(#HexClip)" clip-rule="evenodd">
				<xsl:comment>Draw the region borders</xsl:comment>
				<xsl:if test="@region">
					<svg:g class="{@region}">
						<!-- Check the neighbouring hexes to see if we should draw a border -->
						<svg:path class="border">
							<xsl:attribute name="d">
								<xsl:if test="count(../hex[@row=($row - 1) and @col=($col + $indent) and @region=$region])=0">
									M0,-1.1547 L1,-0.577
								</xsl:if><!-- NE -->
								<xsl:if test="count(../hex[@row=($row) and @col=($col + 1) and @region=$region])=0">
									M1,-0.577 L1,0.577
								</xsl:if><!-- E -->
								<xsl:if test="count(../hex[@row=($row + 1) and @col=($col + $indent) and @region=$region])=0">
									M1,0.577 L0,1.1547
								</xsl:if><!-- SE -->
								<xsl:if test="count(../hex[@row=($row + 1) and @col=($col - 1 + $indent) and @region=$region])=0">
									M0,1.1547 L-1,0.577
								</xsl:if><!-- SW -->
								<xsl:if test="count(../hex[@row=($row) and @col=($col - 1) and @region=$region])=0">
									M-1,0.577 L-1,-0.577
								</xsl:if><!-- W -->
								<xsl:if test="count(../hex[@row=($row - 1) and @col=($col -1 + $indent) and @region=$region])=0">
									M-1,-0.577 L0,-1.1547
								</xsl:if><!-- NW -->
							</xsl:attribute>
						</svg:path>
					</svg:g>
				</xsl:if>
		</svg:g>
	</xsl:template>

	<!-- annotate hexes with grid, numbers, icons-->
	<xsl:template match="hex" mode="overlay">
		<xsl:variable name="indent" select="1 - @row mod 2"/>
		<xsl:variable name="y" select="1.732 * @row"/>
		<xsl:variable name="x" select="(2 * @col + $indent)"/>

		<!-- Render annotations -->
		<xsl:apply-templates select="*"/>

		<!-- Render hex grid, numbers, landmark icons -->
		<svg:g class="hexGrid" transform="translate({$x},{$y})">
			<!-- Draw the hex # -->
			<svg:text text-anchor="middle">
				<!-- 0-padded 2-digit numbers -->
				<xsl:value-of select="substring (concat('00', @row), 1 + string-length(@row))" />
				<xsl:value-of select="substring (concat('00', @col), 1 + string-length(@col))" />
			</svg:text>

			<xsl:if test="count(landmark)">
				<svg:use xlink:href="#symbolLandmark" title="{landmark}"/>
			</xsl:if>

			<!-- and draw a nice thin grid over the whole thing -->
			<svg:polyline points="0,-1.1547 1,-0.577 1,0.577 0,1.1547 -1,0.577 -1,-0.577 0,-1.1547"/>
		</svg:g>
	</xsl:template>

	<!-- resource annotations -->
	<xsl:template match="resource">
		<xsl:variable name="indent" select="1 - round(../@row) mod 2"/>
		<xsl:variable name="y" select="1.732 * ../@row"/>
		<xsl:variable name="x" select="(2 * ../@col + $indent)"/>

		<svg:g class="resource" transform="translate({$x},{$y - 0.45})" title="{@type} ({text()})">
			<svg:circle cx="0" cy="0" r="0.2" fill="url(#bg{@type})" stroke="black" stroke-width="0.03"/>
			<svg:use xlink:href="#symbol{@type}"/>
			<svg:text x="0.25" y="0.1"><xsl:value-of select="text()"/></svg:text>
		</svg:g>
	</xsl:template>

	<!-- improvement annotations -->
	<xsl:template match="Farm|Fort|Mine|Other">
		<xsl:variable name="indent" select="1 - round(../@row) mod 2"/>
		<xsl:variable name="y" select="1.732 * ../@row"/>
		<xsl:variable name="x" select="(2 * ../@col + $indent)"/>
		<xsl:variable name="label">
			<xsl:value-of select="name()"/> <xsl:if test="text() != ''"> (<xsl:value-of select="text()"/>)</xsl:if>
		</xsl:variable>

		<svg:g transform="translate({$x},{$y + 0.3})" title="{$label}">
			<svg:rect x="-0.2" y="-0.2" width="0.4" height="0.4" fill="url(#bg{name()})" stroke="black" stroke-width="0.03"/>
			<svg:use xlink:href="#symbol{name()}"/>
			<xsl:if test="text()!=''">
				<svg:text x="0" y="0.45" text-anchor="middle" class="improvement"><xsl:value-of select="text()"/></svg:text>
			</xsl:if>
		</svg:g>
	</xsl:template>

	<!-- city annotation -->
	<xsl:template match="city">
		<!-- used to find the center of the current hex -->
		<xsl:variable name="hexindent" select="1 - round(../@row) mod 2"/>
		<xsl:variable name="hexy" select="1.732 * ../@row"/>
		<xsl:variable name="hexx" select="(2 * ../@col + $hexindent)"/>

		<!-- find the center of this subobject -->
		<xsl:variable name="indent" select="1 - round(@row) mod 2"/>
		<xsl:variable name="y" select="1.732 * @row"/>
		<xsl:variable name="x" select="(2 * @col + $indent)"/>

		<svg:g class="city">
			<!-- point to the actual location if it's near the edge;
				markers work, but don't form a target for links, so link the icon instead -->
			<xsl:if test="@row and @col">
				<svg:path d="M{$hexx},{$hexy + 0.3} L{$x},{$y}" stroke="black" stroke-width="0.03" marker-end="url(#markerCity)" stroke-dasharray="0.06,0.06"/>
			</xsl:if>

			<!-- icon and name under hex number -->
			<svg:a xlink:href="{concat(/map/@href,.)}" title="{.}">
				<svg:g transform="translate({$hexx},{$hexy + 0.3})">
					<svg:rect x="-0.2" y="-0.2" width="0.4" height="0.4" fill="rgb(220,220,230)" stroke="black" stroke-width="0.03"/>
					<svg:use xlink:href="#symbolCity" title="City of {text()}"/>
					<svg:text x="0" y="0.45" text-anchor="middle" class="city"><xsl:value-of select="text()"/></svg:text>
				</svg:g>
			</svg:a>
		</svg:g>
	</xsl:template>



	<!-- pathed elements -->
	<xsl:template match="river|road|lake">
		<!-- A river or road is a path of hex ids; a lake is a closed path -->
		<svg:path class="{name()}" title="{@name}">
			<xsl:attribute name="d">
				M<xsl:apply-templates select="hex"/>
				<xsl:if test="name()='lake'">z</xsl:if>
			</xsl:attribute>
		</svg:path>
	</xsl:template>

	<!-- translate path coordinates -->
	<xsl:template match="lake/hex|river/hex|road/hex">
		<xsl:variable name="indent" select="1 - round(@row) mod 2"/>
		<xsl:variable name="y" select="1.732 * @row"/>
		<xsl:variable name="x" select="(2 * @col + $indent)"/>

		<xsl:value-of select="$x"/>
		<xsl:text>,</xsl:text>
		<xsl:value-of select="$y"/>
		<xsl:text> </xsl:text>
		<xsl:if test="position()=1">L</xsl:if>
	</xsl:template>


	<xsl:template name="symbolOther">
		<svg:text x="0" y="0" class="symbol" transform="translate(-0.08,0.13)">?</svg:text>
	</xsl:template>

	<xsl:template name="symbolCity">
		<xsl:call-template name="symbolStructure"/>
	</xsl:template>
	
	<xsl:template name="symbolFarm">
		<svg:path d="M0,0 l0,0.15 m0.05,-0.15 l0,0.15 m0.05,-0.15 l0,0.15
					M0.13,0.02 l0.15,0 m-0.15,0.05 l0.15,0 m-0.15,0.05 l0.15,0
					M-0.02,0.18 l0.15,0 m-0.15,0.05 l0.15,0 m-0.15,0.05 l0.15,0
					M0.16,0.15 l0,0.15 m0.05,-0.15 l0,0.15 m0.05,-0.15 l0,0.15
					" class="icon" stroke-width="0.1" stroke="black" transform="translate(-0.13,-0.14)"/>
	</xsl:template>
	
	<xsl:template name="symbolFort">
		<svg:path d="M0,0 l0.2,0 -0.02,0.15 -0.08,0.07 -0.08,-0.07 z" fill="gray" class="icon" transform="translate(-0.1,-0.1)"/>
	</xsl:template>

	<xsl:template name="symbolHerbal">
		<svg:path d="M 0,0 L 0,-0.05 -0.1,-0.15 0.05,-0.05 0.05,-0.15 0.08,-0.2 0.1,-0.05 0.15,-0.15 0.2,-0.15 0.15,-0.1 0.15,0 0.07,0.02 z" fill="green" stroke="black" stroke-width="0.03" class="icon" transform="translate(-0.075,0.1)"/>
	</xsl:template>

	<xsl:template name="symbolLandmark">
		<svg:path d="M0,0 l0.1,0.3 l-0.25,-0.2 l0.3,0 l-0.25,0.2z" fill="black" class="icon" transform="translate(0.5,-0.275)"/>
	</xsl:template>

	<!-- shovel icon, kinda sucks <svg:path d="M0.15,0 L0.15,0.05 0.4,0.05 0.4,0.1 0.15,0.1 0.15,0.15 0.05,0.15 0,0.075 0.05,0 z" fill="gray" class="icon" transform="translate(-0.2,-0.075)"/>-->
	<xsl:template name="symbolMine">
		<svg:g transform="translate(-0.15,-0.05)" class="icon">
			<svg:path d="M0,0 l0.3,0 l-0.08,0.15 l-0.14,0z" fill="gray"/>
			<svg:path d="M0.08,0 l0.05,-0.05 l0.1,0.05" fill="black"/>
			<svg:circle cx="0.08" cy="0.18" r="0.03"/>
			<svg:circle cx="0.22" cy="0.18" r="0.03"/>
		</svg:g>
	</xsl:template>
	
	<xsl:template name="symbolMineral">
		<svg:g transform="translate(-0.1,-0.075)">
			<xsl:comment>shape</xsl:comment>
			<svg:path d="M0,0 L0.2,0 0.25,0.05 0.1,0.2 -0.05,0.05z" fill="white" class="icon" />
			<xsl:comment>detail lines</xsl:comment>
			<svg:path d="M0.05,0 L0.04,0.07 0.1,0.2 M0.15,0 L0.16,0.05 0.1,0.2 M-0.05,0.05 L0.04,0.07 0.16,0.05 0.25,0.05" stroke="black" stroke-width="0.01"/>
		</svg:g>
	</xsl:template>

	<xsl:template name="symbolStructure">
		<svg:path d="M0,0 l0,-0.1 -0.05,-0.05  0,-0.1 0.07,0  0,0.05 0.03,0  0,-0.05 0.08,0  0,0.05 0.03,0  0,-0.05 0.07,0  0,0.1 -0.05,0.05 0,0.1z" fill="gray" class="icon" transform="translate(-0.09,0.15)"/>
		<!--
		<svg:path d="M0,0 L0,-0.1 -0.05,-0.15 -0.05,-0.25  0,-0.25 0,-0.2 0.05,-0.2  0.05,-0.25 0.15,-0.25 0.15,-0.2  0.2,-0.2 0.2,-0.25 0.25,-0.25 0.25,-0.2 0.25,-0.15 0.2,-0.1 0.2,0 z" fill="gray" class="icon" transform="translate(-0.1,0.15)"/>-->
	</xsl:template>

	<xsl:template name="symbolWater">
		<svg:path d="M0.1,0 L0.15,0.2 0.2,0.3 0.17,0.37 0.1,0.4 0.03,0.37 0,0.3 0.05,0.2 0.1,0 z" fill="lightblue" class="icon" transform="translate(-0.1,-0.2)"/>
	</xsl:template>

</xsl:stylesheet>