/// <reference path="../Lib.js" />
/*==================================================================*/
/*======================== VNVN_Editor v2.0 ========================*/
/*==================================================================*/
var Editor = new Class();
Editor.prototype =
{
	toolbar: 
			[
				['FontName', 'FontSize', 'BackColor', 'ForeColor'],
				['Bold', 'Italic', 'Underline', 'StrikeThrough', '-',
				 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull', '-',
				 'CreateLink', 'Unlink', 'InsertImage', 'InsertMedia', '-', 'Paypal_Buy', 'PayPal_Donate']
			],
	fontsName: 
			[
				"Arial",
				"Arial Black",
				"Arial Narrow",
				"Book Antiqua",
				"Century Gothic",
				"Comic Sans MS",
				"Courier New",
				"Fixedsys",
				"Franklin Gothic Medium",
				"Garamond",
				"Georgia",
				"Impact",
				"Lucida Console",
				"Lucida Sans Unicode",
				"Microsoft Sans Serif",
				"Palatino Linotype",
				"System",
				"Tahoma",
				"Times New Roman",
				"Trebuchet MS",
				"Verdana"
			],
	fontsSize: ["1", "2", "3", "4", "5", "6", "7"],
	colors: [
						"#000000",
						"#993300",
						"#333300",
						"#003300",
						"#003366",
						"#000080",
						"#333399",
						"#333333",

						"#800000",
						"#FF6600",
						"#808000",
						"#008000",
						"#008080",
						"#0000FF",
						"#666699",
						"#808080",

						"#FF0000",
						"#FF9900",
						"#99CC00",
						"#339966",
						"#33CCCC",
						"#3366FF",
						"#800080",
						"#999999",

						"#FF00FF",
						"#FFCC00",
						"#FFFF00",
						"#00FF00",
						"#00FFFF",
						"#00CCFF",
						"#993366",
						"#C0C0C0",

						"#FF99CC",
						"#FFCC99",
						"#FFFF99",
						"#CCFFCC",
						"#CCFFFF",
						"#99CCFF",
						"#CC99FF",
						"#FFFFFF"
				  ],

	textarea: null,
	style: 0,
	width: null,
	height: null,
	background: "#ffffff",
	color: "#000000",


	init: function()
	{
		this.textarea = get(this.textarea);
		this.container = create("DIV");
		this.container.className = "Editor_Panel";
		Element.setSize(this.container, this.width, this.height);
		var p = this.textarea.parentNode;
		p.insertBefore(this.container, this.textarea);

		this._initToolbar();
	},

	_initToolbar: function()
	{
		var cons = [];
		var line = [];
		for (var i = 0; i < this.toolbar.length; i++)
		{
			var cmds = this.toolbar[i],
				td = [];
			for (var j = 0; j < cmds.length; j++)
			{
				var cmd = cmds[j];
				var ctrl = null;
				switch (cmd)
				{
					case "FontName":
						ctrl = ["UC", "Editor.ButtonFontFamily", { ID: cmd, fonts: this.fontsName, cmd: cmd, onchange: this._execCommmand.handle(this, cmd)}];
						break;
					case "FontSize":
						ctrl = ["UC", "Editor.ButtonFontSize", { ID: cmd, sizes: this.fontsSize, cmd: cmd, onchange: this._execCommmand.handle(this, cmd)}];
						break;
					case "ForeColor":
					case "BackColor":
						ctrl = ["UC", "Editor.ButtonColor", { colors: this.colors, cmd: cmd, onchange: this._execCommmand.handle(this, cmd)}];
						break;
					case "-":
						ctrl = ["DIV", { className: "CILA_Editor_Button_Seperator"}];
						break;
					default:
						ctrl = ["UC", "Editor.Button", { ID: cmd, cmd: cmd, title: cmd, onclick: this._execCommmand.handle(this, cmd, null)}];
						break;
				}
				td.push(["TD", {}, [ctrl]]);
			}
			line.push
			(
				["TR", {}, [
					["TD", {}, [
						["TABLE", { cellPadding: 1, cellSpacing: 0 }, [
							["TR", {}, td]
						]]
					]]
				]]
			);
		}
		this.ctrl = create
		(
			[
				["TABLE", { cellPadding: 0, cellSpacing: 0 }, line],
				["UC", "Editor.DesignArea", { ID: "DESIGN", background:
				this.background, color: this.color, textarea: this.textarea, onupdate: this._onUpdate.handle(this)}]
			],
			this.container
		);
	},

	_execCommmand: function(cmd, obj)
	{
		var value = null;
		var opt = false;
		switch (cmd)
		{
			case "Design":
			case "Code":
				this.ctrl.DESIGN.switchMode(cmd);
				this._onUpdate();
				return;
				break;
			case "CreateLink":
				this.ctrl.DESIGN.prepareSelection(); 
				if (!Browser.IE)
				{
					Window.prompt("Insert Hyperlink :", "http://", function(v)
					{
						this.ctrl.DESIGN.execCommand(cmd, v);
					} .handle(this));
					return;
				}
				opt = true;
				break;
			case "InsertImage":
				this.ctrl.DESIGN.prepareSelection(); 
				if (!Editor.uploadWin)
				{
					var con =
					[
						["DIV", { ID: "CONTENT" }, [
							["TABLE", {}, [
								["TR", {}, [
									["TD", { text: "Url"}],
									["TD", { text: ":"}],
									["TD", {}, [
										["INPUT", { ID: "URL", type: "text", style: { width: "250px"}}]
									]]
								]],
								["TR", {ID: "TR_Upload"}, [
									["TD", { text: "or Upload", vAlign : "top"}],
									["TD", { text: ":", vAlign : "top"}],
									["TD", {}, [
										["IFRAME", { ID: "FRAME", src: "VNVN_WEB/Upload.aspx", frameBorder: 0, style: { height: "40px", width: "250px"}}]
									]]
								]]
							]],
							["FIELDSET", {}, [
								["LEGEND", { text: "Properties"}],
								["TABLE", {}, [
									["TR", {}, [
										["TD", { text: "Caption"}],
										["TD", { text: ":"}],
										["TD", {}, [
											["INPUT", { ID: "CAPTION", type: "text", style: { width: "200px"}}]
										]]
									]],
									["TR", {}, [
										["TD", { text: "Align"}],
										["TD", { text: ":"}],
										["TD", {}, [
											["SELECT", {ID : "ALIGN"}, [
												["OPTION", { value: "left", text: "left"}],
												["OPTION", { value: "right", text: "right"}],
												["OPTION", { value: "top", text: "top"}],
												["OPTION", { value: "bottom", text: "bottom"}]
											]]
										]]
									]],
									["TR", {}, [
										["TD", { text: "Vertical Space"}],
										["TD", { text: ":"}],
										["TD", {}, [
											["INPUT", { ID: "VER", type: "text", style: { width: "50px"}}]
										]]
									]],
									["TR", {}, [
										["TD", { text: "Horizontal Space"}],
										["TD", { text: ":"}],
										["TD", {}, [
											["INPUT", { ID: "HOZ", type: "text", style: { width: "50px"}}]
										]]
									]]
								]]
							]],
							["BR"],
							["DIV", {}, [
								["INPUT", { type: "button", ID: "OK", value: "OK"}],
								["INPUT", { type: "button", ID: "Cancel", value: "Cancel"}]
							]]
						]]
					];
					con = create(con, document.body);

					Editor.uploadWin = new Window
					({
						content: con.CONTENT,
						_con: con,
						useMask: true,
						opacity: 0.1,
						usingForm: false,
						centerScreen: true
					});
					
					if (!Language.IsLogin) Element.hide(con.TR_Upload);
				}

				if (Editor.uploadWin)
				{
					Editor.uploadWin._con.ALIGN.value = "left";
					Editor.uploadWin._con.VER.value = "10";
					Editor.uploadWin._con.HOZ.value = "10";
					Editor.uploadWin._con.CAPTION.value = "";
					Editor.uploadWin._con.OK.onclick = this._insertImageOK.handle(this);
					Editor.uploadWin._con.Cancel.onclick = this._insertImageCancel.handle(this);
					Editor.uploadWin.open();
					Editor.uploadWin._con.FRAME.src = "VNVN_WEB/Upload.aspx?style=" + this.style;
				}
				return;
				break;
				
			case "InsertMedia" :
				this.ctrl.DESIGN.prepareSelection(); 
				if (!Editor.uploadMediaWin)
				{
					var con =
					[
						["DIV", { ID: "CONTENT" }, [
							["TABLE", {}, [
								["TR", {}, [
									["TD", { text: "Url"}],
									["TD", { text: ":"}],
									["TD", {}, [
										["INPUT", { ID: "URL", type: "text", style: { width: "250px"}}]
									]]
								]],
								["TR", {ID: "TR_Upload"}, [
									["TD", { text: "or Upload", vAlign : "top"}],
									["TD", { text: ":", vAlign : "top"}],
									["TD", {}, [
										["IFRAME", { ID: "FRAME", frameBorder: 0, style: { height: "40px", width: "250px"}}]
									]]
								]]
							]],
							["BR"],
							["DIV", {}, [
								["INPUT", { type: "button", ID: "OK", value: "OK"}],
								["INPUT", { type: "button", ID: "Cancel", value: "Cancel"}]
							]]
						]]
					];
					con = create(con, document.body);

					Editor.uploadMediaWin = new Window
					({
						content: con.CONTENT,
						_con: con,
						useMask: true,
						opacity: 0.1,
						usingForm: false,
						centerScreen: true
					});
					
					if (!Language.IsLogin) Element.hide(con.TR_Upload);
				}
				
				if (Editor.uploadMediaWin)
				{
					Editor.uploadMediaWin._con.OK.onclick = this._insertMediaOK.handle(this);
					Editor.uploadMediaWin._con.Cancel.onclick = this._insertMediaCancel.handle(this);
					Editor.uploadMediaWin.open();
					Editor.uploadMediaWin._con.FRAME.src = "VNVN_WEB/Upload.aspx?style=2";
				}
				return;
				break;
				
			case "Paypal_Buy":
				this.ctrl.DESIGN.prepareSelection(); 
				Window.prompt("Please enter paypal id : ", "", function(v)
				{
					if (v != "")
						this.ctrl.DESIGN.insertHTML("<a target='_blank' href='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=" + v + "'><img border='0' src='https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif'/></a>");
				}.handle(this));
				return;
				break;
				
			case "PayPal_Donate":
				this.ctrl.DESIGN.prepareSelection(); 
				Window.prompt("Please enter paypal id : ", "", function(v)
				{
					if (v != "")
						this.ctrl.DESIGN.insertHTML("<a target='_blank' href='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=" + v + "'><img border='0' src='https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif'/></a>");
				}.handle(this));
				return;
				break;
				
			default:
				value = obj;
				break;
		}
		this.ctrl.DESIGN.execCommand(cmd, value, opt);
	},

	_insertMediaOK: function()
	{
		var con = Editor.uploadMediaWin._con;
		var url = con.URL.value;
		
		if (url != "")
		{
			if (url.endsWith(".swf"))
				this.ctrl.DESIGN.insertHTML
				(
					"<OBJECT height='260' width='320' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'>\
						<embed width='320' height='260' quality='high' src='" + url + "' type='application/x-shockwave-flash'/>\
						<PARAM value='" + url + "' name='movie' />\
						<PARAM value='high' name='quality' />\
					</OBJECT>"
				);

			if (url.endsWith(".flv"))
				this.ctrl.DESIGN.insertHTML
				(
					"<OBJECT height='260' width='320' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'>\
						<embed width='320' height='260' flashvars='file=" + url + "&displayheight=240&width=320&height=260&backcolor=0x000000&frontcolor=0xCCCCCC&lightcolor=0x557722&shuffle=false&repeat=list' allowfullscreen='true' quality='high' src='images/mediaplayer.swf' type='application/x-shockwave-flash'/>\
						<PARAM value='images/mediaplayer.swf' name='movie' />\
						<PARAM value='high' name='quality' />\
						<PARAM value='true' name='allowfullscreen' />\
						<PARAM value='file=" + url + "&displayheight=240&width=320&height=260&backcolor=0x000000&frontcolor=0xCCCCCC&lightcolor=0x557722&shuffle=false&repeat=list' name='flashvars' />\
					</OBJECT>"
				);
			Editor.uploadMediaWin.close();
			con.URL.value = "";
		}
		else
		{
			var w = con.FRAME.contentWindow;
			if (w && w.submitUpload && w.submitUpload())
			{
				Editor.uploadMediaWin.uploadComplete = function(url)
				{
					url = url[0];
					if (url.endsWith(".swf"))
						this.ctrl.DESIGN.insertHTML
						(
							"<OBJECT height='260' width='320' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'>\
								<embed width='320' height='260' quality='high' src='" + url + "' type='application/x-shockwave-flash'/>\
								<PARAM value='" + url + "' name='movie' />\
								<PARAM value='high' name='quality' />\
							</OBJECT>"
						);

					if (url.endsWith(".flv"))
						this.ctrl.DESIGN.insertHTML
						(
							"<OBJECT height='260' width='320' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'>\
								<embed width='320' height='260' flashvars='file=" + url + "&displayheight=240&width=320&height=260&backcolor=0x000000&frontcolor=0xCCCCCC&lightcolor=0x557722&shuffle=false&repeat=list' allowfullscreen='true' quality='high' src='images/mediaplayer.swf' type='application/x-shockwave-flash'/>\
								<PARAM value='images/mediaplayer.swf' name='movie' />\
								<PARAM value='high' name='quality' />\
								<PARAM value='true' name='allowfullscreen' />\
								<PARAM value='file=" + url + "&displayheight=240&width=320&height=260&backcolor=0x000000&frontcolor=0xCCCCCC&lightcolor=0x557722&shuffle=false&repeat=list' name='flashvars' />\
							</OBJECT>"
						);
					Editor.uploadMediaWin.close();
				}.handle(this);
			}
			else
				Editor.uploadMediaWin.close();
		}
	},

	_insertMediaCancel: function()
	{
		var con = Editor.uploadMediaWin._con;
		con.URL.value = "";
		Editor.uploadMediaWin.close();
	},

	_insertImageOK: function()
	{
		var con = Editor.uploadWin._con;
		var url = con.URL.value;
		var align = Editor.uploadWin._con.ALIGN.value;
		if (align == "left" || align == "right")
			align = " style='float:" + align + "' ";
		else
			align = " align='" + align + "' ";
		
		if (url != "")
		{
			this.ctrl.DESIGN.insertHTML
			(
				"<div " + align + "><img hspace='" + Editor.uploadWin._con.HOZ.value + 
				"' vspace='" + Editor.uploadWin._con.VER.value + "' src='" + con.URL.value + "' />" +
				"<div class='caption'>" + Editor.uploadWin._con.CAPTION.value + "</div></div>"
			);
			Editor.uploadWin.close();
			con.URL.value = "";
		}
		else
		{
			var w = con.FRAME.contentWindow;
			if (w && w.submitUpload && w.submitUpload(Editor.uploadWin._con.CAPTION.value))
			{
				Editor.uploadWin.uploadComplete = function(url)
				{
					switch (this.style)
					{
						case 0:
							this.ctrl.DESIGN.insertHTML
							(
								"<img " + align + " hspace='" + Editor.uploadWin._con.HOZ.value + 
								"' vspace='" + Editor.uploadWin._con.VER.value + "' src='" + url[0] + "' />"
							);
							break;
						case 1:
							var html = "<img hspace='" + Editor.uploadWin._con.HOZ.value + "' vspace='" + 
							Editor.uploadWin._con.VER.value + "' " + align + "src='" + url[0] + "' />" +
							"<a " + align + " href='" + url[2] + "' target='_blank'>" +
							"<img border='0' hspace='" + Editor.uploadWin._con.HOZ.value + "' vspace='" + 
							Editor.uploadWin._con.VER.value + "' src='" + url[1] + "' /></a>";
							this.ctrl.DESIGN.insertHTML(html);
							break;
					}
					Editor.uploadWin.close();
				}.handle(this);
			}
			else
				Editor.uploadWin.close();
		}
	},

	_insertImageCancel: function()
	{
		var con = Editor.uploadWin._con;
		con.URL.value = "";
		Editor.uploadWin.close();
	},

	_onUpdate: function()
	{
		for (var i = 0; i < this.toolbar.length; i++)
		{
			var cmds = this.toolbar[i];
			for (var j = 0; j < cmds.length; j++)
			{
				var cmd = cmds[j];
				switch (cmd)
				{
					case "Design":
					case "Code":
						this.ctrl[cmd].check(this.ctrl.DESIGN.mode == cmd);
						break;
					case "FontName":
					case "FontSize":
						this.ctrl[cmd].setValue(this.ctrl.DESIGN.getCommandValue(cmd));
						break;
					case "ForeColor":
					case "BackColor":
					case "-":
						break;
					default:
						this.ctrl[cmd].check(this.ctrl.DESIGN.getCommandValue(cmd));
						break;
				}
			}
		}
	},

	getHTML: function()
	{
		return this.textarea.value;
	}
};

