<?xml version="1.0"?>
<?xml-stylesheet href="testArchimedes-bindings.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

<head>
	<script>
	      function test2() 
	      { 
	        var ci = document.getElementById("circle2");
	        ci.setAttribute("style", "fill: yellow");
		}

	      function showlength() 
	      { 
	        var line = document.getElementById("line");
	        var tx = document.getElementById("text1");
		tx.firstChild.data = line.length;
		}
	</script>

<style>
canvas
{
	-moz-binding: url("testArchimedes-bindings.xml#canvas");

}


controlpoint
{
	-moz-binding: url("testArchimedes-bindings.xml#controlpoint");
}

shape
{
	-moz-binding: url("testArchimedes-bindings.xml#shape");
}

curve
{
	-moz-binding: url("testArchimedes-bindings.xml#curve");
}

cline
{
	-moz-binding: url("testArchimedes-bindings.xml#cline");
}

</style>
<link rel="stylesheet" href="styles.css"/>
</head>

<body>
<h1>LINEAMENTA SVG Test Image</h1>
<div margin="auto">
<h2>Drag the line by the yellow dots</h2>
<button name="sl" id="sl" onclick="showlength();">Show length</button>
<br/>

<canvas id="container">
   <svg:foreignObject>
		<img id="image" name="pic" src="kirche.png" border="0"/>
    </svg:foreignObject>
   <svg:text id="text1" x="25" y="25">length</svg:text>
   <shape x1="100" y1="100" x2="200" y2="100">
	<cline id="line" x1var="x1" y1var="y1" x2var="x2" y2var="y2" style="stroke:yellow; fill:none; stroke-width:1;"/>
	<controlpoint xvar="x1" yvar="y1" style="fill: #FFFF80;"/>
	<controlpoint xvar="x2" yvar="y2" style="fill: #FFFF80;"/>
  </shape>
</canvas> 
</div>
</body>
</html>

