//<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

// -- 전역변수 선언 -- //


// 색깔정보
var colortone = new Array(10);
colortone[0] = new Array('#ffffff','#e5e4e4','#d9d8d8','#c0bdbd','#a7a4a4','#8e8a8b','#827e7f','#767173','#5c585a','#000000');
colortone[1] = new Array('#fefcdf','#fef4c4','#feed9b','#fee573','#ffed43','#f6cc0b','#e0b800','#c9a601','#ad8e00','#8c7301');
colortone[2] = new Array('#ffded3','#ffc4b0','#ff9d7d','#ff7a4e','#ff6600','#e95d00','#d15502','#ba4b01','#a44201','#8d3901');
colortone[3] = new Array('#ffd2d0','#ffbab7','#fe9a95','#ff7a73','#ff483f','#fe2419','#f10b00','#d40a00','#940000','#6d201b');
colortone[4] = new Array('#ffdaed','#ffb7dc','#ffa1d1','#ff84c3','#ff57ac','#fd1289','#ec0078','#d6006d','#bb005f','#9b014f');
colortone[5] = new Array('#fcd6fe','#fbbcff','#f9a1fe','#f784fe','#f564fe','#f546ff','#f328ff','#d801e5','#c001cb','#8f0197');
colortone[6] = new Array('#e2f0fe','#c7e2fe','#add5fe','#92c7fe','#6eb5ff','#48a2ff','#2690fe','#0162f4','#013add','#0021b0');
colortone[7] = new Array('#d3fdff','#acfafd','#7cfaff','#4af7fe','#1de6fe','#01deff','#00cdec','#01b6de','#00a0c2','#0084a0');
colortone[8] = new Array('#edffcf','#dffeaa','#d1fd88','#befa5a','#a8f32a','#8fd80a','#79c101','#3fa701','#307f00','#156200');
colortone[9] = new Array('#d4c89f','#daad88','#c49578','#c2877e','#ac8295','#c0a5c4','#969ac2','#92b7d7','#80adaf','#9ca53b');

// -- Div 영역 -- //
// 색상 선택에 대한 Div
var htmlCode = "";
htmlCode
		= "<div id=colorbox style='position:absolute; left:235pt; top:0pt; display:none; font-family:돋움; font-size:9pt;' onmouseleave=\"this.style.display='none';\">"
		+ "<table width=129 cellpadding=0 cellspacing=0 border=0 style='border:solid 1px #CFBE8A; font-family:돋움; font-size:9pt; background-color:#FFFFFF;'>";
		for (var i=0; i<10; i++){
			htmlCode += "<tr>";
			for(var j=9; j>=0; j--){
				htmlCode += "<td onmouseover=this.style.backgroundColor='#444444' onmouseout=this.style.backgroundColor='#FFFFFF'>"
									+ "<table cellpadding=0 cellspacing=1 border=0><tr><td bgcolor='" + colortone[j][i]
									+ "' width=12 height=9 onclick=\"SetFontColor('"+colortone[j][i]+"')\"></td></tr></table></td>";
			}
			htmlCode += "</tr>";
		}
htmlCode
		+=
		+ "<tr>"
		+ "<td colspan=10>"
		+ "직접입력 : <input type=text name=fontcolor size=7 maxlength=7 style='font-family:돋움; font-size:9pt; border:1 solid #DDDDDD'> "
		+ "<input type=button value='입력' onclick=\"SetFontColor(document.all.fontcolor.value)\""
		+ "style='font-family:돋움; font-size:9pt; border:1 solid #DDDDDD'>"
		+ "</td>"
		+ "</table>"
		+ "</div>";

document.write (htmlCode);


var Selection;
// 문자열 디코딩
function ContentsDecode(str) {
	str = str.replace(/&lt;/gi,"<");
	str = str.replace(/&gt;/gi,">");
	str = str.replace(/&amp;/gi,"&");
	return str;
};