/*======================== Editor.Button ========================*/
Editor.Button = new Class();
Editor.Button.prototype = 
{
	title	: null,
	cmd		: null,
	onclick	: null,
	
	create : function(parent)
	{
		var cons =
		[
			["DIV", {ID : "BUTTON", className : "CILA_Editor_Button", UNSELECTABLE : "on", title : this.title, onclick : this.onclick}, [
				["DIV", {className : "CILA_Editor_Button_Cmd CILA_Editor_Button_" + this.cmd, UNSELECTABLE : "on"}]
			]]
		];
		this.button = create(cons, parent).BUTTON;
		cons = null;
	},
	
	check : function(value)
	{
		this.button.className = value ? "CILA_Editor_Button_Checked" : "CILA_Editor_Button";
	}
};

/*======================== Editor.ButtonFontFamily ========================*/
Editor.ButtonFontFamily = new Class();
Editor.ButtonFontFamily.prototype = 
{
	fonts : [],
	onchange : null,
	
	create : function(parent)
	{
		var cons = [];
		for (var i = 0; i < this.fonts.length; i++)
		{
			var font = this.fonts[i];
			cons.push
			(
				["DIV", {className : "CILA_Editor_Button_FontFamilyItem", UNSELECTABLE : "on",
						 text : font, style : {fontFamily : font},
						 onclick : this._itemClick.eventHandle(this, font)
				}]
			);
		}
		this.ctrl = create
		(
			[
				["DIV", {className : "CILA_Editor_Button_FontFamily", UNSELECTABLE : "on", onclick : this._show.handle(this) }, [
					["SPAN", {ID : "TEXT", UNSELECTABLE : "on", text : "Select"}],
					["DIV", {className : "CILA_Editor_Button_FontFamilyBtn", UNSELECTABLE : "on"}],
					["DIV", {ID : "MENU", className : "CILA_Editor_Button_FontFamilyMenu", UNSELECTABLE : "on"}, cons]
				]]
			],
			parent
		);
		this.menu = new PopupMenu
		({
			menu		: this.ctrl.MENU,
			moveObj		: null,
			moved		: false,
			autoClose	: true
		});
		cons = null;
	},
	
	_show : function()
	{
		this.menu.show();
	},
	
	setValue : function(value)
	{
		Element.setText(this.ctrl.TEXT, value);
		this.ctrl.TEXT.style.fontFamily = value;
	},
	
	_itemClick : function(e, font)
	{
		this.setValue(font);
		this.menu.hide();
		if (this.onchange) this.onchange(font);
		Event.cancel(e);
	}
};

