<?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/javascript" src="prototype.js"></script>
	 <script type="text/ecmascript"><![CDATA[
	 
	 function navButtonEffect(el,strMouseOverOrOut){
	   var offset, x, y, elText;
		 offset = (strMouseOverOrOut == 'over')? 0.2: 0;
		 x = arrNavPosition['_'+el.id+'Text'].xDefault + offset + '%';
		 y = arrNavPosition['_'+el.id+'Text'].yDefault + offset + '%';
		 elText = document.getElementById(el.id+'Text');
		 elText.setAttribute('x',x,false);
		 elText.setAttribute('y',y,false);
	 }
	 function eventHandler(e){
			while (document.getElementById("answer").childNodes.length > 0)
			{ 
			 var lastChild = document.getElementById("answer").lastChild;
			 document.getElementById("answer").removeChild(lastChild);
			}
			if (e.type == 'mouseout') return false;
			// get the radius and rudely strip out just the int
			var r = parseInt(e.target.getAttribute('r'));
			var msg = 'This circle has a radius of '+r;
			var text = document.createTextNode(msg);
			document.getElementById("answer").appendChild(text);
	 }
	 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)";
			cloneElement.addEventListener('mouseover', eventHandler, false);
			cloneElement.addEventListener('mouseout', eventHandler, false);
			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.5 adjustment factor on the below.  But it works
			// Ahhh...it's because x and y are treated differently for determining what 100% is.
			// but since most users have a wider than high aspect ratio we'll keep it
		 y = ( Math.cos(theta) * R )*1.5;
		 cloneCircle((x+cx),(cy+y),r,true);
	 }
	 function init(){
			var cx,cy,r;
			// circle 1
			cx=35;cy=55;r=6;
			cloneCircle(cx,cy,r);
			// circle 2.  same radius, different x
			cx=75;
			cloneCircle(cx,cy,r);
			//R will be the center-center distance
			var R;
			cx=35;r=4;R=10;
			for (var i=0;i<=5;i++){ cloneCircleArray(cx,cy,r,R,i);}
			cx=75;r=8;R=14;
			for (var i=0;i<=5;i++){ cloneCircleArray(cx,cy,r,R,i);}
			// and something is preventing .style.fontSize from reading what's on the style sheet
			// so cache the base font sizes in an array of custom objects. 
			var textNodes = document.getElementsByTagName('text');
		  for (var i=0;i<textNodes.length;i++){
				arrFontSizes[arrFontSizes.length] = {
																				id:textNodes[i].id,
																				baseFontSize:parseInt(textNodes[i].style.fontSize)}
				
		  }
			//make a convenient pseudo hash
			for (var i=0;i<arrFontSizes.length;i++){
			  arrFontSizes['_'+arrFontSizes[i].id] = arrFontSizes[i];
			}
			//var navNodes = document.getElementsByClassName('navText','navigation');
			// prototype.js getElementsByClassName() function is choking on child.className (Line 833), so just hard ocde for now
			var navNodes = new Array();
			navNodes[navNodes.length] = document.getElementById('navHomeText');
			navNodes[navNodes.length] = document.getElementById('navSVGHomeText');
			navNodes[navNodes.length] = document.getElementById('navStraightLinesText');
			navNodes[navNodes.length] = document.getElementById('navCountBlackDotsText');
			navNodes[navNodes.length] = document.getElementById('navWhichCircleIsBiggerText');
		  for (var i=0;i<navNodes.length;i++){
				arrNavPosition[arrNavPosition.length] = {
																				id:navNodes[i].id,
																				xDefault:parseInt(navNodes[i].getAttribute('x')),
																				yDefault:parseInt(navNodes[i].getAttribute('y'))
																				}
				
		  }
			for (var i=0;i<arrNavPosition.length;i++){
			  arrNavPosition['_'+arrNavPosition[i].id] = arrNavPosition[i];
			}
			windowChanged();
			//var arrNavNodes = document.getElementsByClass('leftNav');
	 }
	 function windowChanged(){
		// this function will re-scale all text elements to keep their screen aspect ratio relatively constant
	  // 800 px is arbitrarily chosen as the text size reference screen
		var scale = window.innerWidth / 800;
		var textNodes = document.getElementsByTagName('text');
		for (var i=0;i<textNodes.length;i++){
			fntSize = arrFontSizes[i].baseFontSize * scale;
			textNodes[i].style.fontSize = fntSize+'%';
		}
	 }
	 // globals
	 var arrFontSizes = new Array();
	 var arrNavPosition = new Array();
	 window.onresize = windowChanged;
		
	]]></script>
  </head>
  <body onload="init()" id="body" class="whichCircle">	
	<svg:svg id="viewbox" viewbox="0 0 100% 100%">
	<svg:rect id="pageBackdrop" x="0%" y="0%" width="100%" height="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="whiteCircle"/>
	  </svg:defs> 

				<svg:g id="header" class="">
		 <svg:rect id="headerBackdrop" x="0%" y="0%" width="100%" height="12%"/>
		 <!-- <svg:a xlink:href="/svg/ersatzHeaders.htm"> -->
			<svg:text id="headerBackgroundText" x="10%" y="10%" style="font-size:300%;">
		   XHTML / CSS / AJAX / PHP / ...
		  </svg:text>
		 <!-- </svg:a> -->
		 <svg:g id="headerCompanyName">
		  <svg:a xlink:href="/">		  
			 <svg:rect x="0%" y="0%" width="10%" height="12%"/>
			 <svg:text x="1%" y="6%" style="font-size:175%;">N</svg:text>
			 <svg:text x="3%" y="10%" style="font-size:175%;">C</svg:text>
			 <svg:text x="5%" y="6%" style="font-size:175%;">S</svg:text>
		  </svg:a>
		 </svg:g>
		 <svg:line id="headerBorder" x1="0%" y1="12%" x2="100%" y2="12%" class=""/>
		</svg:g>
		<svg:g id="main" class="">
		 <svg:g id="navigation" class="">
		  <svg:g id="navHome" onmouseover="navButtonEffect(this,'over');" onmouseout="navButtonEffect(this,'out');">
		   <svg:a xlink:href="/">
			  <svg:rect id="" class="navButton" x="1%" y="15%" width="16%" height="6%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="15%" x2="17%" y2="15%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="15%" x2="1%" y2="21%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="1%" y1="21%" x2="17%" y2="21%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="17%" y1="15%" x2="17%" y2="21%" />
		    <svg:text id="navHomeText" class="navText" x="3%" y="19%" style="font-size:80%;">Home</svg:text>
		   </svg:a>
			</svg:g>
		  <svg:g id="navSVGHome" onmouseover="navButtonEffect(this,'over');" onmouseout="navButtonEffect(this,'out');">
		   <svg:a xlink:href="/svg/">
			  <svg:rect id="" class="navButton" x="1%" y="25%" width="16%" height="6%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="25%" x2="17%" y2="25%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="25%" x2="1%" y2="31%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="1%" y1="31%" x2="17%" y2="31%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="17%" y1="25%" x2="17%" y2="31%" />
		    <svg:text id="navSVGHomeText" class="navText" x="3%" y="29%" style="font-size:80%;">SVG Home</svg:text>
		   </svg:a>
			</svg:g>
		  <svg:g id="navStraightLines" onmouseover="navButtonEffect(this,'over');" onmouseout="navButtonEffect(this,'out');">
		   <svg:a xlink:href="/svg/allStraightLinesStyled.xml">
			  <svg:rect id="" class="navButton" x="1%" y="35%" width="16%" height="6%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="35%" x2="17%" y2="35%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="35%" x2="1%" y2="41%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="1%" y1="41%" x2="17%" y2="41%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="17%" y1="35%" x2="17%" y2="41%" />
		    <svg:text id="navStraightLinesText" class="navText" x="3%" y="39%" style="font-size:80%;">Straight Lines?</svg:text>
		   </svg:a>
			</svg:g>
		  <svg:g id="navCountBlackDots" onmouseover="navButtonEffect(this,'over');" onmouseout="navButtonEffect(this,'out');">
		   <svg:a xlink:href="/svg/countTheBlackDotsStyled.xml">
			  <svg:rect id="" class="navButton" x="1%" y="45%" width="16%" height="6%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="45%" x2="17%" y2="45%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="45%" x2="1%" y2="51%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="1%" y1="51%" x2="17%" y2="51%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="17%" y1="45%" x2="17%" y2="51%" />
		    <svg:text id="navCountBlackDotsText" class="navText" x="3%" y="49%" style="font-size:80%;">Count Black Dots</svg:text>
		   </svg:a>
			</svg:g>
		  <svg:g id="navWhichCircleIsBigger" onmouseover="navButtonEffect(this,'over');" onmouseout="navButtonEffect(this,'out');">
		   <svg:a xlink:href="/svg/whichCircleIsBiggerStyled.xml">
			  <svg:rect id="" class="navButton" x="1%" y="55%" width="16%" height="6%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="55%" x2="17%" y2="55%" />
			  <svg:line id="" class="navButtonBorderTopAndLeft" x1="1%" y1="55%" x2="1%" y2="61%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="1%" y1="61%" x2="17%" y2="61%" />
			  <svg:line id="" class="navButtonBorderBottomAndRight" x1="17%" y1="55%" x2="17%" y2="61%" />
		    <svg:text id="navWhichCircleIsBiggerText" class="navText" x="3%" y="59%" style="font-size:80%;">Bigger Circle</svg:text>
		   </svg:a>
			</svg:g>
			<svg:line id="navBorder" class="" x1="19%" y1="15%" x2="19%" y2="70%" />
		 </svg:g>

		 <svg:g id="content" class="">
		  <svg:g id="workspace" class="abc">
		  <svg:text id="pageTitle" x="25%" y="20%" style="font-size:150%;">
			Which Circle Is Bigger?
			<svg:tspan>Hint: mouse over the circles</svg:tspan>
			</svg:text>
			<svg:text id="answer" x="25%" y="25%" style="font-size:70%;"></svg:text>
		  </svg:g>
		 </svg:g>
		</svg:g>

		<svg:g id="footer" class="">
		 <svg:line id="footerBorder" class="" x1="0%" y1="95%" x2="100%" y2="95%" />
		 <svg:text id="footerCompName" class="leftNav" x="35%" y="98%" style="font-size:70%;">Copyright &#xA9; 2006 Net Centric Software, Inc.</svg:text>
	  </svg:g>
	</svg:svg>	
  </body>
</html>

