<head>
<script>
//
// PNG drawing library for JavaScript.
// Copyright (C) 1999 by Roger E Critchlow Jr,
// Santa Fe, New Mexico, USA.
//
// Licensed under the Academic Free License version 2.1
//
// The home page for Pnglets is http://www.elf.org/pnglets,
// a copy of the AFL may be found at http://www.opensource.org/licenses/afl-2.1.php,
// Pnglets were inspired by and copied from gd1.3, http://www.boutell.com/gd,
// other parts were inspired by or copied from Tcl/Tk, http://www.scriptics.com,
// and some algorithms were taken from Foley & van Dam 2nd Edition.
//
// Thanks to Alex Vincent for pointing out the advantages of eliminating strict
// javascript warnings.
//

// create a new Pnglet of specified width, height, and depth
// width and height are specified in pixels
// depth is really the number of palette entries
function Pnglet(width,height,depth) {
  this.width = width || 16;
  this.height = height || 16;
  this.depth = Math.min(256, depth || 16);

  // pixel data and row filter identifier size
  this.pix_size = height*(width+1);

  // deflate header, pix_size, block headers, adler32 checksum
  this.data_size = 2 + this.pix_size + 5*Math.floor((this.pix_size+0xffff-1)/0xffff) + 4;

  // offsets and sizes of Png chunks
  this.ihdr_offs = 0;                    // IHDR offset and size
  this.ihdr_size = 4+4+13+4;
  this.plte_offs = this.ihdr_offs+this.ihdr_size;    // PLTE offset and size
  this.plte_size = 4+4+3*depth+4;
  this.trns_offs = this.plte_offs+this.plte_size;    // tRNS offset and size
  this.trns_size = 4+4+depth+4;
  this.idat_offs = this.trns_offs+this.trns_size;    // IDAT offset and size
  this.idat_size = 4+4+this.data_size+4;
  this.iend_offs = this.idat_offs+this.idat_size;    // IEND offset and size
  this.iend_size = 4+4+4;
  this.png_size = this.iend_offs+this.iend_size;    // total PNG size

  // array of one byte strings
  this.png = new Array(this.png_size);

  // functions for initializing data
  function initialize(png, offs, str) {
    for (var i = 1; i < arguments.length; i += 1)
      if (typeof arguments[i].length != "undefined")
        for (var j = 0; j < arguments[i].length; j += 1)
          png[offs++] = arguments[i].charAt(j);
  };
  function byte2(w) { return String.fromCharCode((w>>8)&255, w&255); };
  function byte4(w) { return String.fromCharCode((w>>24)&255, (w>>16)&255, (w>>8)&255, w&255); };
  function byte2lsb(w) { return String.fromCharCode(w&255, (w>>8)&255); };

  // initialize everything to zero byte
  for (var i = 0; i < this.png_size; i += 1)
    this.png[i] = String.fromCharCode(0);

  // initialize non-zero elements
  initialize(this.png, this.ihdr_offs, byte4(this.ihdr_size-12), 'IHDR',
             byte4(width), byte4(height), String.fromCharCode(8, 3));
  initialize(this.png, this.plte_offs, byte4(this.plte_size-12), 'PLTE');
  initialize(this.png, this.trns_offs, byte4(this.trns_size-12), 'tRNS');
  initialize(this.png, this.idat_offs, byte4(this.idat_size-12), 'IDAT');
  initialize(this.png, this.iend_offs, byte4(this.iend_size-12), 'IEND');

  // initialize deflate header
  var header = ((8 + (7<<4)) << 8) | (3 << 6);
  header += 31 - (header % 31);
  initialize(this.png, this.idat_offs+8, byte2(header));

  // initialize deflate block headers
  for (i = 0; i*0xffff < this.pix_size; i += 1) {
    var size, bits;
    if (i + 0xffff < this.pix_size) {
      size = 0xffff;
      bits = String.fromCharCode(0);
    } else {
      size = this.pix_size - i*0xffff;
      bits = String.fromCharCode(1);
    }
    initialize(this.png, this.idat_offs+8+2+i*(5+0xffff), bits, byte2lsb(size), byte2lsb(~size));
  }

  // initialize palette hash
  this.palette = new Object();
  this.pindex = 0;
}

