
/*******************************************
# by ju0207™ (2007.02.20)
# DHTML 웹에디터 JuWebEditor()
# 버전 : Beta 1.0
*******************************************/



//변수설정
var JuConfig = {
	//----------------------------------------------------
	//style
	border:"1px solid #cdcdcd",	//기본 border
	bgcolor : "#fff",						//기본 bgcolor
	font : "normal 10pt 굴림",		//기본 폰트 style(font-style, font-variant, font-weight)
	color : "#000",							//기본 폰트 컬러
	margin : "5px",						//내부 margin
	width : "100%",						//기본 width
	height : "200px",						//기본 height
	//----------------------------------------------------
	filepath : ".",	
	imgpath : "/images/board/editor",	//버튼 이미지경로
	over_bordercolor : "#facf98",			//버튼 오버시 보더컬러
	over_bgcolor : "#ffffea",					//버튼 오버시 bgcolor
	divbtn_bgcolor : "#e7e7e7",				//버튼 영역 div bgcolor
	//----------------------------------------------------


	//기본버튼 
	Btn : null,
	BtnList : {
		save		: ["문서 저장","save.gif"],
		all			: ["전체선택","selectall.gif"], 
		undo	: ["되돌리기","undo.gif"],
		redo		: ["재실행","redo.gif"],
		font		: ["글자체","font.gif"], 
		size		: ["글자크기","size.gif"],
		color		: ["글자색","color.gif"],
		hilite		: ["글자 배경색","hilite.gif"],
		bold		: ["굵게","bold.gif"], 
		italic		: ["기울리기","italic.gif"],
		underline : ["밑줄","underline.gif"], 
		strike	: ["취소선","strike.gif"],
		sup		: ["윗첨자","sup.gif"],
		sub		: ["아래첨자","sub.gif"],
		clean	: ["스타일 지움","clean.gif"],
		del		: ["선택삭제","del.gif"], 
		outdent : ["내어쓰기","outdent.gif"],
		indent	: ["들여쓰기","indent.gif"],
		ul1		: ["번호달기","ul1.gif"],
		ul2		: ["기호달기","ul2.gif"], 
		left		: ["왼쪽 맞춤","left.gif"],
		center	: ["가운데 맞춤","center.gif"],
		right		: ["오른쪽 맞춤","right.gif"],
		justify	: ["혼합정렬","justify.gif"], 
		hr			: ["수평선 삽입","hr.gif"],
		 link		: ["링크 삽입","link.gif"],
		unlink	: ["링크 해제","unlink.gif"],		
		source  : ["소스보기","source.gif"],
		bar		 : ["구분선","bar.gif"]
	},	
	//----------------------------------------------------
	//기본버튼템플릿 (all,simple)
	BtnTemplate  : {
		all : ["font","size","bar",
				"all","undo","redo","bar",
				"color","hilite","bar",
				"bold","italic","underline","strike","bar",
				"sup","sub","bar",
				"clean","del","bar",
				"hr","link","unlink","bar",
		"outdent","indent","bar",
				"ul1","ul2","bar",
				"left","center","right","justify","bar",
				"table","image","bar",
				"preview","bar",
				"source"],
		simple : ["source","bar","bold","color","hilite"]
	},
	version : "Beta",
	name : "JuWebEditor"
}

// JuEditor
function JuEditor(id)
{
	if(typeof(document.execCommand)=="undefined") return;
	JuUtil.init();
	//config설정
	this.cfg = JuConfig;
	this.cfg.preid = JuConfig.name+"_"+id;
	this.cfg.Btn = JuConfig.BtnTemplate["all"]; //기본 버튼 템플릿
	this.mode = "ju";
	this.btn = "";
	this.sel	  = null;
	this.range	  = null;
	this.sel_html = "";
	this._doc		= null;
	this._textarea	= document.getElementById(id);
	this._div		= document.createElement("div");		//전체 div
	this._divbtn	= document.createElement("div");		//버튼영역 div
	this._iframe	= document.createElement("iframe");		//iframe
	this._text		= document.createElement("textarea");	//textarea(source)
	this._div.id	= this.cfg.preid+"_div";
	this._divbtn.id	= this.cfg.preid+"_divbtn";
	this._iframe.id	= this.cfg.preid+"_iframe";
	this._text.id	= this.cfg.preid+"_text";
}


