<?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 - Styled</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,el,jog) {
			var cloneElement = document.getElementById(el).cloneNode(false);
			// assuming that most screens have a wdier than tall aspect ratio, x dimension is modified slightly
			var newx = (j*4) + jog + gblOffset.x;
			var newy = i*5 + gblOffset.y;
			cloneElement.setAttributeNS(null,"x",newx+"%");
			cloneElement.setAttributeNS(null,"y",newy+"%");
			cloneElement.setAttributeNS(null,"width","4%");
			cloneElement.setAttributeNS(null,"height","5%");
			document.getElementById("thePanel").appendChild(cloneElement);
		}
		function cloneLine(i){
		 var cloneElement = document.getElementById('straightLine').cloneNode(false);
			var newy = i*5+gblOffset.y;
			cloneElement.setAttributeNS(null,"x1",'23%');
			cloneElement.setAttributeNS(null,"y1",newy+'%');
			cloneElement.setAttributeNS(null,"x2",'80%');
			cloneElement.setAttributeNS(null,"y2",newy+'%');
			document.getElementById("thePanel").appendChild(cloneElement);
		}
		function init(){
			while (document.getElementById("thePanel").childNodes.length > 1)
			{ 
			 var lastChild = document.getElementById("thePanel").lastChild;
			 document.getElementById("thePanel").removeChild(lastChild);
			}
			var arrJog = [0,0.8,1.6,0.8]; // gives the stair-step effect
			for (var i=0;i<12;i++){
			  for (var j=0;j<13;j++){
				 var el = (j % 2 == 0)?'blackSquare':'whiteSquare';
				 cloneRect(i,j,el,arrJog[i%4]);
				}
				cloneLine(i);
			}
			cloneLine(12);
			// 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 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();
		window.onresize = windowChanged;
		gblOffset = {x:25,y:25}
	]]></script>
  </head>
  <body onload="init()" id="body" class="straighLines">	
	<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="blackSquare"/>
		  <svg:rect id="whiteSquare" class="whiteSquare"/>
		  <svg:line id="straightLine" class="grayLine"/>
	  </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%;">
			 All Straight Lines
			</svg:text>
			<svg:g x="50px" y="100px" id="thePanel"></svg:g>
		  </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>
