<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Annotator/Figure Testing</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@Import "../../../dijit/themes/tundra/tundra.css";
</style>
		<link href="../resources/sketch.css" type="text/css" rel="stylesheet"/>
		<style type="text/css">
			body {
				background:#fff url("images/testsBodyBg.gif") repeat-x top left;
				padding:1em 3em;
			}
			table { margin:0; width:100%;}
			table tr td { padding:0; }
			table tr td table { border:0; width:auto;}

			#container{ width:600px; }
			#toolbar{ width:100%; }
			#canvas{ width:600px; height:600px; background-color:#fff;border:1px solid #ccc; overflow:auto;position:relative;}
		</style>
		<script>var djConfig={ isDebug: false };</script>
		<script src="../../../dojo/dojo.js"></script>
		<script src="../Toolbar.js"></script>
		<script>
			dojo.require("dojox.sketch");
			dojo.require("dojox.sketch.Slider");
			dojo.require("dojox.sketch.LeadAnnotation");
			dojo.require("dojox.sketch.UnderlineAnnotation");
			dojo.require("dojox.sketch.SingleArrowAnnotation");
			dojo.require("dojox.sketch.DoubleArrowAnnotation");
			dojo.require("dojox.sketch.PreexistingAnnotation");
			var f, a, t;
			function init(){
				var ta=dojox.sketch;
				f=new ta.Figure();
				dojo.connect(f, "_mu", function(){ dojo.byId("output").value=f.serialize(); });

				t=ta.makeToolbar(dojo.byId("toolbar"), f);

				//	test loading from an SVG file
				dojo.xhrGet({
					url:"annotation.svg",
					preventCache:true,
					load:function(data, ioArgs){
						f.load(dojox.xml.DomParser.parse(data), dojo.byId("canvas"));
						dojo.byId("output").value=f.serialize();
					}
				});
			}
			dojo.addOnLoad(init);
		</script>
	</head>
	<body class="tundra">
		<h1>Annotator/Figure Testing Platform</h1>
		<p>This is a generic test to create a figure from an existing SVG file, to edit that figure, and to test the undo stack. Double click a shape to set new text for it.</p>
		<div id="container">
			<div id="toolbar"></div>
			<div id="canvas"></div>
		</div>
		<h2>Serialized output</h2>
		<textarea id="output" style="width:100%;height:180px;overflow:auto;font-size:0.8em;"></textarea>
	</body>
</html>