// version string/number
Pnglet.version = "19990427.0";

// test if coordinates are within bounds
Pnglet.prototype.inBounds = function(x,y) { return x >= 0 && x < this.width && y >= 0 && y < this.height; }

// clip an x value to the window width
Pnglet.prototype.clipX = function(x) { return (x < 0) ? 0 : (x >= this.width) ? this.width-1 : x ; }

// clip a y value to the window height
Pnglet.prototype.clipY = function(y) { return (y < 0) ? 0 : (y >= this.height) ? this.height-1 : y ; }

// compute the index into a png for a given pixel
Pnglet.prototype.index = function(x,y) {
  var i = y*(this.width+1)+x+1;
  var j = this.idat_offs+8+2+Math.floor((i/0xffff)+1)*5+i;
  return j;
}

// make a color in a Pnglet
Pnglet.prototype.color = function(red, green, blue, alpha) {
  alpha = alpha >= 0 ? alpha : 255;
  var rgba = (((((alpha<<8)+red)<<8)+green)<<8)+blue;
  if ( typeof this.palette[rgba] == "undefined") {
    if (this.pindex == this.depth) return String.fromCharCode(0);
    this.palette[rgba] = String.fromCharCode(this.pindex);
    this.png[this.plte_offs+8+this.pindex*3+0] = String.fromCharCode(red);
    this.png[this.plte_offs+8+this.pindex*3+1] = String.fromCharCode(green);
    this.png[this.plte_offs+8+this.pindex*3+2] = String.fromCharCode(blue);
    this.png[this.trns_offs+8+this.pindex] = String.fromCharCode(alpha);
    this.pindex += 1;
  }
  return this.palette[rgba];
}

// return true if this is a color
Pnglet.prototype.isColor = function(color) {
  return typeof(color) == 'string' &&
    color.length == 1 &&
    color.charCodeAt(0) >= 0 &&
    color.charCodeAt(0) < this.depth;
}

// find the red, green, blue, or alpha value of a Pnglet color
Pnglet.prototype.red = function(color) { return this.png[this.plte_offs+8+color.charCodeAt(0)*3+0].charCodeAt(0); }
Pnglet.prototype.green = function(color) { return this.png[this.plte_offs+8+color.charCodeAt(0)*3+1].charCodeAt(0); }
Pnglet.prototype.blue = function(color) { return this.png[this.plte_offs+8+color.charCodeAt(0)*3+2].charCodeAt(0); }
Pnglet.prototype.alpha = function(color) { return this.png[this.trns_offs+8+color.charCodeAt(0)].charCodeAt(0); }

// draw a point or points
Pnglet.prototype.point = function(pointColor, x0, y0) {
  var a = arguments;
  this.pointNXY(pointColor, (a.length-1)/2, function(i) { return a[2*i+1]; }, function(i) { return a[2*i+2]; });
}

Pnglet.prototype.pointNXY = function(pointColor, n, x, y) {
  if ( ! this.isColor(pointColor))
    return;
  for (var i = 0; i < n; i += 1) {
    var x1 = x(i), y1 = y(i);
    if (this.inBounds(x1,y1))
      this.png[this.index(x1,y1)] = pointColor;
  }
}

// read a pixel 
Pnglet.prototype.getPoint = function(x,y) { return this.inBounds(x,y) ? this.png[this.index(x,y)] : String.fromCharCode(0); }

// draw a horizontal line
Pnglet.prototype.horizontalLine = function(lineColor, x1, x2, y) {
  if ( ! this.isColor(lineColor))
    return;
  x1 = this.clipX(x1);
  x2 = this.clipX(x2);
  var x;
  if (x1 < x2)
    for (x = x1; x <= x2; x += 1)
      this.png[this.index(x,y)] = lineColor;
  else
    for (x = x2; x <= x1; x += 1)
      this.png[this.index(x,y)] = lineColor;
}

