<html>
<!-- JS-Draw  Copyright (C) 1996 Bill Dortch, hIdaho Design -->
<head>
<title>JS-Draw</title>
<script language="JavaScript">
<!-- begin script
var hexchars = "0123456789ABCDEF";

function xbmDrawPoint (x,y) {
  if (x < 0 || x >= this.pixelWidth ||
      y < 0 || y >= this.height)
    return;
  this.row[y].col[x>>4] |= 1<<(x&0xF);
  this.row[y].redraw = true;
}
function xbmDrawLine (x1,y1,x2,y2) {
  var x,y,e,temp;
  var dx = Math.abs(x1-x2);
  var dy = Math.abs(y1-y2);
  if ((dx >= dy && x1 > x2) || (dy > dx && y1 > y2)) {
    temp = x2;
    x2 = x1;
    x1 = temp;
    temp = y2;
    y2 = y1;
    y1 = temp;
  }
  if (dx >= dy) {
    e = (y2-y1)/((dx == 0) ? 1 : dx);
    for (x = x1, y = y1; x <= x2; x++, y += e)
      this.drawPoint(x,Math.round(y));
  }
  else {
    e = (x2-x1)/dy;
    for (y = y1, x = x1; y <= y2; y++, x += e)
      this.drawPoint(Math.round(x),y);
  }
}
function xbmDrawRect (x1,y1,x2,y2) {
  this.drawLine (x1,y1,x2,y1);
  this.drawLine (x1,y1,x1,y2);
  this.drawLine (x1,y2,x2,y2);
  this.drawLine (x2,y1,x2,y2);
}
function xbmDrawFilledRect (x1,y1,x2,y2) {
  var x,temp;
  if (x1 > x2) {
    temp = x2;
    x2 = x1;
    x1 = temp;
    temp = y2;
    y2 = y1;
    y1 = temp;
  }
  for (x = x1; x <= x2; x++)
    this.drawLine(x,y1,x,y2);
}
function xbmDrawCircle (x,y,radius) {
  for (var a=0, b=1; a < b; a++) {
    b = Math.round(Math.sqrt(Math.pow(radius,2)-Math.pow(a,2)));
    this.drawPoint(x+a,y+b);
    this.drawPoint(x+a,y-b);
    this.drawPoint(x-a,y+b);
    this.drawPoint(x-a,y-b);
    this.drawPoint(x+b,y+a);
    this.drawPoint(x+b,y-a);
    this.drawPoint(x-b,y+a);
    this.drawPoint(x-b,y-a);
  }
}
function xbmDrawFilledCircle (x,y,radius) {
  for (var a=0, b=1; a < b; a++) {
    b = Math.round(Math.sqrt(Math.pow(radius,2)-Math.pow(a,2)));
    this.drawLine(x+a,y+b,x+a,y-b);
    this.drawLine(x-a,y+b,x-a,y-b);
    this.drawLine(x+b,y+a,x+b,y-a);
    this.drawLine(x-b,y+a,x-b,y-a);
  }
}
function xbmReverse () {
  this.negative = !this.negative;
  for (var i = 0; i < this.height; i++)
    this.row[i].redraw = true;
}
function xbmClear (value) {
  if (value == null)
    value = this.initialValue;
  for (var i = 0; i < this.height; i++) {
    this.row[i].redraw = true;
    for (var j = 0; j < this.width; j++)
      this.row[i].col[j] = value;
  }
}
function xbmRowString () {
  if (this.redraw) {
    this.redraw = false;
    this.text = "";
    for (var i = 0; i < this.parent.width; i++) {
      var pixels = this.col[i];
      if (this.parent.negative)
        pixels ^= 0xFFFF;
      var buf = "0x" + hexchars.charAt((pixels>>4)&0xF) +
        hexchars.charAt(pixels&0xF) + ",0x" +
        hexchars.charAt((pixels>>12)&0xF) +
        hexchars.charAt((pixels>>8)&0xF) + ",";
      this.text += buf;
    }
  }
  return this.text;
}
function xbmPartitionString (left,right) {
  if (left == right) {
    var str = this.row[left].toString();
    if (left == 0)
      str = this.head + str;
    else if (left == this.height - 1)
      str += "};\n";
    return str;
  }
  var mid = (left+right)>>1;
  return this.partition(left,mid) + this.partition(mid+1,right);
}
function xbmString () {
  return this.partition(0,this.height - 1);
}
function xbmRow (parent, columns, initialValue) {
  this.redraw = true;
  this.text = null;
  this.parent = parent;
  this.col = new Object();
  for (var i = 0; i < columns; i++)
    this.col[i] = initialValue;
  this.toString = xbmRowString;
  return this;
}
function xbmImage (width, height, initialValue) {
  this.width = (width+15)>>4;
  this.pixelWidth = this.width<<4;
  this.height = height;
  this.head = "#define xbm_width " + (this.pixelWidth) +
    "\n#define xbm_height " + this.height +
    "\nstatic char xbm_bits[] = {\n";
  this.initialValue = ((initialValue == null) ? 0 : initialValue);
  this.negative = false;
  this.row = new Object();
  for (var i = 0; i < height; i++)
    this.row[i] = new xbmRow(this, this.width, this.initialValue);
  this.drawPoint = xbmDrawPoint;
  this.drawLine = xbmDrawLine;
  this.drawRect = xbmDrawRect;
  this.drawFilledRect = xbmDrawFilledRect;
  this.drawCircle = xbmDrawCircle;
  this.drawFilledCircle = xbmDrawFilledCircle;
  this.reverse = xbmReverse;
  this.clear = xbmClear;
  this.partition = xbmPartitionString;
  this.toString = xbmString;
  return this;
}
var canvas = new xbmImage (224,160);
canvas.reverse();

