<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(trapezoid)
{
  return 'M'+trapezoid.left.p1.x+','+trapezoid.left.p1.y+
        ' L'+trapezoid.left.p2.x+','+trapezoid.left.p2.y+
        ' L'+trapezoid.right.p2.x+','+trapezoid.right.p2.y+
        ' L'+trapezoid.right.p1.x+','+trapezoid.right.p1.y+
        ' Z';
}

function Point(x, y)
{
  this.x = parseFloat(x);
  this.y = parseFloat(y);
}

function Line(p1x, p1y, p2x, p2y, minY, maxY)
{
  minY = parseFloat(minY);
  maxY = parseFloat(maxY);

  // make sure minY is less than maxY
  if (maxY < minY) {
    var tmp = minY;
    minY = maxY;
    maxY = tmp;
  }

  this.p1 = new Point(p1x, p1y);
  this.p2 = new Point(p2x, p2y);

  // make sure p1.y is less than p2.y
  if (this.p2.y < this.p1.y) {
    var tmp = this.p1;
    this.p1 = this.p2;
    this.p2 = this.p1;
  }

  // clip the line using minY and maxY
  var m = (this.p2.x-this.p1.x) / (this.p2.y-this.p1.y);
  var c = this.p1.x - m * this.p1.y;

  this.p1.x = m * minY + c;
  this.p1.y = minY;
  this.p2.x = m * maxY + c;
  this.p2.y = maxY;

  // hack to get bet viewBox - deliberately polutes global object
  if (window.minX===undefined || this.p1.x < window.minX)
    window.minX = this.p1.x
  else if (window.maxX===undefined || this.p1.x > window.maxX)
    window.maxX = this.p1.x;
  if (window.minY===undefined || this.p1.y < window.minY)
    window.minY = this.p1.y;
  else if (window.maxY===undefined || this.p1.y > window.maxY)
    window.maxY = this.p1.y;
  if (window.minX===undefined || this.p2.x < window.minX)
    window.minX = this.p2.x
  else if (window.maxX===undefined || this.p2.x > window.maxX)
    window.maxX = this.p2.x;
  if (window.minY===undefined || this.p2.y < window.minY)
    window.minY = this.p2.y;
  else if (window.maxY===undefined || this.p2.y > window.maxY)
    window.maxY = this.p2.y;
}

function Trapezoid(dataString, i)
{
  var parts = dataString.split(', ');
  if (parts.length != 10)
    return;
  this.left  = new Line(parts[2], parts[3], parts[4], parts[5], parts[0], parts[1]);
  this.right = new Line(parts[6], parts[7], parts[8], parts[9], parts[0], parts[1]);
}

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

  // split lines
  var lines = input.split('\n');
  window.d = [];

  // parse lines into trapezoids
  for (var i=0; i<lines.length; ++i) {
    window.d[i] = new Trapezoid(lines[i], i);
  }

  var svgElement = document.getElementById('svg');

  // set viewBox to fit trapezoids to viewport
  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);

  // clear min/max data ready for next call
  delete window.minX;
  delete window.maxX;
  delete window.minY;
  delete window.maxY;
}

function showTrapezoids(event)
{
  calculateTrapezoids()

  var svgElement = document.getElementById('svg');

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

  // create path elements for trapazoids
  for (var i=0; i<d.length && d[0].left; ++i) {
    var path = document.createElementNS(svgns, 'path');
    path.setAttributeNS(null, 'id', 'trapezoid-'+i);
    path.setAttributeNS(null, 'd', getDataString(d[i]));
    path.setAttributeNS(null, 'onclick', 'alert(this.id)');
    svgElement.appendChild(path);
  }

  event.preventDefault();
}

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

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

  event.preventDefault();
}

function iterate(event)
{
  calculateTrapezoids()

  var svgElement = document.getElementById('svg');

  var path = document.createElementNS(svgns, 'path');
  path.setAttributeNS(null, 'fill', 'red');
  path.setAttributeNS(null, 'fill-opacity', '1');
  path.setAttributeNS(null, 'stroke', 'none');
  svgElement.appendChild(path);

  for (var i=0; i<window.d.length && window.d[0].left; ++i) {
    path.setAttributeNS(null, 'd', getDataString(d[i]));
    var input = prompt('Currently showing trapazoid '+i+'. Next trapazoid will be', i+1);
    if (input===null) break;
    i = parseInt(input) - 1;
  }

  svgElement.removeChild(path);

  event.preventDefault();
}

]]>
</script>

</head>
<body onload="">

  <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="showTrapezoids(event);">Show Trapezoids</button>
      <button onclick="hideTrapezoids(event);">Hide 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="blue" stroke-width="1000px">
    </svg>

  </div>

  </body>
</html>