// draw a vertical line
Pnglet.prototype.verticalLine = function(lineColor, x, y1, y2) {
  if ( ! this.isColor(lineColor))
    return;
  y1 = this.clipY(y1);
  y2 = this.clipY(y2);
  var y;
  if (y1 < y2)
    for (y = y1; y <= y2; y += 1)
      this.png[this.index(x,y)] = lineColor;
  else
    for (y = y2; y <= y1; y += 1)
      this.png[this.index(x,y)] = lineColor;
}

// draw a general line
Pnglet.prototype.generalLine = function(lineColor, x1, y1, x2, y2) {
  if ( ! this.isColor(lineColor))
    return;
  var dx = Math.abs(x2-x1), dy = Math.abs(y2-y1);
  var incr1, incr2, d, x, y, xend, yend, xdirflag, ydirflag, xinc, yinc;
  if (dy <= dx) {
    d = 2*dy - dx;
    incr1 = 2*dy;
    incr2 = 2 * (dy - dx);
    if (x1 > x2) {
      x = x2;
      y = y2;
      ydirflag = -1;
      xend = x1;
    } else {
      x = x1;
      y = y1;
      ydirflag = 1;
      xend = x2;
    }
    yinc = (((y2 - y1) * ydirflag) > 0) ? 1 : -1;
    this.point(lineColor, x, y);
    while (x++ < xend) {
      if (d < 0) {
        d += incr1;
      } else {
        y += yinc;
        d += incr2;
      }
      this.point(lineColor, x, y);
    }
  } else {            /* dy > dx */
    d = 2*dx - dy;
    incr1 = 2*dx;
    incr2 = 2 * (dx - dy);
    if (y1 > y2) {
      y = y2;
      x = x2;
      yend = y1;
      xdirflag = -1;
    } else {
      y = y1;
      x = x1;
      yend = y2;
      xdirflag = 1;
    }
    xinc = (((x2 - x1) * xdirflag) > 0) ? 1 : -1;
    this.point(lineColor, x, y);
    while (y++ < yend) {
      if (d < 0) {
        d += incr1;
      } else {
        x += xinc;
        d += incr2;
      }
      this.point(lineColor, x, y);
    }
  }
}

// draw a line
Pnglet.prototype.line = function(lineColor, x0, y0) {
  var a = arguments;
  this.lineNXY(lineColor, (a.length-1)/2, function(i) { return a[2*i+1]; }, function(i) { return a[2*i+2]; });
}

Pnglet.prototype.lineNXY = function(lineColor, n, x, y) {
  if ( ! this.isColor(lineColor))
    return;
  var x1 = x(0), y1 = y(0);
  for (var i = 1; i < n; i += 1) {
    var x2 = x(i), y2 = y(i);
    if (x1 == x2)
      this.verticalLine(lineColor, x1, y1, y2);
    else if (y1 == y2)
      this.horizontalLine(lineColor, x1, x2, y1);
    else
      this.generalLine(lineColor, x1, y1, x2, y2);
    x1 = x2;
    y1 = y2;
  }
}

// draw a polygon
Pnglet.prototype.polygon = function(outlineColor, fillColor, x1, y1) {
  var a = arguments;
  this.polygonNXY(outlineColor, fillColor, (a.length-2)/2, function(i) {return a[2*i+2];}, function(i) {return a[2*i+3];});
}

Pnglet.prototype.polygonNXY = function(outlineColor, fillColor, n, x, y) {
  if (n <= 0)
    return;
  if (this.isColor(fillColor))
    this.concaveNXY(fillColor, n, x, y);
  if (this.isColor(outlineColor))
    this.lineNXY(outlineColor, n+1, function(i) { return x(i%n); }, function(i) { return y(i%n); });
}

/*
 * Concave Polygon Scan Conversion
 * by Paul Heckbert
 * from "Graphics Gems", Academic Press, 1990
 */
