//
// openWYSIWYG v1.01 Copyright (c) 2006 openWebWare.com
// This copyright notice MUST stay intact for use.
//
// An open source WYSIWYG editor for use in web based applications.
// For full source code and docs, visit http://www.openwebware.com/
//
// This library is free software; you can redistribute it and/or modify 
// it under the terms of the GNU Lesser General Public License as published 
// by the Free Software Foundation; either version 2.1 of the License, or 
// (at your option) any later version.
//
// This library is distributed in the hope that it will be useful, but 
// WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY 
// or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public 
// License for more details.
//
// You should have received a copy of the GNU Lesser General Public License along 
// with this library; if not, write to the Free Software Foundation, Inc., 59 
// Temple Place, Suite 330, Boston, MA 02111-1307 USA 


/* ---------------------------------------------------------------------- *\
  Global Variables: Set global variables such as images directory, 
	                  WYSIWYG Height, Width, and CSS Directory.
\* ---------------------------------------------------------------------- */

//Gather all the forms in the content
var formArray = new Array();

// Images Directory
imagesDir = "/includes/scripts/icons/";
// CSS Directory
cssDir = "/includes/scripts/styles/";
// Popups Directory
popupsDir = "/includes/scripts/popups/";
// WYSIWYG Width and Height
wysiwygWidth = 500;
wysiwygHeight = 500;
// Include Style Sheet
document.write('<link rel="stylesheet" type="text/css" href="' +cssDir+ 'styles.css">\n');
/* ---------------------------------------------------------------------- *\
  Toolbar Settings: Set the features and buttons available in the WYSIWYG
	                  Toolbar.
\* ---------------------------------------------------------------------- */

// List of available font types
  var Fonts = new Array();
  Fonts[0] = "Arial";
  Fonts[1] = "Sans Serif";
  Fonts[2] = "Tahoma";
	Fonts[3] = "Verdana";
	Fonts[4] = "Courier New";
	Fonts[5] = "Georgia";
	Fonts[6] = "Times New Roman";
	Fonts[7] = "Impact";
  Fonts[8] = "Comic Sans MS";

// List of available block formats (not in use)
var BlockFormats = new Array();
  BlockFormats[0]  = "Address";
  BlockFormats[1]  = "Bulleted List";
  BlockFormats[2]  = "Definition";
	BlockFormats[3]  = "Definition Term";
	BlockFormats[4]  = "Directory List";
	BlockFormats[5]  = "Formatted";
	BlockFormats[6]  = "Heading 1";
	BlockFormats[7]  = "Heading 2";
	BlockFormats[8]  = "Heading 3";
	BlockFormats[9]  = "Heading 4";
	BlockFormats[10] = "Heading 5";
	BlockFormats[11] = "Heading 6";
	BlockFormats[12] = "Menu List";
	BlockFormats[13] = "Normal";
	BlockFormats[14] = "Numbered List";
// List of available font sizes
var FontSizes = new Array();
  FontSizes[0]  = "1";
  FontSizes[1]  = "2";
  FontSizes[2]  = "3";
	FontSizes[3]  = "4";
	FontSizes[4]  = "5";
	FontSizes[5]  = "6";
	FontSizes[6]  = "7";
	