var lineTool = new xbmImage (32,32);
lineTool.drawLine (4,28,28,4);

var rectTool = new xbmImage (32,32);
rectTool.drawRect (4,4,28,28);

var filledRectTool = new xbmImage (32,32);
filledRectTool.drawFilledRect (4,4,28,28);

var circleTool = new xbmImage (32,32);
circleTool.drawCircle (16,16,12);

var filledCircleTool = new xbmImage (32,32);
filledCircleTool.drawFilledCircle (16,16,12);

var positiveTool = new xbmImage (32,32);
positiveTool.drawRect (4,4,14,14);
positiveTool.drawCircle (23,9,5);
positiveTool.drawLine (4,16,28,16);
positiveTool.drawLine (16,4,16,28);
positiveTool.drawFilledCircle(9,23,5);
positiveTool.drawFilledRect (18,18,28,28);

var negativeTool = new xbmImage (32,32);
negativeTool.reverse();
negativeTool.drawRect (4,4,14,14);
negativeTool.drawCircle (23,9,5);
negativeTool.drawLine (4,16,28,16);
negativeTool.drawLine (16,4,16,28);
negativeTool.drawFilledCircle(9,23,5);
negativeTool.drawFilledRect (18,18,28,28);

var clearTool = new xbmImage (32,32);

var xframes = new Object();
xframes[0] = canvas.toString();
var xcount = 0;
var lastx = -1;
var lasty = -1;
var activeTool = "Line";