Pnglet.prototype.concaveNXY = function(fillColor, n, ptx, pty) {
  function Edge(ex, edx, ei) {    /* a polygon edge */
    this.x = ex;    /* x coordinate of edge's intersection with current scanline */
    this.dx = edx;    /* change in x with respect to y */
    this.i = ei;    /* edge number: edge i goes from pt[i] to pt[i+1] */
  };
  function cdelete(di) {    /* remove edge i from active list */
    for (var j = 0; j < active.length; j += 1)
      if (active[j].i == di)
        active.splice(j, 1);
  };
  function cinsert(ii, iy) {    /* append edge i to end of active list */
    var ij = ii<n-1 ? ii+1 : 0;
    var px, py, qx, qy;
    if (pty(ii) < pty(ij)) {
      px = ptx(ii); py = pty(ii);
      qx = ptx(ij); qy = pty(ij);
    } else {
      px = ptx(ij); py = pty(ij);
      qx = ptx(ii); qy = pty(ii);
    }
    /* initialize x position at intersection of edge with scanline y */
    var dx = (qx-px)/(qy-py);
    active.push(new Edge(dx*(iy+.5-py)+px, dx, ii));
  };

  var ind = new Array(n);        /* list of vertex indices, sorted by pt[ind[j]].y */
  var active = new Array(0);        /* start with an empty active list */

  /* create y-sorted array of indices ind[k] into vertex list */
  for (var k = 0; k < n; k += 1) ind[k] = k;
  ind.sort(function(i1, i2) { return pty(i1) <= pty(i2) ? -1 : 1; });
  k = 0;                        /* ind[k] is next vertex to process */
  var y0 = Math.max(0, Math.ceil(pty(ind[0])+.5));            /* ymin of polygon */
  var y1 = Math.min(this.height, Math.floor(pty(ind[n-1])-.5));    /* ymax of polygon */

  for (var y = y0; y <= y1; y += 1) {        /* step through scanlines */
    /* scanline y is at y+.5 in continuous coordinates */

    /* check vertices between previous scanline and current one, if any */
    for (; k<n && pty(ind[k]) <= y+.5; k += 1) {
      /* to simplify, if pt.y=y+.5, pretend it's above */
      /* invariant: y-.5 < pt[i].y <= y+.5 */
      var i = ind[k];    

      /*
       * insert or delete edges before and after vertex i (i-1 to i,
       * and i to i+1) from active list if they cross scanline y
       */
      var j = (i-1+n)%n;        /* vertex previous to i */
      if (pty(j) <= y-.5)    {    /* old edge, remove from active list */
        cdelete(j);
      } else if (pty(j) > y+.5) {    /* new edge, add to active list */
        cinsert(j, y);
      }
      if (i != ind[k]) {
        alert("Your browser's implementation of JavaScript is seriously broken,\n"+
              "as in variables are changing value of their own volition.\n"+
              "You should upgrade to a newer version browser.");
        return;
      }
      j = (i+1)%n;        /* vertex next after i */
      if (pty(j) <= y-.5)    {    /* old edge, remove from active list */
        cdelete(i);
      } else if (pty(j) > y+.5) {    /* new edge, add to active list */
        cinsert(i, y);
      }
    }

    /* sort active edge list by active[j].x */
    active.sort(function(u,v) { return u.x <= v.x ? -1 : 1; });

    /* draw horizontal segments for scanline y */
    for (j = 0; j < active.length; j += 2) {    /* draw horizontal segments */
      /* span 'tween j & j+1 is inside, span tween j+1 & j+2 is outside */
      var xl = Math.ceil(active[j].x+.5);        /* left end of span */
      if (xl<0) xl = 0;
      var xr = Math.floor(active[j+1].x-.5);    /* right end of span */
      if (xr>this.width-1) xr = this.width-1;
      if (xl<=xr)
        this.horizontalLine(fillColor, xl, xr, y);    /* draw pixels in span */
      active[j].x += active[j].dx;    /* increment edge coords */
      active[j+1].x += active[j+1].dx;
    }
  }
}