// List of available actions and their respective ID and images
var ToolbarList = {
//Name              buttonID                 buttonTitle           buttonImage                            buttonImageRollover
"bold":           ['Bold',                 'Bold',               imagesDir + 'bold.gif',               imagesDir + 'bold_on.gif'],
"italic":         ['Italic',               'Italic',             imagesDir + 'italics.gif',            imagesDir + 'italics_on.gif'],
"underline":      ['Underline',            'Underline',          imagesDir + 'underline.gif',          imagesDir + 'underline_on.gif'],
"strikethrough":  ['Strikethrough',        'Strikethrough',      imagesDir + 'strikethrough.gif',      imagesDir + 'strikethrough_on.gif'],
"seperator":      ['',                     '',                   imagesDir + 'seperator.gif',          imagesDir + 'seperator.gif'],
"subscript":      ['Subscript',            'Subscript',          imagesDir + 'subscript.gif',          imagesDir + 'subscript_on.gif'],
	"superscript":    ['Superscript',          'Superscript',        imagesDir + 'superscript.gif',        imagesDir + 'superscript_on.gif'],
	"justifyleft":    ['Justifyleft',          'Justifyleft',        imagesDir + 'justify_left.gif',       imagesDir + 'justify_left_on.gif'],
	"justifycenter":  ['Justifycenter',        'Justifycenter',      imagesDir + 'justify_center.gif',     imagesDir + 'justify_center_on.gif'],
	"justifyright":   ['Justifyright',         'Justifyright',       imagesDir + 'justify_right.gif',      imagesDir + 'justify_right_on.gif'],
	"unorderedlist":  ['InsertUnorderedList',  'InsertUnorderedList',imagesDir + 'list_unordered.gif',     imagesDir + 'list_unordered_on.gif'],
	"orderedlist":    ['InsertOrderedList',    'InsertOrderedList',  imagesDir + 'list_ordered.gif',       imagesDir + 'list_ordered_on.gif'],
	"outdent":        ['Outdent',              'Outdent',            imagesDir + 'indent_left.gif',        imagesDir + 'indent_left_on.gif'],
	"indent":         ['Indent',               'Indent',             imagesDir + 'indent_right.gif',       imagesDir + 'indent_right_on.gif'],
	"cut":            ['Cut',                  'Cut',                imagesDir + 'cut.gif',                imagesDir + 'cut_on.gif'],
	"copy":           ['Copy',                 'Copy',               imagesDir + 'copy.gif',               imagesDir + 'copy_on.gif'],
  "paste":          ['Paste',                'Paste',              imagesDir + 'paste.gif',              imagesDir + 'paste_on.gif'],
	"forecolor":      ['ForeColor',            'ForeColor',          imagesDir + 'forecolor.gif',          imagesDir + 'forecolor_on.gif'],
	"backcolor":      ['BackColor',            'BackColor',          imagesDir + 'backcolor.gif',          imagesDir + 'backcolor_on.gif'],
	"undo":           ['Undo',                 'Undo',               imagesDir + 'undo.gif',               imagesDir + 'undo_on.gif'],
	"redo":           ['Redo',                 'Redo',               imagesDir + 'redo.gif',               imagesDir + 'redo_on.gif'],
	"inserttable":    ['InsertTable',          'InsertTable',        imagesDir + 'insert_table.gif',       imagesDir + 'insert_table_on.gif'],
	"insertimage":    ['InsertImage',          'InsertImage',        imagesDir + 'insert_picture.gif',     imagesDir + 'insert_picture_on.gif'],
	"createlink":     ['CreateLink',           'CreateLink',         imagesDir + 'insert_hyperlink.gif',   imagesDir + 'insert_hyperlink_on.gif'],
	"viewSource":     ['ViewSource',           'ViewSource',         imagesDir + 'view_source.gif',        imagesDir + 'view_source_on.gif'],
	"viewText":       ['ViewText',             'ViewText',           imagesDir + 'view_text.gif',          imagesDir + 'view_text_on.gif'],
	"help":           ['Help',                 'Help',               imagesDir + 'help.gif',               imagesDir + 'help_on.gif'],
	"toggleBg" :     ['toggleBg', 	   'View Light Text Mode', 	 imagesDir + 'toggle.png', imagesDir + 'toggle.png'],
	"Save":				['Save',				'Save',					imagesDir + 'action_save.gif',		imagesDir + 'action_save.gif'],
	"Media":	['Media',				'Media',				imagesDir + 'media_add.png',	imagesDir + 'media_add.png'],
	"AddForms":	['AddForms',				'AddForms',				imagesDir + 'add_form.png',	imagesDir + 'add_form.png'],		
	"Cancel":			['Cancel',				'Cancel',					imagesDir + 'cross.png',		imagesDir + 'cross.png'],	
	"selectfont":     ['SelectFont',           'SelectFont',         imagesDir + 'select_font.gif',        imagesDir + 'select_font_on.gif'],
	"selectsize":     ['SelectSize',           'SelectSize',         imagesDir + 'select_size.gif',        imagesDir + 'select_size_on.gif']
};

/**
* Emulates insertAdjacentHTML(), insertAdjacentText() and
* insertAdjacentElement() three functions so they work with Netscape 6/Mozilla/Safari
* by Thor Larholm me@jscript.dk
*
* Modified: 6/11/2008 By CJBoCo for Safari Support
*
* http://www.chipmunk-scripts.com/board/index.php?forumID=25&ID=11143
*
*/

 
if (typeof HTMLElement !== "undefined") {

if (typeof HTMLElement.insertAdjacentHTML === "undefined") {
HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
switch (where) {
case 'beforeBegin':
this.parentNode.insertBefore(parsedNode, this);
break;
case 'afterBegin':
this.insertBefore(parsedNode, this.firstChild);
break;
case 'beforeEnd':
this.appendChild(parsedNode);
break;
case 'afterEnd':
if (this.nextSibling) {
this.parentNode.insertBefore(parsedNode, this.nextSibling);
} else {
this.parentNode.appendChild(parsedNode);
}
break;
}
};
}

if (typeof HTMLElement.insertAdjacentHTML === "undefined") {
HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where, parsedHTML);
};
}

if (typeof HTMLElement.insertAdjacentText === "undefined") {
HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
var parsedText = document.createTextNode(txtStr);
this.insertAdjacentElement(where, parsedText);
};
}
}