function select (search) { 
  var i = search.indexOf (",");
  var x = parseFloat (search.substring(1,i));
  var y = parseFloat (search.substring(i+1,search.length));
  if (activeTool == "Line") {
    if (lastx != -1) {
      canvas.drawLine (lastx,lasty,x,y);
      redraw();
    }
    setHint ("Line: Select next point");
    lastx = x;
    lasty = y;
    return;
  }
  if (activeTool == "Rect" || activeTool == "Filled Rect") {
    if (lastx != -1) {
      if (activeTool == "Rect")
        canvas.drawRect (lastx,lasty,x,y);
      else
        canvas.drawFilledRect (lastx,lasty,x,y);
      redraw();
      setHint (activeTool + ": Select start corner");
      lastx = -1;
      lasty = -1;
    }
    else {
      lastx = x;
      lasty = y;
      setHint (activeTool + ": Select end corner");
    }
    return;
  }
  if (activeTool == "Circle" || activeTool == "Filled Circle") {
    if (lastx != -1) {
      var radius = Math.sqrt(Math.pow(x-lastx,2) + Math.pow(y-lasty,2));
      if (activeTool == "Circle")
        canvas.drawCircle (lastx,lasty,radius);
      else
        canvas.drawFilledCircle (lastx,lasty,radius);
      redraw();
      setHint (activeTool + ": Select center point");
      lastx = -1;
      lasty = -1;
    }
    else {
      lastx = x;
      lasty = y;
      setHint (activeTool + ": Select edge point");
    }
    return;  
  }
}
function redraw () {
  xframes[xcount] = "";
  xframes[++xcount] = canvas.toString();
  self.pic.location = "javascript:parent.cframe()";
}
function setHint (hint) {
  self.tool.document.tool.hint.value = hint;
}
function setTool (type) {
  activeTool = type;
  lastx = -1;
  lasty = -1;
  if (type == "Line")
    setHint ("Line: Select first point");
  else if (type == "Rect" || type == "Filled Rect")
    setHint (type + ": Select start corner");
  else if (type == "Circle" || type == "Filled Circle")
    setHint (type + ": Select center point");
}
function setPositive () {
  if (canvas.negative) {
    canvas.reverse();
    redraw();
  }
}
function setNegative () {
  if (!canvas.negative) {
    canvas.reverse();
    redraw();
  }
}
function clear () {
  if (confirm("\nErase the current drawing?")) {
    canvas.clear();
    redraw();
    setTool (activeTool);
  }
}
var empty = '<html></html>';
function headFrame () {
  return '<body bgcolor="#500020" text="#FFFFFF"><div align="center"><font size=7><tt><b>JS-Draw</b></tt></font></div></body>';
}
function toolFrame () {
  return '<html><head><title>Toolset</title></head>' +
    '<body bgcolor="#808080">' +
    '<form name="tool">' +
    '<table border=2 cellpadding=0 cellspacing=4>' +
    '<tr>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Line\')"><img src="javascript:parent.lineTool" width=32 height=32 border=0></a></td>' +
    '<td colspan=5><input name="hint" size=40 value="Line: Select first point"></td>' +
    '</tr>' +
    '<tr>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Rect\')"><img src="javascript:parent.rectTool" width=32 height=32 border=0></a></td>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Circle\')"><img src="javascript:parent.circleTool" width=32 height=32 border=0></a></td>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setPositive()"><img src="javascript:parent.positiveTool" width=32 height=32 border=0></a></td>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.clear()"><img src="javascript:parent.clearTool" width=32 height=32 border=0></a></td>' +
    '<td width=192></td>' +
    '</tr>' +
    '<tr>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Filled Rect\')"><img src="javascript:parent.filledRectTool" width=32 height=32 border=0></a></td>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setTool(\'Filled Circle\')"><img src="javascript:parent.filledCircleTool" width=32 height=32 border=0></a></td>' +
    '<td bgcolor=#C0C0C0 width=32><a href="javascript:parent.setNegative()"><img src="javascript:parent.negativeTool" width=32 height=32 border=0></a></td>' +
    '<td width=32></td>' +
    '<td width=192></td>' +
    '</tr>' +
    '</table>' +  
    '</form></body</html>';
}
function cframe () {
  return '<html><head><title>JS-Draw</title>' + 
    '<body bgcolor="#808080"><table border=0 cellpadding=0 cellspacing=0><tr><td width=224 height=160 bgcolor=#FFFFFF>' + 
    '<a href="javascript:parent.echoSelect()//" target="echo">' +
    '<img ismap src="javascript:parent.xframes[' + xcount + ']" width=224 height=160 border=0></a>' +
    '</td></tr></table></body></html>';
}
function echoSelect () {
  return '<body onload="parent.select(location.search)"></body>';
}
function initialize () {
  self.head.location = "javascript:parent.headFrame()";
  self.tool.location = "javascript:parent.toolFrame()";
  self.pic.location = "javascript:parent.cframe()";
}
// end script -->
</script>
</head>
<frameset rows="60,168,0,*" onLoad="initialize()">
  <frame name="head" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  <frameset cols="232,*">
    <frame name="pic" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
    <frame name="tool" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  </frameset>
  <frame name="echo" src="javascript:parent.emptyFrame" marginwidth=1 marginheight=1 scrolling="no" noresize>
  <frame>
</frameset>
<noframes>
<h2 align="center">Netscape 2.0 other JavaScript-enabled browser required</h2>
</noframes>
</html>