Smangii's "Roll-Me-Over" User Legend

Live Preview: click here!

You can put this anywhere, really. Main footers is preferred if you want it right below the info center

<script type="text/javascript">
<!--
/* Smangii's "Roll-Me-Over" User Legend - [url]http://smangii.proboards.com[/url]
Do not Repost without permission */

document.write('<table width="auto"><tr><td align="left" width="100%"><div id="theL"><b>User Legend:</b></div></td></tr><tr><td align="left" width="100%"><div id="theboxes"></div></td></tr></table>')

var boxwidth = '15px'; // width of the box buttons
var boxheight = '15px'; // height of the box buttons

var groups = [
// Edit below as such: ['Title of the Group','Color of the Group']
['Owner','FF0000'],
['Administrator','00FF00'],
['Global Moderator','0000FF'],
['Moderator','8000FF'],
['Designer','FF3C14'],
['Coder','862D59'],
['Veteran','FF0080'],
['Premium Member','009966'],
['Registered Member','003399'],
['Banned Member','000000'] // No Comma at the end of the last line!
];

// Do not touch anything below!
for(a=0;a<groups.length;a++){
document.getElementById("theboxes").innerHTML += '<div style="margin: 2px; width: '+boxwidth+'; height: '+boxheight+'; float: left; background-color: #'+groups[a][1]+';" onmouseover="showL(\'<font color='+groups[a][1]+'>'+groups[a][0]+'</font>\');" onmouseout="hideL()"></div>';
}
function showL(name){document.getElementById('theL').innerHTML = '<b>'+name+'</b>';}
function hideL(){document.getElementById('theL').innerHTML = '<b>User Legend:</b>';}
//-->
</script>