var WysiwygEditorFlags = {
	Normal: 1,
	AllowScripts: 3, //normal | 2
	KeepStyles: 5 //normal | 4
};

var WysiwygEditor = Class.Create();
WysiwygEditor.AddMethods({
	
	id: null,
	currentTheme: null,
	uiType: "mini",		//mini, complete, custom
	wpage: "/wysiwyg_component.aspx", //_drjsPath + "wysiwyg_component.html",
	onLoad: null,
	range: null,
	template: 0,
	
	ResizeWithContent: false,
	OnResize: null,
	
	Flags: WysiwygEditorFlags.Normal,
	htmlmode: false,
	selectedText: null,
		
	_constructor: function(uiType, id) {
		if(id!=null) {
			this.id = WysiwygEditorFunctions.Add(this, id);
		} else {
			this.id = WysiwygEditorFunctions.Add(this);
		}
		this.currentTheme = UI.Themes.GetTheme();		
		if(uiType) {
			this.uiType = uiType;
		}
	},
	
	addButton: function(button) {
		this.getToolBar().innerHTML += button;
	},
	
	addSeparator: function() {
		this.getToolBar().innerHTML += "<div> | </div>"; //colocar imagem
	},
	
	ApplyTemplate: function(src) {
		WysiwygEditorFunctions.GetEditor(this.id).SetText(src);
	},
		
	Build: function(target, html, callback) {
		var toolbarhtml = "<div style=\"display:none;\" class=\"div_wysiwygtoolbar\" id=\"div_wysiwygtoolbar"+this.id+"\" name=\"div_wysiwygtoolbar"+this.id+"\" ></div>";
		var ifhtml = "<iframe frameborder=\"0\" class=\"if_wysiwygeditor richeditor\" id=\"if_wysiwygeditor"+this.id+"\" name=\"if_wysiwygeditor"+this.id+"\" src=\""+this.wpage+"?"+this.id+"\" ></iframe>";
		var thidden = "<div id=\"if_wysiwygeditor_thidden"+this.id+"\" style=\"display:; position:absolute; top:-500px; left:-500px; width:1px; height:1px; overflow:hidden;\" contentEditable=\"true\"></div>";
		var tboxhtml = "<textarea id=\"if_wysiwygeditor_tbox"+this.id+"\" class=\"tx_wysiwygeditor plaineditor\" style=\"display:none; font-family:\"Courier New\", Courier, monospace; color:#000000;\"></textarea>";
		$(target).innerHTML = toolbarhtml;
		$(target).innerHTML += ifhtml;
		$(target).innerHTML += tboxhtml;
		$(target).innerHTML += thidden;
		this.onLoad = function() {
			WysiwygEditorFunctions.GetEditor(this.id).SetText(html);
			if(callback != null) {
				callback();
			}
		}
		return "if_wysiwygeditor" + this.id;
	},
	
	CheckResize: function(height) {
		if(this.ResizeWithContent == true) {
			$("if_wysiwygeditor"+this.id).style.height = height + "px";
			if(this.OnResize != null) {
				this.OnResize(height);
			}
		}
	},
	
	CleanHTML: function() {
		var text = this.removeStyles(this.getIFrame().selection.createRange().text);
		if (Browser.IE){
			try{
				//alert(this.getIFrame().selection.createRange())
				this.getIFrame().selection.createRange().pasteHTML(text);
			} catch(e){
			}
		} else {
			this.getIFrame().execCommand(cmd, false, text);
		}
		//alert(this.GetSelectedText());
	},
	
	DoCommand: function(cmd, arg) {
		if(this.htmlmode == true) {
			
			return;
		}
		if (cmd == "createURL"){			
			//FIREFOX (e IE):
			//var url = prompt("Enter an url",""); 
			//this.getIFrame().execCommand("CreateLink", false, url);
			//IE:
			  this.getIFrame().execCommand("CreateLink", true);
		} else if (cmd == "insertImage"){			
			//TODO: montar janela de escolha de imagem, e setar arg = path
			//this.getIFrame().execCommand("insertimage", false, arg);
			this.getIFrame().execCommand("insertimage", false, "http://starta.dev.doctorsys.com.br/img/topbar/topbar_smartlogo.gif");
		} else if(cmd == "inserthtml"){
			if (Browser.IE){
				try{
					this.getIFrame().selection.createRange().pasteHTML(arg);
				} catch(e){
				}
			} else {
				this.getIFrame().execCommand(cmd, false, arg);
			}
		} else {
			this.getIFrame().execCommand(cmd, false, arg);
		}
		document.getElementById("if_wysiwygeditor"+this.id).contentWindow.focus();
	},
	
	buildToolBar: function() {
		var btnBold = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('bold', null, '"+this.id+"');\"><img src=\""+UI.Themes.GetImage("wysiwyg_btn_bold.gif")+"\" alt=\"Bold\" /></span>";
		var btnItalic = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('italic', null, '"+this.id+"');\"><img src=\"\" alt=\"Italic\" /></span>";
		var btnUnderline = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('underline', null, '"+this.id+"');\"><img src=\"\" alt=\"Underline\" /></span>";
		var btnStrikeThrough = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('strikethrough', null, '"+this.id+"');\"><img src=\"\" alt=\"Strike Through\" /></span>";
		var btnLink = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('createURL', null, '"+this.id+"');\"><img src=\"\" alt=\"Create URL\" /></span>";
		var btnColor = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.ShowCollorsPalette("+this.id+");\"><img src=\"\" alt=\"Color\" /></span>";
		btnColor += "<div id=\"div_colorpicker"+this.id+"\" style=\"text-align:center; border:solid 2px #002D96; display:none; position:absolute; background-color:#ECE9D8;\">"+ColorPickerPaletteFunctions.CreateColorsTableHTML(this.id)+"</div>";
		var btnImg = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('insertImage', null, '"+this.id+"');\"><img src=\"\" alt=\"Insert Image\" /></span>";
		var btnFontSize1 = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('fontsize', '1', '"+this.id+"');\"><img src=\"\" alt=\"Fonte Pequena\" /></span>";
		var btnFontSize2 = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('fontsize', '3', '"+this.id+"');\"><img src=\"\" alt=\"Fonte Média\" /></span>";
		var btnFontSize3 = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('fontsize', '5', '"+this.id+"');\"><img src=\"\" alt=\"Fonte Grande\"/></span>";
		var btnFontSize4 = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('fontsize', '7', '"+this.id+"');\"><img src=\"\" alt=\"Fonte Gigante\" /></span>";
		var btnJustifyLeft = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('justifyleft', null, '"+this.id+"');\"><img src=\"\" alt=\"Alinhar a esquerda\" /></span>";
		var btnJustifyCenter = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('justifycenter', null, '"+this.id+"');\"><img src=\"\" alt=\"Centralizar\" /></span>";
		var btnJustifyRight = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('justifyright', null, '"+this.id+"');\"><img src=\"\" alt=\"Alinhar a direita\" /></span>";
		var btnJustifyFull = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('justifyfull', null, '"+this.id+"');\"><img src=\"\" alt=\"Justificado\"/></span>";
		var btnUnorderedList = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('insertunorderedlist', null, '"+this.id+"');\"><img src=\"\" alt=\"Bullets\" /></span>";
		var btnOrderedList = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.DoCommand('insertorderedlist', null, '"+this.id+"');\"><img src=\"\" alt=\"Numbering\"/></span>";
		var btnAddTemplate1 = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.ApplyTemplate('template1.aspx', '"+this.id+"');\">Template1</span>"
		var btnAddTemplate2 = "<span class=\"\" id=\"\" onclick=\"WysiwygEditorFunctions.ApplyTemplate('template2.aspx', '"+this.id+"');\">Template2</span>"
		switch (this.uiType){
			case "mini":
				this.addButton(btnBold);
				this.addButton(btnItalic);
				this.addButton(btnUnderline);
				this.addButton(btnStrikeThrough);
				this.addButton(btnFontSize1);
				this.addButton(btnFontSize2);
				this.addButton(btnFontSize3);
				this.addButton(btnFontSize4);
				this.addButton(btnLink);
				this.addButton(btnColor);
				this.addButton(btnImg);				
				this.addButton(btnJustifyLeft);
				this.addButton(btnJustifyCenter);
				this.addButton(btnJustifyRight);
				this.addButton(btnJustifyFull);
				this.addButton(btnUnorderedList);
				this.addButton(btnOrderedList);
				this.addButton(btnAddTemplate1);
				this.addButton(btnAddTemplate2);
			break;
			case "complete":
			break;
			case "custom":
			break;
			case "none":
			break;
			default:
			break;
		}
	},
	
	getIFrame: function() {
		if (document.getElementById("if_wysiwygeditor"+this.id).contentDocument){  
			return document.getElementById("if_wysiwygeditor"+this.id).contentDocument;
		} else {
			return document.frames["if_wysiwygeditor"+this.id].document;
		}
	},
	
	GetWindow: function() {
		if (document.getElementById("if_wysiwygeditor"+this.id).contentDocument){
			return document.getElementById("if_wysiwygeditor"+this.id).contentWindow;
		} else {
			return document.frames["if_wysiwygeditor"+this.id];
		}
	},
	
	GetHtml: function() {
		var text = (this.htmlmode == false) ? this.getIFrame().body.innerHTML : this.parseToHtml($("if_wysiwygeditor_tbox" + this.id).value);
		if((this.Flags & WysiwygEditorFlags.AllowScripts) != WysiwygEditorFlags.AllowScripts) {
			text = text.replace(/(<script)(.*)(<\/script>)/gi, "");
			text = text.replace(/(onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup)(=)(\w+\(*\)*|\".*\")/gi, "");//"
		}
		text = text.replace(/<br\s*>/gi, "<br />");
		text = text.replace(/&nbsp;/gi, " ");
		text = text.replace(/(style=\"\w*)(moz-\w*)(:)(\w*)(;|\")/gi, "$1$5");
		return text;
	},
	
	getToolBar: function() {		
		return document.getElementById("div_wysiwygtoolbar"+this.id);		
	},
	
	GetSelectedText: function(returnText){
		if(returnText) {
			if(Browser.FF) {
				return this.selectedText;
			} else {
				return this.selectedText.text;
			}
		} else {
			return this.selectedText;
		}
	},
	
	parseToHtml: function(text) {
		//text = text.replace(/\n*/g, "<!--s.c.lb-->");
		text = text.replace(/\n/g, "<!--s.c.lb-->");
		//alert(text);
		return text;
	},
	
	parseToText: function(text) {
		text = text.replace(/\n/g, "");
		text = text.replace(/<!--s.c.lb-->/g, "\n");
		//alert(text);
		return text;
	},
	
	Paste: function() {
		if(Browser.IE) {
			this.range = this.getIFrame().selection.createRange();
		}
		$("if_wysiwygeditor_thidden"+this.id).focus();
		setTimeout("WysiwygEditorFunctions.pasteCallback('"+this.id+"')", 1);
	},
	pasteCallback: function(id) {
		var html = $("if_wysiwygeditor_thidden"+this.id).innerHTML;
		if((this.Flags & WysiwygEditorFlags.AllowScripts) != WysiwygEditorFlags.AllowScripts) {
			html = this.removeScripts(html);
		}
		html = this.removeStyles(html);
		$("if_wysiwygeditor"+this.id).contentWindow.focus();
		if(Browser.IE) {
			this.range.pasteHTML(html);
		} else {
			this.getIFrame().execCommand("inserthtml", false, html);
		}
		$("if_wysiwygeditor_thidden"+this.id).innerHTML = "";
	},
	
	removeScripts: function(html) {
		return html.replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, "");
	},
	
	removeStyles: function(html) {
		//tirar: font*, list*, position*, border*, 
		//deixar: width, height, float, clear
		html = html.replace(/moz[^\";]*/gim, "");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(background[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(font[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(list[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(border[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(position[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(display[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(margin[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(padding[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(visibility[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/(<[\w\s]*[^>][\w\s]*style=["|'])([^>]*)(color[-\w]*\s*:[\s\w-\(\)\'\/\.,]*;?)([^>]*)(["|']>)/gim, "$1$2$4$5");
		html = html.replace(/<style[^>]*>([\S\s]*?)<\/style>/gim, "");
		html = html.replace(/(<[\w\s]*[>])([\w\s]*)(<\/[\w\s]*[>])/gim, "$2");
		return html;
	},
	
	SetText: function(text) {
		this.getIFrame().body.innerHTML = text;
	},
	
	StoreSelectedText: function(){
		if (window.getSelection) {			
			this.selectedText = document.getElementById("if_wysiwygeditor"+this.id).contentDocument.getSelection();
		} else if ((document.frames["if_wysiwygeditor"+this.id].document).selection) {
			this.selectedText = (document.frames["if_wysiwygeditor"+this.id].document).selection.createRange();
		}
	},
	
	ShowCollors: function() {
		$("div_colorpicker"+this.id).style.display = 'inline';
		this.StoreSelectedText();
	},
	
	SwapHTML: function() {
		if(this.htmlmode == false) {
			//begin keep sele
			/*if(Browser.IE) {
				this.range = this.getIFrame().selection.createRange();
			}
			var html = "";
			if (window.getSelection) {			
				html = document.getElementById("if_wysiwygeditor"+this.id).contentDocument.getSelection();
			} else if ((document.frames["if_wysiwygeditor"+this.id].document).selection) {
				html = (document.frames["if_wysiwygeditor"+this.id].document).selection.createRange();
			}
			if(Browser.IE) {alert(html.text);
				this.range.pasteHTML("*****" + html.text + "/*****");
			} else {
				this.getIFrame().execCommand("inserthtml", false, "*****" + html + "/*****");
			}*/
			//end keep sele
			$("if_wysiwygeditor_tbox"+this.id).style.width = $("if_wysiwygeditor"+this.id).offsetWidth;
			$("if_wysiwygeditor_tbox"+this.id).style.height = $("if_wysiwygeditor"+this.id).offsetHeight;
			$("if_wysiwygeditor_tbox"+this.id).value = this.parseToText(this.GetHtml());
			$("if_wysiwygeditor_tbox"+this.id).Show();
			$("if_wysiwygeditor"+this.id).Hide();
			this.htmlmode = true;
		} else {
			this.SetText(this.parseToHtml($V("if_wysiwygeditor_tbox"+this.id)));
			$("if_wysiwygeditor"+this.id).Show();
			$("if_wysiwygeditor_tbox"+this.id).Hide();
			this.htmlmode = false;
		}
	},
	
	HideCollors: function(){
		$("div_colorpicker"+this.id).style.display = 'none';
		this.selectedText = null;
	}
	
});

var WysiwygEditorFunctions = {
	currID: 1,
	editorArr: [],	
	
	Add: function(editor, id) {
		if(id==null) {
			id = this.GetID();
		}
		this.editorArr[id] = editor;
		return id;
	},
	AddText: function(html, id) {
		this.GetEditor(id).StoreSelectedText();
		var before = html;
		var after = "";
		document.getElementById("if_wysiwygeditor"+id).contentWindow.focus();
		if(isArray(html)) {
			before = html[0];
			after = html[1];
			this.GetEditor(id).DoCommand('inserthtml',  before + this.GetEditor(id).GetSelectedText(true).replace(/>/g, "&gt;").replace(/</g, "&lt;") + after);
		} else {
			this.GetEditor(id).DoCommand('inserthtml',  before);
		}
	},
	ApplyTemplate: function(filesrc, n) {		
		var request = new AjaxRequest("/"+filesrc, this.applyTemplateCallback);
		request.wysiwygID = n;
		request.DoRequest();
	},
	applyTemplateCallback: function(req){
		WysiwygEditorFunctions.GetEditor(req.wysiwygID).ApplyTemplate(req.ResponseText);
	},
	CheckResize: function(id, height) {
		return this.GetEditor(id).CheckResize(height);
	},
	CleanHTML: function(id) {
		return this.GetEditor(id).CleanHTML();
	},
	DoCommand: function(cmd, arg, n) {
		this.GetEditor(n).DoCommand(cmd, arg);
	},
	GetEditor: function(n) {
		return this.editorArr[n];
	},
	GetID: function() {
		return this.currID++;
	},
	GetSelectedText: function(id){
		//alert("get " + this.GetEditor(id));
		return this.GetEditor(id).GetSelectedText();
	},
	Loaded: function(n) {
		if(this.editorArr[n].onLoad) {
			this.editorArr[n].onLoad();
		}
	},
	Paste: function(n) {
		return this.GetEditor(n).Paste();
	},
	pasteCallback: function(id) {
		this.GetEditor(id).pasteCallback();
	},
	StoreSelectedText: function(n){
		return this.GetEditor(n).StoreSelectedText();
	},
	ShowCollorsPalette: function(n) {		
		this.GetEditor(n).ShowCollors();
	},
	SwapHTML: function(id) {
		return this.GetEditor(id).SwapHTML();
	},
	IsHTMLMode: function(id) {
		return this.GetEditor(id).htmlmode;
	},
	HideCollorsPalette: function(n){
		this.GetEditor(n).HideCollors();
	}
	
};

var ColorPickerPaletteFunctions = {
	
	CreateColorsTableHTML: function(wysiwyg_editorID){
		
		var colorsTableHTML = "";
		colorsTableHTML += "<table id=\"colorpickerTable"+wysiwyg_editorID+"\" class=\"wysiwyg_colorpicker_table\" cellspacing=\"0px\" >";
		
		colorsTableHTML += 		"<tr >";
		colorsTableHTML += 			"<td onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#000000; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#993300; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#333300;width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#003300; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#003366; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#000080; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#333399; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#333333; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 		"</tr>";
		
		colorsTableHTML += 		"<tr >";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#800000; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FF6600; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#808000; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#008000; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#008080; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#0000FF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#666699; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#808080; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 		"</tr>";
		
		colorsTableHTML += 		"<tr >";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FF0000; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FF9900; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#99CC00; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#339966; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#336666; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#3366FF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#800080; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#999999; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 		"</tr>";
		
		colorsTableHTML += 		"<tr >";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FF00FF; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FFCC00; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FFFF00;width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#00FF00; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#00FFFF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#00CCFF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#993366; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#C0C0C0; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 		"</tr>";
		
		colorsTableHTML += 		"<tr >";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FF9966; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FFCC99; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FFFF99;width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#CCFFCC; width:75%; height:75%; border: solid 1px #ACA899; \" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#CCFFFF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#99CCFF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#CC99FF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 			"<td  onmouseover=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOver(this); \" onmouseout=\" ColorPickerPaletteFunctions.ColorPickerOnMouseOut(this); \" >";
		colorsTableHTML += 				"<span style=\"background-color:#FFFFFF; width:75%; height:75%; border: solid 1px #ACA899;\" onclick=\"ColorPickerPaletteFunctions.ColorPickerClick(this, '"+wysiwyg_editorID+"')\">&nbsp;</span>";
		colorsTableHTML += 			"</td>";
		colorsTableHTML += 		"</tr>";
		
		colorsTableHTML += "</table>";
		
		return colorsTableHTML;
	},
	
	ColorPickerOnMouseOver: function(obj){			
		obj.style.border = "solid 1px #000080";		
		obj.style.backgroundColor = "#FFC06F";
	},
	
	ColorPickerOnMouseOut: function(obj){		
		obj.style.border = "solid 1px #ECE9D8";		
		obj.style.backgroundColor = "";
	},
	
	ColorPickerClick: function(obj, id){
		if (window.getSelection) {
			WysiwygEditorFunctions.DoCommand('forecolor', obj.style.backgroundColor, id);
		} else{
			WysiwygEditorFunctions.GetSelectedText(id).select();
			WysiwygEditorFunctions.DoCommand('forecolor', obj.style.backgroundColor, id);
		}
		//WysiwygEditorFunctions.HideCollorsPalette(id);		
	}

};