//JuEditor.init
JuEditor.prototype.init = function()
{	
	this._textarea.style.display="none";
	//source
	this._text.style.width = this.cfg.width;
	this._text.style.height= this.cfg.height;
	this._text.style.border= "none";
	this._text.style.display="none";
	this._text.style.font = "9pt 굴림";
	this._text.style.background = "#efefef url("+this.cfg.imgpath+"/source_bg.gif) 0 -2px";
	this._text.style.lineHeight = "165%";
	//iframe
	this._iframe.style.width = this.cfg.width;
	this._iframe.style.height= this.cfg.height;	
	this._iframe.frameBorder = "no";
	//전체 div	
	this._div.style.border	= this.cfg.border;
	this._div.style.width	= this.cfg.width;
	//버튼 div		
	this._divbtn.style.padding	="2px";
	this._divbtn.style.backgroundColor = this.cfg.divbtn_bgcolor;
	this._divbtn.style.borderBottom = this.cfg.border;
	if(JuUtil.isIE) {this._divbtn.style.width = this.cfg.width;}	
	//삽입
	this._textarea.parentNode.insertBefore(this._div, this._textarea);
	this._div.appendChild(this._divbtn);
	this._div.appendChild(this._iframe);
	this._div.appendChild(this._text);	
	//버튼요소 삽입
	this.setBtn();
	//iframe doc
	this._doc = this._iframe.contentWindow.document;
	this._doc.designMode="on";
	//기본 css설정 
	var css  = "body{margin:"+this.cfg.margin+";background-color:"+this.cfg.bgcolor+";}";
	css		+= " body,table,td{font:"+this.cfg.font+";color:"+this.cfg.color+";}";
	this._iframe.css = css;
	this._doc.open();
	this._doc.write('<html><head><style type="text/css">'+css+'</style></head><body>'+this._textarea.value+'</body></html>');
	this._doc.close();
	
	var self=this;
	JuUtil.addEvent(this._doc, "mousedown", JuUtil.hideDiv);
	if(JuUtil.isIE)
	{
		JuUtil.addEvent(this._doc, "keydown", function(e) {
			var range=self._doc.selection.createRange();
			if(e.keyCode==13 && range.parentElement().tagName!="LI")
			{			
				e.cancelBubble=true; e.returnValue=false;
				range.pasteHTML("<br />"); range.select(); return false;
			}
		});
	}
};