// draw a rectangle
Pnglet.prototype.rectangle = function(outlineColor, fillColor, x0,y0,x1,y1) {
  if (this.isColor(fillColor))
    for (var y = y0; y < y1; y += 1)
      this.horizontalLine(fillColor, x0+1, x1-2, y);
  if (this.isColor(outlineColor)) {
    this.horizontalLine(outlineColor, x0, x1-1, y0);
    this.horizontalLine(outlineColor, x0, x1-1, y1-1);
    this.verticalLine(outlineColor, x0, y0, y1-1);
    this.verticalLine(outlineColor, x1-1, y0, y1-1);
  }
}
    
// draw an arc
Pnglet.prototype.arc = function(outlineColor, cx,cy,w,h, s,e) {
  var p = this.midpointEllipse(cx,cy, w,h, s,e);
  function x(i) { return p[i*2]; };
  function y(i) { return p[i*2+1]; };
  this.lineNXY(outlineColor, p.length/2, x, y);
}

// draw an oval
Pnglet.prototype.oval = function(outlineColor, fillColor, cx,cy,w,h) {
  var p = this.midpointEllipse(cx,cy, w,h, 0,359);
  function x(i) { return p[i*2]; };
  function y(i) { return p[i*2+1]; };
  this.polygonNXY(outlineColor, fillColor, p.length/2, x, y);
}

// draw an arc with chord
Pnglet.prototype.chord = function(outlineColor, fillColor, cx,cy,w,h, s,e) {
  var p = this.midpointEllipse(cx,cy, w,h, s,e);
  function x(i) { return p[i*2]; };
  function y(i) { return p[i*2+1]; };
  this.polygonNXY(outlineColor, fillColor, p.length/2, x, y);
}

// draw an arc with pieslice
Pnglet.prototype.pieslice = function(outlineColor, fillColor, cx,cy,w,h, s,e) {
  var p = this.midpointEllipse(cx,cy, w,h, s,e);
  p[p.length] = cx;
  p[p.length] = cy;
  function x(i) { return p[i*2]; };
  function y(i) { return p[i*2+1]; };
  this.polygonNXY(outlineColor, fillColor, p.length/2, x, y);
}

// oval arcs
// generate points of oval circumference
// midpoint ellipse, Foley & van Dam, 2nd Edition, p. 90, 1990
Pnglet.prototype.midpointEllipse = function(cx,cy, w,h, s,e) {
  var a = Math.floor(w/2), b = Math.floor(h/2);
  var a2 = a*a, b2 = b*b, x = 0, y = b;
  var d1 = b2 - a2*b + a2/4;
  cx = Math.floor(cx);
  cy = Math.floor(cy);
  var p = new Array();

  // quadrant I, anticlockwise
  p.push(x,-y);
  while (a2*(y-1/2) > b2*(x+1)) {
    if (d1 < 0) {
      d1 += b2*(2*x+3);
    } else {
      d1 += b2*(2*x+3) + a2*(-2*y + 2);
      y -= 1;
    }
    x += 1;
    p.unshift(x,-y);
  }
  var d2 = b2*(x+1/2)*(x+1/2) + a2*(y-1)*(y-1) - a2*b2;
  while (y > 0) {
    if (d2 < 0) {
      d2 += b2*(2*x+2) + a2*(-2*y+3);
      x += 1;
    } else {
      d2 += a2*(-2*y+3);
    }
    y -= 1;
    p.unshift(x,-y);
  }
  // quadrant II, anticlockwise
  var n4 = p.length;
  for (var i = n4-4; i >= 0; i -= 2)
    p.push(-p[i], p[i+1]);
  // quadrants III and IV, anticlockwise
  var n2 = p.length;
  for (i = n2-4; i > 0; i -= 2)
    p.push(p[i], -p[i+1]);

  // compute start and end indexes from start and extent
  e %= 360;
  if (e < 0) {
    s += e;
    e = -e;
  }
  s %= 360;
  if (s < 0)
    s += 360;
  var is = Math.floor(s/359 * p.length/2);
  var ie = Math.floor(e/359 * p.length/2)+1;
  p = p.slice(is*2).concat(p.slice(0, is*2)).slice(0, ie*2);

  // displace to center
  for (i = 0; i < p.length; i += 2) {
    p[i] += cx;
    p[i+1] += cy;
  }
  return p;
}

