//*********************************
var oSelSave;
var sSelType;
function saveSelection()
    {
    //idcontent.focus() //or <BODY onselectstart...>

    oSelSave = idcontent.document.selection.createRange()
    sSelType = idcontent.document.selection.type
    }
function restoreSelection()
    {
    oSelSave.select()
    }



//*********************************
function drawIcon(left,width,id,title,command)
    {
    document.write("<span style=\"width: "+width+";height:22;\">")
    document.write("    <span unselectable='on' style=\"position:absolute;clip: rect(0 "+width+" 22 0)\">")
    document.write("    <img unselectable='on' id=\""+id+"\" ")
    document.write("    title=\""+title+"\" onclick=\""+command+"\" src=\"bce.gif\" ")
    document.write("        style=\"position:absolute;top:0;left:-"+left+";\" ")
    document.write("        onmouseover=\"if(this.en==false)return;this.style.pixelTop=-22\" ")
    document.write("        onmousedown=\"if(this.en==false)return;this.style.pixelTop=-44\" ")
    document.write("        onmouseup=\"if(this.en==false)return;this.style.pixelTop=-22\" ")
    document.write("        onmouseout=\"if(this.en==false)return;this.style.pixelTop=0\" ")
    document.write("        width=\"1151\" ")
    document.write("        height=\"110\">")
    document.write("        <table width="+width+"><tr><td onselectstart='return false' style=\"position:absolute;top:4;left:7;\" id=\""+id+"Text\"></td></tr></table>")
    document.write("    </span>")
    document.write("</span>")
    }
function initEditor()
    {
    var sHTML = ""
    sHTML += ""
        + "<STYLE>"
        +   "BODY {border: 1px lightgrey solid;}"
        + "</STYLE>"
        + "<BODY ONCONTEXTMENU=\"return false\">"
        +   "<DIV></DIV>"
        + "</BODY>"
    idcontent.document.designMode = "on"
    idcontent.document.open("text/html","replace")
    idcontent.document.write(sHTML)
    idcontent.document.close()
/*
    for(i=0;i<document.all.length;i++)
        {
        if(document.all(i).unselectable != "off")
        document.all(i).unselectable = "on";
        }
    idcontent.unselectable = "off";
*/
    LoadDoc()
    idcontent.document.designMode = "on"
//  btnSave.disabled = false
    }
function doCmd(sCmd,sOption)
    {
    popupHide()
    idcontent.focus()
    var oSel    = idcontent.document.selection.createRange()
    var sType = idcontent.document.selection.type
    var oTarget = (sType == "None" ? idcontent.document : oSel)

    if(sCmd=="DialogLink")
        {
        oTarget.execCommand("CreateLink",true);
        idcontent.focus();
        return true;
        }
    if (sCmd=="DialogImage")
        {
        var popleft=((document.body.clientWidth - 440) / 2)+window.screenLeft;
        var poptop=(((document.body.clientHeight - 460) / 2))+window.screenTop-40;
        window.open("default_Image.asp","NewWindow","scrollbars=NO,width=480,height=520,left="+popleft+",top="+poptop)
        return true;
        }

    oTarget.execCommand(sCmd, false, sOption)
    }
function doCmd2(sCmd,sOption)
    {
    popupHide()

    //idcontent.focus()
    var oSel    = oSelSave//idcontent.document.selection.createRange()
    var sType = sSelType//idcontent.document.selection.type

    var oTarget = (sType == "None" ? idcontent.document : oSel)
    oSel.select()//tambahan

    oTarget.execCommand(sCmd, false, sOption)
    }

