<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>SVG Grapher</title>
		<style type="text/css">
			body {
				font: 0.7em Arial,Helvetica,sans-serif;
			}
			.equationInput {
				float: left;
				padding: 0 20px;
				text-align: center;
				width: 211px;
			}
			.windowSettings {
				float: right;
				text-align: center;
				width: 211px;
			}
			.graphButton {
				width: 100%;
			}
			.graphMode {
				text-align: center;
			}
			h2 {
				margin: 0;
			}
			fieldset {
				text-align: right;
				width: 190px;
			}
			fieldset > label > input[type="text"] {
				margin-left: 7px;
				width: 150px;
			}
			#svgParent {
				margin: 0 auto;
				width: 400px;
			}
			line {
				stroke: black;
				stroke-width: 0.05px;
			}
			path {
				fill: none;
				stroke-width: 0.05px;
			}
		</style>
		<script type="text/javascript" src="grapher.js"/>
	</head>
	<body>
		<form id="graphInput" action="javascript://">
			<div class="equationInput">
				<h2>Graphing</h2>
				<fieldset title="Use &quot;x&quot; to represent the independent variable">
					<legend>
						<label><input type="radio" name="graphType" value="function" checked="checked"/> Function</label>
					</legend>
					<label>f(x) = <input type="text" id="fX" value="x"/></label>
				</fieldset>
				<fieldset title="Use &quot;t&quot; to represent the independent variable">
					<legend>
						<label><input type="radio" name="graphType" value="parametric"/> Parametric</label>
					</legend>
					<label>x(t) = <input type="text" id="xT" value="t"/></label><br/>
					<label>y(t) = <input type="text" id="yT" value="t"/></label>
				</fieldset>
				<fieldset title="Use &quot;t&quot; to represent the independent variable">
					<legend>
						<label><input type="radio" name="graphType" value="polar"/> Polar</label>
					</legend>
					<label>r(t) = <input type="text" id="rT" value="t"/></label>
				</fieldset><br/>
				<button class="graphButton" onclick="Grapher.drawGraph()">Graph</button>
				<br/><br/>
				<fieldset>
					<legend>Options</legend>
					<label title="Color of the graph">Color: 
						<select id="graphColor">
							<option style="background: #f0f8ff">aliceblue</option>
							<option style="background: #faebd7">antiquewhite</option>
							<option style="background: #00ffff">aqua</option>
							<option style="background: #7fffd4">aquamarine</option>
							<option style="background: #f0ffff">azure</option>
							<option style="background: #f5f5dc">beige</option>
							<option style="background: #ffe4c4">bisque</option>
							<option style="background: #000000" selected="selected">black</option>
							<option style="background: #ffebcd">blanchedalmond</option>
							<option style="background: #0000ff">blue</option>
							<option style="background: #8a2be2">blueviolet</option>
							<option style="background: #a52a2a">brown</option>
							<option style="background: #deb887">burlywood</option>
							<option style="background: #5f9ea0">cadetblue</option>
							<option style="background: #7fff00">chartreuse</option>
							<option style="background: #d2691e">chocolate</option>
							<option style="background: #ff7f50">coral</option>
							<option style="background: #6495ed">cornflowerblue</option>
							<option style="background: #fff8dc">cornsilk</option>
							<option style="background: #dc143c">crimson</option>
							<option style="background: #00ffff">cyan</option>
							<option style="background: #00008b">darkblue</option>
							<option style="background: #008b8b">darkcyan</option>
							<option style="background: #b8860b">darkgoldenrod</option>
							<option style="background: #a9a9a9">darkgray</option>
							<option style="background: #006400">darkgreen</option>
							<option style="background: #a9a9a9">darkgrey</option>
							<option style="background: #bdb76b">darkkhaki</option>
							<option style="background: #8b008b">darkmagenta</option>
							<option style="background: #556b2f">darkolivegreen</option>
							<option style="background: #ff8c00">darkorange</option>
							<option style="background: #9932cc">darkorchid</option>
							<option style="background: #8b0000">darkred</option>
							<option style="background: #e9967a">darksalmon</option>
							<option style="background: #8fbc8f">darkseagreen</option>
							<option style="background: #483d8b">darkslateblue</option>
							<option style="background: #2f4f4f">darkslategray</option>
							<option style="background: #2f4f4f">darkslategrey</option>
							<option style="background: #00ced1">darkturquoise</option>
							<option style="background: #9400d3">darkviolet</option>
							<option style="background: #ff1493">deeppink</option>
							<option style="background: #00bfff">deepskyblue</option>
							<option style="background: #696969">dimgray</option>
							<option style="background: #696969">dimgrey</option>
							<option style="background: #1e90ff">dodgerblue</option>
							<option style="background: #b22222">firebrick</option>
							<option style="background: #fffaf0">floralwhite</option>
							<option style="background: #228b22">forestgreen</option>
							<option style="background: #ff00ff">fuchsia</option>
							<option style="background: #dcdcdc">gainsboro</option>
							<option style="background: #f8f8ff">ghostwhite</option>
							<option style="background: #ffd700">gold</option>
							<option style="background: #daa520">goldenrod</option>
							<option style="background: #808080">gray</option>
							<option style="background: #808080">grey</option>
							<option style="background: #008000">green</option>
							<option style="background: #adff2f">greenyellow</option>
							<option style="background: #f0fff0">honeydew</option>
							<option style="background: #ff69b4">hotpink</option>
							<option style="background: #cd5c5c">indianred</option>
							<option style="background: #4b0082">indigo</option>
							<option style="background: #fffff0">ivory</option>
							<option style="background: #f0e68c">khaki</option>
							<option style="background: #e6e6fa">lavender</option>
							<option style="background: #fff0f5">lavenderblush</option>
							<option style="background: #7cfc00">lawngreen</option>
							<option style="background: #fffacd">lemonchiffon</option>
							<option style="background: #add8e6">lightblue</option>
							<option style="background: #f08080">lightcoral</option>
							<option style="background: #e0ffff">lightcyan</option>
							<option style="background: #fafad2">lightgoldenrodyellow</option>
							<option style="background: #d3d3d3">lightgray</option>
							<option style="background: #90ee90">lightgreen</option>
							<option style="background: #d3d3d3">lightgrey</option>
							<option style="background: #ffb6c1">lightpink</option>
							<option style="background: #ffa07a">lightsalmon</option>
							<option style="background: #20b2aa">lightseagreen</option>
							<option style="background: #87cefa">lightskyblue</option>
							<option style="background: #778899">lightslategray</option>
							<option style="background: #778899">lightslategrey</option>
							<option style="background: #b0c4de">lightsteelblue</option>
							<option style="background: #ffffe0">lightyellow</option>
							<option style="background: #00ff00">lime</option>
							<option style="background: #32cd32">limegreen</option>
							<option style="background: #faf0e6">linen</option>
							<option style="background: #ff00ff">magenta</option>
							<option style="background: #800000">maroon</option>
							<option style="background: #66cdaa">mediumaquamarine</option>
							<option style="background: #0000cd">mediumblue</option>
							<option style="background: #ba55d3">mediumorchid</option>
							<option style="background: #9370db">mediumpurple</option>
							<option style="background: #3cb371">mediumseagreen</option>
							<option style="background: #7b68ee">mediumslateblue</option>
							<option style="background: #00fa9a">mediumspringgreen</option>
							<option style="background: #48d1cc">mediumturquoise</option>
							<option style="background: #c71585">mediumvioletred</option>
							<option style="background: #191970">midnightblue</option>
							<option style="background: #f5fffa">mintcream</option>
							<option style="background: #ffe4e1">mistyrose</option>
							<option style="background: #ffe4b5">moccasin</option>
							<option style="background: #ffdead">navajowhite</option>
							<option style="background: #000080">navy</option>
							<option style="background: #fdf5e6">oldlace</option>
							<option style="background: #808000">olive</option>
							<option style="background: #6b8e23">olivedrab</option>
							<option style="background: #ffa500">orange</option>
							<option style="background: #ff4500">orangered</option>
							<option style="background: #da70d6">orchid</option>
							<option style="background: #eee8aa">palegoldenrod</option>
							<option style="background: #98fb98">palegreen</option>
							<option style="background: #afeeee">paleturquoise</option>
							<option style="background: #db7093">palevioletred</option>
							<option style="background: #ffefd5">papayawhip</option>
							<option style="background: #ffdab9">peachpuff</option>
							<option style="background: #cd853f">peru</option>
							<option style="background: #ffc0cb">pink</option>
							<option style="background: #dda0dd">plum</option>
							<option style="background: #b0e0e6">powderblue</option>
							<option style="background: #800080">purple</option>
							<option style="background: #ff0000">red</option>
							<option style="background: #bc8f8f">rosybrown</option>
							<option style="background: #4169e1">royalblue</option>
							<option style="background: #8b4513">saddlebrown</option>
							<option style="background: #fa8072">salmon</option>
							<option style="background: #f4a460">sandybrown</option>
							<option style="background: #2e8b57">seagreen</option>
							<option style="background: #fff5ee">seashell</option>
							<option style="background: #a0522d">sienna</option>
							<option style="background: #c0c0c0">silver</option>
							<option style="background: #87ceeb">skyblue</option>
							<option style="background: #6a5acd">slateblue</option>
							<option style="background: #708090">slategray</option>
							<option style="background: #708090">slategrey</option>
							<option style="background: #fffafa">snow</option>
							<option style="background: #00ff7f">springgreen</option>
							<option style="background: #4682b4">steelblue</option>
							<option style="background: #d2b48c">tan</option>
							<option style="background: #008080">teal</option>
							<option style="background: #d8bfd8">thistle</option>
							<option style="background: #ff6347">tomato</option>
							<option style="background: #40e0d0">turquoise</option>
							<option style="background: #ee82ee">violet</option>
							<option style="background: #f5deb3">wheat</option>
							<option style="background: #ffffff">white</option>
							<option style="background: #f5f5f5">whitesmoke</option>
							<option style="background: #ffff00">yellow</option>
							<option style="background: #9acd32">yellowgreen</option>
						</select>
					</label><br/><br/>
					<div class="graphMode">
						Mode: 
						<label title="Replace the last drawn graph"><input type="radio" checked="checked" name="grapherMode" id="grapherModeReplace" value="replace"/> replace</label>&nbsp;&nbsp;
						<label title="Append the graph instead of replacing"><input type="radio" name="grapherMode" id="grapherModeAppend" value="append"/> append</label>
					</div>
				</fieldset>

			</div>
		
		
		
		
		
		
		
		
			<div class="windowSettings">
				<h2>Window settings</h2>
				<fieldset>
					<legend>x</legend>
					<label>
						min <input type="text" id="xMin" value="-10"/>
					</label><br/>
					<label>
						max <input type="text" id="xMax" value="10"/>
					</label><br/>
					<label>
						step <input type="text" id="xStep" value="0.01"/>
					</label><br/>
				</fieldset>
				<fieldset>
					<legend>y</legend>
					<label>
						min <input type="text" id="yMin" value="-10"/>
					</label><br/>
					<label>
						max <input type="text" id="yMax" value="10"/>
					</label><br/>
				</fieldset>
				<fieldset>
					<legend>t</legend>
					<label>
						min <input type="text" id="tMin" value="0"/>
					</label><br/>
					<label>
						max <input type="text" id="tMax" value="6.283"/>
					</label><br/>
					<label>
						step <input type="text" id="tStep" value="0.01"/>
					</label><br/>
				</fieldset><br/>
				<button onclick="Grapher.applyWindowSettings()">Apply Settings</button><br/>
				<label>
					<input type="checkbox" checked="checked" id="redrawOnSettingChange"/> Redraw on change
				</label>
			</div>

			<div id="svgParent">
				<svg version="1.0" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
					<g transform="translate(400, 400) scale(20, -20)">
						<g transform="translate(-10, 10)" id="graphWindow">
							<g>
								<line x1="0" y1="1000" x2="0" y2="-1000"/>
								<line x1="-1000" y1="0" x2="1000" y2="0"/>
							</g>
							<g id="graphArea"><path/></g>
						</g>
					</g>
				</svg>
			</div>
		</form>

		<h2>Usage</h2>
		<ol>
			<li>Check the type of equation you wish to graph.</li>
			<li>Input a <strong>Javascript expression</strong>, not a mathematical one, i.e. "Math.pow(x, 2)" instead of "x^2" or "(x-2)*(x+3)" instead of "(x-2)(x+3)".</li>
			<li>Choose a color to draw the graph with (default is black).</li>
			<li>You may choose to replace the current graph (default), or add another by checking the appropriate radio box.</li>
			<li>Adjust window settings as necessary.</li>
			<li>Click the "Graph" button.</li>
		</ol>
		<h2>Known Issues:</h2>
		<ul>
			<li>Graphing polynomials greater than the 6th degree may hang Mozilla. I suspect it has to do with the native SVG renderer not being able to handle extreme values in path elements.</li>
			<li>Graphing csc x (which is 1/Math.sin(x)) has issues. This also prevents cot x from working. It seems to happen whenever x approaches 0 (where the csc x approaches plus or minus infinity). A workaround is to adjust the step so that x never does actually equal 0.</li>
		</ul>

	</body>
</html>