// Create viewTextMode global variable and set to 0
// enabling all toolbar commands while in HTML mode
viewTextMode = 0;
/* ---------------------------------------------------------------------- *\
  Function    : generate_wysiwyg()
  Description : replace textarea with wysiwyg editor
  Usage       : generate_wysiwyg("textarea_id");
  Arguments   : textarea_id - ID of textarea to replace
\* ---------------------------------------------------------------------- */
var EditingID = '';
var originalBox = '';
function generate_wysiwyg(textareaID,secondPart,size) {
  	// Hide the textarea 
	originalBox = document.getElementById(textareaID+secondPart).innerHTML;
	document.getElementById(textareaID+secondPart).style.display = 'none'; 	
  // Pass the textareaID to the "n" variable.
  var n = textareaID + secondPart;
  EditingID = textareaID;	
	// Toolbars width is 2 pixels wider than the wysiwygs
	toolbarWidth = parseFloat(wysiwygWidth) + 2;	
	if(size == 'small' || size=='medium') wysiwygHeight = 100;
  // Generate WYSIWYG toolbar one
	var toolbar;
	var toolbar2;	
	var small_toolbar2;
	//code below for toolbar is just setting up the first seperator image on the toolbar	
	if(size == "small"){
			// Create IDs for inserting Font Type and Size drop downs	
		toolbar = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';	
		toolbar += '<td style="width: 90px;"><span id="FontSizes' + n + '"></span></td>';
		toolbar += CreateToolBarRow(SmallbuttonName,n);		
		small_toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';				
		small_toolbar2 += '<td style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
		//small_toolbar2 += '<td style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';
		small_toolbar2 += CreateToolBarRow(SmallbuttonName2,n);				
	}else if(size == "medium"){
		toolbar += CreateToolBarRow(MediumbuttonName,n);
	}else if(size=="nosave"){
		// Create IDs for inserting Font Type and Size drop downs
		toolbar = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';						
		toolbar += CreateToolBarRow(buttonName,n);	
	  // Generate WYSIWYG toolbar two	
	  	toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';				
		toolbar2 += '<td style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
		toolbar2 += '<td style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';
		//toolbar2 += CreateToolBarRow(buttonName2,n);		
		toolbar2 += CreateToolBarRow(noSave,n);
	}else if(size=="mlm"){
		// Create IDs for inserting Font Type and Size drop downs
		toolbar = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';						
		toolbar += CreateToolBarRow(mlmrow1,n);	
	  // Generate WYSIWYG toolbar two	
	  	toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';				
		toolbar2 += '<td style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
		toolbar2 += '<td style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';
		toolbar2 += CreateToolBarRow(mlmrow2,n);
		toolbar2 += CreateToolBarRow(mlmrow3,n);
	}else{
		// Create IDs for inserting Font Type and Size drop downs
		toolbar = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';						
		toolbar += CreateToolBarRow(buttonName,n);	
	  // Generate WYSIWYG toolbar two	
	  	toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:100%"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';				
		toolbar2 += '<td style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
		toolbar2 += '<td style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';
		toolbar2 += CreateToolBarRow(buttonName2,n);	
	 }
	 
	// Create iframe which will be used for rich text editing
	var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:100%; height:' + wysiwygHeight + 'px;border: 1px inset #CCCCCC; z-index:100 "><tr><td valign="top">\n'
	+ '<iframe frameborder="1" id="wysiwyg' + n + '"></iframe>\n'
  + '</td></tr></table>\n';
  // Insert after the textArea both toolbar one and two
  
  
  if(size == "small"){
	  document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar + small_toolbar2 + iframe);
	  outputFontSelect(n);
	  outputFontSizes(n); 
	  hideFonts(n);
	  hideFontSizes(n);
	  
  }else{
	document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar + toolbar2 + iframe);  
	outputFontSelect(n);
		outputFontSizes(n); 	
		hideFonts(n);
		hideFontSizes(n);
  }
		// Insert the Font Type and Size drop downs into the toolbar
		//outputFontSelect(n);
		//outputFontSizes(n); 	
		// Hide the dynamic drop down lists for the Font Types and Sizes
		//hideFonts(n);
		//hideFontSizes(n);
		// Hide the "Text Mode" button
		//document.getElementById("textMode" + n).style.display = 'none'; 				
	// Give the iframe the global wysiwyg height and width
  document.getElementById("wysiwyg" + n).style.height = wysiwygHeight + "px";
  document.getElementById("wysiwyg" + n).style.width = '100%';	
  
  // Pass the textarea's existing text over to the content variable
  var content = document.getElementById(n).value;	
  var doc = document.getElementById("wysiwyg" + n).contentWindow.document;	
  
  // Write the textarea's content into the iframe
  doc.open();
  doc.write(content);
  doc.close();
	
  // Make the iframe editable in both Mozilla and IE
  //doc.body.contentEditable = true;
  doc.contentEditable=true;
  doc.designMode = "on";
  //formatText("enterArea", n);  //this is right, but w/IE it won't work, you get an error & it won't change color
 
  // Update the textarea with content in WYSIWYG when user submits form
  var browserName = navigator.appName;
  if (browserName == "Microsoft Internet Explorer") {
    for (var idx=0; idx < document.forms.length; idx++) {
      document.forms[idx].attachEvent('onsubmit', function() { updateTextArea(n); });
    }
  }
  else {
  	for (var idx=0; idx < document.forms.length; idx++) {
    	document.forms[idx].addEventListener('submit',function OnSubmit() { updateTextArea(n); }, true);
    }
  } 	
};







