<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
				xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
				xmlns:src="http://www.score.com">
<xsl:template match="src:score">

<html>
<body>

<h1><xsl:value-of select="@title"></xsl:value-of></h1>

<svg width="800" height="500">

  <line x1="113" x2="113" y1="10" y2="380" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="259" x2="259" y1="10" y2="380" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="405" x2="405" y1="10" y2="380" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="551" x2="551" y1="10" y2="380" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="697" x2="697" y1="10" y2="380" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>


  <line x1="86" x2="697" y1="10" y2="10" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="86" x2="697" y1="68" y2="68" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="86" x2="697" y1="126" y2="126" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="86" x2="697" y1="185" y2="185" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="86" x2="697" y1="243" y2="243" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="86" x2="697" y1="301" y2="301" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>
  <line x1="86" x2="697" y1="360" y2="360" style="stroke: black;stroke-dasharray: 1 2;stroke-width: 1;"></line>

<xsl:for-each select="src:value">
	<xsl:variable name="x" select="113+position()*146" />
	<xsl:variable name="y" select="419-@val*59" />
	
	<circle cx="{$x}" cy="{$y}" data-value="7.2" r="5"></circle>
</xsl:for-each>
<!-- 
  <circle cx="113" cy="192" data-value="7.2" r="5"></circle>
  <circle cx="259" cy="171" data-value="8.1" r="5"></circle>
  <circle cx="405" cy="179" data-value="7.7" r="5"></circle>
  <circle cx="551" cy="200" data-value="6.8" r="5"></circle>
  <circle cx="697" cy="204" data-value="6.7" r="5"></circle>
-->
</svg>

</body>
</html> 

</xsl:template>
</xsl:stylesheet>