// 색상 지정
function SetFontColor(color) {
	var frameobj = eval(targetframe);

	frameobj.focus();
	/*
	Selection = frameobj.document.selection.createRange();
	*/
	if (Selection!=null) Selection.select();

	if (targetcolor == "1")
		frameobj.document.execCommand("ForeColor", null, color);		// 폰트색상
	else
		frameobj.document.execCommand("BackColor", null, color);		// 배경색상

	colorbox.style.display = "none";
	//frameobj.document.selection.empty()
	frameobj.focus();
}

// 색깔 선택
var targetcolor = "";
var targetframe = "";
function FontColor(objName, target) {
	var x, y;
	var obj = eval(objName);

	var rct = obj.getClientRects();

	x = rct[0].left + ((target == "1") ? 295 : 315);
	y = rct[0].top + 15;

	colorbox.style.pixelTop = y;
	colorbox.style.pixelLeft = x;
	colorbox.style.display = "inline";

	targetcolor = target;
	targetframe = objName+"_frame";
}


// -- Fucntions -- //

// 에디터모드, html모드 변경을 위한 함수
function chViewFlag(obj, type){
	var menuBarF = eval(obj+"_menuBarF");
	var editerF = eval(obj);
	var divText = eval(obj+"No");
	var frameobj = eval(obj+"_frame");
	var editerBt = document.all.write_style[0];
	var write_type = document.all.writeType;

	if( type == "editer" ) {
		frameobj.document.body.innerHTML = textObj.value;
		menuBarF.style.display	= "inline";
		editerF.style.display		= "inline";
		divText.style.display		= "none";
		write_type.value	= 1;
	} else if( type == "text") {
		textObj.value = frameobj.document.body.innerHTML;
		menuBarF.style.display	= "none";
		editerF.style.display		= "none";
		divText.style.display		= "inline";
		write_type.value	= 0;
	}

	return ;
}

// 글꼴 적용
function chFont(obj, ch) {
	var frameobj = eval(obj+"_frame");

	frameobj.focus();
	Selection = frameobj.document.selection.createRange();
	if(Selection!=null) Selection.select();

	if(ch != '') frameobj.document.execCommand("fontname", null, ch);

	frameobj.focus();
	return ;
}

// 글꼴 크기 적용
function chFontSize(obj, ch) {
	var frameobj = eval(obj+"_frame");

	frameobj.focus();
	Selection = frameobj.document.selection.createRange();
	if (Selection!=null) Selection.select();

	if (ch != '') frameobj.document.execCommand("fontsize", null, ch);

	frameobj.focus();
	return ;
}

// Button Processor
function pcButton(obj, order) {
	var frameobj = eval(obj+"_frame");

	frameobj.focus();
	Selection = frameobj.document.selection.createRange();
	if (Selection!=null) Selection.select();

	colorbox.style.display = "none";

	if (order == "fontcolor") {
		FontColor(obj, '1');
	}
	else if (order == "bgcolor") {
		FontColor(obj, '2');
	}	else {
		frameobj.document.execCommand(order);
	}
	frameobj.focus();
	return ;
}


// -- CImBbsEditer -- //
// 생성자
var editObj;
var textObj;
function CImBbsEditer(obj, txtObj) {
	this.config = {
		fontName								: "돋움",
		fontSize								: "9pt",
		fontColor								: "#404040",
		editorFontName					: "돋움체",
		editorFontSize					: "9pt",
		editorFontColor					: "#404040",
		crMenuBar								: "#FFFFFF",	// 메뉴바 바탕 색
		selectFontName					: "돋움",
		selectFontSize					: "9pt",
		selectFontColor					: "#404040",
		imagePath								: "http://img.imtel.com/www/board/edit/",
		programName							: "웹에디터",
		companyName							: "imtel.net",
		version									: "1.0"
	};
	this.icon = {
		split						: "w_icon_00.gif",
		bold						: "w_icon_01.gif",
		underline				: "w_icon_02.gif",
		italic						: "w_icon_03.gif",
		line						: "w_icon_04.gif",
		color					: "w_icon_05.gif",
		bgcolor				: "w_icon_06.gif",
		url						: "w_icon_06_url.gif",
		left						: "w_icon_07.gif",
		center					: "w_icon_08.gif",
		right						: "w_icon_09.gif",
		outdent				: "w_icon_10.gif",
		indent					: "w_icon_11.gif",
		orderlist				: "w_icon_12.gif",
		unorderlist			: "w_icon_13.gif",
		table					: "w_icon_16.gif",
		design					: "w_icon_14.gif",
		design_check		: "w_icon_14_check.gif",
		html						: "w_icon_15.gif",
		html_check			: "w_icon_15_check.gif"
	};
	this.obj						= editObj = obj;
	textObj				= txtObj;
};

