<script type="text/javascript">
//Javasript BBC text editor designed by Rakuli - www.openthource.com (You can get rid of this if you want ;)

// Javascript can have abstraction too, so let's abstract just about EVERYTHING


// Let's define the class In this one I have hard-coded a lot of things which kinda sux but we'll live 
// it still makes thing easier to change later on...
// The code here will be longer than your current code but nothing will be embedded in your html

function createTextEditor(txtName) 
// this takes the name of the textarea which needs to also be the name of the variable (just for ease of user and self referencing)
// We will create the variable later using var myTextEditor = new createTextEditor('myTextEditor');
{
	this.id			= txtName; // Name our object
	this.textarea	= document.getElementById(txtName); // Store a reference to textarea
	
	this.textarea.onselect = function () {this.storeCursor(this)};
	this.textarea.onchange = function () {this.storeCursor(this)};
	this.textarea.onkeyup  = function () {this.storeCursor(this)};
	this.textarea.onclick  = function () {this.storeCursor(this)};
	this.textarea.storeCursor = function () {
												// Make it easier to track the cursor in IE
											if (typeof(this.createTextRange) != "undefined")
												this.cursorPos = document.selection.createRange().duplicate();
											};
									
	
	// Okay, now we'll create an object for each of the formatting options you want
	// Same as the main, pass the ID of the 
	// To ease everything we'll give each child a parent propery
	
	this.boldText 	= new createSimpleText('boldText', 'Bold', 'b', this); 									
	this.italicText	= new createSimpleText('italicText', 'Italicise', 'i', this);								
	this.underLine 	= new createSimpleText('underLine', 'Underline', 'u', this);								
	this.mail		= new createSimpleText('mail', 'Email', 'mail', this);										
	this.quote		= new createSimpleText('quote', 'Quote', 'quote', this, '[quote=AuthorName]Text[/quote]');	
	this.url		= new createSimpleText('url', 'URL', 'url', this, '[url=URL]Link Name[/url]');
	this.fontColor  = new createSelectBoxText('fontColor', 'Font Color', 'color', this, '[color=colorName]Text[/color]');
	this.fontSize	= new createSelectBoxText('fontSize', 'Font Size', 'size', this, '[size=fontSize]Text[/size]');
	
	//the ID of the help box
	this.helpBox 	= document.getElementById('helpBox');
	
	this.showHelp	= function (helpTxt)
						{
							this.helpBox.innerHTML = helpTxt;
						};
	
	this.updateText = function (tagOpen, tagClose)
						{							
							// See if we have a selection and whether to replace or add or just slot in
							// IE makes this easy because we used the onselect function earlier
							if (typeof(this.textarea.cursorPos) != "undefined" && this.textarea.createTextRange)
							{
								var cursorPos = this.textarea.cursorPos, stored_length = cursorPos.text.length;
						
								cursorPos.text = cursorPos.text.charAt(cursorPos.text.length - 1) == ' ' ? tagOpen + cursorPos.text + tagClose + ' ' : tagOpen + cursorPos.text + tagClose;
						
								// If we are just inserting the tag where the cursor is sitting then we will place the cursor
								// between the tags (nifty ;) )
								if (stored_length == 0)
								{
									cursorPos.moveStart("character", -tagClose.length);
									cursorPos.moveEnd("character", -tagClose.length);
									cursorPos.select();
								}
								else
									this.textarea.focus(cursorPos);
							}
							
							// A little bit messier with REAL browsers ... 
							else if (typeof(this.textarea.selectionStart) != "undefined")
							{
								// store the text before the selection
								var strt = this.textarea.value.substr(0, this.textarea.selectionStart);
								// the actual selected text
								var selection = this.textarea.value.substr(this.textarea.selectionStart, this.textarea.selectionEnd - this.textarea.selectionStart);
								// store the text after the selection
								var fin = this.textarea.value.substr(this.textarea.selectionEnd);
								// put the cursor at the endo of the selection
								var cursorPos = this.textarea.selectionStart;
								var scrollPos = this.textarea.scrollTop; // make sure the cursor isn't invisible when we place it in
						
								this.textarea.value = strt + tagOpen + selection + tagClose + fin; // Write the tags
						
								if (this.textarea.setSelectionRange)
								{
									if (selection.length == 0)
									// put the cursor in the middle again if nothing is selected
										this.textarea.setSelectionRange(cursorPos + tagOpen.length, cursorPos + tagOpen.length);
									else
									// else place the cursor after the tag
										this.textarea.setSelectionRange(cursorPos, cursorPos + tagOpen.length + selection.length + tagClose.length);
									this.textarea.focus();
								}
								
								// scroll the required position
								this.textarea.scrollTop = scrollPos;
							}
							
							
							// Dunno what happened here, something went wrong so just plug it at the end...
							else
							{
								this.textarea.value += tagOpen + tagClose;
								this.textarea.focus(this.textarea.value.length - 1);
							}
						}
		
	this.insertSingleTag = function (tag) // This will insert a sinlge tag (like smilies or a <br /> or something)
									{
										
										// Pretty much same as above, but just one tag going in (this will overwrite selected text -- like pasting sometthing would)
										// Thankfully IE makes this easier too
										if (typeof(this.textarea.cursorPos) != "undefined" && this.textarea.createTextRange)
										{
											var cursorPos = this.textarea.cursorPos;
									
											cursorPos.text = cursorPos.text.charAt(cursorPos.text.length - 1) == ' ' ? tag + ' ' : tag;
											cursorPos.select();
										}
										// But messiness comes with real browsers
										else if (typeof(this.textarea.selectionStart) != "undefined")
										{
											var strt = this.textarea.value.substr(0, this.textarea.selectionStart);
											var fin = this.textarea.value.substr(this.textarea.selectionEnd);
											var scrollPos = this.textarea.scrollTop;
									
											this.textarea.value = strt + tag + fin
									
											if (this.textarea.setSelectionRange)
											{
												this.textarea.focus();
												this.textarea.setSelectionRange(strt.length + tag.length, strt.length + tag.length);
											}
											this.textarea.scrollTop = scrollPos;
										}
										// Just put it on the end.
										else
										{
											this.textarea.value += tag;
											this.textarea.focus(this.textarea.value.length - 1);
										}
									}
}

