<?xml version="1.0"?>
<?xml-stylesheet href="illusions.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:svg="http://www.w3.org/2000/svg"  
  >
  <head>	
	 <title>All Straight Lines 1</title>
	 <script type="text/ecmascript"><![CDATA[
		function cloneRect(i,j) {
			//var cloneElement = evt.target.cloneNode(false);
			var cloneElement = document.getElementById('blackSquare').cloneNode(false);
			var newx = (j*50)+4;
			var newy = i*50+4;
			/*
			alert(el);
			alert(newx);
			alert(newy);
			*/
			cloneElement.setAttributeNS(null,"x",newx+"px");
			cloneElement.setAttributeNS(null,"y",newy+"px");
			cloneElement.setAttributeNS(null,"width","42px");
			cloneElement.setAttributeNS(null,"height","42px");
			document.getElementById("thePanel").appendChild(cloneElement);
		}
		function cloneCircle(i,j) {
			//var cloneElement = evt.target.cloneNode(false);
			var cloneElement = document.getElementById('circ1').cloneNode(false);
			var newx = (j*50)+50;
			var newy = i*50+50;
			/*
			alert(el);
			alert(newx);
			alert(newy);
			*/
			cloneElement.setAttributeNS(null,"cx",newx+"px");
			cloneElement.setAttributeNS(null,"cy",newy+"px");
			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);
			}
			*/
			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);
				}
			}
		}
		// this doesn't seem to fix the 'overwrite' problem
		window.onresize = init;
	]]></script>
  </head>
  <body onload="init()">
	
	<svg:svg x="50" y="50px" width="555px" height="507px">	  
		<svg:g id="wrapperSquares" class="hide">
		  <svg:rect id="blackSquare" class="blackSquareDots"/>
		  <svg:circle id="circ1" r="5px" cx="0" cy="0" class="whiteCircle"/>
	  </svg:g> 
		 <svg:text x="50px" y="10px">Count The Black Dots</svg:text>
		<svg:g x="50px" y="100px" id="thePanel" class="">
		 <svg:rect id="blackSquare" x="0px" y="0px" width="600px" height="600px" class="grayBackground"/>
	  </svg:g>
	</svg:svg>
  </body>
</html>