function popupShow(width,title,html)
    {
    //construct & display popup
    /*
    var sHTML = "<style>" +
                "   body {border: 0px lightgrey solid;}" +
                "   .bar{   border-top: #99ccff 1px solid; background: #316AC5; WIDTH: 100%; border-bottom: #000000 1px solid;height: 20px}" +
                "</style>" +
                "<body oncontextmenu=\"return false\" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>" +
                "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed\" bgcolor=Gainsboro ID=\"tblPopup\">" +
                "<col width="+width+"><col width=13>" +
                "<tr>" +
                "<td>" +
                "   <div class=\"bar\" style=\"padding-left: 5px;\">" +
                "   <font size=2 face=tahoma color=white><b>"+title+"</b></font>" +
                "   </div>" +
                "</td>" +
                "<td style=\"cursor:hand\" onclick=\"parent.popupHide()\">" +
                "   <div class=\"bar\">" +
                "   <font size=2 face=tahoma color=white><b>X</b></font>" +
                "   </div>" +
                "</td>" +
                "</tr>" +
                "<tr>" +
                "<td colspan=2 style=\"border-left: #336699 1px solid;border-right: #336699 1px solid;border-bottom: #336699 1px solid;\">" +
                "   <br>" +
                "   <div id=\"divPopup\"></div>" +
                "   <br>" +
                "</td>" +
                "</tr>" +
                "</table>" +
                "</body>"
        */
    popupHide();
    var sHTML = "<style>" +
                "   body {border: 0px lightgrey solid;}" +
                "   .bar{   border-top: #99ccff 1px solid; background: #316AC5; WIDTH: 100%; border-bottom: #000000 1px solid;height: 20px}" +
                "   .cellSymbol{border:solid black 1.0pt; border-left:none; padding:0in 2pt 0in 2pt; font-size:10pt; font-family:'Tahoma';}" +
                "   td {    font:8pt verdana,arial,sans-serif}" +
                "   div {   font:10pt tahoma,arial,sans-serif}" +
                "</style>" +
                "<body style=\"overflow:hidden\" oncontextmenu=\"return false\" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 ONSELECTSTART=\"return event.srcElement.tagName=='INPUT'\">" +
                "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed\" bgcolor=Gainsboro ID=\"tblPopup\">" +
                "<col width="+width+"><col width=13>" +
                "<tr>" +
                "<td>" +
                "   <div class=\"bar\" style=\"padding-left: 5px;\">" +
                "   <font size=2 face=tahoma color=white><b>"+title+"</b></font>" +
                "   </div>" +
                "</td>" +
                "<td style=\"cursor:hand\" onclick=\"parent.popupHide()\">" +
                "   <div class=\"bar\">" +
                "   <font size=2 face=tahoma color=white><b>X</b></font>" +
                "   </div>" +
                "</td>" +
                "</tr>" +
                "<tr>" +
                "<td colspan=2 style=\"border-left: #336699 1px solid;border-right: #336699 1px solid;border-bottom: #336699 1px solid;\" valign=top>" +
                "   <br>" +
                "   <div id=\"divPopup\" align=center></div>" +
                "   <br>" +
                "</td>" +
                "</tr>" +
                "</table>" +
                "</body>"

    idcontentTmp.document.open("text/html","replace")
    idcontentTmp.document.write(sHTML)
    idcontentTmp.document.close()
    document.all.idcontentTmp.style.zIndex = 2
    document.all.idcontentTmp.style.visibility = ""

    idcontentTmp.document.all.tblPopup.focus()

    //fill popup content
    idcontentTmp.divPopup.innerHTML = html

    //set dimension
    document.all.idcontentTmp.style.width = idcontentTmp.document.all.tblPopup.offsetWidth
    document.all.idcontentTmp.style.height = idcontentTmp.document.all.tblPopup.offsetHeight

    //set position
    if(document.body.clientHeight - document.all.idcontentTmp.offsetHeight > 0)
        document.all.idcontentTmp.style.pixelTop=((document.body.clientHeight - document.all.idcontentTmp.offsetHeight) / 2);
    else
        document.all.idcontentTmp.style.pixelTop=0
    if(document.body.clientWidth - document.all.idcontentTmp.offsetWidth > 0)
        document.all.idcontentTmp.style.pixelLeft=(document.body.clientWidth - document.all.idcontentTmp.offsetWidth) / 2 ;
    else
        document.all.idcontentTmp.style.pixelLeft=0
    }

function popupHide()
    {
    document.all.idcontentTmp.style.visibility = "hidden"
    }

