// Design  And Coding
//by Wanchai WongChompoo
//Advance Programmer of Cosciisoft Thailand
//email:cosciisoft@hotmail.com
// Implement of Wign WYSING
var color_panel=null;
var link_panel=null;
function CosciisoftEditor(objID,width,height){
	this.IE = false;
	this.newheight=5;
	this.heightRoot=height;
	this.designmode=true;
	if (document.all)  this.IE = true;
	this.textArea = document.getElementById(objID);
	this.container = document.createElement("div");
	this.container.id="CosciisoftEditor";
	this.container.style.cssText="width:"+width+"px;";
	if(this.IE){
		this.wyswing_box = document.createElement("<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"1px\" style=\"width:100%;height:"+height+"px; margin-top:0; margin-left:0; border-color:#CCCCCC;background-color:#FFFFFF; border-style:solid; border-width:1px;overflow-x:hidden; overflow-y:hidden;\" SCROLLING=NO >");
	}else{
		this.wyswing_box = document.createElement("iframe");
		this.wyswing_box.setAttribute('frameborder',"no");
		this.wyswing_box.setAttribute('SCROLLING',"no");
		this.wyswing_box.setAttribute('marginwidth',"0");
		this.wyswing_box.setAttribute('marginheight',"1");
		this.wyswing_box.style.cssText="border-color:#CCCCCC;background-color:#FFFFFF; border-style:solid; border-width:1px;width:100%;height:"+height+"px; margin-top:0; margin-left:0;overflow-x:hidden; overflow-y:hidden;";
	}
	if(this.textArea.value==""){
		this.textArea.value="<P style=\"MARGIN: 0cm 0cm 0pt\">&nbsp;</P>";
	}
	
	this.toolbar=new gen_toolbar(this);
	this.viewbar=new gen_viewbar(this);
	this.container.appendChild(this.toolbar.bar);
	this.container.appendChild(this.wyswing_box);
	this.container.appendChild(this.viewbar.bar);
	this.textArea.parentNode.replaceChild(this.container,this.textArea);
	this.writeDocument(this.textArea.value);
	this.initEdit();	
	return true;
}
CosciisoftEditor.prototype.initEdit = function()
{
	var self=this;
	try{
		this.wyswing_box.contentWindow.document.designMode = "On";
		this.wyswing_box.contentWindow.focus();
	}catch(e){
		setTimeout(function(){self.initEdit()}, 250);
		return false;
	}	
	if(!this.IE){
		this.wyswing_box.contentWindow.document.addEventListener("onkeyup", function(){self.checkAutoResizex(e);return true;}, false);
	}else{
		this.wyswing_box.contentWindow.document.attachEvent("onkeyup", function(e){self.checkAutoResizex(e);return true}, false);
	}
	

   return true;	
}
CosciisoftEditor.prototype.writeDocument= function(documentContent)
{
		var documentTemplate = '\
		<html>\
			<head>\
			<link href="style_normal.css" rel="stylesheet" type="text/css" />\
			</head>\
			<body id="iframeBody" style="background-color:#FFFFFF;">\
			   	INSERT:CONTENT:END\
			</body>\
		</html>\
	';
	documentTemplate = documentTemplate.replace(/INSERT:CONTENT:END/, documentContent);
	this.wyswing_box.contentWindow.document.open();
	this.wyswing_box.contentWindow.document.write(documentTemplate);
	this.wyswing_box.contentWindow.document.close();	
}
CosciisoftEditor.prototype.isNull=function (){
	this.textCheck="";	
	if(this.designmode){
			//alert("designmode");
		this.textCheck=this.wyswing_box.contentWindow.document.body.innerHTML;
	}else{			
		this.textCheck=this.textArea.value;
	}
	this.textCheck=this.textCheck.toLowerCase();
	if(this.textCheck=="" || this.textCheck=="<p>&nbsp;</p>" || this.textCheck=="<p style=\"margin: 0cm 0cm 0pt\">&nbsp;</p>"){
			return true;
		}else{
			return false;	
		}
}
CosciisoftEditor.prototype.checkAutoResizex=function(e){
	 this.newheight=5;
	 this.newheight=this.wyswing_box.contentWindow.document.body.scrollHeight;
	 this.wyswing_box.style.height=this.heightRoot;
	if(this.newheight>this.heightRoot){
   		this.wyswing_box.style.height= (this.newheight) + "px";
	}	
}
function gen_toolbar(obj)
{
		var self=this;
		this.editorObj=obj;
		this.bar=document.createElement("DIV");
		this.bar.style.cssText="padding-bottom:2px;padding-top:2px";
		this.barToolbarObj =this;

		//create button
		this.bar._bntBold = document.createElement("img");
		this.bar._bntBold.setAttribute('src',"images_editor/bold.gif");
		this.bar._bntBold.setAttribute('align',"absmiddle");
		this.bar._bntBold.style.cursor="pointer";
		this.bar._bntBold.onmouseover =function (){setXOpacity(this)};
		this.bar._bntBold.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntBold.action="bold";
		this.bar._bntBold.onclick=toolbarAction;
		this.bar._bntBold.editorObj=this.editorObj;
		
		this.bar._bntLeft = document.createElement("img");
		this.bar._bntLeft.setAttribute('src',"images_editor/left_just.gif");
		this.bar._bntLeft.setAttribute('align',"absmiddle");
		this.bar._bntLeft.setAttribute('align',"absmiddle");
		this.bar._bntLeft.style.cursor="pointer";
		this.bar._bntLeft.onmouseover =function (){setXOpacity(this)};
		this.bar._bntLeft.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntLeft.action="JustifyLeft";
		this.bar._bntLeft.onclick=toolbarAction;
		this.bar._bntLeft.editorObj=this.editorObj;
		
		this.bar._bntCenter = document.createElement("img");
		this.bar._bntCenter.setAttribute('src',"images_editor/justifyfull.gif");
		this.bar._bntCenter.setAttribute('align',"absmiddle");
		this.bar._bntCenter.setAttribute('align',"absmiddle");
		this.bar._bntCenter.style.cursor="pointer";
		this.bar._bntCenter.onmouseover =function (){setXOpacity(this)};
		this.bar._bntCenter.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntCenter.action="JustifyCenter";
		this.bar._bntCenter.onclick=toolbarAction;
		this.bar._bntCenter.editorObj=this.editorObj;
		
		this.bar._bntRight = document.createElement("img");
		this.bar._bntRight.setAttribute('src',"images_editor/right_just.gif");
		this.bar._bntRight.setAttribute('align',"absmiddle");
		this.bar._bntRight.setAttribute('align',"absmiddle");
		this.bar._bntRight.style.cursor="pointer";
		this.bar._bntRight.onmouseover =function (){setXOpacity(this)};
		this.bar._bntRight.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntRight.action="JustifyRight";
		this.bar._bntRight.onclick=toolbarAction;
		this.bar._bntRight.editorObj=this.editorObj;
		
		this.bar._bntPens= document.createElement("img");
		this.bar._bntPens.setAttribute('src',"images_editor/pens.gif");
		this.bar._bntPens.setAttribute('align',"absmiddle");
		this.bar._bntPens.setAttribute('align',"absmiddle");
		this.bar._bntPens.style.cursor="pointer";
		this.bar._bntPens.onmouseover =function (){setXOpacity(this)};
		this.bar._bntPens.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntPens.onclick=show_color_panel;
		this.bar._bntPens.editorObj=this.editorObj;
		
		this.bar._bntEmoc = document.createElement("img");
		this.bar._bntEmoc.setAttribute('src',"images_editor/emoticon.gif");
		this.bar._bntEmoc.setAttribute('align',"absmiddle");
		this.bar._bntEmoc.style.cursor="pointer";
		this.bar._bntEmoc.onmouseover =function (){setXOpacity(this)};
		this.bar._bntEmoc.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntEmoc.onclick=show_emoticon_panel;
		this.bar._bntEmoc.editorObj=this.editorObj;
	
	    this.bar._bntLink = document.createElement("img");
		this.bar._bntLink.setAttribute('src',"images_editor/link.gif");
		this.bar._bntLink.setAttribute('align',"absmiddle");
		this.bar._bntLink.style.cursor="pointer";
		this.bar._bntLink.onmouseover =function (){setXOpacity(this)};
		this.bar._bntLink.onmouseout =function (){setXOpacityOff(this)};
		this.bar._bntLink.onclick=show_link_panel;
		this.bar._bntLink.editorObj=this.editorObj;
	
	    this.bar._lbDetail =document.createElement("label");
		this.bar._lbDetail.innerHTML="Size&nbsp";
		
		this.bar._cmbFontSize =document.createElement("select");
		this.bar._cmbFontSize.setAttribute('id',"font_size");
		var current_font_for_loop=1;
		var newOpt=null;
		newOpt = new Option("Normal","0");
		 this.bar._cmbFontSize.options[0] = newOpt;
		for(i=1;i<8;i++){
			newOpt = new Option(current_font_for_loop,(current_font_for_loop) );
			 this.bar._cmbFontSize.options[i] = newOpt;
			current_font_for_loop++;
		}
		 this.bar._cmbFontSize.selectedIndex=0;
		this.bar._cmbFontSize.action="fontsize";
		this.bar._cmbFontSize.onchange=toolbarAction;			
		this.bar._cmbFontSize.editorObj=this.editorObj;
				
	    this.bar._bntBold.className="EditButtonUnActive";
		this.bar._bntLeft.className="EditButtonUnActive";
		this.bar._bntCenter.className="EditButtonUnActive";
		this.bar._bntRight.className="EditButtonUnActive";
		this.bar._bntPens.className="EditButtonUnActive";
		this.bar._bntEmoc.className="EditButtonUnActive";
		this.bar._bntLink.className="EditButtonUnActive";
		this.bar.appendChild(this.bar._bntBold);
		this.bar.appendChild(this.bar._bntLeft);
		this.bar.appendChild(this.bar._bntCenter);
		this.bar.appendChild(this.bar._bntRight);		
		this.bar.appendChild(this.bar._bntPens);
		this.bar.appendChild(this.bar._bntEmoc);
		this.bar.appendChild(this.bar._bntLink);
		this.bar.appendChild(this.bar._lbDetail);
		this.bar.appendChild(this.bar._cmbFontSize);
		return true;
}
function show_color_panel(){
	if(document.getElementById("color_panel")==null){
	    	color_panel=document.createElement("div");
			color_panel.id="color_panel";
	}else{
		document.getElementById("color_panel").style.visibility="visible"	;
	}
	obj=this;
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}	
	var source='<table border="0" cellspacing="1" cellpadding="1">\
  <tr>\
    <td align="right"><img src="images_editor/close.gif" style="cursor:pointer" onMouseDown="close_clolor_picker(\'\')"/></td>\
  </tr>\
  <tr>\
    <td><table border="0" cellspacing="1" cellpadding="1">\
      <tr>\
        <td bgcolor="#000000" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#333333" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#666666" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#999999" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#CCCCCC" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#DBDBDB" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#E6E6E6" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#FFFFFF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
      </tr>\
      <tr>\
        <td bgcolor="#FF0000" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#FF9900" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#CACA00" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#006600" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#0066FF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#0033FF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#9966FF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td bgcolor="#FF00FF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
      </tr>\
      <tr>\
        <td width="20" bgcolor="#FFCCCC" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#FFE2BB" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#FEFCB8" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#A5FEA7" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#C5FEFE" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#6FA8FF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#C7C7FE" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
        <td width="20" bgcolor="#FFCCFF" style="cursor:pointer" onMouseDown="close_clolor_picker(this.bgColor)">&nbsp;</td>\
      </tr>\
    </table></td>\
  </tr>\
