Problem med ingogning av smilies

Har ett stort problem med smilies.

Har ett klotter plank där man ska kunna klistar in smilies i texten genom att klicka på en bild.
Smilieyn ska klistras in på den punkt där markören står i texten, allting fungerar förutom en liten detalj, när man klickar på smiliesen för att lägga in den så tas det sista tecknet man skrev innan bort och ersätts av smilieyn, håller på att bli tokig på det.

Kan inte hitte felet, koden hittar ni nedan.

<script>
function klistra(textEl) {
	if (textEl.createTextRange)
	textEl.caretPos = document.selection.createRange().duplicate();
	textE1 = (document.all) ? document.selection.createRange().text : document.getSelection();
}
function htmlin(textEl,tagstart, tagSlut) {
	if (textEl.createTextRange && textEl.caretPos) {
	var caretPos = textEl.caretPos;
	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? tagstart + textE1 + tagSlut : tagstart + textE1 + tagSlut;
	document.klotter.text.focus();
	klistra(textEl);
    }
}
</script>

<a href="#skriv" onclick="htmlin(klotter.text,':)', '');"><img src="../images/smile/).gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':(', '');"><img src="../images/smile/(.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,';)', '');"><img src="../images/smile/;).gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':D', '');"><img src="../images/smile/D.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':p', '');"><img src="../images/smile/p.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':@', '');"><img src="../images/smile/angry.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':b', '');"><img src="../images/smile/beer.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':m', '');"><img src="../images/smile/blah.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':6', '');"><img src="../images/smile/devil.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':o', '');"><img src="../images/smile/look.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':?', '');"><img src="../images/smile/quest.gif" border="0"></a>
<a href="#skriv" onclick="htmlin(klotter.text,':h', '');"><img src="../images/smile/yay.gif" border="0"></a>

Ett exempel jag hade liggande (wF-anpassat):

<script type="text/javascript">

var cPos,
    fObj,
    ieC = Boolean(document.selection && document.selection.createRange);

function smilie(str) {
    if (ieC) {
	if (typeof cPos != "undefined")
	    cPos.text = str + (cPos.text.charAt(cPos.text.length - 1) == ' ') ? '  ' : ' ';
	else
	    fObj.value = str + ' ';
    }

    else if (typeof window.HTMLTextAreaElement != "undefined")
	fObj.value = fObj.value.substring(0, fObj.selectionStart) + str + ' ' + fObj.value.substring(fObj.selectionEnd);

    else fObj.value += str + ' ';
}

function sC() {
    cPos = document.selection.createRange().duplicate();
}

window.onload = function() {
    fObj = document.forms["vbform"].elements["message"];

    if (ieC) {
	fObj.onclick  = function() { sC(); }
	fObj.onkeyup  = function() { sC(); }
	fObj.onselect = function() { sC(); }
    }
}

</script>

<a href="#" onclick="smilie(' :)'); return false;">smilie</a>

<form name="vbform">
	<textarea cols="20" rows="5" name="message"></textarea>
</form>

:)