CImBbsEditer.prototype.init = function(){
	var html;
	// 뷰 모드 출력
	html	= "<table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>"
				+ 	"<tr height=100% bgcolor="+this.config.crMenuBar+">"
				+ 		"<td>"
				+				"<input type=radio name=write_style onclick=\"chViewFlag('"+this.obj.id+"', 'editer');\" checked=true>HTML"
				+ 		"</td>"
				+			"<td>"
				+				"<input type=radio name=write_style onclick=\"chViewFlag('"+this.obj.id+"', 'text');\">Text(simplicity)"
				+			"</td>"
				+ 	"</tr>"
				+	"</table>";
	eval(this.obj.id+"_viewFlag").innerHTML = html;
	// 메뉴바 출력
	html	= "<div id='"+this.obj.id+"_menuBarF'>"
				+ "<table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>"
				+ 	"<tr height=100% bgcolor="+this.config.crMenuBar+">"
				+ 		"<td style='font-family:"+this.config.fontName+";font-size:"+this.config.fontSize+";'>"
				
				// 글꼴지정
				+ "<select name='fontface' onchange=\"chFont('"+this.obj.id + "', this.value)\" class=\"select\">"
				+ "<option>-- 글꼴 --&nbsp;&nbsp;&nbsp;&nbsp;</option>"
				+ "<option value='돋움'>돋움</option>"
				+ "<option value='돋움체'>돋움체</option>"
				+ "<option value='굴림'>굴림</option>"
				+ "<option value='굴림체'>굴림체</option>"
				+ "<option value='바탕'>바탕</option>"
				+ "<option value='바탕체'>바탕체</option>"
				+ "<option value='궁서'>궁서</option>"
				+ "<option value='궁서체'>궁서체</option>"
				+ "<option value='arial'>Arial</option>"
				+ "<option value='courier'>Courier</option>"
				+ "<option value='tahoma'>Tahoma</option>"
				+ "<option value='times'>Times</option>"
				+ "<option value='verdana'>Verdana</option>"
				+ "</select>"
				
				// 글꼴크기
				+ "<select name='fontsize'  onchange=\"chFontSize('"+this.obj.id + "', this.value)\" class=\"select\">"
				+ "<option>크기</option>"
				+ "<option value='1'>7</option>"
				+ "<option value='2'>10</option>"
				+ "<option value='3'>12</option>"
				+ "<option value='4'>14</option>"
				+ "<option value='5'>18</option>"
				+ "<option value='6'>24</option>"
				+ "<option value='7'>36</option>"
				+ "</select>"
		
				// 글자 선택 기능 사용여부 확인
				+ "&nbsp;<img src='"+this.config.imagePath+this.icon.split+"' align=absmiddle>&nbsp;"
				// 글자 굵게
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'Bold');\"><img src='"+this.config.imagePath+this.icon.bold+"' align=absmiddle border=0></a>"
				// 글자 밑줄
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'Underline');\"><img src='"+this.config.imagePath+this.icon.underline+"' align=absmiddle border=0></a>"
				// 글자 이탤릭
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'Italic');\"><img src='"+this.config.imagePath+this.icon.italic+"' align=absmiddle border=0></a>"
				// 글자 취소줄
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'strikethrough');\"><img src='"+this.config.imagePath+this.icon.line+"' align=absmiddle border=0></a>"
				// 글자 색
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'fontcolor');\"><img src='"+this.config.imagePath+this.icon.color+"' align=absmiddle border=0></a>"
				// 글자 배경색
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'bgcolor');\"><img src='"+this.config.imagePath+this.icon.bgcolor+"' align=absmiddle border=0></a>"
				// 글자 정렬
				+ "&nbsp;<img src='"+this.config.imagePath+this.icon.split+"' align=absmiddle>&nbsp;"
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'justifyleft');\"><img src='"+this.config.imagePath+this.icon.left+"' align=absmiddle border=0></a>"
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'justifycenter');\"><img src='"+this.config.imagePath+this.icon.center+"' align=absmiddle border=0></a>"
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'justifyright');\"><img src='"+this.config.imagePath+this.icon.right+"' align=absmiddle border=0></a>"
				+ "&nbsp;<img src='"+this.config.imagePath+this.icon.split+"' align=absmiddle>&nbsp;"
				// INDENT
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'Indent');\"><img src='"+this.config.imagePath+this.icon.indent+"' align=absmiddle border=0></a>"
				// OUTDENT
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'Outdent');\"><img src='"+this.config.imagePath+this.icon.outdent+"' align=absmiddle border=0></a>"
				// ORDERLIST
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'InsertOrderedList');\"><img src='"+this.config.imagePath+this.icon.orderlist+"' align=absmiddle border=0></a>"
				// UNORDERLIST
				+ "<a href=\"javascript:pcButton('"+this.obj.id + "', 'InsertUnorderedList');\"><img src='"+this.config.imagePath+this.icon.unorderlist+"' align=absmiddle border=0></a>"
				+ 		"</td>"
				+ 	"</tr>"
				+	"</table>"
				+ "</div>";
	eval(this.obj.id+"_menuBar").innerHTML = html;
	// 에디터 출력
	html	= "<table border=0 cellpadding=0 cellspacing=0 width=100% height=100%>"
				+ 	"<tr height=100%>"
				+ 		"<td>"
				+				"<iframe id='"+this.obj.id+"_frame' src='about:blank' frameborder=0 width=100% height=100% "
				+				"scrolling='auto' style=\"border:2 solid  "+this.config.crMenuBar+";\"></iframe>"
				+ 		"</td>"
				+			"<td>"
				+			"</td>"
				+ 	"</tr>"
				+	"</table>";
	this.obj.innerHTML = html;
	// 에디터 프레임 초기화
	
	html	= "<html>"
	 			+ "<head>"
	 	 		+ "<style>"
		 		+ "	P {margin-top:1px;margin-bottom:1px;}"
	 			+ "	.view { line-height: 140%; word-break:break-all; text-align:justify }"
		 		+ "</style>"
	 			+ "</head>"
	 			+ "<body style='font-family:"+this.config.fontName+";font-size:"+this.config.fontSize+";color:"+this.config.fontColor+"' class='view' >"
		 		+ "</body>"
		 		+ "</html>";
	// 입력화면 환경설정
	var frameobj = eval(this.obj.id + "_frame");
 
	// 에디터 초기화
	frameobj.document.designMode = "On";
	frameobj.document.open("text/html");
	frameobj.document.write(html);
	frameobj.document.close();

	frameobj.document.body.innerHTML = textObj.value;
}

CImBbsEditer.prototype.editSubmit = function(){
	var divText = eval(this.obj.id+"No");
	var frameobj = eval(this.obj.id+"_frame");
	if( divText.style.display == "none" ) {
		textObj.value = frameobj.document.body.innerHTML;
	}
}

CImBbsEditer.prototype.editReset = function(){
	var divText = eval(this.obj.id+"No");
	var frameobj = eval(this.obj.id+"_frame");
	frameobj.document.body.innerHTML = "";
}