function CreateToolBarRow(buttonName,n){
	//alert("I am in the tool bar row function: " );
toolbar = '';		
	// Output all command buttons that belong to toolbar one
	for (var i = 0; i <= buttonName.length;) { 
		if (buttonName[i]) {
			var buttonObj            = ToolbarList[buttonName[i]];
			var buttonID             = buttonObj[0];
			var buttonTitle          = buttonObj[1];
			var buttonImage          = buttonObj[2];
			var buttonImageRollover  = buttonObj[3];			
			if (buttonName[i] == "seperator") {
				toolbar += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2" unselectable="on"></td>';
			}else if (buttonName[i] == "viewSource"){
				toolbar += '<td style="width: 22px;">';
				toolbar += '<span id="HTMLMode' + n + '"><img src="'  +buttonImage+  '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on"  width="20" height="20"></span>';
				toolbar += '<span id="textMode' + n + '"><img src="' +imagesDir+ 'view_text.gif" border=0 unselectable="on" title="viewText"          id="ViewText"       class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +imagesDir+ 'view_text_on.gif\';"    onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' +imagesDir+ 'view_text.gif\';" unselectable="on"  width="20" height="20"></span>';
				toolbar += '</td>';				
			}
			//else if (buttonName[i] == "selectsize"){
			//toolbar += '<td style="width: 50px;"><img src="' +buttonImage+ '"  style="width:45px" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="outputFontSizes(\'' + n + '\');"  onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="50" height="20"></td>';								
			//}
			else{
				toolbar += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
			}
		}
		i++;
	}	
	toolbar += '<td>&nbsp;</td></tr></table>';  		
	return toolbar;
}
/* ---------------------------------------------------------------------- *\
  Function    : formatText()
  Description : replace textarea with wysiwyg editor
  Usage       : formatText(id, n, selected);
  Arguments   : id - The execCommand (e.g. Bold)
                n  - The editor identifier that the command 
								     affects (the textarea's ID)
                selected - The selected value when applicable (e.g. Arial)
\* ---------------------------------------------------------------------- */
function formatText(id, n, selected) {

  // When user clicks toolbar button make sure it always targets its respective WYSIWYG
  document.getElementById("wysiwyg" + n).contentWindow.focus();  

	//alert(id);  //debug to find out the button that was clicked in the WYSIWYG


	// When in Text Mode these execCommands are disabled
	var formatIDs = new Array("FontSize","FontName","Bold","Italic","Underline","Subscript","Superscript","Strikethrough","Justifyleft","Justifyright","Justifycenter","InsertUnorderedList","InsertOrderedList","Indent","Outdent","ForeColor","BackColor","InsertImage","InsertTable","CreateLink","Media","AddForms");
	// Check if button clicked is in disabled list
	for (var i = 0; i <= formatIDs.length;) {				
		if (formatIDs[i] == id) {
			 var disabled_id = 1; 
		}
	  i++;
	}
	// Check if in Text Mode and disabled button was clicked
	if (viewTextMode == 1 && disabled_id == 1) {
	  alert ("You are in HTML Mode. This feature has been disabled.");	
	}	
	else {	
	  // FontSize
	  if (id == "FontSize") {
      document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontSize", false, selected);
	  }	  
		// FontName
	  else if (id == "FontName") {
      document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontName", false, selected);
	  }	
	  // ForeColor and BackColor
    else if (id == 'ForeColor' || id == 'BackColor') {
      var w = screen.availWidth;
      var h = screen.availHeight;
      var popW = 210, popH = 165;
      var leftPos = (w-popW)/2, topPos = (h-popH)/2;
      var currentColor = _dec_to_rgb(document.getElementById("wysiwyg" + n).contentWindow.document.queryCommandValue(id));
      //alert(currentColor);
      //currentColor = _dec_to_rgb("#FF0000");
	    window.open(popupsDir + 'select_color.html?color=' + currentColor + '&command=' + id + '&wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,width=' + popW + ',height=' + popH + ',top=' + topPos + ',left=' + leftPos);
    }	  
		// InsertImage
	  else if (id == "InsertImage") {
      window.open(popupsDir + 'insert_image.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=190');
	  }	  
		// InsertTable
	  else if (id == "InsertTable") {
	    window.open(popupsDir + 'create_table.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=360');
	  }	  
		// CreateLink
	  else if (id == "CreateLink") {
	    window.open(popupsDir + 'insert_hyperlink.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=300,height=110');
	  }	  
		// ViewSource
    else if (id == "ViewSource") {
	    viewSource(n);
	  }		
		// ViewText
		else if (id == "ViewText") {
	    viewText(n);
	  }
		// Help
		else if (id == "Help") {
	    window.open(popupsDir + 'about.html','popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=330');
	  }
		// Save
	else if (id == "Save") {
	//	   document.getElementById('tiles_edit_box').style.display='block';	
		saveTextAreaData(EditingID);
	}
		// Cancel
	else if (id == "Cancel") {
	//	document.getElementById('tiles_edit_box').style.display='block';
	
		// takes hp_field and makes it hp
		new_id = n.replace(/_field/i, "");

		// removes WYSIWYG editor
		deGenerateHTMLEditor(new_id,n,editing_content); 

		 // close the editor
		 is_cancel=true;
		 
		 /*
		  * Re-assigns the cambia function to the SPAN's onclick event,
		  * which toggles the WYSIWYG editor.
		  */
 		 document.getElementById(new_id).onclick = function(){ 
			cambia(this);
			is_cancel=false;
		}
		
		// only needed in IE
		if (navigator.appName == "Microsoft Internet Explorer"){is_cancel=false;}

		// allow editors to be opened again
		changing = false;	
			
	}else if (id == "Media") {		
		window.open(popupsDir +'insert_media.php?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=1,resizable=1,width=800,height=300');	
		 //window.open(popupsDir + 'insert_media.php?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=190');
		
	}else if (id == "AddForms") {		
		window.open(popupsDir +'insert_form.php?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=1,width=400,height=300');			 
		
	}	
	else if (id == "toggleBg")  //temporarily toggle background color (for typing white text in IE) - it won't save this color though
	{
	  //in ff they use rgb(0,255, 0) format, in IE they use Hex (#00ff00), for that reason in comparison operator use ""
	  //alert(document.getElementById("wysiwyg" + n).contentWindow.document.body.style.backgroundColor);
	  if (document.getElementById("wysiwyg" + n).contentWindow.document.body.style.backgroundColor == "")
	  {	
		//This can be any color 00ff00 is green	, its currently a very dark blue	
	  	document.getElementById("wysiwyg" + n).contentWindow.document.body.style.backgroundColor = "#9966FF";
	  }
	  else
	  {
		//we toggle back to its original color
		//document.getElementById("wysiwyg" + n).contentWindow.document.body.style.backgroundColor = "#ff0000";
		document.getElementById("wysiwyg" + n).contentWindow.document.body.style.backgroundColor = "";
          }		

	}
	// Every other command
	  else {
		  document.getElementById("wysiwyg" + n).contentWindow.document.execCommand(id, false, null);
		}
  }
};