</table>';
	curtop+=30;
	color_panel.innerHTML=source;
	color_panel.style.cssText="position:absolute;border-width:1px;border-style:groove;border-color:#8D8D8D;background-color:#FFFFFF;width:150px;";	
	color_panel.style.left=curleft+"px";
	color_panel.style.top=curtop+"px";
	this.editorObj.container.appendChild(color_panel);
}
function close_clolor_picker(bgColor){
		document.getElementById("color_panel").style.visibility="hidden"; 
		if(bgColor!=""){
			editor.wyswing_box.contentWindow.document.execCommand("ForeColor", false, bgColor);
		}
}
function show_link_panel(){
			editor.wyswing_box.contentWindow.document.execCommand("Unlink", false, null);
			var range = editor.wyswing_box.contentWindow.document.selection.createRange();
			editor.wyswing_box.contentWindow.document.execCommand("CreateLink", true, null);	
            range.parentElement().setAttribute("target", "_blank");

}
function show_emoticon_panel(){
	var width = 500;
    var height = 380;
	var left = parseInt((screen.availWidth/2) - (width/2));
    var top = parseInt((screen.availHeight/2) - (height/2));
	window.open("emoticon_form.php",'',"scrollbars=0  resizable=0 width="+width+" height="+height+" left=" + left + " top=" + top );	
}
function addEmoticonByPop(src){
		if (editor.wyswing_box.contentWindow.document.selection)
			{
					 var sel = editor.wyswing_box.contentWindow.document.selection.createRange();
					 theParentNode = sel.parentElement();	
					if(theParentNode.nodeName.toUpperCase()!="FORM"){						
							sel.pasteHTML("<img src="+src+" border=0 align=absmiddle>");
							sel.select();			
					}
		   }else{
					var selection = editor.wyswing_box.contentWindow.getSelection(); 
					var range = editor.wyswing_box.contentWindow.getSelection().getRangeAt(0); 
					var newNode = document.createElement('img'); 
					newNode.setAttribute('src',src);	
					newNode.setAttribute('border',0);	
					newNode.setAttribute('align',"absmiddle");					
					range.insertNode(newNode); 		
			}
}
function toolbarAction(obj){
	var theEditor = this.editorObj;
	if(this.action=="fontsize"){
		theEditor.wyswing_box.contentWindow.document.execCommand(this.action, false, this.options[this.selectedIndex].text);
	}else{
		theEditor.wyswing_box.contentWindow.document.execCommand(this.action, false, null);
	}
}
function gen_viewbar(obj)
{
		var self=this;
		this.editorObj=obj;
		this.bar=document.createElement("DIV");
		this.bar.style.cssText="padding-bottom:2px;padding-top:2px";
		this.bar.setAttribute('align',"right");
		this.barToolbarObj =this;
				
		this.bar._lbCode =document.createElement("label");
		this.bar._lbCode.innerHTML="HTMLView";
		this.bar._lbCode.style.cursor="pointer";
		this.bar._lbCode.onmouseover =function (){setXOpacity(this)};
		this.bar._lbCode.onmouseout =function (){setXOpacityOff(this)};
		this.bar._lbCode.onclick=function (){this.editorObj.switchMode()};
		this.bar._lbCode.editorObj=obj;		
		
		this.bar._lbEnter =document.createElement("label");
		//this.bar._lbEnter.innerHTML="Shift+Enter=บรรทัดใหม่&nbsp&nbsp";
		
		this.bar._lbCode.className="EditButtonUnActive";
		//this.bar.appendChild(this.bar._lbEnter);
		this.bar.appendChild(this.bar._lbCode);		
    	return true;
}
CosciisoftEditor.prototype.switchMode=function()
{
		this.designmode=!this.designmode;
		if(this.designmode){
			//alert("designmode");
			this.textArea.parentNode.replaceChild(this.wyswing_box,this.textArea);
			this.writeDocument(this.textArea.value);
			this.initEdit();
			this.viewbar.bar._lbCode.innerHTML="HTMLView";
			this.toolbar.bar.style.visibility="visible";
			this.toolbar.bar.style.position="";
			//this.setHTML(this.textArea.value);
		}else{			
			this.textArea.value=this.wyswing_box.contentWindow.document.body.innerHTML;
			this.wyswing_box.parentNode.replaceChild(this.textArea,this.wyswing_box);
			this.newheight=(this.newheight/12)+10;
			this.textArea.rows=this.newheight;
			if(this.textArea.rows<3) this.textArea.rows=3;
			this.viewbar.bar._lbCode.innerHTML="DesignView";
			this.toolbar.bar.style.visibility="hidden";
			this.toolbar.bar.style.position="absolute";
			//alert("codemode");
		}
}
CosciisoftEditor.prototype.updateInput=function()
{
		if(this.designmode){
			this.textArea.value=this.wyswing_box.contentWindow.document.body.innerHTML;
			this.wyswing_box.parentNode.replaceChild(this.textArea,this.wyswing_box);
		}
		return true;
}
function setXOpacity(obj) {
	obj.className="EditButtonActive";
}
function setXOpacityOff(obj){
	obj.className="EditButtonUnActive";
}