//JuEditor.setBtn
JuEditor.prototype.setBtn = function()
{
	this.cfg.Btn.push("bar");
	var arr=this.cfg.Btn;
	var len=arr.length; var str=order=tmp=""; var btn=tag=null;
	var self=this; var bgcolor=this.cfg.divbtn_bgcolor;
	var over_bordercolor=this.cfg.over_bordercolor;
	var over_bgcolor=this.cfg.over_bgcolor;

	for(var i=0;i<len;i++)
	{
		tmp = "";
		order = JuUtil.trim(arr[i]);		
		btn = this.cfg.BtnList[order];

		if(order!="br" && !btn)
		{	
			if(order!="") alert("없는 버튼명령입니다 ("+order+")");
			continue;
		}
		if(order=="bar")
		{
			tag			= document.createElement("img");
			tag.src		= this.cfg.imgpath+"/"+btn[1];
			tag.width	= 2;
			tag.height	= 18;
			tag.hspace	= 4;
			tag.align	="absmiddle";
			this._divbtn.appendChild(tag);
		}
		else if(order=="br") //br
		{
			this._divbtn.appendChild(document.createElement("br"));
		}
		else
		{
			tag			= document.createElement("img");
			tag.id		= this.cfg.preid+"_btn_"+order;
			tag.src		= this.cfg.imgpath+"/"+btn[1];
			tag.align	="absmiddle";
			tag.alt		= btn[0];
			tag.cmd		= order;
			tag.style.cursor="pointer";
			tag.style.border="1px solid "+this.cfg.divbtn_bgcolor;
					
			tag.onclick = function() { self.cmd(this, this.cmd); };
			tag.onmouseover = function() 
				{ this.style.border="1px solid "+over_bordercolor;this.style.backgroundColor=over_bgcolor; };
			tag.onmouseout = function() 
				{ this.style.border="1px solid "+bgcolor;this.style.backgroundColor=""; };
			this._divbtn.appendChild(tag);
		}
	}
};
//JuEditor.cmd
JuEditor.prototype.cmd = function(btn, order, value) 
{
	var self = (this) ? this:JuUtil._editor;
	var doc = self._doc;
	if(self.mode=="text" && order!="source") {alert("'소스보기' 해제후 사용해 주세요!");	return;}
	self.focus();
	JuUtil.hideDiv();	self.btn = btn;

	try{var create_func = self.cfg.BtnList[order][2];}catch(e) {}
	if(typeof(create_func)=="function")	order = "create_order";

	switch(order)
	{		
		case "create_order":	//사용자 추가명령
			self.setSelection();
			JuUtil._editor = self;
			JuUtil.order = order;
			create_func(self);
		break;
		case "hyperlink": 	
			var link_text = (self.sel_html) ? self.sel_html : JuUtil._linktxt.value;
			var html = "<a href='"+JuUtil._linktxt.value+"' target='_blank'>"+link_text+"</a>";
			self.innerHTML(html);			
		break;
		case "color":
		case "hilite":
		case "font":
		case "size":
		case "link":
			var div=null;
			if(order=="color")		{ order = "forecolor"; JuUtil.tblSet_color(); div=JuUtil._colortbl;}
			else if(order=="hilite"){ order = "hilitecolor"; JuUtil.tblSet_color(); div=JuUtil._colortbl;}
			else if(order=="font")	{ order = "fontname"; JuUtil.tblSet_font(); div=JuUtil._fonttbl;}
			else if(order=="size")	{ order = "fontsize"; JuUtil.tblSet_size(); div=JuUtil._sizetbl;}
			else if(order=="link") 
			{
				order = "hyperlink"; 
				JuUtil.tblSet_link();
				div=JuUtil._linktbl; 
				JuUtil._linktxt.value = "http://";
				self.setSelection();
			}
		
			JuUtil._editor = self;
			JuUtil.order = order;
			JuUtil.showDiv(div);
		break;
		case "source":
			if(self.mode=="ju")
			{
				self._text.value = self.getHtml();
				self._iframe.style.display = "none";
				self._text.style.display = "";
				btn.onmouseout = null;
				self.mode="text";				
			}
			else if(self.mode=="text")
			{
				doc.body.innerHTML = self.getHtml();
				self._text.style.display = "none";
				self._iframe.style.display = "";
				bgcolor = self.cfg.divbtn_bgcolor;
				btn.onmouseout = function() 
					{ this.style.border="1px solid "+bgcolor;this.style.backgroundColor=""; };
				self.mode="ju";
			}
		break;
		default:
			if(order=="strike")			order = "strikethrough";
			else if(order=="ul1")		order = "insertorderedlist";
			else if(order=="ul2")		order = "insertunorderedlist";			
			else if(order=="hr")		order = "inserthorizontalrule";
			else if(order=="clean")	order = "removeformat";
			else if(order=="save")	order = "saveas";
			else if(order=="all")		order = "selectall";
			else if(order=="sup")		order = "superscript";
			else if(order=="sub")		order = "subscript";
			else if(order=="del")		order = "delete";
			else if(order=="justify")	order = "justifyfull";
			else if(order=="center"||order=="left"||order=="right") order = "justify"+order; 
			else if(order=="hilitecolor" && JuUtil.isIE) order = "backcolor";
			doc.execCommand(order, false, value);
		break;
	}
};