/* ---------------------------------------------------------------------- *\
  Function    : insertHTML()
  Description : insert HTML into WYSIWYG in rich text
  Usage       : insertHTML(<b>hello</b>, "textareaID")
  Arguments   : html - The HTML being inserted (e.g. <b>hello</b>)
                n  - The editor identifier that the HTML 
								     will be inserted into (the textarea's ID)
\* ---------------------------------------------------------------------- */
function insertHTML(html, n,extra) {

  var browserName = navigator.appName;
	 	 
	if (browserName == "Microsoft Internet Explorer") {	  
	  document.getElementById('wysiwyg' + n).contentWindow.document.selection.createRange().pasteHTML(html);   
	} 
	 
	else {
	  var div = document.getElementById('wysiwyg' + n).contentWindow.document.createElement("div");
		 
		div.innerHTML = html;		
		div.innerHTML = html+extra;
		
		var node = insertNodeAtSelection(div, n);		
	}
	
}


/* ---------------------------------------------------------------------- *\
  Function    : insertNodeAtSelection()
  Description : insert HTML into WYSIWYG in rich text (mozilla)
  Usage       : insertNodeAtSelection(insertNode, n)
  Arguments   : insertNode - The HTML being inserted (must be innerHTML 
	                           inserted within a div element)
                n          - The editor identifier that the HTML will be 
								             inserted into (the textarea's ID)
\* ---------------------------------------------------------------------- */
function insertNodeAtSelection(insertNode, n) {
  // get current selection
  var sel = document.getElementById('wysiwyg' + n).contentWindow.getSelection();

  // get the first range of the selection
  // (there's almost always only one range)
  var range = sel.getRangeAt(0);

  // deselect everything
  sel.removeAllRanges();

  // remove content of current selection from document
  range.deleteContents();

  // get location of current selection
  var container = range.startContainer;
  var pos = range.startOffset;

  // make a new range for the new selection
  range=document.createRange();

  if (container.nodeType==3 && insertNode.nodeType==3) {
	
    // if we insert text in a textnode, do optimized insertion
    container.insertData(pos, insertNode.nodeValue);

    // put cursor after inserted text
    range.setEnd(container, pos+insertNode.length);
    range.setStart(container, pos+insertNode.length);
  } 
	
	else {
    var afterNode;
    
		if (container.nodeType==3) {
      // when inserting into a textnode
      // we create 2 new textnodes
      // and put the insertNode in between

      var textNode = container;
      container = textNode.parentNode;
      var text = textNode.nodeValue;

      // text before the split
      var textBefore = text.substr(0,pos);
      // text after the split
      var textAfter = text.substr(pos);

      var beforeNode = document.createTextNode(textBefore);
      afterNode = document.createTextNode(textAfter);

      // insert the 3 new nodes before the old one
      container.insertBefore(afterNode, textNode);
      container.insertBefore(insertNode, afterNode);
      container.insertBefore(beforeNode, insertNode);

      // remove the old node
      container.removeChild(textNode);
    } 
	
	  else {
      // else simply insert the node
      afterNode = container.childNodes[pos];
      container.insertBefore(insertNode, afterNode);
    }

    range.setEnd(afterNode, 0);
    range.setStart(afterNode, 0);
  }

  sel.addRange(range);
};

	

/* ---------------------------------------------------------------------- *\
  Function    : _dec_to_rgb
  Description : convert a decimal color value to rgb hexadecimal
  Usage       : var hex = _dec_to_rgb('65535');   // returns FFFF00
  Arguments   : value   - dec value
\* ---------------------------------------------------------------------- */

function _dec_to_rgb(value) {
  var hex_string = "";
  for (var hexpair = 0; hexpair < 3; hexpair++) {
    var myByte = value & 0xFF;            // get low byte
    value >>= 8;                          // drop low byte
    var nybble2 = myByte & 0x0F;          // get low nybble (4 bits)
    var nybble1 = (myByte >> 4) & 0x0F;   // get high nybble
    hex_string += nybble1.toString(16);   // convert nybble to hex
    hex_string += nybble2.toString(16);   // convert nybble to hex
  }
  return hex_string.toUpperCase();
};



