davertron/turtles_all_the_way_down.html

## turtles_all_the_way_down.html
<html>
    <head>
        <script type="text/javascript">
            // The purpose of this function is to draw a div inside another div
            // at half dimensions (sort of like looking at a mirror in another
            // mirror...
            function turtles_all_the_way_down(previous_div, level, max_level){
                if(level == max_level){
                    return;
                }
                var new_div = document.createElement('div');
                var previous_div_style = previous_div.getAttribute('style');
                var height_regex = /height:\s*([0-9]+)/;
                var width_regex = /width:\s*([0-9]+)/;
                var color_regex = /background-color:\s*([^;]*);/;
                var height_match = height_regex.exec(previous_div_style);
                var width_match = width_regex.exec(previous_div_style);
                var color_match = color_regex.exec(previous_div_style);
                var previous_height = height_match[1];
                var previous_width = width_match[1];
                var previous_color = color_match[1];
                if(previous_color.replace(' ', '') == 'red'){
                    var new_color = 'blue';
                } else {
                    var new_color = 'red';
                }
                new_div.setAttribute('style', 'height: ' + previous_height/2 +
                        'px; width: ' + previous_width/2 + 'px; ' +
                        'background-color: ' + new_color + ';');
                previous_div.appendChild(new_div);
                turtles_all_the_way_down(new_div, level+1, max_level);
            }
        </script>
    </head>
    <body>
        <div id="starter_div" style="height: 500px; width: 500px; margin: auto;
            background-color: red;">
        </div>
        <a
            href="javascript:turtles_all_the_way_down(document.getElementById('starter_div'),
            0, 5);">Draw 6 Nested Divs</a>
    </body>
</html>
	<html>
	<head>
	<script type="text/javascript">
	// The purpose of this function is to draw a div inside another div
	// at half dimensions (sort of like looking at a mirror in another
	// mirror...
	function turtles_all_the_way_down(previous_div, level, max_level){
	if(level == max_level){
	return;
	}
	var new_div = document.createElement('div');
	var previous_div_style = previous_div.getAttribute('style');
	var height_regex = /height:\s*([0-9]+)/;
	var width_regex = /width:\s*([0-9]+)/;
	var color_regex = /background-color:\s([^;]);/;
	var height_match = height_regex.exec(previous_div_style);
	var width_match = width_regex.exec(previous_div_style);
	var color_match = color_regex.exec(previous_div_style);
	var previous_height = height_match[1];
	var previous_width = width_match[1];
	var previous_color = color_match[1];
	if(previous_color.replace(' ', '') == 'red'){
	var new_color = 'blue';
	} else {
	var new_color = 'red';
	}
	new_div.setAttribute('style', 'height: ' + previous_height/2 +
	'px; width: ' + previous_width/2 + 'px; ' +
	'background-color: ' + new_color + ';');
	previous_div.appendChild(new_div);
	turtles_all_the_way_down(new_div, level+1, max_level);
	}
	</script>
	</head>
	<body>
	<div id="starter_div" style="height: 500px; width: 500px; margin: auto;
	background-color: red;">
	</div>
	<a
	href="javascript:turtles_all_the_way_down(document.getElementById('starter_div'),
	0, 5);">Draw 6 Nested Divs</a>
	</body>
	</html>