//JuEditor.focus
JuEditor.prototype.focus = function() 
{
	if(this.mode=="text") this._text.focus();
	else this._iframe.contentWindow.focus();
}

//JuEditor.getHtml
JuEditor.prototype.getHtml = function() 
{
	var html = "";
	var doc = this._doc;
	if(this.mode=="text") html = this._text.value;
	else
	{
		for(i in doc.links) { if(!doc.links[i].target) doc.links[i].target = "_blank"; }
		html = doc.body.innerHTML;
	}
	this._textarea.value = html;
	return html;
}

//JuEditor.setSelection
JuEditor.prototype.setSelection = function() 
{
	var _iframe=this._iframe;
	var sel=null,range=null,html="";

	if(this._doc.selection)
	{
		sel = this._doc.selection;
		range = sel.createRange();
		html = range.htmlText;
	}
	else if(_iframe.contentWindow.getSelection)
	{
		sel=_iframe.contentWindow.getSelection();
		if (typeof(sel)!="undefined") range=sel.getRangeAt(0);
		else range=this._doc.createRange();
		if(sel.rangeCount > 0 && window.XMLSerializer)
		{	
			html=new XMLSerializer().serializeToString(range.cloneContents());
		}
	}
	this.sel = sel;
	this.range = range;
	this.sel_html = html;
}

//JuEditor.innerHTML
JuEditor.prototype.innerHTML = function(html) 
{
	if(JuUtil.mode=="text") return;
	if(this.range.pasteHTML) this.range.pasteHTML(html);
	else this._doc.execCommand("inserthtml", false, html);
}

