How could I modify this short js code to do this...

This code is from a pop-up page that lets the user insert smileys to the mother page (in a textbox).

function emoticon(text) {
	text = '' + text + '';
	if (opener.document.forms['<?=$fo?>'].<?=$fi?>.createTextRange && opener.document.forms['<?=$fo?>'].<?=$fi?>.caretPos) {
		var caretPos = opener.document.forms['<?=$fo?>'].<?=$fi?>.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
		opener.document.forms['<?=$fo?>'].<?=$fi?>.focus();
	} else {
	opener.document.forms['<?=$fo?>'].<?=$fi?>.value  += text;
	opener.document.forms['<?=$fo?>'].<?=$fi?>.focus();
	}
}

Code (markup):

<a href="javascript:emoticon(':( ')"><img src="smileys/smiley.gif">

Code (markup):

$fo - form name
$fi - field name
(I use pop-up code for multiple pages).

Here is the problem. When I click on a smiley, it is always inserted to the end of the text, not the area that's currently selected. For example it works perfectly on this forum, I click somewhere, a smiley is inserted to the same place. But my code always puts the smiley to the end. Unfortunately my knowledge of javascript is limited and I am not able to do it myself.

 

I think I forgot to most important stuff. Here is the whole included js file:

<!--
// bbCode control by
// subBlue design
// www.subBlue.com

// Startup variables
var imageTag = false;
var theSelection = false;

// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;

var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);

// Helpline messages
b_help = "Bold text: [b]text[/b]  (alt+b)";
i_help = "Italic text: [i]text[/i]  (alt+i)";
u_help = "Underline text: [u]text[/u]  (alt+u)";
q_help = "Quote text: [quote]text[/quote]  (alt+q)";
c_help = "Code display: [code]code

Code (markup):

(alt+c)";
l_help = "List:

• text

(alt+l)";
o_help = "Ordered list:

• text

(alt+o)";
p_help = "Insert image: (alt+p)";
w_help = "Insert URL: http://url or URL text (alt+w)";
a_help = "Close all open bbCode tags";
s_help = "Font color: text Tip: you can also use color=#FF0000";
f_help = "Font size: [size=x-small]small text[/size]";

// Define the bbCode tags
bbcode = new Array();
bbtags = new Array('','','','','','','

','[youtube]','[/youtube]','

• ','

','

• ','

','','','','[youtube]','[youtube]');
imageTag = false;

// Shows the help messages in the helpline window
function helpline(help) {
document.<?=$formname?>.helpbox.value = eval(help + "_help");
}


// Replacement for arrayname.length property
function getarraysize(thearray) {
for (i = 0; i < thearray.length; i++) {
if ((thearray == "undefined") || (thearray == "") || (thearray == null))
return i;
}
return thearray.length;
}

// Replacement for arrayname.push(value) not implemented in IE until version 5.5
// Appends element to the array
function arraypush(thearray,value) {
thearray[ getarraysize(thearray) ] = value;
}

// Replacement for arrayname.pop() not implemented in IE until version 5.5
// Removes and returns the last element of an array
function arraypop(thearray) {
thearraysize = getarraysize(thearray);
retval = thearray[thearraysize - 1];
delete thearray[thearraysize - 1];
return retval;
}


function checkForm() {

formErrors = false;

if (document.<?=$formname?>.<?=$fieldname?>.value.length < 2) {
formErrors = "You must enter a message when posting.";
}

if (formErrors) {
alert(formErrors);
return false;
} else {
bbstyle(-1);
//formObj.preview.disabled = true;
//formObj.submit.disabled = true;
return true;
}
}

function emoticon(text) {
var txtarea = document.<?=$formname?>.<?=$fieldname?>;
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function bbfontstyle(bbopen, bbclose) {
var txtarea = document.<?=$formname?>.<?=$fieldname?>;

if ((clientVer >= 4) && is_ie && is_win) {
theSelection = document.selection.createRange().text;
if (!theSelection) {
txtarea.value += bbopen + bbclose;
txtarea.focus();
return;
}
document.selection.createRange().text = bbopen + theSelection + bbclose;
txtarea.focus();
return;
}
else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
{
mozWrap(txtarea, bbopen, bbclose);
return;
}
else
{
txtarea.value += bbopen + bbclose;
txtarea.focus();
}
storeCaret(txtarea);
}


function bbstyle(bbnumber) {
var txtarea = document.<?=$formname?>.<?=$fieldname?>;

txtarea.focus();
donotinsert = false;
theSelection = false;
bblast = 0;

if (bbnumber == -1) { // Close all open tags & default button names
while (bbcode[0]) {
butnumber = arraypop(bbcode) - 1;
txtarea.value += bbtags[butnumber + 1];
buttext = eval('document.<?=$formname?>.addbbcode' + butnumber + '.value');
eval('document.<?=$formname?>.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
}
imageTag = false; // All tags are closed including image tags
txtarea.focus();
return;
}

if ((clientVer >= 4) && is_ie && is_win)
{
theSelection = document.selection.createRange().text; // Get text selection
if (theSelection) {
// Add tags around selection
document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
txtarea.focus();
theSelection = '';
return;
}
}
else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
{
mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1]);
return;
}

// Find last occurance of an open tag the same as the one just clicked
for (i = 0; i < bbcode.length; i++) {
if (bbcode == bbnumber+1) {
bblast = i;
donotinsert = true;
}
}

if (donotinsert) { // Close all open tags up to the one just clicked & default button names
while (bbcode[bblast]) {
butnumber = arraypop(bbcode) - 1;
txtarea.value += bbtags[butnumber + 1];
buttext = eval('document.<?=$formname?>.addbbcode' + butnumber + '.value');
eval('document.<?=$formname?>.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
imageTag = false;
}
txtarea.focus();
return;
} else { // Open tags

if (imageTag && (bbnumber != 14)) { // Close image tag before adding another
txtarea.value += bbtags[15];
lastValue = arraypop(bbcode) - 1; // Remove the close image tag from the list
document.<?=$formname?>.addbbcode14.value = "Img"; // Return button back to normal state
imageTag = false;
}

// Open tag
txtarea.value += bbtags[bbnumber];
if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; // Check to stop additional tags after an unclosed image tag
arraypush(bbcode,bbnumber+1);
eval('document.<?=$formname?>.addbbcode'+bbnumber+'.value += "*"');
txtarea.focus();
return;
}
storeCaret(txtarea);
}

// From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
{
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd == 1 || selEnd == 2)
selEnd = selLength;

var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + open + s2 + close + s3;
return;
}

// Insert at Claret position. Code from
// http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
function storeCaret(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}



function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}

//-->
[/code]

 

No ideas anyone?