//-----------------------------------------------------------------------------
// Initialise global variables
var browser = navigator.userAgent.toLowerCase();
var isEditable = false;
var isGecko;
var isIE;
var isKonqueror;
var isSafari;
var imagegalleryloaded = 0;

// Set up the image array for keyword search filtering.
var imagesearchtimer = null;

//-----------------------------------------------------------------------------
// Check for browser compatibility.
function setupEditor()
	{ 

		isIE = ((browser.indexOf("msie") != -1) && (browser.indexOf("opera") == -1) && (browser.indexOf("webtv") == -1)); 
		isGecko = (browser.indexOf("gecko") != -1);
		isSafari = (browser.indexOf("safari") != -1);
		isKonqueror = (browser.indexOf("konqueror") != -1);
 
		//-----------------------------------------------------------------------------
		// enable designMode if the browser is IE or Gecko based.
		if (document.getElementById && document.designMode && (isIE || isGecko))
			{
				isEditable = true;
			} // End if.

	} // End function.

//-----------------------------------------------------------------------------
// Function to reload the image gallery after a new image has been uploaded.
function reloadimagegallery (editor, wwwroot)
	{
		//------------------------------------------------------------------------------
		if (imagegalleryloaded == 0)
			{
				imagegalleryloaded = 1;
			}
		//------------------------------------------------------------------------------
		else
			{
				insertImage (editor, true, wwwroot);
			} // End if.

	} // End function.

//-----------------------------------------------------------------------------
// Function to remove images from the image gallery that do not match keyword.
function imagesearchfunction ()
	{
		var i;
		var keyword = document.getElementById('imagegallerytextinput').value;
		var keywordregexp = eval('/' + keyword + '/i');
		var imagegalleryarray = document.getElementById('imagegallerythumbnails').childNodes;

		//------------------------------------------------------------------------------
		for (i = 0; i < imagegalleryarray.length; i++)
			{
				//------------------------------------------------------------------------------
				if (imagegalleryarray[i].nodeName.search(/div/i) != -1)
					{
						//------------------------------------------------------------------------------
						if ((keyword.length > 0) && (imagegalleryarray[i].id.search(keywordregexp) == -1))
							{
								imagegalleryarray[i].style.display='none';
							}
						//------------------------------------------------------------------------------
						else
							{
								imagegalleryarray[i].style.display='block';
							} // End if.

					} // End if.

			} // End for.

	} // End function.

//-----------------------------------------------------------------------------
// Display popup to insert (or upload) an image.
function insertImage (editor, reloadifvisible, wwwroot)
	{ 
		//------------------------------------------------------------------------------
		if ((document.getElementById('imgGallery').style.display == 'none') || (reloadifvisible == true))
			{

				imagegalleryloaded = 0; // Clear loaded flag.

				document.getElementById('imgGallery').style.display='block';
				document.getElementById('imgGallery').style.background='#ffffff';
				document.getElementById('imgGallery').style.border='solid 1px #9ac';
				document.getElementById('imgGallery').style.float='left';
				document.getElementById('imgGallery').style.position='absolute';
				document.getElementById('imgGallery').style.height='66%';
				document.getElementById('imgGallery').style.width='90%'; 
				document.getElementById('imgGallery').style.left='32px'; 
				document.getElementById('imgGallery').style.top = '32px';

				document.getElementById('btnInsertImage').style.background='#ffffff';
				document.getElementById('btnInsertImage').style.border='solid 1px red';

				//------------------------------------------------------------------------------
				// Load the external file 'imagegallery.php'.
				// Use XMLHttpRequest for AJAX on Firefox (IceCat), Opera, Chrome, Safari, IE7+.
				if (window.XMLHttpRequest)
					{
						xmlhttp = new XMLHttpRequest();
					}
				//------------------------------------------------------------------------------
				// Use IE5/6 ActiveXObject for AJAX.
				else
					{
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					} // End if.

				//------------------------------------------------------------------------------
				// Set up the state watching function for XMLHttpRequest.
				xmlhttp.onreadystatechange = function ()
					{
						//------------------------------------------------------------------------------
						// Respond to different Ready states:
						// 	0 == Un initialised; 1 == Request set up; 2 == Request sent;
						// 	3 == Request being processed; 4 == Request complete.
						if (xmlhttp.readyState < 4)
							{
								var loadingtext = '<p style="display:block;background:#ccffcc;text-align:center;"><img src="' + wwwroot + 'images/loading-spinner.gif" border="0"> Retrieving images...</p>';
								document.getElementById('imgGallery').innerHTML = loadingtext;
							}
						//------------------------------------------------------------------------------
						else //if ((xmlhttp.readyState == 3) || (xmlhttp.readyState == 4))
							{
								// Insert the gallery webpage as it is being loaded.
								document.getElementById('imgGallery').innerHTML = xmlhttp.responseText; 
							} // End if.

					} // End function.

				var url = wwwroot + "/imagegallery.php?editor=" + editor + "&height=" + document.getElementById('imgGallery').clientHeight + '&wwwroot=' + wwwroot;
				xmlhttp.open ("GET", url, true);
				xmlhttp.send (null);
						
			}
		//------------------------------------------------------------------------------
		else
			{
				document.getElementById('imgGallery').style.display='none';

				document.getElementById('btnInsertImage').style.background='inherit';
				document.getElementById('btnInsertImage').style.border='solid 1px #ffffcc';
			} // End if.

	} // End function.

