shape ops work in progress

git-svn-id: http://skia.googlecode.com/svn/trunk@6159 2bbb7eff-a529-9590-31e7-b0007b416f81
diff --git a/experimental/Intersection/as.htm b/experimental/Intersection/as.htm
new file mode 100644
index 0000000..a6d2be9
--- /dev/null
+++ b/experimental/Intersection/as.htm
@@ -0,0 +1,488 @@
+<html>
+<head>
+<div style="height:0">
+
+<div id="quad56">
+debugShowActiveSpans id=1 (366.608826,151.196014 378.803101,136.674606 398.164948,136.674606) t=0.490456543 (380.294495,140.44487) other=7 otherT=0.578520747 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=2 (398.164948,136.674606 354.009216,208.816208) t=0 (398.164948,136.674606) other=1 otherT=1 otherIndex=4 windSum=? windValue=1
+debugShowActiveSpans id=3 (354.009216,208.816208 393.291473,102.232819) t=0 (354.009216,208.816208) other=2 otherT=1 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=3 (354.009216,208.816208 393.291473,102.232819) t=0.508945199 (374.00174,154.571106) other=6 otherT=0.598402499 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=3 (354.009216,208.816208 393.291473,102.232819) t=0.634079491 (378.917297,141.233871) other=7 otherT=0.536512741 otherIndex=1 windSum=-1 windValue=1
+debugShowActiveSpans id=5 (359.978058,136.581512 378.315979,136.581512 388.322723,149.613556) t=0.597488996 (378.917297,141.233856) other=7 otherT=0.536512973 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=6 (388.322723,149.613556 364.390686,157.898193) t=0 (388.322723,149.613556) other=5 otherT=1 otherIndex=4 windSum=? windValue=1
+debugShowActiveSpans id=6 (388.322723,149.613556 364.390686,157.898193) t=0.598402499 (374.00174,154.571106) other=3 otherT=0.508945199 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=7 (364.390686,157.898193 375.281769,136.674606 396.039917,136.674606) t=0 (364.390686,157.898193) other=6 otherT=1 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=7 (364.390686,157.898193 375.281769,136.674606 396.039917,136.674606) t=0.536512741 (378.917297,141.233871) other=3 otherT=0.634079491 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=7 (364.390686,157.898193 375.281769,136.674606 396.039917,136.674606) t=0.536512973 (378.917297,141.233856) other=5 otherT=0.597488996 otherIndex=3 windSum=-1 windValue=1
+</div>
+
+<div id="quad57c">
+debugShowActiveSpans id=1 (303.12088,141.299606 330.463562,217.659027) t=0.845414865 (326.236786,205.854996) other=13 otherT=0.999999913 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=-0 (330.463562,217.659027) other=1 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=13 otherT=0.812241055 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=16 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=4 (362.874634,159.705902 335.665344,233.397751) t=0.379109438 (352.559326,187.643173) other=17 otherT=0.412818074 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=13 (371.919067,205.854996 326.236786,205.854996) t=0.812241055 (334.814056,205.854996) other=2 otherT=0.154585135 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=14 (326.236786,205.854996 329.104431,231.663818 351.512085,231.663818) t=0.962138429 (349.843323,231.626816) other=15 otherT=0.0583966647 otherIndex=1 windSum=1 windValue=1
+debugShowActiveSpans id=15 (351.512085,231.663818 322.935669,231.030273) t=0 (351.512085,231.663818) other=14 otherT=1 otherIndex=3 windSum=1 windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=18 otherT=1 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=2 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=4 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=-0 (358.78125,195.984955) other=16 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.412818074 (352.559326,187.643173) other=4 otherT=0.379109438 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.902761903 (345.174988,177.74292) other=2 otherT=0.522739691 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=18 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=17 otherT=1 otherIndex=3 windSum=? windValue=1
+</div>
+
+<div id="quad57b">
+debugShowActiveSpans id=1 (303.12088,141.299606 330.463562,217.659027) t=0.845414865 (326.236786,205.854996) other=13 otherT=0.999999913 otherIndex=3 windSum=1 windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=-0 (330.463562,217.659027) other=1 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=13 otherT=0.812241055 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=16 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=4 (362.874634,159.705902 335.665344,233.397751) t=0.379109438 (352.559326,187.643173) other=17 otherT=0.412818074 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=13 (371.919067,205.854996 326.236786,205.854996) t=0.812241055 (334.814056,205.854996) other=2 otherT=0.154585135 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=18 otherT=1 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=2 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=4 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=-0 (358.78125,195.984955) other=16 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.412818074 (352.559326,187.643173) other=4 otherT=0.379109438 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.902761903 (345.174988,177.74292) other=2 otherT=0.522739691 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=18 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=17 otherT=1 otherIndex=3 windSum=? windValue=1
+</div>
+
+<div id="quad57a">
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=13 otherT=0.812241055 otherIndex=2 windSum=-1 windValue=1
+debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=16 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=4 (362.874634,159.705902 335.665344,233.397751) t=0.379109438 (352.559326,187.643173) other=17 otherT=0.412818074 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=18 otherT=1 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=2 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=4 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=-0 (358.78125,195.984955) other=16 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.412818074 (352.559326,187.643173) other=4 otherT=0.379109438 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.902761903 (345.174988,177.74292) other=2 otherT=0.522739691 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=18 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=17 otherT=1 otherIndex=3 windSum=? windValue=1
+</div>
+
+<div id="quad58b">
+debugShowActiveSpans id=3 (303.12088,141.299606 330.463562,217.659027) t=0.845414865 (326.236786,205.854996) other=16 otherT=0.999999913 otherIndex=3 windSum=1 windValue=1
+debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=-0 (330.463562,217.659027) other=3 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=16 otherT=0.812241055 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=19 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=6 (362.874634,159.705902 335.665344,233.397751) t=0.287405665 (355.054535,180.885361) other=20 otherT=0.497256785 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=16 (371.919067,205.854996 326.236786,205.854996) t=0.812241055 (334.814056,205.854996) other=4 otherT=0.154585135 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=21 otherT=1 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=4 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=6 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0 (358.78125,195.984955) other=19 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.497256785 (355.054535,180.885361) other=6 otherT=0.287405665 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.925970638 (345.858368,175.888794) other=4 otherT=0.547021444 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=21 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=20 otherT=1 otherIndex=3 windSum=? windValue=1
+</div>
+
+<div id="quad58a">
+debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=16 otherT=0.812241055 otherIndex=2 windSum=-1 windValue=1
+debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=19 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=6 (362.874634,159.705902 335.665344,233.397751) t=0.287405665 (355.054535,180.885361) other=20 otherT=0.497256785 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=21 otherT=1 otherIndex=1 windSum=? windValue=1
+debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=4 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=6 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0 (358.78125,195.984955) other=19 otherT=1 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.497256785 (355.054535,180.885361) other=6 otherT=0.287405665 otherIndex=2 windSum=? windValue=1
+debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.925970638 (345.858368,175.888794) other=4 otherT=0.547021444 otherIndex=3 windSum=? windValue=1
+debugShowActiveSpans id=21 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=20 otherT=1 otherIndex=3 windSum=? windValue=1
+</div>
+
+</div>
+
+<script type="text/javascript">
+
+var testDivs = [
+    quad58b,
+    quad58a,
+    quad57c,
+    quad57b,
+    quad57a,
+    quad56,
+];
+
+var decimal_places = 3; // make this 3 to show more precision
+
+var tests = [];
+var testTitles = [];
+var testIndex = 0;
+var ctx;
+
+var xmin;
+var ymin;
+var scale;
+var mouseX, mouseY;
+var srcLeft, srcTop;
+var srcWidth, srcHeight;
+var screenWidth, screenHeight;
+var drawnPts;
+
+var ptLabels = true;
+var digit_mode = false;
+var index_mode = true;
+var index_bits = -1;
+var debug_xy = false;
+var info_mode = false;
+var intersect_mode = false;
+var sequence = -1;
+
+var SPAN_ID = 1;
+var SPAN_X1 = 2;
+var SPAN_Y1 = 3;
+var SPAN_X2 = 4;
+var SPAN_Y2 = 5;
+var SPAN_L_T = 6;
+var SPAN_L_TX = 7;
+var SPAN_L_TY = 8;
+var SPAN_L_OTHER = 9;
+var SPAN_L_OTHERT = 10;
+var SPAN_L_OTHERI = 11;
+var SPAN_L_SUM = 12;
+var SPAN_L_VAL = 13;
+
+var SPAN_X3 = 6;
+var SPAN_Y3 = 7;
+var SPAN_Q_T = 8;
+var SPAN_Q_TX = 9;
+var SPAN_Q_TY = 10;
+var SPAN_Q_OTHER = 11;
+var SPAN_Q_OTHERT = 12;
+var SPAN_Q_OTHERI = 13;
+var SPAN_Q_SUM = 14;
+var SPAN_Q_VAL = 15;
+
+var Q_LENGTH = 18;
+
+function strs_to_nums(strs) {
+    var result = [];
+    for (var idx in strs) {
+        var str = strs[idx];
+        var num = parseFloat(str);
+        if (isNaN(num)) {
+            result.push(str);
+        } else {
+            result.push(num);
+        }
+    }
+    return result;
+}
+
+function parse_debugShowActiveSpans(test, title) {
+    var re_quad = / id=(\d+) \((\d+\.?\d*),(\d+\.?\d*) (\d+\.?\d*),(\d+\.?\d*) (\d+\.?\d*),(\d+\.?\d*)\) t=(\d+\.?\d*) \((\d+\.?\d*),(\d+\.?\d*)\) other=(\d+) otherT=(\d+\.?\d*) otherIndex=(\d+) windSum=(\?|-?\d+) windValue=(\d+)/;
+    var re_line = / id=(\d+) \((\d+\.?\d*),(\d+\.?\d*) (\d+\.?\d*),(\d+\.?\d*)\) t=(\d+\.?\d*) \((\d+\.?\d*),(\d+\.?\d*)\) other=(\d+) otherT=(\d+\.?\d*) otherIndex=(\d+) windSum=(\?|-?\d+) windValue=(\d+)/;
+    
+    var strs = test.split("debugShowActiveSpans");
+    if (strs.length == 1)
+        return;
+    var spans = [];
+    for (var s in strs) {
+        var str = strs[s];
+        if (str == "\n") {
+            continue;
+        }
+        if (re_line.test(str)) {
+            var lineStrs = re_line.exec(str);
+            var line = strs_to_nums(lineStrs);
+            spans.push(line);
+        } else if (re_quad.test(str)) {
+            var quadStrs = re_quad.exec(str);
+            var quad = strs_to_nums(quadStrs);
+            spans.push(quad);
+        }
+    }
+    if (spans.length >= 1) {
+        tests.push(spans);
+        testTitles.push(title);
+    }
+}
+
+function init(test) {
+    var canvas = document.getElementById('canvas');
+    if (!canvas.getContext) return;
+    screenWidth = canvas.width = window.innerWidth - 20;
+    screenHeight = canvas.height = window.innerHeight - 20;
+    ctx = canvas.getContext('2d');
+    xmin = Infinity;
+    var xmax = -Infinity;
+    ymin = Infinity;
+    var ymax = -Infinity;
+    for (var scans in test) {
+        var scan = test[scans];
+        var last = scan.length >= Q_LENGTH ? SPAN_X3 : SPAN_X2;
+        for (var idx = SPAN_X1; idx <= last; idx += 2) {
+            xmin = Math.min(xmin, scan[idx]);
+            xmax = Math.max(xmax, scan[idx]);
+            ymin = Math.min(ymin, scan[idx + 1]);
+            ymax = Math.max(ymax, scan[idx + 1]);
+        }
+    }
+    srcWidth = xmax - xmin;
+    srcHeight = ymax - ymin;
+    var hscale = ctx.canvas.width / srcWidth;
+    var vscale = ctx.canvas.height / srcHeight;
+    var minScale = Math.min(hscale, vscale);
+    scale = minScale;
+    srcLeft = xmin;
+    srcTop = ymin;
+}
+
+function drawPoint(px, py) {
+    for (var pts = 0; pts < drawnPts.length; pts += 2) {
+        var x = drawnPts[pts];
+        var y = drawnPts[pts + 1];
+        if (px == x && py == y) {
+            return;
+        }
+    }
+    drawnPts.push(px);
+    drawnPts.push(py);
+    var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
+    var _px = (px - srcLeft)* scale;
+    var _py = (py - srcTop) * scale;
+    ctx.beginPath();
+    ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillText(label, _px + 5, _py);
+}
+
+function draw(test, title) {
+    ctx.fillStyle = "rgba(0,0,0, 0.1)";
+    ctx.font = "normal 50px Arial";
+    ctx.fillText(title, 50, 50);
+    ctx.font = "normal 10px Arial";
+    ctx.lineWidth = "1.001"; "0.999";
+    var id = -1;
+    var firstIdx;
+    var lastIdx;
+    var index_tst = -1;
+    drawnPts = [];
+    for (var scansStr in test) {
+        var scans = parseInt(scansStr);
+        var scan = test[scans];
+        var isQuad = scan.length >= Q_LENGTH;
+        if (id != scan[SPAN_ID]) {
+            id = scan[SPAN_ID];
+            firstIdx = lastIdx = scans;
+            ++index_tst;
+            var nextIdx = lastIdx + 1;
+            while (nextIdx < test.length && test[nextIdx][SPAN_ID] == id) {
+                lastIdx = nextIdx++;
+            }
+        }
+        var seq = sequence % test.length;
+        var selected = sequence >= 0 ? seq == scans
+                : (index_bits & (1 << index_tst)) != 0 && scans == firstIdx;
+        var skippable = (sequence >= 0 && seq >= firstIdx && seq <= lastIdx)
+                || scans != firstIdx;
+        if (skippable && !selected) {
+            continue;
+        }
+        ctx.strokeStyle = selected ? "red" : "rgba(0,0,0, 0.2)";
+        ctx.beginPath();
+        ctx.moveTo((scan[SPAN_X1] - srcLeft)* scale,
+                (scan[SPAN_Y1] - srcTop) * scale);
+        if (isQuad) {
+            ctx.quadraticCurveTo((scan[SPAN_X2] - srcLeft) * scale,
+                    (scan[SPAN_Y2] - srcTop) * scale,
+                    (scan[SPAN_X3] - srcLeft) * scale,
+                    (scan[SPAN_Y3] - srcTop) * scale);
+        } else {
+            ctx.lineTo((scan[SPAN_X2] - srcLeft)* scale,
+                    (scan[SPAN_Y2] - srcTop) * scale);
+        }
+        ctx.stroke();
+        if (debug_xy && selected) {
+            var debugText = "";
+            for (var idx = SPAN_X1; idx <= (isQuad ? SPAN_X3 : SPAN_X2); idx += 2) {
+                var screenX = (scan[idx] - srcLeft) * scale;
+                var screenY = (scan[idx + 1] - srcTop) * scale;
+                debugText += screenX.toFixed(decimal_places) + ", ";
+                debugText += screenY.toFixed(decimal_places) + " ";
+            }
+            ctx.fillStyle="blue";
+            ctx.fillText(debugText, 50, scans * 50 + 100);
+        }
+        if (ptLabels && selected) {
+            ctx.fillStyle="blue";
+            drawPoint(scan[SPAN_X1], scan[SPAN_Y1]);
+            drawPoint(scan[SPAN_X2], scan[SPAN_Y2]);
+            if (scan.length >= Q_LENGTH) {
+                drawPoint(scan[SPAN_X3], scan[SPAN_Y3]);
+            }
+        }
+        if (info_mode && selected) {
+            var infoText = "id=" + scan[SPAN_ID];
+            ctx.fillStyle="green";
+            ctx.fillText(infoText, 10, scans * 50 + 100);
+        }
+        if (intersect_mode && selected) {
+            ctx.fillStyle="rgba(50,100,200, 1.0)";
+            if (isQuad) {
+                drawPoint(scan[SPAN_Q_TX], scan[SPAN_Q_TY]);
+            } else {
+                drawPoint(scan[SPAN_L_TX], scan[SPAN_L_TY]);
+            }
+        }
+    }
+}
+
+function drawTop() {
+    init(tests[testIndex]);
+    redraw();
+}
+
+function redraw() {
+    ctx.beginPath();
+    ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.fillStyle="white";
+    ctx.fill();
+    draw(tests[testIndex], testTitles[testIndex]);
+}
+
+function doKeyPress(evt) {
+    var char = String.fromCharCode(evt.charCode);
+    switch (char) {
+    case '0':
+    case '1':
+    case '2':
+    case '3':
+    case '4':
+    case '5':
+    case '6':
+    case '7':
+    case '8':
+    case '9':
+        if (digit_mode) {
+            decimal_places = char - '0';
+        } else if (index_mode) {
+            index_bits ^= 1 << (char - '0');
+        }
+        redraw();
+        break;
+    case 'd':
+        digit_mode = true;
+        index_mode = false;
+        break;
+    case 'f':
+        info_mode ^= true;
+        redraw();
+        break;
+    case 'i':
+        digit_mode = false;
+        if (sequence >= 0) {
+            sequence = -1;
+            index_mode = false;
+        } else {
+            index_mode ^= true;
+        }
+        if (index_mode) {
+            index_bits = 0;
+        } else {
+            index_bits = -1;
+        }
+        redraw();
+        break;
+    case 'N':
+        testIndex += 9;
+    case 'n':
+        if (++testIndex >= tests.length)
+            testIndex = 0;
+        drawTop();
+        break;
+    case 'P':
+        testIndex -= 9;
+    case 'p':
+        if (--testIndex < 0)
+            testIndex = tests.length - 1;
+        drawTop();
+        break;
+    case 's':
+        sequence++;
+        drawTop();
+        break;
+    case 't':
+        intersect_mode ^= true;
+        redraw();
+        break;
+    case 'x':
+        ptLabels ^= true;
+        redraw();
+        break;
+    case 'y':
+        debug_xy ^= true;
+        redraw();
+        break;
+    case '-':
+        scale /= 2;
+        calcLeftTop();
+        redraw();
+        break;
+    case '=':
+    case '+':
+        scale *= 2;
+        calcLeftTop();
+        redraw();
+        break;
+    }
+}
+
+function calcXY() {
+    var e = window.event;
+	var tgt = e.target || e.srcElement;
+    var left = tgt.offsetLeft;
+    var top = tgt.offsetTop;
+    var unit = scale;
+    mouseX = (e.clientX - left) / scale + srcLeft;
+    mouseY = (e.clientY - top) / scale + srcTop;
+}
+
+function calcLeftTop() {
+    srcLeft = mouseX - screenWidth / 2 / scale;
+    srcTop = mouseY - screenHeight / 2 / scale;
+}
+
+function handleMouseClick() {
+    calcXY();
+    calcLeftTop();
+    redraw();
+}
+
+function handleMouseOver() {
+    calcXY();
+    var num = mouseX.toFixed(decimal_places) + ", " + mouseY.toFixed(decimal_places);
+    ctx.beginPath();
+    ctx.rect(300,100,200,10);
+    ctx.fillStyle="white";
+    ctx.fill();
+    ctx.fillStyle="black";
+    ctx.fillText(num, 300, 108);
+}
+
+function start() {
+    for (i = 0; i < testDivs.length; ++i) {
+        var title = testDivs[i].id.toString();
+        var str = testDivs[i].firstChild.data;
+        parse_debugShowActiveSpans(str, title);
+    }
+    drawTop();
+    window.addEventListener('keypress', doKeyPress, true);
+    window.onresize = function() {
+        drawTop();
+    }
+}
+
+</script>
+</head>
+
+<body onLoad="start();">
+<canvas id="canvas" width="750" height="500"
+    onmousemove="handleMouseOver()"
+    onclick="handleMouseClick()"
+    ></canvas >
+</body>
+</html>