// fill a region 
// from gd1.3 with modifications
Pnglet.prototype.fill = function(outlineColor,fillColor,x,y) {
  if (outlineColor) {            // fill to outline color
    /* Seek left */
    var leftLimit = -1;
    for (var i = x; i >= 0 && this.getPoint(i, y) != outlineColor; i -= 1)
      leftLimit = i;
    
    if (leftLimit == -1)
      return;

    /* Seek right */
    var rightLimit = x;
    for (i = (x+1); i < this.width && this.getPoint(i, y) != outlineColor; i += 1)
      rightLimit = i;

    /* fill extent found */
    this.horizontalLine(fillColor, leftLimit, rightLimit, y);

    /* Seek above and below */
    for (var dy = -1; dy <= 1; dy += 2) {
      if (this.inBounds(x,y+dy)) {
        var lastBorder = 1;
        for (i = leftLimit; i <= rightLimit; i++) {
          var c = this.getPoint(i, y+dy);
          if (lastBorder) {
            if ((c != outlineColor) && (c != fillColor)) {    
              this.fill(outlineColor, fillColor, i, y+dy);
              lastBorder = 0;
            }
          } else if ((c == outlineColor) || (c == fillColor)) {
            lastBorder = 1;
          }
        }
      }
    }
    
  } else {            // flood fill color at x, y 
    /* Test for completion */
    var oldColor = this.getPoint(x, y);
    if (oldColor == fillColor)
      return;

    /* Seek left */
    leftLimit = (-1);
    for (i = x; i >= 0 && this.getPoint(i, y) == oldColor; i--)
      leftLimit = i;

    if (leftLimit == -1)
      return;

    /* Seek right */
    rightLimit = x;
    for (i = (x+1); i < this.width && this.getPoint(i, y) == oldColor; i++)
      rightLimit = i;

    /* Fill extent found */
    this.horizontalLine(fillColor, leftLimit, rightLimit, y);

    /* Seek above and below */
    for (dy = -1; dy <= 1; dy += 2) {
      if (this.inBounds(x,y+dy)) {
        lastBorder = 1;
        for (i = leftLimit; i <= rightLimit; i++) {
          c = this.getPoint(i, y+dy);
          if (lastBorder) {
            if (c == oldColor) {    
              this.fill(null, fillColor, i, y+dy);
              lastBorder = 0;
            }
          } else if (c != oldColor) {
            lastBorder = 1;
          }
        }
      }
    }
  }
}

// smoothed points
Pnglet.prototype.smoothPoint = function(smoothSteps, pointColor, x0, y0) {
  var a = arguments, self = this, n = (a.length-2)/2;
  this.smooth(smoothSteps,
              function(n, x, y) { self.pointNXY(pointColor, n, x, y); },
              n,
              function(i) { return a[2*i+2]; },
              function(i) { return a[2*i+3]; });
}

// smoothed polyline
Pnglet.prototype.smoothLine = function(smoothSteps, lineColor, x0, y0) {
  var a = arguments, self = this, n = (a.length-2)/2;
  this.smooth(smoothSteps,
              function(n, x, y) { self.lineNXY(lineColor, n, x, y); },
              n,
              function(i) { return a[2*i+2]; },
              function(i) { return a[2*i+3]; });
}

