<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
>
<head>
	<title>Open Street Map</title>

	<style type="text/css">
	  body { font-family: sans-serif;}
	  label { display: inline-block; width: 3em; margin: 0 1em }
          .xforms-repeat-item-selected { background: yellow}
	  div.map { line-height: 0}
	  .small .value img {height: 1cm; width: 1cm}
	</style> 

	<model xmlns="http://www.w3.org/2002/xforms">
	    <instance>
		<data xmlns="">
		    <zoom>10</zoom><posx>87140</posx><posy>130979</posy><x/><y/><scale/><maxpos/><url/>
		</data>
	    </instance>
	    <bind nodeset="scale" calculate="power(2, 18 - ../zoom)"/>
	    <bind nodeset="maxpos" calculate="power(2, 18)-1"/>
	    <bind nodeset="x" calculate="floor(../posx div ../scale)"/>
	    <bind nodeset="y" calculate="floor(../posy div ../scale)"/>
	    <bind nodeset="url"
		  calculate="concat('http://a.tile.openstreetmap.org/', ../zoom, '/' , ../y, '/', ../x, '.png')"/>
	</model>
</head>
<body>
    <group xmlns="http://www.w3.org/2002/xforms">
 	<trigger>
	    <label>-</label>
	    <setvalue ev:event="DOMActivate" ref="zoom" value="if(. = 0, 0, . - 1)"/>
	</trigger>
	<trigger>
	    <label>+</label>
	    <setvalue ev:event="DOMActivate" ref="zoom" value="if(. = 18, ., . + 1)"/>
	</trigger>
	<trigger>
	    <label>&#x2190;<!--left arrow--></label>
	    <setvalue ev:event="DOMActivate" ref="posy" value="if(. - ../scale &lt; 0, ., . - ../scale)"/>
	</trigger>
	<trigger>
	    <label>&#x2192;</label>
	    <setvalue ev:event="DOMActivate" ref="posy" value="if(. + ../scale &gt; ../maxpos, ., . + ../scale)"/>
	</trigger>
	<trigger>
	    <label>&#x2193;<!--Down arrow--></label>
	    <setvalue ev:event="DOMActivate" ref="posx" value="if(. + ../scale &gt; ../maxpos, ., . + ../scale)"/>
	</trigger>
	<trigger>
	    <label>&#x2191;</label>
	    <setvalue ev:event="DOMActivate" ref="posx" value="if(. - ../scale &lt; 0, ., . - ../scale)"/>
	</trigger>
	<div class="map">
	    <output ref="url" mediatype="image/*" />
<!--	    <output value="concat('http://a.tile.openstreetmap.org/', zoom, '/', x+1, '/', y, '.png')" mediatype="image/*" />
    <br/>   <output value="concat('http://a.tile.openstreetmap.org/', zoom, '/', x, '/', y+1, '.png')" mediatype="image/*" />
	    <output value="concat('http://a.tile.openstreetmap.org/', zoom, '/', x+1, '/', y+1, '.png')" mediatype="image/*" /> -->
	</div>
    </group>
</body>
</html>

