<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Trapezoid Drawer</title>
    <script type="text/javascript">
      <![CDATA[

var svgns = 'http://www.w3.org/2000/svg';
var xlinkns = 'http://www.w3.org/1999/xlink';

function getDataString(d)
{
  return 'M'+d[2]+','+d[3]+
        ' L'+d[4]+','+d[5]+
        ' L'+d[8]+','+d[9]+
        ' L'+d[6]+','+d[7]+
        ' Z';
}

function drawTrapezoids(event)
{
  var input = document.getElementById('input').value;

  // split lines
  var lines = input.split('\n');
  window.d = [];
  var minX, minY, maxX, maxY;

  // get coordinates from lines (one line per trapizoid)
  for (var i=0; i<lines.length; ++i) {
    var line = lines[i];
    var parts = line.split(', ');
    d[i] = [];
    for (var j=0; j<parts.length; ++j) {
      var coord = parseInt(parts[j])
      if (j%2) {
        if (!minY || coord < minY) minY = coord;
        else if (!maxY || coord > maxY) maxY = coord;
      }
      else {
        if (!minX || coord < minX) minX = coord;
        else if (!maxX || coord > maxX) maxX = coord;
      }
      d[i][j] = coord;
    }
  }

//  var svgElement = document.createElementNS(svgns, 'svg');
  var svgElement = document.getElementById('svg');

  // delete all previous trapazoids
  while (svgElement.firstChild)
    svgElement.removeChild(svgElement.firstChild);

  // create path elements for trapazoids
  var diffX = maxX-minX;
  var diffY = maxY-minY;
  var marginX = diffX/20;
  var marginY = diffY/20;
  var viewBox = (minX-marginX)+' '+(minY-marginY)+' '+(diffX+2*marginX)+' '+(diffY+2*marginY);
  svgElement.setAttributeNS(null, 'viewBox', viewBox);
  for (var i=0; i<d.length && d[i].length==10; ++i) {
    var path = document.createElementNS(svgns, 'path');
    path.setAttributeNS(null, 'id', 'path'+i);
    path.setAttributeNS(null, 'd', getDataString(d[i]));
    path.setAttributeNS(null, 'onclick', 'alert(this.id)');
    svgElement.appendChild(path);
  }

  event.preventDefault();
}

function iterate(event)
{
  var svgElement = document.getElementById('svg');

  for (var i=0; i<window.d.length && window.d[i].length==10; ++i) {
    // delete all previous trapazoids
    while (svgElement.firstChild)
      svgElement.removeChild(svgElement.firstChild);

    var path = document.createElementNS(svgns, 'path');
    path.setAttributeNS(null, 'id', 'path'+i);
    path.setAttributeNS(null, 'd', getDataString(d[i]));
    path.setAttributeNS(null, 'onclick', 'alert(this.id)');
    svgElement.appendChild(path);
    var input = prompt('Currently showing trapazoid '+i+'. Enter the trapazoid to be shown.', i+1);
    if (input===null) return;
    i = parseInt(input) - 1;
  }

  event.preventDefault();
}

]]>
</script>

</head>
<body onload="handleLoad(event)">

  <div style="width: 40em;">

    <p id="title" class="center"><font face="Arial" color="#800000" size="5">Trapezoid Drawer</font></p>

    <form name="change">
      <textarea id="input" cols="70" rows="10" wrap="virtual">10351008, 10606705, 11360539, 10351008, 10829579, 10606705, 11949861, 10351008, 12480821, 10606705
