<?xml version="1.0"?>
<?xml-stylesheet href="svg.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg"  
  xmlns:xlink="http://www.w3.org/1999/xlink"
  >
  <head>	
	 <title>Which Circle Is Bigger</title>
	 <script type="text/ecmascript"><![CDATA[
	 function cloneCircle(cx,cy,r,bool){
		 var cloneElement = document.getElementById("circ1").cloneNode(false);
			cloneElement.setAttributeNS(null,"cx",cx+'%');
			cloneElement.setAttributeNS(null,"cy",cy+'%');
			cloneElement.setAttributeNS(null,"r",r+'%');
			if (bool) cloneElement.style.color = "rgb(0,0,255)";
			document.getElementById("workspace").appendChild(cloneElement);
	 }
	 function cloneCircleArray(cx,cy,r,R,i){
	   var x,y,theta, numCircles;
		 numCircles = 5;
		 theta = i * (360 / numCircles); // in degrees
		 theta = theta * (Math.PI/180); // in radians
		 x = ( Math.sin(theta) * R );
		 //there is NO reason why there should be a 1.7 adjustment factor on the below.  But it works
			// it's because x and y are treated differently for determining what 100% is.
		 y = ( Math.cos(theta) * R )*1.7;
		 cloneCircle((x+cx),(cy+y),r,true);
	 }
	 function init(){
			var cx,cy,r;
			// circle 1
			cx=25;cy=50;r=5;
			cloneCircle(cx,cy,r);
			// circle 2.  same radius, different x
			cx=66;
			cloneCircle(cx,cy,r);
			//R will be the center-center distance
			var R;
			cx=25;cy=50;r=4;R=8;
			for (var i=0;i<=5;i++){ cloneCircleArray(cx,cy,r,R,i);}
			cx=66;cy=50;r=8;R=12;
			for (var i=0;i<=5;i++){ cloneCircleArray(cx,cy,r,R,i);}
	 }
		
	]]></script>
  </head>
  <body onload="init()" id="body" class="whichCircle">	
	<svg:svg id="viewbox" viewbox="0 0 100% 100%">

		<svg:defs>
		  <svg:rect id="" class="blackSquareDots"/>
		  <svg:circle id="" cx="1em" cy="1em" r="125em" class="whiteCircle"/>
			<svg:circle id="circ1" r="1" class="blueCircle"/>
	  </svg:defs> 

		 <svg:g id="workspace"></svg:g>
		
	</svg:svg>	
  </body>
</html>
