[monolithed]

<script type="text/javascript">
window.onload = function() {
    var codes = document.getElementById('codes').getElementsByTagName('a'), array = ['B', 'U', 'I'], i = codes.length;

    while(i--) {
        codes[i].onclick = function(i) {
            return function() {
                addBB('['+i+']', '[/'+i+']');
                return false;
            };
        }(array[i]);
    }
};

function addBB(ltag, rtag) {
    var textarea = document.form.elements[0];
    textarea.focus();

    if(document.selection && document.selection.createRange) {
        sel = document.selection.createRange();
        if (sel.parentElement() == textarea)  sel.text = ltag + sel.text + rtag;
    } 
    else if(typeof(textarea) != undefined) {
        var start = textarea.selectionStart, end = textarea.selectionEnd;
        textarea.value = textarea.value.substring(0, start) + ltag + textarea.value.substring(start, end) + rtag+ textarea.value.substring(end, textarea.value.length|0); 
    } 
    else textarea.value += ltag + rtag; 
}
</script> 

<style type="text/css">
a {
    background: #F7F7F7;
    border: outset white 1px;
    color: #000;
    font: 10pt/10px sans-serif;
    padding: 0px 5px;
    text-decoration: none;
}
</style>

<div id="codes">
    <a href="#"><b>B</b></a>
    <a href="#"><u>U</u></a>
    <a href="#"><i>I</i></a>
</div>
<form name="form" action="" method="post"> 
    <textarea cols="50" rows="5"></textarea> 
</form>