<?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,el,jog) {
			var cloneElement = document.getElementById(el).cloneNode(false);
			var offset = (el == "blackSquare")?0:50;
			var newx = (j*50)+jog;
			var newy = i*50;
			cloneElement.setAttributeNS(null,"x",newx+"px");
			cloneElement.setAttributeNS(null,"y",newy+"px");
			cloneElement.setAttributeNS(null,"width","50px");
			cloneElement.setAttributeNS(null,"height","50px");
			document.getElementById("thePanel").appendChild(cloneElement);
		}
		function cloneLine(i){
		 var cloneElement = document.getElementById('straightLine').cloneNode(false);
			var newy = i*50;
			cloneElement.setAttributeNS(null,"x1",'0px');
			cloneElement.setAttributeNS(null,"y1",newy+'px');
			cloneElement.setAttributeNS(null,"x2",'590px');
			cloneElement.setAttributeNS(null,"y2",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);
			}
			var arrJog = [0,16,32,16];
			for (var i=0;i<20;i++){
			  for (var j=0;j<20;j++){
				 var el = (j % 2 == 0)?'blackSquare':'whiteSquare';
				 cloneRect(i,j,el,arrJog[i%4]);
				}
				cloneLine(i);
			}
		}
	]]></script>
  </head>
  <body onload="init()">
	
	<svg:svg width="590px" height="501px">	  
		<svg:g id="wrapperSquares" class="hide">
		  <svg:rect id="blackSquare" class="blackSquare"/>
		  <svg:rect id="whiteSquare" class="whiteSquare"/>
		  <svg:line id="straightLine" class="grayLine"/>
	  </svg:g> 
		 <svg:text x="50px" y="10px">All Straight Lines 1</svg:text>
		<svg:g x="50px" y="100px" id="thePanel">
	  </svg:g>
	</svg:svg>
  </body>
</html>
