<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
		"http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">


<?xml-stylesheet href="xbl-shape-bindings.css" type="text/css"?>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg" 
      xmlns:math="http://www.w3.org/1998/Math/MathML" 
      xmlns:xlink="http://www.w3.org/1999/xlink"
      >
      
      
<style>
<style type="text/css">

	div.FooterLeft {
		font: inherit;
		font-size: 0.5em;
		position: absolute;
		display: block;
		bottom: 1.5em;
		left: .25em;
		height: 1em;
		color: black;
	}

	div.FooterRight {
		font: inherit;
		font-size: 0.5em;
		position: absolute;
		display: block;
		bottom: 1.5em;
		right: .25em;
		height: 1em;
		color: black;
	}


	div.nav	{
		position: absolute;
		bottom: 0.5em;
		right: 2.1em;
		margin:	4px;
	}

	div.nav	:link, div.nav :visited, div.nav span {
		text-decoration: none;
		background:	#006;
		color: white;
		padding: 0 0.3em 0.1em 0.3em;
		line-height: 1.0em;
	}

	div.nav	:link:hover, div.nav :visited:hover	{
		background:	#00f;
	}

	svg {
		font: inherit;
		font-size: 20px;
		fill: blue;
	}

	body {
		font-size: 2.5em;
		font-family: Comic Sans	MS;
		font-weight: bold;
		background:	white;
		color: black;
		margin-left: 1.5em;
		margin-right: 1em;
	}

	h1 {
		font: inherit;
		font-size: 1.5em;
		text-align:	center;
		margin-bottom: 1em;
		/* border-bottom: 0.1em solid black; */
	}

	/*
	ul {
		padding: 0 0 0 1.5em;
		margin: 0;
	}
	*/

	li { margin-left: 0.5em; padding: 0; }


	table.tree {
		margin:	auto;
	}

	table.tree td {
		text-align:	center;
		empty-cells: hide;
	}

	table.tree tr:not(.arrows) td {
		font-family: monospace;
		border:	0.1em solid;
	}

	@media screen,projection {
		div.slide {
			display: none;
		}
	}
	@media print {
		div.slide {
			display: block;
			page-break-after: always;
		}
		div.nav {
			display: none;
		}
	}


	.important {
		color: red;
		font-weight: bold;
		font-size: 1.5em;
	}
</style>

	[class~="circle"] 
	{
		stroke: red;
		stroke-width: 2;
		fill: red;
		fill-opacity: 0.1;
	}
	<style>
		[class~="circ_control"]:hover {stroke:black; stroke-width:2; fill-opacity:0.2;}
		li:hover {color:blue}
		[class~="sb_inserted"] {stroke:red; fill:red;}
		[class~="sb_uninserted"] {stroke:black; fill:black;}
		[class~="sb_taken"] {stroke:magenta; fill:magenta;}
		[class~="sb_touched"] {stroke:blue; fill:blue;}
		math {color:red;}
		[class~="myslide"] {width:8in; height:6in; }
		[class~="slidetitle"] {color:inherit; }
		a {color:inherit; text-decoration:none;}
	</style>
</style>


      
<script type="application/javascript" src="demo_impl.js"/>

  <head>
    <title>Nearest Neighbor Searching in Metric Spaces</title>
  </head>
  <body>
	<svg:svg id="canvas_sb2" 
    style="width:100%; height:90%;" viewBox="0 0 600 500">
		<svg:rect id="sb-rect2" fill="none" stroke="none" stroke-width="1" x="20" y="20" title="click the green or yellow squares"
			width="500" height="400"/>
		<svg:g id="group_sb2" />
		<svg:g id="sb_arrows" />
		<svg:rect id="anim_label_rect" width="8in" height="60" x="0" y="4.4in" style="fill:white;"/>
		<svg:text id="anim_label" style="fill:blue; font-family:Comic Sans MS; " x="3in" y="4.7in">Before building</svg:text>
		<svg:g width="700" height="42">
			<svg:rect class="circ_control" title="go" id="circ_go" width="30" height="30" y="4.5in" x="0" style="fill:lightgreen;"/>
			<svg:rect class="circ_control" title = "single step" id="circ_step" width="30" height="30" y="4.5in" x="30" style="fill:yellow;"/>
			<svg:rect class="circ_control" title = "stop" id="circ_stop" width="30" height="30" y="4.5in" x="60" style="fill:red;"/>
		</svg:g>
	</svg:svg>

</body></html>