10606705, 10614625, 10829579, 10606705, 10462144, 11067454, 12480821, 10606705, 12492821, 10614625
10614625, 10705655, 10829579, 10606705, 10462144, 11067454, 12492821, 10614625, 12603545, 10713575
10705655, 10713575, 10829579, 10606705, 10462144, 11067454, 12591545, 10705655, 12848256, 11067454
10705655, 10713575, 12591545, 10705655, 12848256, 11067454, 12591545, 10705655, 12661145, 10779239
10705655, 10713575, 12591545, 10705655, 12661145, 10779239, 12492821, 10614625, 12603545, 10713575
10713575, 10779239, 10829579, 10606705, 10462144, 11067454, 12591545, 10705655, 12848256, 11067454
10713575, 10779239, 12591545, 10705655, 12848256, 11067454, 12591545, 10705655, 12661145, 10779239
10713575, 10779239, 12591545, 10705655, 12661145, 10779239, 12603545, 10713575, 12814745, 10917479
10779239, 10917479, 10829579, 10606705, 10462144, 11067454, 12591545, 10705655, 12848256, 11067454
10779239, 10917479, 12591545, 10705655, 12848256, 11067454, 12661145, 10779239, 14043545, 12170855
10779239, 10917479, 12661145, 10779239, 14043545, 12170855, 12603545, 10713575, 12814745, 10917479
10917479, 11067454, 10829579, 10606705, 10462144, 11067454, 12591545, 10705655, 12848256, 11067454
10917479, 11067454, 12591545, 10705655, 12848256, 11067454, 12661145, 10779239, 14043545, 12170855
10917479, 11067454, 12661145, 10779239, 14043545, 12170855, 12814745, 10917479, 14043545, 12170855
11067454, 11642000, 10462144, 11067454, 10462144, 12216546, 12848256, 11067454, 12979392, 11642000
11067454, 11642000, 12848256, 11067454, 12979392, 11642000, 12661145, 10779239, 14043545, 12170855
11067454, 11642000, 12661145, 10779239, 14043545, 12170855, 12814745, 10917479, 14043545, 12170855
11642000, 12170855, 10462144, 11067454, 10462144, 12216546, 12979392, 11642000, 12848256, 12216546
11642000, 12170855, 12979392, 11642000, 12848256, 12216546, 12661145, 10779239, 14043545, 12170855
11642000, 12170855, 12661145, 10779239, 14043545, 12170855, 12814745, 10917479, 14043545, 12170855
12170855, 12216546, 10462144, 11067454, 10462144, 12216546, 12979392, 11642000, 12848256, 12216546
12170855, 12216546, 12979392, 11642000, 12848256, 12216546, 14043545, 12170855, 12170855, 14043545
12170855, 12216546, 14043545, 12170855, 12170855, 14043545, 14043545, 12170855, 14300256, 12532654
12216546, 12532654, 10462144, 12216546, 10718855, 12578345, 12848256, 12216546, 12480821, 12677295
12216546, 12532654, 12848256, 12216546, 12480821, 12677295, 14043545, 12170855, 12170855, 14043545
12216546, 12532654, 14043545, 12170855, 12170855, 14043545, 14043545, 12170855, 14300256, 12532654
12532654, 12578345, 10462144, 12216546, 10718855, 12578345, 11914144, 12532654, 11914144, 13681746
12532654, 12578345, 11914144, 12532654, 14431392, 13107200, 12848256, 12216546, 12480821, 12677295
12532654, 12578345, 12848256, 12216546, 12480821, 12677295, 14043545, 12170855, 12170855, 14043545
12532654, 12578345, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12578345, 12586265, 10718855, 12578345, 10788455, 12651929, 11914144, 12532654, 11914144, 13681746
12578345, 12586265, 11914144, 12532654, 14431392, 13107200, 12848256, 12216546, 12480821, 12677295
12578345, 12586265, 12848256, 12216546, 12480821, 12677295, 14043545, 12170855, 12170855, 14043545
12578345, 12586265, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12586265, 12651929, 10718855, 12578345, 10788455, 12651929, 10730855, 12586265, 10942055, 12790169
12586265, 12651929, 10730855, 12586265, 10942055, 12790169, 10730855, 12586265, 10841579, 12685215
12586265, 12651929, 10730855, 12586265, 10841579, 12685215, 11914144, 12532654, 11914144, 13681746
12586265, 12651929, 11914144, 12532654, 14431392, 13107200, 12848256, 12216546, 12480821, 12677295
12586265, 12651929, 12848256, 12216546, 12480821, 12677295, 14043545, 12170855, 12170855, 14043545
12586265, 12651929, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12651929, 12664351, 10788455, 12651929, 12170855, 14043545, 10730855, 12586265, 10942055, 12790169
12651929, 12664351, 10730855, 12586265, 10942055, 12790169, 10730855, 12586265, 10841579, 12685215
12651929, 12664351, 10730855, 12586265, 10841579, 12685215, 11914144, 12532654, 11914144, 13681746
12651929, 12664351, 11914144, 12532654, 14431392, 13107200, 12848256, 12216546, 12480821, 12677295
12651929, 12664351, 12848256, 12216546, 12480821, 12677295, 14043545, 12170855, 12170855, 14043545
12651929, 12664351, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12664351, 12677295, 10788455, 12651929, 12170855, 14043545, 10730855, 12586265, 10942055, 12790169
12664351, 12677295, 10730855, 12586265, 10942055, 12790169, 10730855, 12586265, 10841579, 12685215
12664351, 12677295, 10730855, 12586265, 10841579, 12685215, 11914144, 12532654, 11914144, 13681746
12664351, 12677295, 12848256, 12216546, 12480821, 12677295, 11914144, 12532654, 14431392, 13107200
12664351, 12677295, 11914144, 12532654, 14431392, 13107200, 14043545, 12170855, 12170855, 14043545
12664351, 12677295, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12677295, 12680572, 10788455, 12651929, 12170855, 14043545, 10730855, 12586265, 10942055, 12790169
12677295, 12680572, 10730855, 12586265, 10942055, 12790169, 10829579, 12677295, 10841579, 12685215
12677295, 12680572, 10829579, 12677295, 10841579, 12685215, 10829579, 12677295, 11360539, 12932992
12677295, 12680572, 10829579, 12677295, 11360539, 12932992, 10730855, 12586265, 10841579, 12685215
12677295, 12680572, 10730855, 12586265, 10841579, 12685215, 11914144, 12532654, 11914144, 13681746
12677295, 12680572, 12480821, 12677295, 11949861, 12932992, 11914144, 12532654, 14431392, 13107200
12677295, 12680572, 11914144, 12532654, 14431392, 13107200, 14043545, 12170855, 12170855, 14043545
12677295, 12680572, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12680572, 12685215, 10788455, 12651929, 12170855, 14043545, 10730855, 12586265, 10942055, 12790169
12680572, 12685215, 10730855, 12586265, 10942055, 12790169, 10829579, 12677295, 10841579, 12685215
12680572, 12685215, 10829579, 12677295, 10841579, 12685215, 10730855, 12586265, 10841579, 12685215
12680572, 12685215, 10730855, 12586265, 10841579, 12685215, 10829579, 12677295, 11360539, 12932992
12680572, 12685215, 10829579, 12677295, 11360539, 12932992, 11914144, 12532654, 11914144, 13681746
12680572, 12685215, 12480821, 12677295, 11949861, 12932992, 11914144, 12532654, 14431392, 13107200
12680572, 12685215, 11914144, 12532654, 14431392, 13107200, 14043545, 12170855, 12170855, 14043545
12680572, 12685215, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12685215, 12790169, 10788455, 12651929, 12170855, 14043545, 10730855, 12586265, 10942055, 12790169
12685215, 12790169, 10730855, 12586265, 10942055, 12790169, 10829579, 12677295, 11360539, 12932992
12685215, 12790169, 10829579, 12677295, 11360539, 12932992, 11914144, 12532654, 11914144, 13681746
12685215, 12790169, 12480821, 12677295, 11949861, 12932992, 11914144, 12532654, 14431392, 13107200
12685215, 12790169, 11914144, 12532654, 14431392, 13107200, 14043545, 12170855, 12170855, 14043545
12685215, 12790169, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12790169, 12861127, 10788455, 12651929, 12170855, 14043545, 10942055, 12790169, 12170855, 14043545
12790169, 12861127, 10942055, 12790169, 12170855, 14043545, 10829579, 12677295, 11360539, 12932992
12790169, 12861127, 10829579, 12677295, 11360539, 12932992, 11914144, 12532654, 11914144, 13681746
12790169, 12861127, 12480821, 12677295, 11949861, 12932992, 11914144, 12532654, 14431392, 13107200
12790169, 12861127, 11914144, 12532654, 14431392, 13107200, 14043545, 12170855, 12170855, 14043545
12790169, 12861127, 14043545, 12170855, 12170855, 14043545, 14300256, 12532654, 14431392, 13107200
12861127, 12932992, 10788455, 12651929, 12170855, 14043545, 10942055, 12790169, 12170855, 14043545
12861127, 12932992, 10942055, 12790169, 12170855, 14043545, 10829579, 12677295, 11360539, 12932992
12861127, 12932992, 10829579, 12677295, 11360539, 12932992, 11914144, 12532654, 11914144, 13681746
12861127, 12932992, 12480821, 12677295, 11949861, 12932992, 14043545, 12170855, 12170855, 14043545
12861127, 12932992, 11914144, 12532654, 14431392, 13107200, 14300256, 12532654, 14431392, 13107200
12932992, 13107200, 10788455, 12651929, 12170855, 14043545, 10942055, 12790169, 12170855, 14043545
12932992, 13107200, 10942055, 12790169, 12170855, 14043545, 11914144, 12532654, 11914144, 13681746
12932992, 13107200, 11914144, 12532654, 11914144, 13681746, 14043545, 12170855, 12170855, 14043545
12932992, 13107200, 11914144, 12532654, 14431392, 13107200, 14300256, 12532654, 14431392, 13107200
13107200, 13681746, 10788455, 12651929, 12170855, 14043545, 10942055, 12790169, 12170855, 14043545
13107200, 13681746, 10942055, 12790169, 12170855, 14043545, 11914144, 12532654, 11914144, 13681746
13107200, 13681746, 11914144, 12532654, 11914144, 13681746, 14043545, 12170855, 12170855, 14043545
13681746, 14043545, 10788455, 12651929, 12170855, 14043545, 10942055, 12790169, 12170855, 14043545
13681746, 14043545, 10942055, 12790169, 12170855, 14043545, 11914144, 13681746, 12170855, 14043545
13681746, 14043545, 11914144, 13681746, 12170855, 14043545, 14043545, 12170855, 12170855, 14043545
13107200, 14043545, 13107200, 13107200, 12170855, 14043545, 14431392, 13107200, 12170855, 14043545</textarea>
      <button onclick="drawTrapezoids(event);">Draw Trapezoids</button>
      <button onclick="iterate(event);">Iterate</button>
    </form>

    <svg version="1.1" baseProfile="full"
         xmlns="http://www.w3.org/2000/svg"
         id="svg"
         width="500px" height="400px" style="border: 1px solid black;"
         fill="black" fill-opacity="0.2" stroke="red" stroke-width="1000px">
    </svg>

  </div>

  </body>
</html>
