Detecting The Cursor Position

I have created a nice blog form for my users and I would like them to be able to use some aspects of HTML code that I have styled and they can utilise. The way I have this set up at the moment is, much like th reply boxes here, they can click on a button and the code (such as ) is automatically added to the textarea. The problem I have at the moment is that the cursor goes to the end of the content written so far and places whatever they have clicked at the end. I would like to be able to detect the cursor position and then they can add the various tags where they want them.

Also, is there a way I can get the cursor to automatically sit between the opening and closing tags that are generated (as can be seen here)??

function writeCodeTag(code) {
var cache = document.getElementById('f').article.value;
this.code = code;
document.getElementById('f').article.value = cache + code;
document.getElementById('f').article.focus();
}

This function adds the various code tags to the textarea... I have the same sort of thing for smilies.