//-----------------------------------------------------------------------------
// Display popup (javascript default) to add link.
function insertLink(editor)
	{

		var linkLocation = prompt("Enter a URL:", "http://");

		if ((linkLocation != null) && (linkLocation != ""))
			{
				formatText (editor, 'createlink', linkLocation);
			} // End if.

	} // End function.

//-----------------------------------------------------------------------------
// # # # Javascript function dislpayEditor will create the textarea.  
function displayEditor(editorname, html, width, height, wwwroot) // # # #
	{
		//------------------------------------------------------------------------------
		// Enable rich edit mode.
		if (isEditable)
			{
				document.write('<div style="position:relative;width:' + width + ';">');
				document.write('<div id="editToolbar" class="editToolbar" style="width:100%;">');
				document.write('<span>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'bold\', \'\')"><img id="btnBold" src="' + wwwroot + 'images/editor/btnBold.png"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'italic\', \'\')"><img src="' + wwwroot + 'images/editor/btnItalic.png" id="btnItalic"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'underline\', \'\')"><img src="' + wwwroot + 'images/editor/btnUnderline.png" id="btnUnderline"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'strikethrough\', \'\')"><img src="' + wwwroot + 'images/editor/btnStrikethrough.png" id="btnStrikethrough"></a>');
				document.write('</span>');
				document.write('<span>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'justifyleft\', \'\')"><img src="' + wwwroot + 'images/editor/btnLeft.png" id="btnLeft"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'justifycenter\', \'\')"><img id="btnCenter" src="' + wwwroot + 'images/editor/btnCenter.png"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'justifyright\', \'\')"><img id="btnRight" src="' + wwwroot + 'images/editor/btnRight.png"></a>');
				document.write('</span>');
				document.write('<span>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'undo\', \'\')"><img id="btnUndo" src="' + wwwroot + 'images/editor/btnUndo.png"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'redo\', \'\')"><img id="btnRedo" src="' + wwwroot + 'images/editor/btnRedo.png"></a>');
				document.write('</span>');
				document.write('<span>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'insertunorderedlist\', \'\')"><img src="' + wwwroot + 'images/editor/btnUnorderedList.png" id="btnUnorderedList"></a>');
				document.write('<a href="javascript:formatText(\'' + editorname + 'Editor\', \'insertorderedlist\', \'\')"><img id="btnOrderedList" src="' + wwwroot + 'images/editor/btnOrderedList.png"></a>');
				document.write('</span>');
				document.write('<span>');
				document.write('<a href="javascript:insertImage(\'' + editorname + 'Editor\', false, \'' + wwwroot + '\')"><img id="btnInsertImage" src="' + wwwroot + 'images/editor/btnInsertImage.png"></a>');
				document.write('<a href="javascript:insertLink(\'' + editorname + 'Editor\')"><img id="btnCreateLink" src="' + wwwroot + 'images/editor/btnCreateLink.png"></a>');
				document.write('</div>');
				document.write('<iframe id="' + editorname + 'Editor" name="' + editorname + 'Editor" width="100%" height="' + height + '" style="background:#ffffff;"></iframe>'); 
				document.write('<div id="imgGallery" style="display:none;"></div>');
				document.write('</div>');

				document.getElementById(editorname + 'Editor').value = html;

				// create a hidden field that will hold everything that is typed in the textarea
				document.writeln('<input type="hidden" id="' + editorname + '" name="' + editorname + '" value="">');
				// call function designer
				designer(editorname + 'Editor', html);
			}
		//------------------------------------------------------------------------------
		// If not rich editing capable then fall back to a standard textarea editor.
		else
			{
				document.writeln('<textarea name="' + editor + '" id="' + editor + '" cols="39" rows="10">' + html + '</textarea>');
			} // End if.
	} // End function. # # #

