<!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="ASCIIMathML.js" type="text/javascript" /> <!-- S5 JS -->
      <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>

    <center><div style="align:center"><xul:hbox id = "bb" orient="horizontal"
				style="width:5in; height:100%; align:center" align="center">
	   <canvas id="graded_canvas" width="312" height="247"/>
   	   <xul:vbox align="top" height="300">
		<spacer style="height:0.3in;"/>
   		<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>
   		<xul:button class="control_but" oncommand="graded_draw_initial_enet();">Initial</xul:button>
 		<xul:button class="control_but" oncommand="draw_graded_edges();">Edges</xul:button>
	   </xul:vbox>
   </xul:hbox></div></center>
 
   </body>
</html>
