<?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>All Straight Lines 1</title>
	 <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 cloneRect(i,j) {
			var cloneElement = document.getElementById('blackSquare').cloneNode(false);
			var newx = (j*5)+4 + gblOffset.x;
			var newy = i*5+4 + gblOffset.y;
			cloneElement.setAttributeNS(null,"x",newx+"%");
			cloneElement.setAttributeNS(null,"y",newy+"%");
			cloneElement.setAttributeNS(null,"width","4%");
			cloneElement.setAttributeNS(null,"height","4%");
			document.getElementById("thePanel").appendChild(cloneElement);
		}
		function cloneCircle(i,j) {
			var cloneElement = document.getElementById('circ1').cloneNode(false);
			var newx = (j*5)+8.5 + gblOffset.x;
			var newy = i*5+8.5 + gblOffset.y;
			cloneElement.setAttributeNS(null,"cx",newx+"%");
			cloneElement.setAttributeNS(null,"cy",newy+"%");
			document.getElementById("thePanel").appendChild(cloneElement);
		}
		function init(){
			for (var i=0;i<10;i++){
			  for (var j=0;j<11;j++){
				 cloneRect(i,j);
				 if (j<10 && i<9) cloneCircle(i,j);
				}
			}
			// 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();
		}
	 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();
	 gblOffset = {x:25,y:25}
	 window.onresize = windowChanged;
	]]></script>
  </head>
  <body onload="init()" id="body" class="blackDots">
	<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="blackSquare" class="blackSquareDots"/>
		  <svg:circle id="circ1" r="0.75%" cx="0" cy="0" 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="thePanel">
		   <svg:text id="pageTitle" x="25%" y="20%" style="font-size:150%;">
			  Count The Black Dots
			 </svg:text>
			 <svg:rect x="25%" y="25%" width="62%" height="60%" style="fill:#999;"></svg:rect>
			</svg:g>	
		 </svg:g>
		</svg:g>

		<svg:g id="footer" class="">
		 <svg:line id="footerBorder" class="" x1="0%" y1="90%" x2="100%" y2="90%" />
		 <svg:a xlink:href="/" class="footerLinks">
		  <svg:rect x="39%" y="91.5%" width="6%" height="3%" />
			<svg:text x="40%" y="94%" style="font-size:80%;">Home</svg:text>
		 </svg:a>
		 <svg:a xlink:href="&#109;&#97;&#105;&#108;&#116;&#111;:&#101;&#100;&#64;&#110;&#101;&#116;&#99;&#101;&#110;&#116;&#114;&#105;&#99;&#115;&#111;&#102;&#116;&#119;&#97;&#114;&#101;&#46;&#99;&#111;&#109;" class="footerLinks">
		  <svg:rect x="54%" y="91.5%" width="7%" height="3%" />
			<svg:text x="55%" y="94%" style="font-size:80%;">Contact</svg:text>
		 </svg:a>
		 <svg:text id="footerCompName" class="leftNav" x="35%" y="98%" style="font-size:80%;">Copyright &#xA9; 2006, Net Centric Software, Inc.</svg:text>
	  </svg:g>

	</svg:svg>
  </body>
</html>