//-----------------------------------------------------------------------------
// Change toolbar state button.
function updateToolbar(editor)
	{
		//-----------------------------------------------------------------------------
		// Update the <strong> toolbar button.
		if (document.getElementById(editor).contentWindow.document.queryCommandState('bold'))
			{
				document.getElementById('btnBold').style.background='#ffffff';
				document.getElementById('btnBold').style.border='solid 1px red';
			}
		else
			{
				document.getElementById('btnBold').style.background='inherit';
				document.getElementById('btnBold').style.border='solid 1px #ffffcc';
			} // End if.

		//-----------------------------------------------------------------------------
		// Update the <em> toolbar button.
		if (document.getElementById(editor).contentWindow.document.queryCommandState('italic'))
			{
				document.getElementById('btnItalic').style.background='#ffffff';
				document.getElementById('btnItalic').style.border='solid 1px red';
			}
		else
			{
				document.getElementById('btnItalic').style.background='inherit';
				document.getElementById('btnItalic').style.border='solid 1px #ffffcc';
			} // End if.

		//-----------------------------------------------------------------------------
		// Update the <underline> toolbar button.
		if (document.getElementById(editor).contentWindow.document.queryCommandState('underline'))
			{
				document.getElementById('btnUnderline').style.background='#ffffff';
				document.getElementById('btnUnderline').style.border='solid 1px red';
			}
		else
			{
				document.getElementById('btnUnderline').style.background='inherit';
				document.getElementById('btnUnderline').style.border='solid 1px #ffffcc';
			} // End if.

		//-----------------------------------------------------------------------------
		// Update the <left> toolbar button.
		if (document.getElementById(editor).contentWindow.document.queryCommandState('justifyleft'))
			{
				document.getElementById('btnLeft').style.background='#ffffff';
				document.getElementById('btnLeft').style.border='solid 1px red';
			}
		else
			{
				document.getElementById('btnLeft').style.background='inherit';
				document.getElementById('btnLeft').style.border='solid 1px #ffffcc';
			} // End if.

		//-----------------------------------------------------------------------------
		// Update the <center> toolbar button.
		if (document.getElementById(editor).contentWindow.document.queryCommandState('justifycenter'))
			{
				document.getElementById('btnCenter').style.background='#ffffff';
				document.getElementById('btnCenter').style.border='solid 1px red';
			}
		else
			{
				document.getElementById('btnCenter').style.background='inherit';
				document.getElementById('btnCenter').style.border='solid 1px #ffffcc';
			} // End if.

		//-----------------------------------------------------------------------------
		// Update the <right> toolbar button.
		if (document.getElementById(editor).contentWindow.document.queryCommandState('justifyright'))
			{
				document.getElementById('btnRight').style.background='#ffffff';
				document.getElementById('btnRight').style.border='solid 1px red';
			}
		else
			{
				document.getElementById('btnRight').style.background='inherit';
				document.getElementById('btnRight').style.border='solid 1px #ffffcc';
			} // End if.
	} // End function.

//-----------------------------------------------------------------------------
// this is designer function that enables designMode
// and writes default text to the text area
function designer(editor, html)
	{
		var mainContent= "<html id=" + editor + "><head></head><body>" + html + "</body></html>" ;
		// assign the frame(textarea) to the edit variable using that frames id
		var edit = document.getElementById(editor).contentWindow.document;
		// write the content to the textarea
		edit.write(mainContent);
		edit.close();
		// enable the designMode	
		edit.designMode =  "On" ;
		edit.execCommand("styleWithCSS", false, false); // Use HTML tags rather than CSS.

		//-----------------------------------------------------------------------------
		// Add function to update formatting buttons to reflect style under cursor.
		if (document.addEventListener)
			{
				edit.addEventListener('keyup', updateToolbar, true);
				edit.addEventListener('mouseup', updateToolbar, true); 
				edit.addEventListener('onupdate', updateToolbar, true);
			}
		//-----------------------------------------------------------------------------
		else if (document.attachEvent)
			{
				document.getElementById(editor).attachEvent('keyup', updateToolbar);
				document.getElementById(editor).attachEvent('mousemove', updateToolbar);
			} // End if.

	} // End function.

//-----------------------------------------------------------------------------
//To execute command we will use javascript function formatText. 
function formatText(editor, command, option)
	{
		// first we assign the content of the textarea to the variable mainField
		var mainField;
		mainField = document.getElementById(editor).contentWindow;
		// then we will use execCommand to execute the option on the textarea making sure the textarea stays in focus
		try
			{
				mainField.focus();
				mainField.document.execCommand(command, false, option);

				// Check if the cursor is within any formatted area.
				if (mainField.document.queryCommandState(command))
					{
						updateToolbar(); // Update the toolbar.
					} // End if.

				mainField.focus();
		    }
	 	catch (e)
			{ } // End try/catch.
	} // End function.

//-----------------------------------------------------------------------------
function updateText(editor)
	{
		if (!isEditable) return;
		// assign the value of the textarea to the hidden field. 
		var hiddenField = document.getElementById(editor);
		hiddenField.value = document.getElementById(editor + 'Editor').contentWindow.document.body.innerHTML;
	} // End function.