/*======================== Editor.ButtonFontSize ========================*/
Editor.ButtonFontSize = new Class();
Editor.ButtonFontSize.prototype = 
{
	sizes : [],
	onchange : null,
	
	create : function(parent)
	{
		var cons = [];
		for (var i = 0; i < this.sizes.length; i++)
		{
			var size = this.sizes[i];
			cons.push
			(
				["DIV", {className : "CILA_Editor_Button_FontFamilyItem", UNSELECTABLE : "on",
						onclick : this._itemClick.eventHandle(this, size),
						text : size, style : {fontSize : size * 9 + "px"}
				}]
			);
		}
		this.ctrl = create
		(
			[
				["DIV", {className : "CILA_Editor_Button_FontFamily", style : {width : "40px"}, UNSELECTABLE : "on", 
							onclick : this._show.handle(this) }, [
					["SPAN", {ID : "TEXT", text : "Select", UNSELECTABLE : "on"}],
					["DIV", {className : "CILA_Editor_Button_FontFamilyBtn", UNSELECTABLE : "on"}],
					["DIV", {ID : "MENU", UNSELECTABLE : "on", className : "CILA_Editor_Button_FontFamilyMenu", style : {width : "100px"}}, cons]
				]]
			],
			parent
		);
		this.menu = new PopupMenu
		({
			menu		: this.ctrl.MENU,
			moveObj		: null,
			moved		: false,
			autoClose	: true
		});
		cons = null;
	},
	
	setValue : function(value)
	{
		Element.setText(this.ctrl.TEXT, value);
	},
	
	_show : function()
	{
		this.menu.show();
	},
	
	_itemClick : function(e, size)
	{
		this.setValue(size);
		this.menu.hide();
		if (this.onchange) this.onchange(size);
		Event.cancel(e);
	}
};