function displayParagraphBox()
    {
    saveSelection()

    var sHTML = "<table align=center border=0 width=100% height=100% cellpadding=0 cellspacing=0>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<H1>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center height=10><h1>Header 1</h1></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<H2>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><h2>Header 2</h2></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<H3>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><h3>Header 3</h3></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<H4>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><h4>Header 4</h4></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<H5>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><h5>Header 5</h5></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<H6>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><h6>Header 6</h6></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<PRE>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><pre>Preformatted</pre></td></tr>" +
                "<tr onclick=\"parent.doCmd2('FormatBlock','<P>');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center height=10><p>Normal</p></td></tr>" +
                "</table>"
    popupShow(253,"Paragraph Style",sHTML)
    }
function displayFontNameBox()
    {
    saveSelection()

    var sHTML = "<table align=center border=0 width=100% height=100% cellpadding=0 cellspacing=2>" +
                "<tr onclick=\"parent.doCmd2('fontname','Arial');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Arial\" size=1>Arial</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Arial Black');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Arial Black\" size=1>Arial Black</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Arial Narrow');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Arial Narrow\" size=1>Arial Narrow</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Comic Sans MS');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Comic Sans MS\" size=1>Comic Sans MS</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Courier New');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Courier New\" size=1>Courier New</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','System');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"System\" size=1>System</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Tahoma');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Tahoma\" size=1>Tahoma</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Times New Roman');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Times New Roman\" size=1>Times New Roman</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Verdana');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Verdana\" size=1>Verdana</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontname','Wingdings');\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font face=\"Wingdings\" size=1>Wingdings</font></td></tr>" +
                "</table>"
    popupShow(213,"Font Name",sHTML)
    }
function displayFontSizeBox()
    {
    saveSelection()

    var sHTML = "<table align=center border=0 width=100% height=100% cellpadding=0 cellspacing=0>" +
                "<tr onclick=\"parent.doCmd2('fontsize',1);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=1>Size 1</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontsize',2);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=2>Size 2</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontsize',3);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=3>Size 3</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontsize',4);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=4>Size 4</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontsize',5);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=5>Size 5</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontsize',6);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=6>Size 6</font></td></tr>" +
                "<tr onclick=\"parent.doCmd2('fontsize',7);\" onmouseover=\"this.style.color='tomato'\" onmouseout=\"this.style.color='black'\" style=\"cursor:hand\"><td align=center><font size=7>Size 7</font></td></tr>" +
                "</table>"
    popupShow(253,"Font Size",sHTML)
    }

function displayFgColorBox()
    {
    saveSelection()

    var sHTML = writeColorPicker("idForeColor","parent.doCmd2('ForeColor',idForeColor.value);",0);

    popupShow(433,"Foreground Color",sHTML)
    }
function displayBgColorBox()
    {
    saveSelection()

    var sHTML = writeColorPicker("idBackColor","parent.doCmd2('BackColor',idBackColor.value);",0);

    popupShow(433,"Background Color",sHTML)
    }