/* ---------------------------------------------------------------------- *\
  Function    : outputFontSelect()
  Description : creates the Font Select drop down and inserts it into 
	              the toolbar
  Usage       : outputFontSelect(n)
  Arguments   : n   - The editor identifier that the Font Select will update
	                    when making font changes (the textarea's ID)
\* ---------------------------------------------------------------------- */
function outputFontSelect(n) {

  var FontSelectObj        = ToolbarList['selectfont'];
  var FontSelect           = FontSelectObj[2];
  var FontSelectOn         = FontSelectObj[3];
  
	Fonts.sort();
	var FontSelectDropDown = new Array;
	FontSelectDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectFont' + n + '\').src=\'' + FontSelectOn + '\';" onMouseOut="document.getElementById(\'selectFont' + n + '\').src=\'' + FontSelect + '\';"><img src="' + FontSelect + '" id="selectFont' + n + '" width="85" height="20" onClick="showFonts(\'' + n + '\');" unselectable="on"><br>';
	FontSelectDropDown[n] += '<span id="Fonts' + n + '" class="dropdown" style="width: 145px;">';

	for (var i = 0; i <= Fonts.length;) {
	  if (Fonts[i]) {
      FontSelectDropDown[n] += '<button type="button" onClick="formatText(\'FontName\',\'' + n + '\',\'' + Fonts[i] + '\')\; hideFonts(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 120px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family:' + Fonts[i] + '; font-size: 12px;">' + Fonts[i] + '</td></tr></table></button><br>';	
    }	  
	  i++;
  }
	FontSelectDropDown[n] += '</span></td></tr></table>';
	document.getElementById('FontSelect' + n).insertAdjacentHTML("afterBegin", FontSelectDropDown[n]);
};


