<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?xml-stylesheet href="xbl-shape-bindings.css" type="text/css"?>


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
      <title>Approximating Surfaces with Meshes</title>
      <script src="graded_triang_data.js" type="text/javascript" />
      <script src="demo_impl.js" type="text/javascript" />
		<style>
			[class~="circ_control"]:hover {stroke:black; stroke-width:2; fill-opacity:0.2;}
		</style>
   </head>
   <body>

<style type="text/css">
<![CDATA[
	[class~="circ_control"]:hover {stroke:black; stroke-width:2; fill-opacity:0.2;}
]]>
</style>
<!-- width="770" height="600"-->
   <canvas id="graded_canvas" width="560" height="450"/>
   		<svg:svg width="140" height="82">
  			<svg:rect class="circ_control" id="circ_go_graded" width="30" height="30"
					y="0" x="10" style="fill:lightgreen;"/>
   			<svg:rect class="circ_control" id="circ_step_graded" width="30" height="30"
					y="0" x="40" style="fill:yellow;"/>
   			<svg:rect class="circ_control" id="circ_stop_graded" width="30" height="30"
					y="0" x="70" style="fill:red;"/>
   		</svg:svg>
		 <button class="control_but" style="position: relative; right:0.3in; bottom:0.6in" onclick="graded_draw_initial_enet();">Initial</button>
 		<button class="control_but" style="position: relative; right:0.3in;  bottom:0.6in" onclick="draw_graded_edges();">Edges</button>

</body>
</html>