// smoothed polygon
Pnglet.prototype.smoothPolygon = function(smoothSteps, outlineColor, fillColor, x0, y0) {
  var a = arguments, self = this, n = (a.length-3)/2 + 1;
  this.smooth(smoothSteps,
              function(n, x, y) { self.polygonNXY(outlineColor, fillColor, n, x, y); },
              n,
              function(i) { return a[2*(i%(n-1))+3]; },
              function(i) { return a[2*(i%(n-1))+4]; });
}
    
// generate smoothSteps points for the line segment connecting
// each consecutive pair of points in x(i), y(i).
// adapted from the source for tk8.1b3, http://www.scriptics.com
Pnglet.prototype.smooth = function(smoothSteps, fNXY, n, x, y) {
  var control = new Array(8);
  var outputPoints = 0;
  var dblPoints = new Array();

  // compute numSteps of smoothed points
  // according to the basis in control[]
  // placing points into coordPtr[coordOff]
  function smoothPoints(control, numSteps, coordPtr, coordOff) {
    for (var i = 1; i <= numSteps; i++, coordOff += 2) {
      var t = i/numSteps, t2 = t*t, t3 = t2*t,
        u = 1.0 - t, u2 = u*u, u3 = u2*u;
      coordPtr[coordOff+0] = control[0]*u3 + 3.0 * (control[2]*t*u2 + control[4]*t2*u) + control[6]*t3;
      coordPtr[coordOff+1] = control[1]*u3 + 3.0 * (control[3]*t*u2 + control[5]*t2*u) + control[7]*t3;
    }
  };

  /*
   * If the curve is a closed one then generate a special spline
   * that spans the last points and the first ones.  Otherwise
   * just put the first point into the output.
   */

  var closed = (x(0) == x(n-1)) && (y(0) == y(n-1));
  if (closed) {
    control[0] = 0.5*x(n-2) + 0.5*x(0);
    control[1] = 0.5*y(n-2) + 0.5*y(0);
    control[2] = 0.167*x(n-2) + 0.833*x(0);
    control[3] = 0.167*y(n-2) + 0.833*y(0);
    control[4] = 0.833*x(0) + 0.167*x(1);
    control[5] = 0.833*y(0) + 0.167*y(1);
    control[6] = 0.5*x(0) + 0.5*x(1);
    control[7] = 0.5*y(0) + 0.5*y(1);
    dblPoints[2*outputPoints+0] = control[0];
    dblPoints[2*outputPoints+1] = control[1];
    outputPoints += 1;
    smoothPoints(control, smoothSteps, dblPoints, 2*outputPoints);
    outputPoints += smoothSteps;
  } else {
    dblPoints[2*outputPoints+0] = x(0);
    dblPoints[2*outputPoints+1] = y(0);
    outputPoints += 1;
  }

  for (var i = 2; i < n; i += 1) {
    var j = i - 2;
    /*
     * Set up the first two control points.  This is done
     * differently for the first spline of an open curve
     * than for other cases.
     */
    if ((i == 2) && !closed) {
      control[0] = x(j);
      control[1] = y(j);
      control[2] = 0.333*x(j) + 0.667*x(j+1);
      control[3] = 0.333*y(j) + 0.667*y(j+1);
    } else {
      control[0] = 0.5*x(j) + 0.5*x(j+1);
      control[1] = 0.5*y(j) + 0.5*y(j+1);
      control[2] = 0.167*x(j) + 0.833*x(j+1);
      control[3] = 0.167*y(j) + 0.833*y(j+1);
    }

    /*
     * Set up the last two control points.  This is done
     * differently for the last spline of an open curve
     * than for other cases.
     */

    if ((i == (n-1)) && !closed) {
      control[4] = .667*x(j+1) + .333*x(j+2);
      control[5] = .667*y(j+1) + .333*y(j+2);
      control[6] = x(j+2);
      control[7] = y(j+2);
    } else {
      control[4] = .833*x(j+1) + .167*x(j+2);
      control[5] = .833*y(j+1) + .167*y(j+2);
      control[6] = 0.5*x(j+1) + 0.5*x(j+2);
      control[7] = 0.5*y(j+1) + 0.5*y(j+2);
    }

    /*
     * If the first two points coincide, or if the last
     * two points coincide, then generate a single
     * straight-line segment by outputting the last control
     * point.
     */

    if (((x(j) == x(j+1)) && (y(j) == y(j+1)))
        || ((x(j+1) == x(j+2)) && (y(j+1) == y(j+2)))) {
      dblPoints[2*outputPoints+0] = control[6];
      dblPoints[2*outputPoints+1] = control[7];
      outputPoints += 1;
      continue;
    }

    /*
     * Generate a Bezier spline using the control points.
     */
    smoothPoints(control, smoothSteps, dblPoints, 2*outputPoints);
    outputPoints += smoothSteps;
  }

  // draw the points
  // anonymous functions don't work here
  // they result in "undefined" point values
  function myx(i) { return Math.round(dblPoints[2*i]); }
    function myy(i) { return Math.round(dblPoints[2*i+1]); }
    fNXY(outputPoints, myx, myy);
}