/* ---------------------------------------------------------------------- *\
  Function    : outputFontSizes()
  Description : creates the Font Sizes drop down and inserts it into 
	              the toolbar
  Usage       : outputFontSelect(n)
  Arguments   : n   - The editor identifier that the Font Sizes will update
	                    when making font changes (the textarea's ID)
\* ---------------------------------------------------------------------- */
function outputFontSizes(n) {
	//document.getElementById('tiles_edit_box').style.display='none';	
  var FontSizeObj        = ToolbarList['selectsize'];
  var FontSize           = FontSizeObj[2];
  var FontSizeOn         = FontSizeObj[3];
	FontSizes.sort();
	var FontSizesDropDown = new Array;
	FontSizesDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSizeOn + '\';" onMouseOut="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSize + '\';"><img src="' + FontSize + '" id="selectSize' + n + '" width="49" height="20" onClick="showFontSizes(\'' + n + '\');" unselectable="on"><br>';
	FontSizesDropDown[n] += '<span id="Sizes' + n + '" class="dropdown" style="width: 170px;">';
	for (var i = 0; i <= FontSizes.length;) {
	  if (FontSizes[i]) {
      FontSizesDropDown[n] += '<button type="button" onClick="formatText(\'FontSize\',\'' + n + '\',\'' + FontSizes[i] + '\')\;hideFontSizes(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 145px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family: arial, verdana, helvetica;"><font size="' + FontSizes[i] + '">size ' + FontSizes[i] + '</font></td></tr></table></button><br>';	
    }	  
	  i++;
  }
	FontSizesDropDown[n] += '</span></td></tr></table>';
	//alert("the value of n is: " + n );
	document.getElementById('FontSizes' + n).insertAdjacentHTML("afterBegin", FontSizesDropDown[n]);
}
/* ---------------------------------------------------------------------- *\
  Function    : hideFonts()
  Description : Hides the list of font names in the font select drop down
  Usage       : hideFonts(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function hideFonts(n) {
  document.getElementById('Fonts' + n).style.display = 'none'; 
};
/* ---------------------------------------------------------------------- *\
  Function    : hideFontSizes()
  Description : Hides the list of font sizes in the font sizes drop down
  Usage       : hideFontSizes(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function hideFontSizes(n) {
  document.getElementById('Sizes' + n).style.display = 'none'; 
};
/* ---------------------------------------------------------------------- *\
  Function    : showFonts()
  Description : Shows the list of font names in the font select drop down
  Usage       : showFonts(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function showFonts(n) { 
  if (document.getElementById('Fonts' + n).style.display == 'block') {
    document.getElementById('Fonts' + n).style.display = 'none';
	}
  else {
    document.getElementById('Fonts' + n).style.display = 'block'; 
    document.getElementById('Fonts' + n).style.position = 'absolute';		
  }
};
/* ---------------------------------------------------------------------- *\
  Function    : showFontSizes()
  Description : Shows the list of font sizes in the font sizes drop down
  Usage       : showFonts(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function showFontSizes(n) {	
  if (document.getElementById('Sizes' + n).style.display == 'block') {	  	  
    document.getElementById('Sizes' + n).style.display = 'none';
	}
  else {
    document.getElementById('Sizes' + n).style.display = 'block'; 
    document.getElementById('Sizes' + n).style.position = 'absolute';		
  }
};
/* ---------------------------------------------------------------------- *\
  Function    : viewSource()
  Description : Shows the HTML source code generated by the WYSIWYG editor
  Usage       : showFonts(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function viewSource(n) {
  var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
  var browserName = navigator.appName;	
	// View Source for IE 	 
  if (browserName == "Microsoft Internet Explorer") {
    var iHTML = getDocument.body.innerHTML;
    getDocument.body.innerText = iHTML;
	} 
  // View Source for Mozilla/Netscape
  else {
    var html = document.createTextNode(getDocument.body.innerHTML);
    getDocument.body.innerHTML = "";
    getDocument.body.appendChild(html);
	}
 
	// Hide the HTML Mode button and show the Text Mode button
  document.getElementById('HTMLMode' + n).style.display = 'none'; 
	document.getElementById('textMode' + n).style.display = 'block';	
	// set the font values for displaying HTML source
	getDocument.body.style.fontSize = "12px";
	getDocument.body.style.fontFamily = "Courier New"; 	
  viewTextMode = 1;
};

/* ---------------------------------------------------------------------- *\
  Function    : viewSource()
  Description : Shows the HTML source code generated by the WYSIWYG editor
  Usage       : showFonts(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function viewText(n) { 
  var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
  var browserName = navigator.appName;	
	// View Text for IE 	  	 
  if (browserName == "Microsoft Internet Explorer") {
    var iText = getDocument.body.innerText;
    getDocument.body.innerHTML = iText;
	} 
	// View Text for Mozilla/Netscape
  else {
    var html = getDocument.body.ownerDocument.createRange();
    html.selectNodeContents(getDocument.body);
    getDocument.body.innerHTML = html.toString();
	}  
	// Hide the Text Mode button and show the HTML Mode button
  document.getElementById('textMode' + n).style.display = 'none'; 
	document.getElementById('HTMLMode' + n).style.display = 'block';	
	// reset the font values
  getDocument.body.style.fontSize = "";
	getDocument.body.style.fontFamily = ""; 
	viewTextMode = 0;
};

/* ---------------------------------------------------------------------- *\
  Function    : updateTextArea()
  Description : Updates the text area value with the HTML source of the WYSIWYG
  Usage       : updateTextArea(n)
  Arguments   : n   - The editor identifier (the textarea's ID)
\* ---------------------------------------------------------------------- */
function updateTextArea(n) {
  //document.getElementById(n).value = document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;
  
	var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
	var browserName = navigator.appName;  	
	iText = '';
  	var str = new String();
	if (browserName == "Microsoft Internet Explorer"){
		iText = getDocument.body.innerHTML;
		//the following 5 lines take out extra line feeds & weird chars in IE		
		str = iText.toString();
		//alert(str); //debug, BEFORE
		str = stripWeirdCharsIE(str);  //take out MS Word special chars and Link special chars
		//alert(str); //debug, AFTER
		iText = str;		
	}else{	// View Text for Mozilla/Netscape
		iText = document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;
		str = iText;
		//alert(str); //debug, BEFORE
		str = stripWeirdCharsFF(str);
		//alert(str); //debug, AFTER
		iText = str;
	}			
	return iText;
};
function getUContent(n) {
  //document.getElementById(n).value = document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;
  
	//var getDocument = document.getElementById(n).contentWindow.document;	
	var iText = document.getElementById(n).innerHTML;	
	var browserName = navigator.appName;  		
  	var str = new String();
	if (browserName == "Microsoft Internet Explorer"){
		//iText = getDocument.body.innerHTML;
		//the following 5 lines take out extra line feeds & weird chars in IE		
		str = iText.toString();
		//alert(str); //debug, BEFORE
		str = stripWeirdCharsIE(str);  //take out MS Word special chars and Link special chars
		//alert(str); //debug, AFTER
		iText = str;		
	}		
			
	return iText;
};