var JuUtil = {	
	_editor : null,	_colortbl : null,
	_fonttbl : null, _sizetbl : null,
	_linktbl : null, _linktxt : null,
	arrtbl : new Array("color","font","size","link"),
	order : "",
	is_init : 0,
	isIE : (window.showModalDialog) ? 1:0,
	
	init : function()
	{
		if(JuUtil.is_init) return;

		var s="<style>";
		s += ".JuWebEditorDiv a {text-decoration:none;color:#000}"
		s += "#"+JuConfig.name+"_colortbl a {border:1px solid #f5f5f5;padding:0 6px;height:9px;font:8px verdana;text-decoration:none}";
		s += "</style>";
		document.write(s);
		JuUtil.is_init=1;
	},	
	showDiv : function(div)
	{
		var btn = JuUtil._editor.btn;
		div.style.top= JuUtil.curTop(btn) + btn.offsetHeight + "px";
		div.style.left = JuUtil.curLeft(btn) + "px";
		div.style.display="";
	},
	hideDiv : function()
	{
		if(typeof(JuUtil)!="object") return;
		for(var i=0; i<JuUtil.arrtbl.length; i++)
		{
			try{ eval('JuUtil._'+JuUtil.arrtbl[i]+'tbl.style.display="none"'); }
			catch(e) { }
		}
	},
	curTop : function(el) 
	{
		var top = el.offsetTop;
		var parent = el.offsetParent;
		while(parent) {	top += parent.offsetTop; parent = parent.offsetParent; }
		return top;
	},
	curLeft : function(el) 
	{
		var left = el.offsetLeft;
		var parent = el.offsetParent;
		while(parent) {	left += parent.offsetLeft; parent = parent.offsetParent; }
		return left;
	},
	tblSet_link : function()
	{	
		if(JuUtil._linktbl) return;
		var id = JuConfig.name+"_linktxt";
		var s = "<input type='text' value='http://' style='width:200px;font:8pt 돋움;color:gray' id='"+id+"' /><br>";
		s += "링크주소(URL)를 넣어주세요<br><br>";
		s += "<a href='javascript:;' onclick=\"JuUtil._editor.cmd(null, JuUtil.order, '');\">- 확인 -</a>";
		
		var div = JuUtil.getDiv(JuConfig.name+"_linktbl",s);
		div.style.padding = "5px";
		div.style.font = "8pt 돋움";
		document.body.appendChild(div);
		JuUtil._linktbl = div;
		JuUtil._linktxt = document.getElementById(id);
	},
	tblSet_size : function()
	{
		if(JuUtil._sizetbl) return;
		var size = new Array(8,10,12,14,18,20,24);
		var s="";

		for(var i=0; i<size.length; i++)
		{
			s += "<a href='javascript:;' onclick=\"JuUtil._editor.cmd(null, JuUtil.order,'"+(i+1)+"');\" style='font:"+size[i]+"pt 굴림;'>가나다라 ("+size[i]+")</a><br />";
		}
		var div = JuUtil.getDiv(JuConfig.name+"_sizetbl",s);
		div.style.padding = "5px";
		document.body.appendChild(div);
		JuUtil._sizetbl = div;
	},
	tblSet_font : function()
	{
		if(JuUtil._fonttbl) return;
		var font = new Array("굴림","돋움","궁서","바탕","arial","Tahoma","verdana");

		var s=""; var pattern=/^[가-힣]+$/;

		for(var i=0; i<font.length; i++)
		{
			txt = (pattern.test(font[i])) ? "가나다라마바사":"abcdefghijkl";
			s += "<a href='javascript:;' onclick=\"JuUtil._editor.cmd(null, JuUtil.order,'"+font[i]+"');\" style='font:10pt "+font[i]+";line-height:170%'>"+txt+" ("+font[i]+")</a><br />";
		}
		var div = JuUtil.getDiv(JuConfig.name+"_fonttbl",s);
		div.style.padding = "5px";
		document.body.appendChild(div);
		JuUtil._fonttbl = div;
	},
	tblSet_color : function()
	{
		if(JuUtil._colortbl) return;
		var col= new Array();
		col[0] = new Array("#000000","#000000","#000000","#000000","#003300","#006600","#009900","#00CC00","#00FF00","#330000","#333300","#336600","#339900","#33CC00","#33FF00","#660000","#663300","#666600","#669900","#66CC00","#66FF00");
		col[1] = new Array("#000000","#333333","#000000","#000033","#003333","#006633","#009933","#00CC33","#00FF33","#330033","#333333","#336633","#339933","#33CC33","#33FF33","#660033","#663333","#666633","#669933","#66CC33","#66FF33");
		col[2] = new Array("#000000","#666666","#000000","#000066","#003366","#006666","#009966","#00CC66","#00FF66","#330066","#333366","#336666","#339966","#33CC66","#33FF66","#660066","#663366","#666666","#669966","#66CC66","#66FF66");
		col[3] = new Array("#000000","#999999","#000000","#000099","#003399","#006699","#009999","#00CC99","#00FF99","#330099","#333399","#336699","#339999","#33CC99","#33FF99","#660099","#663399","#666699","#669999","#66CC99","#66FF99");
		col[4] = new Array("#000000","#CCCCCC","#000000","#0000CC","#0033CC","#0066CC","#0099CC","#00CCCC","#00FFCC","#3300CC","#3333CC","#3366CC","#3399CC","#33CCCC","#33FFCC","#6600CC","#6633CC","#6666CC","#6699CC","#66CCCC","#66FFCC");
		col[5] = new Array("#000000","#FFFFFF","#000000","#0000FF","#0033FF","#0066FF","#0099FF","#00CCFF","#00FFFF","#3300FF","#3333FF","#3366FF","#3399FF","#33CCFF","#33FFFF","#6600FF","#6633FF","#6666FF","#6699FF","#66CCFF","#66FFFF");
		col[6] = new Array("#000000","#FF0000","#000000","#990000","#993300","#996600","#999900","#99CC00","#99FF00","#CC0000","#CC3300","#CC6600","#CC9900","#CCCC00","#CCFF00","#FF0000","#FF3300","#FF6600","#FF9900","#FFCC00","#FFFF00");
		col[7] = new Array("#000000","#00FF00","#000000","#990033","#993333","#996633","#999933","#99CC33","#99FF33","#CC0033","#CC3333","#CC6633","#CC9933","#CCCC33","#CCFF33","#FF0033","#FF3333","#FF6633","#FF9933","#FFCC33","#FFFF33");
		col[8] = new Array("#000000","#0000FF","#000000","#990066","#993366","#996666","#999966","#99CC66","#99FF66","#CC0066","#CC3366","#CC6666","#CC9966","#CCCC66","#CCFF66","#FF0066","#FF3366","#FF6666","#FF9966","#FFCC66","#FFFF66");
		col[9] = new Array("#000000","#FFFF00","#000000","#990099","#993399","#996699","#999999","#99CC99","#99FF99","#CC0099","#CC3399","#CC6699","#CC9999","#CCCC99","#CCFF99","#FF0099","#FF3399","#FF6699","#FF9999","#FFCC99","#FFFF99");
		col[10] = new Array("#000000","#00FFFF","#000000","#9900CC","#9933CC","#9966CC","#9999CC","#99CCCC","#99FFCC","#CC00CC","#CC33CC","#CC66CC","#CC99CC","#CCCCCC","#CCFFCC","#FF00CC","#FF33CC","#FF66CC","#FF99CC","#FFCCCC","#FFFFCC");
		col[11] = new Array("#000000","#FF00FF","#000000","#9900FF","#9933FF","#9966FF","#9999FF","#99CCFF","#99FFFF","#CC00FF","#CC33FF","#CC66FF","#CC99FF","#CCCCFF","#CCFFFF","#FF00FF","#FF33FF","#FF66FF","#FF99FF","#FFCCFF","#FFFFFF");

		var s="";
		for(var i=0; i<12; i++)
		{
			for(var j=0; j<12; j++)
			{
				color = col[i][j];
				s += "<a href='javascript:;' onclick=\"JuUtil._editor.cmd(null, JuUtil.order,'"+color+"');\" style='background-color:"+color+";'>&nbsp;</a>";
			}
			s += "<br />";
		}
		var div = JuUtil.getDiv(JuConfig.name+"_colortbl",s);
		document.body.appendChild(div);
		JuUtil._colortbl = div;
	},
	getDiv : function(id, html)
	{
		var div = document.createElement("div");
		div.id = id;
		div.className = "JuWebEditorDiv";
		div.style.position = "absolute";
		div.style.backgroundColor = "#f5f5f5";
		div.style.display = "none";
		div.style.border = "1px solid #ccc";
		div.style.padding = "5px";
		div.innerHTML = html;
		return div;
	},
	addEvent : function(object, type, listener)
	{	
		if(object.addEventListener) { object.addEventListener(type, listener, false); } 
		else if(object.attachEvent) { object.attachEvent("on"+type, listener); } 
	},
	trim : function(s) {return s.replace(/^\s+|\s+$/g,'');} 
};


//--------------------------------------------------------
//명령(버튼) 추가
JuConfig.BtnList.table = ["테이블 삽입","table.gif", 
function (self){ 
	//window.showModalDialog(JuConfig.filepath+'./board/pb_editor_table.asp','pb_editor_table','dialogWidth:410px ; dialogHeight:240px;status:no; ');
	window.open(JuConfig.filepath+'./board/pb_editor_table.asp','pb_editor_table','width=410,height=190,top=10,left=10,status=1; ');
} ];

JuConfig.BtnList.preview = ["미리보기","preview.gif",
function (self){
	var w=window.open("","preview","width=800,height=600,status=1,scrollbars=1,resizable=1");
	w.document.open();
	w.document.write("<style>"+self._iframe.css+"</style>"+self.getHtml());
	w.document.close();
}];

JuConfig.BtnList.image = ["이미지 삽입","image.gif",
function (self){
	
//	window.showModalDialog(JuConfig.filepath+'./board/pb_editor_file.asp','pb_editor_file','dialogWidth:520px ; dialogHeight:285px;status:no;scroll:no; ')
	window.open(JuConfig.filepath+'./board/pb_editor_file.asp','pb_editor_file','width=520,height=230,top=10,left=10,status=1,scroll=no; ');


}];