<?xml version="1.0"?>
<?xml-stylesheet href="drawbindings.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <title>Moz Draw</title>

  <style>
    #dNd {border: 1px solid black; width:300px; position:absolute;}
  </style>
  

  <script src="dnd.js"></script>
  <script src="draw.js"></script>
</head>

<body onload="loadit()">

  <div style="float:right; width:200px; border: 1px solid black; padding:5px; margin:10px;">
    <div style="border-bottom:1px solid black;">Draw</div>
     
    <p>
      <div onmousedown="drag(event, 'box')" id="doBox">Box</div>
      <div onmousedown="drag(event, 'circle')">Circle</div>
      <div onmousedown="drag(event, 'triangle')">Triangle</div>
      <div onmousedown="drag(event, 'line')">Line</div>
    </p>
    
    <p id="info">
      Drag any of the top items to the left-hand yellow canvas.
    </p>
  </div>

  <div>
    <canvas id='root'>
      <svg:rect x='0' y='0' width='500' height='400' style='fill:yellow'/>
     <!-- <box x='5' y='5' width='100' height='100' style='fill:green'><controlpoint type="resize-up-right"/><controlpoint type="resize-up" /><controlpoint type="resize-up-left" /><controlpoint type="resize-left" /><controlpoint type="resize-bottom-left" /><controlpoint type="resize-bottom" /><controlpoint type="resize-bottom-right" /><controlpoint type="resize-right" /></box>
      <circ cx='300' cy='100' r="50" style='fill:blue'><controlpoint type="resize-up-right"/><controlpoint type="resize-up-left" /><controlpoint type="resize-bottom-left" /><controlpoint type="resize-bottom-right" /></circ>
      <triangle points="50,50 50,300 300,300" style='fill:blue'><controlpoint type="1"/><controlpoint type="2" /><controlpoint type="3" /></triangle>    
      <svg:polyline points="0,0 1,1" style="fill:none;stroke:red;stroke-width:2"/>-->
      <svg:polyline points="200,200 250,200 200,200" style="fill:none;stroke:red;stroke-width:3"/>
    </canvas>
  </div>

  <div id="debug" style="background-color:white; border: 1px solid black; position:fixed;bottom:0px; overflow:-moz-scrollbars-vertical; width:80%; height:4em;"> </div>

  <div id="dNd">Test</div>

</body>
</html>