/*  These are possible weird chars that get added in IE on WYSIWYG when
    they copy fancy apostrophes from MS Word, we have to search for these and
    get rid of them or replace them with ASCII apostrophes ', quotes or whatever
    sometimes there are backslashes added \\\\\\ , other possibilities include
	â€™      â€“      â€˜  for formatted apostrophes, quotes, etc. 

    ANOTHER THING, IS IF THEY ADD A LINK, IT'LL ADD A --- file: AND ---- //%22  To the HTML 
    The second half of this function will get rid of this and possible SPAN tag stuff
    from the WYSIWYG onto the textarea.
*/
function stripWeirdCharsIE(str)
{
	var strLength = str.length; //str.length;
	var newString = "";  //newly formatted String w/out special chars
	var i = 0;
	var uniNum;
	var temp = "";
	var temp2 = "";	
	for (i = 0; i < strLength; i++)
	{
		uniNum = str.charCodeAt(i);
		if (uniNum > 156) //in IE6 ' gets 3 weird chars, usually 226, 8364, # 
		{			//above 156 is for sure out of range
					//for simplicity we just replace them as needed
					//and keep going until special chars stop
			//alert(uniNum);  //debug stmt
			
			if (uniNum == 8220 || uniNum == 8221)  //...8220, 8221 (Windows) 339, 157 for Linux (not needed, just local machine)
			{
				//if its here its a fancy double quote, replace with a regular ASCII one
			   newString += '"';			   
			}
			else if (uniNum == 8217)  //..8217 (windows) 8482(Linux)
			{
			   newString += "'";  //its an apostrophe
			}
			else if (uniNum == 225)
			{
				//these are the unicode #s and the spanish chars, the others are just capital letters of these
			//225 233 237 243 250 191 161 252 241  --->   áéíóú¿¡üñ
				newString += "&aacute";
			}
			else if (uniNum == 193)
			{
				newString += "&Aacute";
			}
			else if (uniNum == 233)
			{
				newString += "&eacute";
			}
			else if (uniNum == 201)
			{
				newString += "&Eacute";
			}
			else if (uniNum == 237)
			{
				newString += "&iacute";
			}
			else if (uniNum == 205)
			{
				newString += "&Iacute";
			}
			else if (uniNum == 243)
			{
				newString += "&oacute";
			}
			else if (uniNum == 211)
			{
				newString += "&Oacute";
			}
			else if (uniNum == 250)
			{
				newString += "&uacute";
			}
			else if (uniNum == 218)
			{
				newString += "&Uacute";
			}
			else if (uniNum == 191)
			{
				newString += "&iquest";
			}
			else if (uniNum == 161)
			{
				newString += "&iexcl";
			}
			else if (uniNum == 252)
			{
			//newString += "";  //still unsure u
			}
			else if (uniNum == 241)
			{
				newString += "&ntilde";
			}
			else if (uniNum == 209)
			{
				newString += "&Ntilde";
			}

			continue;
		}
		
		newString += str.charAt(i);  //append char to new string
		temp += str.charCodeAt(i) + " ";
		temp2 += str.charAt(i);		
	}

	//HERE WE STRIP OUT THE LINK GARBAGE --- file:   ---- //%22  ---
	newString = newString.replace(/file:/g, ""); //take out Link garbage
	newString = newString.replace(/\/\/%22/g, ""); //take out Link garbage
	newString = newString.replace(/<U>/g, "");
	newString = newString.replace(/<\/U>/g, "");
	//HERE WE STRIP OUT THE "CLICK TO EDIT" GARBAGE THAT CAN GET INTO THE TEXT AREA WHILE COPYING LINKS
	newString = newString.replace(/<SPAN/g, "");
	newString = newString.replace(/class=redigieren/g, "");
	newString = newString.replace(/id=buyers>/g, "");
	newString = newString.replace(/id=buyers/g, "");
	newString = newString.replace(/title=\"Click to edit!\"/g, "");
	newString = newString.replace(/style=\"CURSOR: pointer\">/g, "");
	newString= newString.replace(/<\/SPAN>/g, "");


	//IE (ONLY) will add <P> tags ... this causes probs. with the style sheet
	//here we manually strip them 
	newString = newString.replace(/<P>/g, "");
	newString = newString.replace(/<\/P>/g, "<BR><BR>");
		
	//IE, there will be a change in the style if the user changes the bg color
	//newString = newString.replace(/style="COLOR: rgb(255,255,255)">/g, "");



	//debug
	//alert(temp);  //this string shows all the Unicode characters 
	//alert(temp2); //this just shows the output one char at a time
	return newString;  //return the newly formatted string
};
/*
   If Links are copied to the WYSIWYG on Firefox, the links come out messed up
   because of characters that are added or copied over.  This function strips them.
*/
function stripWeirdCharsFF(str)
{
	var strLength = str.length; //str.length;
	var newString = "";  //newly formatted String w/out special chars
	var i = 0;
	var uniNum;
	var temp = "";
	var temp2 = "";	
	for (i = 0; i < strLength; i++)
	{
		uniNum = str.charCodeAt(i);
		//these are the unicode #s and the spanish chars, the others are just capital letters of these
		//225 233 237 243 250 191 161 252 241  --->   áéíóú¿¡üñ
		if (uniNum == 225)
		{
			newString += "&aacute";
		}
		else if (uniNum == 193)
		{
			newString += "&Aacute";
		}
		else if (uniNum == 233)
		{
			newString += "&eacute";
		}
		else if (uniNum == 201)
		{
			newString += "&Eacute";
		}
		else if (uniNum == 237)
		{
			newString += "&iacute";
		}
		else if (uniNum == 205)
		{
			newString += "&Iacute";
		}
		else if (uniNum == 243)
		{
			newString += "&oacute";
		}
		else if (uniNum == 211)
		{
			newString += "&Oacute";
		}
		else if (uniNum == 250)
		{
			newString += "&uacute";
		}
		else if (uniNum == 218)
		{
			newString += "&Uacute";
		}
		else if (uniNum == 191)
		{
			newString += "&iquest";
		}
		else if (uniNum == 161)
		{
			newString += "&iexcl";
		}
		else if (uniNum == 252)
		{
			//newString += "";  //still unsure u
		}
		else if (uniNum == 241)
		{
			newString += "&ntilde";
		}
		else if (uniNum == 209)
		{
			newString += "&Ntilde";
		}
		else
		{
			newString += str.charAt(i);
		}

	}
	return newString;
}

/*
This was created for changing the background color for when a user wishes to change
the text color to white
*/
function changeBackgroundColor(str)
{	
}
