<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rectangle Mozilla Example</title>
</head>

<body>
<h2>Rectangle Example That is Viewable in Mozilla</h2>

<svg id="canvas" width="2000" height="800" onload = "init()" style="text-anchor:middle;"
xmlns="http://www.w3.org/2000/svg">

<script>
<![CDATA[
	
	var shift = 0;
	
	var scale = 80;
	
	var shiftvert = 0;
	
	var Length = 4;
	
	var Width = 2;
	
	var Area = Length*Width;
	var svgLength;
	var svgWidth;
	var svgLengthTop;
	var svgWidthRight;
	var scaleline;
	
	function init() {
		CreateSVGElements();
		Rectangle();
	}
	
function zoomin(){
	scale = scale *2;
	Rectangle();
}
function zoomout(){
	scale = scale /2;
	Rectangle();
}
function moveright(){
	shift = shift + 100;
	Rectangle();
}
function moveleft(){
	shift = shift -100;
	Rectangle();
}
function moveup(){
	shiftvert = shiftvert + 100;
	Rectangle();
}
function movedown(){
	shiftvert = shiftvert-100;
	Rectangle();
}
	function CreateSVGElements()
	{
		svgLength = document.createElementNS("http://www.w3.org/2000/svg", "line");
		svgLength.setAttribute("stroke","blue");
		svgLength.setAttribute("stroke-width",2);
		
		svgWidth = document.createElementNS("http://www.w3.org/2000/svg", "line");
		svgWidth.setAttribute("stroke","blue");
		svgWidth.setAttribute("stroke-width",2);
		
		svgLengthTop = document.createElementNS("http://www.w3.org/2000/svg", "line");
		svgLengthTop.setAttribute("stroke","blue");
		svgLengthTop.setAttribute("stroke-width",2);
		
		svgWidthRight = document.createElementNS("http://www.w3.org/2000/svg", "line");
		svgWidthRight.setAttribute("stroke","blue");
		svgWidthRight.setAttribute("stroke-width",2);
		
		scaleline = document.createElementNS("http://www.w3.org/2000/svg", "line");
		scaleline.setAttribute("stroke","blue");
		scaleline.setAttribute("stroke-width",2);
		scaleline.setAttribute("y1",780);
		scaleline.setAttribute("y2",780);
		
	}
	
	function UpdateRectangle()
	{
		
	
		Area=Length*Width;
		var Areaelement = document.getElementById("oPersistTextSaveArea");
		Areaelement.setAttribute("value",Area);
	
		Rectangle();
	}
	function Rectangle()
	{
		var canvas = document.getElementById("canvas");
	var Angle = 0;
	
	var angleInRadians = 0;
	
	var sinAngleLength = Math.sin(angleInRadians)*Length;
	
	var cosAngleLength = Math.cos(angleInRadians)*Length;
	
	var tanToolingFlangesHeight = null;
	
		scaleline.setAttribute("x1",200-parseFloat(scale)/2);
		scaleline.setAttribute("x2",200+parseFloat(scale)/2);
		
		
		
		svgLength.setAttribute("x1",100);
		svgLength.setAttribute("y1",500);
		svgLength.setAttribute("x2",100);
		svgLength.setAttribute("y2",300);
		CoordinateToGet=parseFloat(svgLength.getAttribute("x1"));
		svgLength.setAttribute("x1", CoordinateToGet+parseFloat(shift));
		CoordinateToGet=parseFloat(svgLength.getAttribute("x1"));
		svgLength.setAttribute("x2", CoordinateToGet+(parseFloat(cosAngleLength)*parseFloat(scale)));
		CoordinateToGet=parseFloat(svgLength.getAttribute("y1"));
		svgLength.setAttribute("y1", CoordinateToGet-parseFloat(shiftvert));
		CoordinateToGet=parseFloat(svgLength.getAttribute("y1"));
		svgLength.setAttribute("y2", CoordinateToGet-(parseFloat(sinAngleLength)*parseFloat(scale)));
		canvas.appendChild(svgLength);
		
		CoordinateToGet=parseFloat(svgLength.getAttribute("x1"));
		svgWidth.setAttribute("x1", CoordinateToGet);
		CoordinateToGet=parseFloat(svgLength.getAttribute("x1"));
		svgWidth.setAttribute("x2", CoordinateToGet);
		CoordinateToGet=parseFloat(svgLength.getAttribute("y1"));
		svgWidth.setAttribute("y1", CoordinateToGet);
		CoordinateToGet=parseFloat(svgLength.getAttribute("y1"));
		svgWidth.setAttribute("y2", CoordinateToGet-(parseFloat(Width)*parseFloat(scale)));
		canvas.appendChild(svgWidth);
		
		CoordinateToGet=parseFloat(svgLength.getAttribute("x1"));
		svgLengthTop.setAttribute("x1", CoordinateToGet);
		CoordinateToGet=parseFloat(svgLength.getAttribute("x2"));
		svgLengthTop.setAttribute("x2", CoordinateToGet);
		CoordinateToGet=parseFloat(svgLength.getAttribute("y1"));
		svgLengthTop.setAttribute("y1", CoordinateToGet-(parseFloat(Width)*parseFloat(scale)));
		CoordinateToGet=parseFloat(svgLength.getAttribute("y2"));
		svgLengthTop.setAttribute("y2", CoordinateToGet-(parseFloat(Width)*parseFloat(scale)));
		canvas.appendChild(svgLengthTop);
		
		CoordinateToGet=parseFloat(svgWidth.getAttribute("x1"));
		svgWidthRight.setAttribute("x1", CoordinateToGet+(parseFloat(Length)*parseFloat(scale)));
		CoordinateToGet=parseFloat(svgWidth.getAttribute("x2"));
		svgWidthRight.setAttribute("x2", CoordinateToGet+(parseFloat(Length)*parseFloat(scale)));
		CoordinateToGet=parseFloat(svgWidth.getAttribute("y1"));
		svgWidthRight.setAttribute("y1", CoordinateToGet);
		CoordinateToGet=parseFloat(svgWidth.getAttribute("y2"));
		svgWidthRight.setAttribute("y2", CoordinateToGet);
		canvas.appendChild(svgWidthRight);
		canvas.appendChild(scaleline);}
	
	function SpinButtonLength_SpinUp()
	{
		var LengthelementUp = document.getElementById("oPersistTextSaveLength");
		Length = LengthelementUp.getAttribute("value");
		Length=Length-0+0.01;
		LengthelementUp.setAttribute("value",Length);
		UpdateRectangle();
	}
	function SpinButtonLength_SpinDown()
	{
		var LengthelementDown = document.getElementById("oPersistTextSaveLength");
		Length = LengthelementDown.getAttribute("value");
		Length=Length-0.01;
		LengthelementDown.setAttribute("value",Length);
		UpdateRectangle();
	}
	function SpinButtonWidth_SpinUp()
	{
		var WidthelementUp = document.getElementById("oPersistTextSaveWidth");
		Width = WidthelementUp.getAttribute("value");
		Width=Width-0+0.01;
		WidthelementUp.setAttribute("value",Width);
		UpdateRectangle();
	}
	function SpinButtonWidth_SpinDown()
	{
		var WidthelementDown = document.getElementById("oPersistTextSaveWidth");
		Width = WidthelementDown.getAttribute("value");
		Width=Width-0.01;
		WidthelementDown.setAttribute("value",Width);
		UpdateRectangle();
	}
	]]>
	</script>