// Basically pass the id of the input, the name of the style, the opening tag, the closing tag, the parent and optionally an additional bit of text
// Use this function for creating simple things like [u][/u] [quote][/quote] where nothing needs to be dynamically added to the BBC tags..
function createSimpleText(inpName, txtName, tag, theParent, addHelpTxt)
{
	this.inpName			= document.getElementById(inpName); // store an object reference
	this.inpName._parent 	= theParent;
	
	this.inpName.tagOpen	= '[' + tag + ']'; // wrap up the tag in the square brackets
	this.inpName.tagClose	= '[/' + tag + ']';
	
	this.inpName.helpString = '<strong>' + txtName + ' Text : </strong> ' + this.inpName.tagOpen + ' text ' + this.inpName.tagClose + (addHelpTxt ? ' or ' + addHelpTxt : '');
	
	this.inpName.onmouseover 	= function () { this._parent.showHelp(this.helpString); };
	this.inpName.onmouseout  	= function () { this._parent.showHelp('');};
	
	this.inpName.onclick		= function () { this._parent.updateText(this.tagOpen, this.tagClose);};
}


function createSelectBoxText (inpName, txtName, tag, theParent, addHelpTxt)
{
	this.inpName			= document.getElementById(inpName); // store an object reference
	this.inpName._parent 	= theParent;
	
	
	this.inpName.tagOpen	= '[' + tag + '='; // add the parameter from the value of the selectBox
	this.inpName.tagClose	= '[/' + tag + ']';
	
	this.inpName.helpString = '<strong>' + txtName + ': </strong> ' + addHelpTxt;
	
	this.inpName.onmouseover 	= function () { this._parent.showHelp(this.helpString); };
	this.inpName.onmouseout  	= function () { this._parent.showHelp('');};
	
	this.inpName.onchange		= function () { this._parent.updateText(this.tagOpen + this.options[this.selectedIndex].value + ']', this.tagClose);};
}
</script>