function writeColorPicker(Name,Command,Type)
    {
    var OutputID = Name
    var TextID = Name + "_1"
    var ColorID = Name + "_2"
    var c1 = new Array("FFFFCC","FFCC66","FF9900","FFCC99","FF6633","FFCCCC","CC9999","FF6699","FF99CC","FF66CC","FFCCFF","CC99CC","CC66FF","CC99FF","9966CC","CCCCFF","9999CC","3333FF","6699FF","0066FF","99CCFF","66CCFF","99CCCC","CCFFFF","99FFCC","66CC99","66FF99","99FF99","CCFFCC","33FF33","66FF00","CCFF99","99FF00","CCFF66","CCCC66","FFFFFF")
    var c2 = new Array("FFFF99","FFCC00","FF9933","FF9966","CC3300","FF9999","CC6666","FF3366","FF3399","FF00CC","FF99FF","CC66CC","CC33FF","9933CC","9966FF","9999FF","6666FF","3300FF","3366FF","0066CC","3399FF","33CCFF","66CCCC","99FFFF","66FFCC","33CC99","33FF99","66FF66","99CC99","00FF33","66FF33","99FF66","99FF33","CCFF00","CCCC33","CCCCCC")
    var c3 = new Array("FFFF66","FFCC33","CC9966","FF6600","FF3300","FF6666","CC3333","FF0066","FF0099","FF33CC","FF66FF","CC00CC","CC00FF","9933FF","6600CC","6633FF","6666CC","3300CC","0000FF","3366CC","0099FF","00CCFF","339999","66FFFF","33FFCC","00CC99","00FF99","33FF66","66CC66","00FF00","33FF00","66CC00","99CC66","CCFF33","999966","999999")
    var c4 = new Array("FFFF33","CC9900","CC6600","CC6633","FF0000","FF3333","993333","CC3366","CC0066","CC6699","FF33FF","CC33CC","9900CC","9900FF","6633CC","6600FF","666699","3333CC","0000CC","0033FF","6699CC","3399CC","669999","33FFFF","00FFCC","339966","33CC66","00FF66","669966","00CC00","33CC00","66CC33","99CC00","CCCC99","999933","666666")
    var c5 = new Array("FFFF00","CC9933","996633","993300","CC0000","FF0033","990033","996666","993366","CC0099","FF00FF","990099","996699","660099","663399","330099","333399","000099","0033CC","003399","336699","0099CC","006666","00FFFF","33CCCC","009966","00CC66","339933","336633","33CC33","339900","669933","99CC33","666633","999900","333333")
    var c6 = new Array("CCCC00","996600","663300","660000","990000","CC0033","330000","663333","660033","990066","CC3399","993399","660066","663366","330033","330066","333366","000066","000033","003366","006699","003333","336666","00CCCC","009999","006633","009933","006600","003300","00CC33","009900","336600","669900","333300","666600","000000")


    var sHTML = "";
    sHTML += ("<table border=0 width=370 align=center cellpadding=0 cellspacing=0><tr><td width=45>  <table border=1 cellpadding=0 cellspacing=0><tr><td id='"+ColorID+"' width=25 height=25></td></tr></table>   <div id='"+TextID+"'><font size=1>&nbsp;</font></div> </td><td>&nbsp;</td><td>")
    sHTML += ("<table cellpadding=0 cellspacing=1 bgcolor=black>")
    if(Type==0)
        {
        for(var i=1;i<=6;i++)
            {
            sHTML += ("<tr>")
            for(var r=0;r<eval("c"+i).length;r++)
                {
                var colour = eval("c"+i+"[r]")
                sHTML += ("<td onclick=\""+OutputID+".value='"+colour+"';"+Command+"\" style=\"cursor:hand;background-color:"+colour+";\" width=9 height=6 onmouseover=\""+ColorID+".style.background='#"+colour+"';"+TextID+".innerHTML='<font size=1>"+colour+"</font>'\"></td>")
                }
            sHTML += ("</tr>")
            }
        }
    if(Type==1)
        {
        for(var i=1;i<=6;i++)
            {
            sHTML += ("<tr>")
            for(var r=0;r<eval("c"+i).length;r++)
                {
                var colour = eval("c"+i+"[r]")
                sHTML += ("<td onclick=\""+ColorID+".style.background='#"+colour+"';"+TextID+".innerHTML='<font size=1>"+colour+"</font>';"+OutputID+".value='"+colour+"';"+Command+"\" style=\"cursor:hand;background-color:"+colour+";\" width=9 height=6 onmouseover=\"\"></td>")
                }
            sHTML += ("</tr>")
            }
        }
    sHTML += ("</table>")
    sHTML += ("<input type=hidden id='"+OutputID+"'>")
    sHTML += ("</td></tr></table>")
    return sHTML;
    }


var displayMode = "RICH"
function setDisplayMode()
    {
    if(displayMode=='RICH')
        {
        idcontent.document.body.clearAttributes;
        idcontent.document.body.style.fontFamily = 'Courier New';
        idcontent.document.body.style.fontSize = '12px';
        idcontent.document.body.innerText = idcontent.document.body.innerHTML;
        idcontent.document.body.innerHTML = "<DIV>" + idcontent.document.body.innerHTML + "</DIV>"
        displayMode = 'HTML';
        idToolbar.style.display = "none"
        }
    else
        {
        idcontent.document.body.clearAttributes;
        idcontent.document.body.style.fontFamily = '';
        idcontent.document.body.style.fontSize = '';
        idcontent.document.body.innerHTML = idcontent.document.body.innerText;
        displayMode = 'RICH';
        idToolbar.style.display = "block"
        }
    }