/*======================== Editor.ButtonColor ========================*/
Editor.ButtonColor = new Class();
Editor.ButtonColor.prototype = 
{
	colors		: [],
	cmd			: null,
	onchange	: null,
	
	create : function(parent)
	{
		var cons = [],
			td   = [];
		for (var i = 0; i < this.colors.length;)
		{
			var color = this.colors[i];
			td.push
			(
				["TD", {UNSELECTABLE : "on"}, [
					["DIV", {className : "CILA_Editor_Button_ColorMenuItemContainer", UNSELECTABLE : "on",
							 onclick : this._itemClick.eventHandle(this, color)}, [
						["DIV", {className : "CILA_Editor_Button_ColorMenuItem", UNSELECTABLE : "on", style : {background : color}}]
					]]
				]]
			);
			i++;
			if (i % 8 == 0)
			{
				cons.push(["TR", {}, td]);
				td = [];
			}
		}
		this.ctrl = create
		(
			[
				["DIV", {className : "CILA_Editor_Button_Color", UNSELECTABLE : "on", onclick : this._show.handle(this) }, [
					["DIV", {className : "CILA_Editor_Button_Cmd CILA_Editor_Button_" + this.cmd, UNSELECTABLE : "on"}],
					["DIV", {ID : "MENU", className : "CILA_Editor_Button_ColorMenu", UNSELECTABLE : "on"}, [
						["TABLE", {cellPadding : 0, cellSpacing : 0, UNSELECTABLE : "on"}, cons]
					]]
				]]
			],
			parent
		);
		this.menu = new PopupMenu
		({
			menu		: this.ctrl.MENU,
			moveObj		: null,
			moved		: false,
			autoClose	: true
		});
		cons = null;
	},
	
	_show : function()
	{
		this.menu.show();
	},
	
	_itemClick : function(e, color)
	{
		this.menu.hide();
		if (this.onchange) this.onchange(color);
		Event.cancel(e);
	}
};