</svg>

<form name="oPersistSave" id="oPersistSave">
<table border = "1" bgcolor="YELLOW" class="RectangleTable">
	<tr>
		<td align ="right" valign ="top">
		Scale = 1m
		<table border = "1" bgcolor="YELLOW" class="InputValues">
			<tr>
				<td><label id = "InputLength">Length (m)</label></td>
				<td><input id="oPersistTextSaveLength" class="sFavorite"  value = "4" onsave="fnSaveThisSaveLength()" size="10"  onload="fnLoadThisSaveLength()" /></td>
				<td><table><tr><td><input id="buttonLengthUp" type="image" src="../Images/Up.gif" onclick="SpinButtonLength_SpinUp();" /></td></tr><tr><td><input id="buttonLengthDown" type="image" src="../Images/Down.gif" onclick="SpinButtonLength_SpinDown();" /></td></tr></table>
				</td>
			</tr>
		
			<tr>
				<td><label id = "InputWidth">Width (m)</label></td>
				<td><input id="oPersistTextSaveWidth" class="sFavorite"  value = "2" onsave="fnSaveThisSaveWidth()" size="10"  onload="fnLoadThisSaveWidth()" /></td>
				<td><table><tr><td><input id="buttonWidthUp" type="image" src="../Images/Up.gif" onclick="SpinButtonWidth_SpinUp();" /></td></tr><tr><td><input id="buttonWidthDown" type="image" src="../Images/Down.gif" onclick="SpinButtonWidth_SpinDown();" /></td></tr></table>
				</td>
			</tr>
		</table>
		</td>
		<td>
		<table border = "1" bgcolor="YELLOW" class="DerivedValues">
			<tr>
				<td><label id = "InputArea">Area (m^2)</label></td>
				<td><input id="oPersistTextSaveArea" class="sFavorite"  value = "8" onsave="fnSaveThisSaveArea()" size="10"  onload="fnLoadThisSaveArea()" /></td>
				
				</tr>
		</table>
		</td>
		<td>
		<table border = "1" bgcolor="YELLOW" class="DerivedValues">
			<tr>
				<td>Area=Length*Width</td>
				
				</tr>
		</table>
		</td>
	
<table border = "0" bgcolor="YELLOW" class="swtable">

<tr height = "30">
	<td>
	</td>
	<td>
	</td>
</tr>
<tr>
	<td>
	</td>
	<td align = "center"><input type="button" style="width:90;height:25" value="Zoom In" onclick="zoomin();" />
	</td>

	<td>
	</td>
</tr>
<tr>
	<td>
	</td>
	<td align = "center"><input type="button" style="width:90;height:25" value="Zoom Out" onclick="zoomout();" />
	</td>

	<td>
	</td>
</tr>
<tr height = "30">
	<td>
	</td>
	<td>
	</td>
</tr>
<tr>
	<td>
	</td>
	<td align = "center"><input type="button" style="width:90;height:25" value="Up" onclick="moveup();" />
	</td>

	<td>
	</td>
</tr>
<tr>
	<td>
	</td>
	<td>
	</td>
	<td>
	</td>
</tr>
<tr>
	<td align = "center"><input type="button" style="width:90;height:25" value="Left" onclick="moveleft();" />
	</td>

	<td>
	</td>
	<td>
	</td>
	<td align = "center"><input type="button" style="width:90;height:25" value="Right" onclick="moveright();" />
	</td>

</tr>
<tr>
	<td>
	</td>
	<td align = "center"><input type="button" style="width:90;height:25" value="Down" onclick="movedown();" />
	</td>

	<td>
	</td>
</tr>
<tr height = "30">
	<td>
	</td>
	<td>
	</td>
</tr>

</table>
</tr>
</table></form>

</body>
</html>