// output a PNG string
Pnglet.prototype.output = function() {
  // output translations
  function initialize(png, offs, str) {
    for (var i = 1; i < arguments.length; i += 1)
      if (typeof arguments[i].length != "undefined")
        for (var j = 0; j < arguments[i].length; j += 1)
          png[offs++] = arguments[i].charAt(j);
  }
    function byte4(w) { return String.fromCharCode((w>>24)&255, (w>>16)&255, (w>>8)&255, w&255); }

    // compute adler32 of output pixels + row filter bytes
    var BASE = 65521; /* largest prime smaller than 65536 */
  var NMAX = 5552;  /* NMAX is the largest n such that 255n(n+1)/2 + (n+1)(BASE-1) <= 2^32-1 */
  var s1 = 1;
  var s2 = 0;
  var n = NMAX;
  for (var y = 0; y < this.height; y += 1)
    for (var x = -1; x < this.width; x += 1) {
      s1 += this.png[this.index(x,y)].charCodeAt(0);
      s2 += s1;
      if ((n -= 1) == 0) {
        s1 %= BASE;
        s2 %= BASE;
        n = NMAX;
      }
    }
  s1 %= BASE;
  s2 %= BASE;
  initialize(this.png, this.idat_offs+this.idat_size-8, byte4((s2 << 16) | s1));

  // compute crc32 of the PNG chunks
  function crc32(png, offs, size) {
    var crc = -1;        // initialize crc
    for (var i = 4; i < size-4; i += 1)
      crc = Pnglet.crc32_table[(crc ^ png[offs+i].charCodeAt(0)) & 0xff] ^ ((crc >> 8) & 0x00ffffff);
    initialize(png, offs+size-4, byte4(crc ^ -1));
  }

    crc32(this.png, this.ihdr_offs, this.ihdr_size);
  crc32(this.png, this.plte_offs, this.plte_size);
  crc32(this.png, this.trns_offs, this.trns_size);
  crc32(this.png, this.idat_offs, this.idat_size);
  crc32(this.png, this.iend_offs, this.iend_size);

  // convert PNG to string
  return "\211PNG\r\n\032\n"+this.png.join('');
}

/* Table of CRCs of all 8-bit messages. */
Pnglet.crc32_table = new Array(256);
for (var n = 0; n < 256; n++) {
  var c = n;
  for (var k = 0; k < 8; k++) {
    if (c & 1)
      c = -306674912 ^ ((c >> 1) & 0x7fffffff);
    else
      c = (c >> 1) & 0x7fffffff;
  }
  Pnglet.crc32_table[n] = c;
}
</script>
</head>

<body>
<p>Should see a light green rectangle:</p>
<div id=result></div>
<script>
    pngdata = new Pnglet(1,1,1);
    pngdata.point(pngdata.color(0,255,0,127),1,1);

    png = document.createElement("img");
    png.style.height = "100px";
    png.style.width = "100px";
    
    png.src = "data:image/png;base64," + btoa(pngdata.output());
    document.getElementById('result').appendChild(png);
</script>
</body>