<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mozilla Circles</title>
<style type="text/css">
div {
border: 2px solid #009;
height: 101px;
width: 101px;
-moz-border-radius: 52px;
position: absolute;
top: 50%;
right: 50%;
margin: -200px -200px 0 0;
}
#circ1 {
margin: -50px -50px 0 0;
}
#circ2 {
margin: -60px -60px 0 0;
}
#circ3 {
margin: -40px -40px 0 0;
}
#circ4 {
margin: -60px -40px 0 0;
}
#circ5 {
margin: -40px -60px 0 0;
}
#circ6 {
margin: -30px -30px 0 0;
}
#circ7 {
margin: -70px -70px 0 0;
}
#circ8 {
margin: -70px -30px 0 0;
}
#circ9 {
margin: -30px -70px 0 0;
}
#circ10 {
margin: -50px -70px 0 0;
}
#circ11 {
margin: -70px -50px 0 0;
}
#circ12 {
margin: -30px -50px 0 0;
}
#circ13 {
margin: -50px -30px 0 0;
}
#circ14 {
height: 10px;
width: 10px;
margin: -58px -58px 0 0;
}
#circ15 {
height: 10px;
width: 10px;
margin: 49px 49px 0 0;
}
#circ16 {
height: 10px;
width: 10px;
margin: 49px -58px 0 0;
}
#circ17 {
height: 10px;
width: 10px;
margin: -58px 49px 0 0;
}
#circ18 {
height: 12px;
width: 12px;
margin: -5px -5px 0 0;
}
#circ19 {
height: 17px;
width: 17px;
margin: -19px -19px 0 0;
}
#circ20 {
height: 17px;
width: 17px;
margin: 4px 4px 0 0;
}
#circ21 {
height: 17px;
width: 17px;
margin: -19px 4px 0 0;
}
#circ22 {
height: 17px;
width: 17px;
margin: 4px -19px 0 0;
}
</style>
<script type="text/javascript">
colors = new Array(6);
current = 1;
color = 1;
colors[0] = "00C";
colors[1] = "03C";
colors[2] = "06C";
colors[3] = "09C";
colors[4] = "0CC";
colors[5] = "0C9";
colors[6] = "0C6";
colors[7] = "0C3";
colors[8] = "0C0";
colors[9] = "3C0";
colors[10] = "6C0";
colors[11] = "9C0";
colors[12] = "CC0";
colors[13] = "C90";
colors[14] = "C60";
colors[15] = "C30";
colors[16] = "C00";
colors[17] = "C03";
colors[18] = "C06";
colors[19] = "C09";
colors[20] = "C0C";
colors[21] = "90C";
colors[22] = "60C";
colors[23] = "30C";
function cycleColors() {
foobar = setInterval("cycle()",30);
}
function cycle() {
window.status = "Color #" + colors[color] + " - " + "Cycle " + current;
document.getElementById('circ'+current).style.borderColor = "#" + colors[color];
color = (current==22?(color==23?0:color+1):color);
current = (current==22?1:current+1);
}
</script>
</head>
<body>
<div id="circ1"></div>
<div id="circ2"></div>
<div id="circ3"></div>
<div id="circ4"></div>
<div id="circ5"></div>
<div id="circ6"></div>
<div id="circ7"></div>
<div id="circ8"></div>
<div id="circ9"></div>
<div id="circ10"></div>
<div id="circ11"></div>
<div id="circ12"></div>
<div id="circ13"></div>
<div id="circ14"></div>
<div id="circ15"></div>
<div id="circ16"></div>
<div id="circ17"></div>
<div id="circ18"></div>
<div id="circ19"></div>
<div id="circ20"></div>
<div id="circ21"></div>
<div id="circ22"></div>
<a href="#" onclick="javascript:cycleColors()">Cycle colors</a>
</body>
</html>
