Pebbling a Chessboard

Based on the Numberphile video https://www.youtube.com/watch?v=lFQGSGsXbXE

by markussss

HTML

<body></body>

CSS

div {
		width: 30px;
		height: 30px;
		float: left;
	}
	.w {
		background-color: #ddd;
	}
	.b {
		background-color: #333;
	}
	.clone {
		background-color: #d33;
		width: 19px;
		height: 19px;
		border: 1px solid #d33;
		border-radius: 20px;
		margin: 5px 0 0 5px;
	}
	body {
		border: solid 1px #000;
		float:left;
        width: 600px;
	}
    #id1 {
        width: 28px;
        height: 28px;
        border-top: solid 2px red;
        border-left: solid 2px red;
    }
    #id2 {
        width: 28px;
        height: 26px;
        border-top: solid 2px red;
        border-right: solid 2px red;
        border-bottom: solid 2px red;
    }
    #id21 {
        width: 26px;
        height: 28px;
        border-right: solid 2px red;
        border-bottom: solid 2px red;
        border-left: solid 2px red;
    }
#id1 div, #id2 div, #id21 div { margin: 3px 0 0 3px; }

JavaScript

function getB(id){
		var b = document.createElement('div');
		//b.style.cssText="width:"+s+"px; height:"+s+"px; background-color:#000";
		b.className = "b";
		b.id="id"+id;
		return b;
	}
	
	function getW(id){
		var w = document.createElement('div');
		//w.style.cssText="width:"+s+"px; height:"+s+"px; background-color:#fff";
		w.className = "w";
		w.id="id"+id;
		return w;
	}
	
	function init(){
		for( j = 0; j < 20; j++ ) {
			for(i = 1; i <= 20; i++){
				if( j % 2 == 0 ) {
					if( i % 2 == 0 ){
						document.body.appendChild(getW((20*j)+i));
					} else {
						document.body.appendChild(getB((20*j)+i));
					}
				} else {
					if( i % 2 == 0 ){
						document.body.appendChild(getB((20*j)+i));
					} else {
						document.body.appendChild(getW((20*j)+i));
					}
				}
			}
		}
		document.getElementById('id1').appendChild(createClone());
		document.getElementById('id2').appendChild(createClone());
		document.getElementById('id21').appendChild(createClone());
	}
	
	function createClone(){
		var c = document.createElement('div');
		c.className = "clone";
		c.addEventListener('click', clone, false, true);
		return c;
	}
	
	function clone(e) {
		var parentId = e.target.parentNode.id;
		var idr, idd;
		idr = "id" + ((parentId.replace('id','')*1)+1)
		idd = "id" + ((parentId.replace('id','')*1)+20)
		
		if( !document.getElementById(idr).hasChildNodes() && !document.getElementById(idd).hasChildNodes() ){
			document.getElementById(idr).appendChild(createClone());
			document.getElementById(idd).appendChild(createClone());
			e.target.parentNode.removeChild(e.target);
		 }
	}
	init();