/*======================== Editor.DesignArea ========================*/
Editor.DesignArea = new Class();
Editor.DesignArea.prototype =
{
	height: "150px",
	mode: "Design",
	textarea: null,
	onupdate: null,

	designDoc: null,

	create: function(parent)
	{
		var cons = null;
		if (Browser.IE)
			cons =
			[
				["DIV", { ID: "DIV", style: { paddingRight: "2px"} }, [
					["IFRAME", { ID: "DESIGN", className: "CILA_Editor_DesignArea", frameBorder: 0, style: { height: this.height}}],
					["TEXTAREA", { ID: "CODE", className: "CILA_Editor_CodeArea", style: { height: this.height}}]
				]]
			];
		else
			cons =
			[
				["DIV", { ID: "DIV", style: { paddingRight: "2px"} }, [
					["IFRAME", { ID: "DESIGN", className: "CILA_Editor_DesignArea", onload: this._create.handle(this), src: "about:blank", frameBorder: 0, style: { height: this.height}}],
					["TEXTAREA", { ID: "CODE", className: "CILA_Editor_CodeArea", style: { height: this.height}}]
				]]
			];

		this.ctrl = create(cons, parent);
		cons = null;
		if (Browser.IE) this._create();
	},

	_create: function()
	{
		this.switchMode("Design", true);

		this.designWin = this.ctrl.DESIGN.contentWindow;
		this.designDoc = this.designWin.document;

		this.designDoc.designMode = "on";
		this.designDoc.open('text/html', 'replace');
		this.initDesignDoc();
		this.designDoc.close();
		this.designDoc.contentEditable = true;
		this.designDoc.spellcheck = false;

		//Add event
		if (Browser.IE)
		{
			this.designDoc.onmousedown = this._designDocMouseDown.eventHandle(this);
			this.designDoc.onmouseup = this._designDocMouseUp.eventHandle(this);
			this.designDoc.onkeyup = this._onKeyDown.eventHandle(this);
			this.ctrl.CODE.onkeyup = this._onKeyDown.eventHandle(this);
		}
		else
		{
			this.designDoc.addEventListener('mousedown', this._designDocMouseDown.eventHandle(this), true);
			this.designDoc.addEventListener('mouseup', this._designDocMouseUp.eventHandle(this), true);
			this.designDoc.addEventListener('keyup', this._onKeyDown.eventHandle(this), true);
			this.designDoc.addEventListener('keypress', this._onKeypress.eventHandle(this), true);
			this.ctrl.CODE.addEventListener('keyup', this._onKeyDown.eventHandle(this), true);
		}
	},

	initDesignDoc: function()
	{
		this.designDoc.write
		(
			"<html><head><style>.caption{color:#777; font-size:10px; text-align:center}</style>" + "<body bgcolor='" + this.background +
			"' style='color:" + this.color + "'>" + this.textarea.value + "</body></head></html>"
		);
				
		this.designDoc.body.style.fontFamily = "Verdana";
		this.designDoc.body.style.fontSize = "12px";
	},

	updateDocument: function()
	{
		if (this.mode == "Design")
			this.designDoc.body.innerHTML = this.ctrl.CODE.value;
		else
			this.ctrl.CODE.value = this.designDoc.body.innerHTML;
	},

	switchMode: function(newMode, noupdate)
	{
		this.mode = newMode;
		if (!noupdate)
			this.updateDocument();
		if (this.mode == "Design")
		{
			Element.show(this.ctrl.DESIGN);
			Element.hide(this.ctrl.CODE);
		}
		else
		{
			Element.hide(this.ctrl.DESIGN);
			Element.show(this.ctrl.CODE);
		}
	},

	execCommand: function(cmd, value, opt)
	{
		if (this.mode == 'Design')
		{
			try
			{
				this.designDoc.body.focus();
				if (cmd == "BackColor" && !Browser.IE) cmd = "hilitecolor";
				this.designDoc.execCommand(cmd, opt, value);
				this.textarea.value = this.designDoc.body.innerHTML;
				if (this.onupdate) this.onupdate();
			} catch (e) { }
		}
	},

	_ieRange: null,
	prepareSelection: function()
	{
		this.designDoc.body.focus();
		if (Browser.IE)
			this._ieRange = this.designDoc.selection.createRange();
	},

	insertHTML: function(html)
	{
		if (this.mode == 'Design')
		{
			try
			{
				if (Browser.IE)
				{
					this.designDoc.body.focus();
					if (this._ieRange == null) this.prepareSelection(); 
					if (this._ieRange != null)
						this._ieRange.pasteHTML(html);
					this._ieRange.select();
					this._ieRange = null;
				}
				else
					this.designDoc.execCommand('insertHTML', false, html);

				this.textarea.value = this.designDoc.body.innerHTML;
				if (this.onupdate) this.onupdate();
			} catch (e) { }
		}
	},

	getCommandValue: function(cmd)
	{
		if (this.mode == 'Design')
		{
			try
			{
				var value = null;
				switch (cmd)
				{
					case 'FontName':
						value = this.designDoc.queryCommandValue(cmd);
						value = value.split(",")[0];
						if (value == "")
							value = this.designDoc.body.style.fontFamily.split(",")[0];
						break;
					case 'FontSize':
						value = this.designDoc.queryCommandValue(cmd);
						if (value == null || value == "")
							value = 2;
						break;
					case 'BackColor':
					case 'ForeColor':
						break;
					default:
						value = this.designDoc.queryCommandState(cmd);
						break;
				}
				return value;
			} catch (e) { };
		}
		return null;
	},

	_onKeyDown: function(e)
	{
		if (!e) e = this.designWin.event;
		var code = e.charCode ? e.charCode : e.keyCode;
		switch (code)
		{
			case 37:
			case 38:
			case 39:
			case 40:
				if (this.onupdate && this.mode == "Design") this.onupdate();
				break;
			default:
				if (this.mode == "Design") this.textarea.value = this.designDoc.body.innerHTML;
				if (this.mode == "Code") this.textarea.value = this.ctrl.CODE.value;
				break;
		}
	},

	_onKeypress: function(e)
	{
		if (e.ctrlKey)
		{
			var code = e.charCode ? e.charCode : e.keyCode;
			var cmd = null;
			switch (String.fromCharCode(code).toLowerCase())
			{
				case 'b': cmd = 'Bold'; break;
				case 'i': cmd = 'Italic'; break;
				case 'u': cmd = 'Underline'; break;
				default: return;
			}
			Event.cancel(e);
			this.execCommand(cmd, null);
			return false;
		}
	},

	_designDocMouseDown: function()
	{
		if (document.onmousedown) document.onmousedown();
	},

	_designDocMouseUp: function()
	{
		if (this.onupdate) this.onupdate();
	}
};