Solved

Deditor & Insert Emotions

Posted on 2002-03-25
19
896 Views
Last Modified: 2008-03-17
Dear Sir,

I have that script which I am running, same as Hotmail -  but in the html editor I want to put some code so that user can insert Emotions to the emails', I have all Emotions Images such has smily face, sad face and so on...


Start >>>>>>>>>>>>>>>>>>>>>>>>>>>

MY html composer source is :-

<html>
<head>
<title>Compose Email</title>

<link REL="stylesheet" TYPE="text/css" HREF="../../javascript/composehtml.css">

<SCRIPT>
<!--
var bLoad=false
var pureText=true
var bodyTag="<BODY MONOSPACE STYLE=\"font:10pt arial,sans-serif\">"
var bTextMode=false

public_description=new Editor

function Editor() {
  this.put_html=SetHtml;
  this.get_html=GetHtml;
  this.put_text=SetText;
  this.get_text=GetText;
  this.CompFocus=GetCompFocus;
}

function GetCompFocus() {
  Composition.focus();
}

function GetText() {
  return Composition.document.body.innerText;
}

function SetText(text) {
  text = text.replace(/\n/g, "<br>")
  Composition.document.body.innerHTML=text;
}

function GetHtml() {
  if (bTextMode)
    return Composition.document.body.innerText;
  else {
    cleanHtml();
    cleanHtml();
    return Composition.document.body.innerHTML;
  }
}

function SetHtml(sVal) {
  if (bTextMode) Composition.document.body.innerText=sVal;
  else Composition.document.body.innerHTML=sVal;
}

// -->
</script>
</head>

<body onload="bLoad=true" STYLE="margin:0pt;padding:2pt">
<div class="yToolbar" ID="ParaToolbar">
  <div class="TBHandle"></div>
  <select ID="ParagraphStyle" class="TBGen" TITLE="Paragraph Format" LANGUAGE="javascript" onchange="format('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Paragraph
    <option value="Normal">Normal
    <option value="Heading 1">Heading 1 &lt;H1&gt;
    <option value="Heading 2">Heading 2 &lt;H2&gt;
    <option value="Heading 3">Heading 3 &lt;H3&gt;
    <option value="Heading 4">Heading 4 &lt;H4&gt;
    <option value="Heading 5">Heading 5 &lt;H5&gt;
    <option value="Heading 6">Heading 6 &lt;H6&gt;
    <option value="Address">Address &lt;ADDR&gt;
    <option value="Formatted">Formatted &lt;PRE&gt;
    <option style="color: darkred" value="removeFormat">Remove Formatting
  </select>
  <select ID="FontName" class="TBGen" TITLE="Font Name" LANGUAGE="javascript" onchange="format('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Font
    <option value="Arial">Arial
    <option value="Arial Black">Arial Black
    <option value="Arial Narrow">Arial Narrow
    <option value="Comic Sans MS">Comic Sans MS
    <option value="Courier New">Courier New
    <option value="System">System
    <option value="Times New Roman">Times New Roman
    <option value="Verdana">Verdana
    <option value="Wingdings">Wingdings
  </select>
  <select ID="FontSize" class="TBGen" TITLE="Font Size" LANGUAGE="javascript" onchange="format('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
    <option class="heading" selected>Size
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
  </select>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Bold" LANGUAGE="javascript" onclick="format('bold');">
    <img class="Ico" src="../../imgs/bold.gif">
  </div>
  <div class="Btn" TITLE="Italic" LANGUAGE="javascript" onclick="format('italic')">
    <img class="Ico" src="../../imgs/italic.gif">
  </div>
  <div class="Btn" TITLE="Underline" LANGUAGE="javascript" onclick="format('underline')">
    <img class="Ico" src="../../imgs/under.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Cut" LANGUAGE="javascript" onclick="format('cut')">
    <img class="Ico" src="../../imgs/cut.gif">
  </div>
  <div class="Btn" TITLE="Copy" LANGUAGE="javascript" onclick="format('copy')">
    <img class="Ico" src="../../imgs/copy.gif">
  </div>
  <div class="Btn" TITLE="Paste" LANGUAGE="javascript" onclick="format('paste')">
    <img class="Ico" src="../../imgs/paste.gif">
  </div>
</div>

<div class="yToolbar" ID="FormatToolbar">

  <div class="TBSep"></div>
  <div class="Btn" TITLE="Foreground Color" LANGUAGE="javascript" onclick="foreColor()">
    <img class="Ico" src="../../imgs/tpaint.gif">
  </div>
  <div class="Btn" TITLE="Background Color" LANGUAGE="javascript" onclick="backColor()">
    <img class="Ico" src="../../imgs/parea.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Align Left" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyleft')">
    <img class="Ico" src="../../imgs/aleft.gif">
  </div>
  <div class="Btn" TITLE="Center" NAME="Justify" LANGUAGE="javascript" onclick="format('justifycenter')">
    <img class="Ico" src="../../imgs/center.gif">
  </div>
  <div class="Btn" TITLE="Align Right" NAME="Justify" LANGUAGE="javascript" onclick="format('justifyright')">
    <img class="Ico" src="../../imgs/aright.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Numbered List" LANGUAGE="javascript" onclick="format('insertorderedlist')">
    <img class="Ico" src="../../imgs/nlist.gif">
  </div>
  <div class="Btn" TITLE="Bulletted List" LANGUAGE="javascript" onclick="format('insertunorderedlist')">
    <img class="Ico" src="../../imgs/blist.gif">
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Decrease Indent" LANGUAGE="javascript" onclick="format('outdent')">
    <img class="Ico" src="../../imgs/ileft.gif">
  </div>
  <div class="Btn" TITLE="Increase Indent" LANGUAGE="javascript" onclick="format('indent')">
    <img class="Ico" src="../../imgs/iright.gif" >
  </div>
  <div class="TBSep"></div>
  <div class="Btn" TITLE="Create Hyperlink" LANGUAGE="javascript" onclick="createLink()">
    <img class="Ico" src="../../imgs/wlink.gif">
  </div>

  <div class="TBSep"></div>
  <div ID="EditMode" class="TBGen" style="width:150" TITLE="Editing Mode">
    <input type=checkbox name="switchMode" LANGUAGE="javascript" onclick="setMode(switchMode.checked)">Advanced Edit
  </div>
</div>

<IFRAME class="Composition" width="100%" ID="Composition" height="270">
</IFRAME>

<SCRIPT>
<!--
Composition.document.open();
Composition.document.write(bodyTag);

Composition.document.close();
Composition.document.designMode="On";
// -->
</SCRIPT>

<script LANGUAGE="Javascript" SRC="../../javascript/compose.js">
</script>

</body>
</html>

End >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


And the source for compose.js is are as follows :-

Start >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

SEP_PADDING = 5
HANDLE_PADDING = 7

var yToolbars = new Array();  // Array of all toolbars.

// Initialize everything when the document is ready
var YInitialized = false;
function document.onreadystatechange() {
  if (YInitialized) return;
  YInitialized = true;

  var i, s, curr;

  // Find all the toolbars and initialize them.
  for (i=0; i<document.body.all.length; i++) {
    curr=document.body.all[i];
    if (curr.className == "yToolbar") {
      if (! InitTB(curr)) {
        alert("Toolbar: " + curr.id + " failed to initialize. Status: false");
      }
      yToolbars[yToolbars.length] = curr;
    }
  }

  //Lay out the page, set handler.
  DoLayout();
  window.onresize = DoLayout;

  Composition.document.open()
  Composition.document.write("<BODY MONOSPACE STYLE=\"font:10pt arial,sans-serif\"></body>");
  Composition.document.close()
  Composition.document.designMode="On"
  //setTimeout("Composition.focus()",0)

}

// Initialize a toolbar button
function InitBtn(btn) {
  btn.onmouseover = BtnMouseOver;
  btn.onmouseout = BtnMouseOut;
  btn.onmousedown = BtnMouseDown;
  btn.onmouseup = BtnMouseUp;
  btn.ondragstart = YCancelEvent;
  btn.onselectstart = YCancelEvent;
  btn.onselect = YCancelEvent;
  btn.YUSERONCLICK = btn.onclick;
  btn.onclick = YCancelEvent;
  btn.YINITIALIZED = true;
  return true;
}

//Initialize a toolbar.
function InitTB(y) {
  // Set initial size of toolbar to that of the handle
  y.TBWidth = 0;
   
  // Populate the toolbar with its contents
  if (! PopulateTB(y)) return false;
 
  // Set the toolbar width and put in the handle
  y.style.posWidth = y.TBWidth;
 
  return true;
}


// Hander that simply cancels an event
function YCancelEvent() {
  event.returnValue=false;
  event.cancelBubble=true;
  return false;
}

// Toolbar button onmouseover handler
function BtnMouseOver() {
  if (event.srcElement.tagName != "IMG") return false;
  var image = event.srcElement;
  var element = image.parentElement;
 
  // Change button look based on current state of image.
  if (image.className == "Ico") element.className = "BtnMouseOverUp";
  else if (image.className == "IcoDown") element.className = "BtnMouseOverDown";

  event.cancelBubble = true;
}

// Toolbar button onmouseout handler
function BtnMouseOut() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;
  yRaisedElement = null;
 
  element.className = "Btn";
  image.className = "Ico";

  event.cancelBubble = true;
}

// Toolbar button onmousedown handler
function BtnMouseDown() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    event.returnValue=false;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;

  element.className = "BtnMouseOverDown";
  image.className = "IcoDown";

  event.cancelBubble = true;
  event.returnValue=false;
  return false;
}

// Toolbar button onmouseup handler
function BtnMouseUp() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;

  if (element.YUSERONCLICK) eval(element.YUSERONCLICK + "anonymous()");

  element.className = "BtnMouseOverUp";
  image.className = "Ico";

  event.cancelBubble = true;
  return false;
}

// Populate a toolbar with the elements within it
function PopulateTB(y) {
  var i, elements, element;

  // Iterate through all the top-level elements in the toolbar
  elements = y.children;
  for (i=0; i<elements.length; i++) {
    element = elements[i];
    if (element.tagName == "SCRIPT" || element.tagName == "!") continue;
   
    switch (element.className) {
    case "Btn":
      if (element.YINITIALIZED == null) {
      if (! InitBtn(element)) {
        alert("Problem initializing:" + element.id);
        return false;
      }
      }
     
      element.style.posLeft = y.TBWidth;
      y.TBWidth += element.offsetWidth + 1;
      break;
     
    case "TBGen":
      element.style.posLeft = y.TBWidth;
      y.TBWidth += element.offsetWidth + 1;
      break;
     
    case "TBSep":
      element.style.posLeft = y.TBWidth + 2;
      y.TBWidth += SEP_PADDING;
      break;
     
    case "TBHandle":
      element.style.posLeft = 2;
      y.TBWidth += element.offsetWidth + HANDLE_PADDING;
      break;
     
    default:
      alert("Invalid class: " + element.className + " on Element: " + element.id + " <" + element.tagName + ">");
      return false;
    }
  }

  y.TBWidth += 1;
  return true;
}

function DebugObject(obj) {
  var msg = "";
  for (var i in TB) {
    ans=prompt(i+"="+TB[i]+"\n");
    if (! ans) break;
  }
}

// Lay out the docked toolbars
function LayoutTBs() {
  NumTBs = yToolbars.length;

  // If no toolbars we're outta here
  if (NumTBs == 0) return;

  //Get the total size of a TBline.
  var i;
  var ScrWid = (document.body.offsetWidth) - 6;
  var TotalLen = ScrWid;
  for (i = 0 ; i < NumTBs ; i++) {
    TB = yToolbars[i];
    if (TB.TBWidth > TotalLen) TotalLen = TB.TBWidth;
  }

  var PrevTB;
  var LastStart = 0;
  var RelTop = 0;
  var LastWid, CurrWid;

  //Set up the first toolbar.
  var TB = yToolbars[0];
  TB.style.posTop = 0;
  TB.style.posLeft = 0;

  //Lay out the other toolbars.
  var Start = TB.TBWidth;
  for (i = 1 ; i < yToolbars.length ; i++) {
    PrevTB = TB;
    TB = yToolbars[i];
    CurrWid = TB.TBWidth;

    if ((Start + CurrWid) > ScrWid) {
      //TB needs to go on next line.
      Start = 0;
      LastWid = TotalLen - LastStart;
    }
    else {
      //Ok on this line.
      LastWid = PrevTB.TBWidth;
      //RelTop -= TB.style.posHeight;
      RelTop -= TB.offsetHeight;
    }
     
    //Set TB position and LastTB width.
    TB.style.posTop = RelTop;
    TB.style.posLeft = Start;
    PrevTB.style.width = LastWid;

    //Increment counters.
    LastStart = Start;
    Start += CurrWid;
  }

  //Set width of last toolbar.
  TB.style.width = TotalLen - LastStart;
 
  //Move everything after the toolbars up the appropriate amount.
  i--;
  TB = yToolbars[i];
  var TBInd = TB.sourceIndex;
  var A = TB.document.all;
  var item;
  for (i in A) {
    item = A.item(i);
    if (! item) continue;
    if (! item.style) continue;
    if (item.sourceIndex <= TBInd) continue;
    if (item.style.position == "absolute") continue;
    item.style.posTop = RelTop;
  }
}

//Lays out the page.
function DoLayout() {
  LayoutTBs();
}

// Check if toolbar is being used when in text mode
function validateMode() {
  if (! bTextMode) return true;
  alert("Please uncheck the \"View HTML source\" checkbox to use the toolbars");
  Composition.focus();
  return false;
}

//Formats text in composition.
function format(what,opt) {
  if (!validateMode()) return;
 
  if (opt=="removeFormat") {
    what=opt;
    opt=null;
  }

  if (opt==null) Composition.document.execCommand(what);
  else Composition.document.execCommand(what,"",opt);
 
  pureText = false;
  Composition.focus();
}

//Switches between text and html mode.
function setMode(newMode) {
  bTextMode = newMode;
  var cont;
  if (bTextMode) {
    cleanHtml();
    cleanHtml();

    cont=Composition.document.body.innerHTML;
    Composition.document.body.innerText=cont;
  } else {
    cont=Composition.document.body.innerText;
    Composition.document.body.innerHTML=cont;
  }
 
  Composition.focus();
}

//Finds and returns an element.
function getEl(sTag,start) {
  while ((start!=null) && (start.tagName!=sTag)) start = start.parentElement;
  return start;
}

function createLink() {
  if (!validateMode()) return;
 
  var isA = getEl("A",Composition.document.selection.createRange().parentElement());
  var str=prompt("Enter link location (e.g. http://www.adomain.com):", isA ? isA.href : "http:\/\/");
 
  if ((str!=null) && (str!="http://")) {
    if (Composition.document.selection.type=="None") {
      var sel=Composition.document.selection.createRange();
      sel.pasteHTML("<A HREF=\""+str+"\">"+str+"</A> ");
      sel.select();
    }
    else format("CreateLink",str);
  }
  else Composition.focus();
}

//Sets the text color.
function foreColor() {
  if (! validateMode()) return;
  var arr = showModalDialog("../ColorSelect.html", "", "font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em");
  if (arr != null) format('forecolor', arr);
  else Composition.focus();
}

//Sets the background color.
function backColor() {
  if (!validateMode()) return;
  var arr = showModalDialog("../ColorSelect.html", "", "font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em");
  if (arr != null) format('backcolor', arr);
  else Composition.focus()
}

function cleanHtml() {
  var fonts = Composition.document.body.all.tags("FONT");
  var curr;
  for (var i = fonts.length - 1; i >= 0; i--) {
    curr = fonts[i];
    if (curr.style.backgroundColor == "#ffffff") curr.outerHTML = curr.innerHTML;
  }
}

function getPureHtml() {
  var str = "";
  var paras = Composition.document.body.all.tags("P");
  if (paras.length > 0) {
    for (var i=paras.length-1; i >= 0; i--) str = paras[i].innerHTML + "\n" + str;
  } else {
    str = Composition.document.body.innerHTML;
  }
  return str;
}

End >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


I will really appreciate if you please kindly help me ..

Thanks
0
Comment
Question by:sohaib69
  • 11
  • 7
19 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 6893876
"dear sir,"
we are not sirs, normal ppl here,

search and replace on your text editor?:-)

working on a solution will let you know soon


lexxwern
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6893883
letme know what you actually want; you want a js function to parse thru some inputed text and then replace :-) with <image src=.,..> ?

is my understanding correct?

lexxwern
0
 
LVL 1

Author Comment

by:sohaib69
ID: 6894022
yes, like same as hotmail u know when u click on that smile face the emotion window got opened you know and then it will show u emotions like flowers and so on , and then if you wanted to insert that you will just click on that emotion and that emotion will got inserted in your mail :)

OK my dear Lexxwern ;)

Await your early response ;)
0
 
LVL 1

Author Comment

by:sohaib69
ID: 6894026
yes, like same as hotmail u know when u click on that smile face the emotion window got opened you know and then it will show u emotions like flowers and so on , and then if you wanted to insert that you will just click on that emotion and that emotion will got inserted in your mail :)

OK my dear Lexxwern ;)

Await your early response ;)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6894142
"OK my dear Lexxwern ;)"
okay so u r pakistani and i from india and yes there MUST be peace and love betw us, but i surely am not 'your dear lexxwern', my gf will kill you,i hope;-)

the hotmail thing has been done thru layers, now all you haveto do is a simple mix of javascript and css, needs some programming skills,

if you want me to write a code from scratch, sorry i will not, but if you make attempts to write one urself ill gladly help to debug,

the algorithm is quite simple,

1. on certain click make certain layer visible;
2. see which image has been clicked in the layer (onmousedown event)
3. if certain image return something to calling function(simple if else's)

happy coding.

lexxwern
from New Delhi, India
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6894151
will give you a small scale eg. soon.

lexxwern
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6894163
here goes...

<html>
<head>
<script language="javascript">
function clicked(c)
{
if(c==1)
     document.f.t.value=document.f.t.value+":-)";
else if(c==2)
     document.f.t.value=document.f.t.value+":-(";
}
</script>
</head>
<body>
<a onclick="clicked(1)">:-)</a>
<a onclick="clicked(2)">:-(</a>
<form name="f">
<textarea name="t">
</textarea>
</body>
</html>


now tell if you want help in opening layer,



lexxwern
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6894165
sorry i haven't parsed thru yor source;
i find that task too hard.

lexxwern
0
 
LVL 1

Author Comment

by:sohaib69
ID: 6894335
if the person dont know the answer then why should he/she respond to my above question
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 12

Expert Comment

by:lexxwern
ID: 6895732
okay; nice to see you being rude;

get down to work; have i under stood your question correct? is my code sample what you are looking for;

now if you cant spell out your question properly in plain english, why are you using that;

hindi main bol kar skata hai to bol, kya chihiye tujhe;?

i'ld be better if you'ld cut being rude and try to explain what your question is; from what i understand on click over some smiley face you want :-) in the message body, is that correct?

lexxwern
expert at ee
0
 
LVL 1

Author Comment

by:sohaib69
ID: 6895756
listen up , mr lexxewrn..

I am pasting the source code which i was telling you and yes offcourse i can talk in urdu, not hindi - but i cant write.

source code 1

=====================
var L_EMOTICONPATH_TEXT = "http://www.mydomain.com/icon/";
<!-- EDIT THIS ONE UP ABOVE ONLY -->

var L_TOOLBARGIF_TEXT = L_EMOTICONPATH_TEXT + "rte_tbEN.gif";
var L_CANCEL_TEXT = "Cancel";
var L_INSERT_TEXT = "Insert";
var L_LINKIMGBORDER_TEXT = "Display a border around the image link";
var L_LINKSELECT_TEXT = "Select a community page: ";
var L_LINKSELECTPAGE_TEXT = "Select Page";
var L_LINKWEB_TEXT = "or type in a URL to a page on the Web: ";
var L_PUTITLEBGCOLOR_TEXT = "Set the Background Color";
var L_PUTITLEFONTFACE_TEXT = "Set the Font Style";
var L_PUTITLEFONTSIZE_TEXT = "Set The Font Size";
var L_PUTITLEIMAGE_TEXT = "Insert/ Edit Image";
var L_PUTITLELINK_TEXT = "Insert/ Edit a link";
var L_PUTITLENEWTABLE_TEXT = "Create/ Edit Table";
var L_PUTITLEPARAGRAPHSTYLE_TEXT = "Set the Paragraph Style";
var L_PUTITLETEXTCOLOR_TEXT = "Set the Text Color";
var L_PUTITLEEMOTICON_TEXT = "Insert Emoticon";
var L_STYLEFORMATTED_TEXT = "Preformatted";
var L_STYLEHEADING_TEXT = "Heading ";
var L_STYLENORMAL_TEXT = "Normal";
var L_STYLESAMPLE_TEXT = "ABCabc012...  ";
var L_TABLEBG_TEXT = "Background";
var L_TABLEBORDERS_TEXT = "Borders";
var L_TABLEINPUTBGCOLOR_TEXT = "Background Color: ";
var L_TABLEINPUTBGIMGURL_TEXT = "Background Image URL: ";
var L_TABLEINPUTBORDER_TEXT = "Border Width: ";
var L_TABLEINPUTBORDERCOLOR_TEXT = "Border Color: ";
var L_TABLEINPUTCELLPADDING_TEXT = "Cell Padding: ";
var L_TABLEINPUTCELLSPACING_TEXT = "Cell Spacing: ";
var L_TABLEINPUTCOLUMNS_TEXT = "Columns: ";
var L_TABLEINPUTROWS_TEXT = "Rows: ";
var L_TABLEPADDINGANDSPACING_TEXT = "Padding and Spacing";
var L_TABLEROWSANDCOLS_TEXT = "Rows and Columns";
var L_TABLEINSERTROW_TEXT = "Insert Row";
var L_TABLEINSERTCELL_TEXT = "Insert Column";
var L_TABLEINSERT_TEXT = "Insert Table";
var L_TABLEUPDATE_TEXT = "Update Table";
var L_TABLENEW_TEXT = "New Table";
var L_TABLEEDIT_TEXT = "Edit Table";
var L_TIPB_TEXT = "Bold";
var L_TIPBGCOLOR_TEXT = "Background Color";
var L_TIPCJ_TEXT = "Center Justify";
var L_TIPCOPY_TEXT = "Copy Text";
var L_TIPCUT_TEXT = "Cut Text";
var L_TIPDINDENT_TEXT = "Decrease Indent";
var L_TIPFGCOLOR_TEXT = "Text Color";
var L_TIPFSIZE_TEXT = "Font Size";
var L_TIPFSTYLE_TEXT = "Font Style";
var L_TIPI_TEXT = "Italic";
var L_TIPIINDENT_TEXT = "Increase Indent";
var L_TIPLINE_TEXT = "Insert Line";
var L_TIPLINK_TEXT = "Insert Link";
var L_TIPLJ_TEXT = "Left Justify";
var L_TIPOL_TEXT = "Numbered List";
var L_TIPP_TEXT = "Paragraph Style";
var L_TIPPASTE_TEXT = "Paste Text";
var L_TIPPICTURE_TEXT = "Insert Picture";
var L_TIPRJ_TEXT = "Right Justify";
var L_TIPTABLE_TEXT = "Insert Table";
var L_TIPU_TEXT = "Underline";
var L_TIPUL_TEXT = "Bulleted List";
var L_TIPEMOTICON_TEXT = "Emoticons";
var L_MODETITLE_TEXT = "Advanced HTML Mode";
var L_MODETITLE_TEXT = "Use HTML to create your page.";
var L_MODEDESC_TEXT = " - Edit the HTML formatting commands directly.";
var L_CUSTOMFONT_TEXT = "Other Font...";
var L_CUSTOMFONTENTRY_TEXT = "Enter the name of your font:";
var L_SAMPLEFONTENTRY_TEXT = "Arial, Geneva, Sans-serif";
var L_CLOSEBUTTON_TEXT = "x";
var L_PHOTOURL_TEXT = 'about:blank';

var L_TBDATABINDING_TEXT = "Columns";
var L_TBDATALABEL_TEXT   = 'Add a placeholder for the selected column.';


var L_DEFAULTHTML_TEXT = "<DIV></DIV>";

// List of emoticon gifs. Add or remove to change selection
// arEmoticons - 12x12 pixels
// arBigEmoticons - 16x16 pixels
var arEmoticons = new Array("emsmile.gif","emsad.gif","emdgust.gif","emcrook.gif","emsmiled.gif","emsmilep.gif","emsmileo.gif","emwink.gif", "emrose.gif","emlips.gif","emunlove.gif","emlove.gif","emvamp.gif","embeer.gif","emcocktl.gif","emgift.gif","ememail.gif","emthdown.gif","emthup.gif","emphone.gif","emphoto.gif","emmessag.gif","emfemale.gif","emmale.gif");
var arBigEmoticons = new Array("emarrow_right.gif","emarrow_left.gif","emmail_alert.gif","emwww_link.gif","emexclaim.gif","emhammer.gif");

// Customize Font List
// FONTNAME_TEXT - Displayed in the pop-up
// FONTNAMEDEF_TEXT - The font definition used in the HTML
var L_FONTARIAL_TEXT = "Arial";
var L_FONTARIALDEF_TEXT = "Geneva, Arial, Sans-serif";
var L_FONTARIALBLACK_TEXT = "Arial Black";
var L_FONTARIALBLACKDEF_TEXT = "Arial Black, Geneva, Arial, Sans-serif";
var L_FONTCOURIERNEW_TEXT = "Courier New";
var L_FONTCOURIERNEWDEF_TEXT = "Courier New, Courier, Monospace";
var L_FONTTIMESNEWROMAN_TEXT = "Times New Roman";
var L_FONTTIMESNEWROMANDEF_TEXT = "Times New Roman, Times, Serif";
var L_FONTVERDANA_TEXT = "Verdana";
var L_FONTVERDANADEF_TEXT = "Verdana, Geneva, Arial, Sans-serif";
var L_LUCIDAHAND_TEXT = "Lucida Handwriting";
var L_LUCIDAHANDDEF_TEXT = "Lucida Handwriting, Cursive";
var L_GARAMOND_TEXT = "Garamond";
var L_GARAMONDDEF_TEXT = "Garamond, Times, Serif";
var L_WEBDINGS_TEXT = "Webdings";
var L_WEBDINGSDEF_TEXT = "Webdings";
var L_WINGDINGS_TEXT = "Wingdings";
var L_WINGDINGSDEF_TEXT = "Wingdings";

// Add/ Remove fonts by modifying array
// _CFont(Definition, Display Text, Symbol)
// Set Symbol=true for non-alphabetic fonts to append display text in default font to the sample string
function _CFont(szDef,szText,bSymbol) {
      return new Array(szDef,szText,bSymbol);
};

defaultFonts = new Array();
defaultFonts[0] = _CFont(L_FONTARIALDEF_TEXT, L_FONTARIAL_TEXT, false);
defaultFonts[1] = _CFont(L_FONTARIALBLACKDEF_TEXT, L_FONTARIALBLACK_TEXT, false);
defaultFonts[2] = _CFont(L_FONTVERDANADEF_TEXT, L_FONTVERDANA_TEXT, false);
defaultFonts[3] = _CFont(L_FONTTIMESNEWROMANDEF_TEXT, L_FONTTIMESNEWROMAN_TEXT, false);
defaultFonts[4] = _CFont(L_GARAMONDDEF_TEXT,L_GARAMOND_TEXT, false);
defaultFonts[5] = _CFont(L_LUCIDAHANDDEF_TEXT,L_LUCIDAHAND_TEXT, false);
defaultFonts[6] = _CFont(L_FONTCOURIERNEWDEF_TEXT, L_FONTCOURIERNEW_TEXT, false);
defaultFonts[7] = _CFont(L_WEBDINGSDEF_TEXT, L_WEBDINGS_TEXT, true);
defaultFonts[8] = _CFont(L_WINGDINGSDEF_TEXT, L_WINGDINGS_TEXT, true);

// Width of each toolbar button
// Entry 5-8 are specify "Paragraph","Font Style", and "Font Size" respectively
// Update widths if localized
var PHOTO_URL = L_PHOTOURL_TEXT
var aSizes = new Array(25,25,25,7,80,76,71,7,25,25,25,8,25,25,25,8,25,25,25,25,8,25,25,25,25,8,25,25,8,25);
=============================================

Source code 2

============================================
//  EDITOR PUBLIC (API)
function setHTML(szHTML)
{
      if (g_state.bMode)
            idEditbox.document.body.innerHTML = szHTML
      else
            idEditbox.document.body.innerText = szHTML
      _Editor_MoveSelection(true)
}

function getHTML()
{
      var szRet = (g_state.bMode ? idEditbox.document.body.innerHTML : idEditbox.document.body.innerText)
      return szRet
}

function getText() {
      var szRet = ""
      if (g_state.bMode)
            szRet = idEditbox.document.body.innerText
      else {
            setMode(true)
            szRet = idEditbox.document.body.innerText
            setMode(false)
      }
      return szRet
}

function getBody()
{
      var oRet = idEditbox.document.body
      return oRet
}

function getWidth()
{
      var nRet = document.body.offsetWidth
      return nRet
}

function getHeight()
{
      var nRet = document.body.offsetHeight
      return nRet
}

function insertHTML(szHTML)
{
      var sType
      
      var sel = g_state.GetSelection()
      sType = sel.type
      if (g_state.bMode) {
            if (sType=="Control")
                  sel.item(0).outerHTML = szHTML
            else
                  sel.pasteHTML(szHTML)
      }
      else
            sel.text = szHTML
}

function setFocus() {
      idEditbox.focus()
}

function appendHTML(szHTML) {
      if (g_state.bMode)
            idEditbox.document.body.insertAdjacentHTML("beforeEnd",szHTML)
      else
            idEditbox.document.body.insertAdjacentText("beforeEnd",szHTML)
}

function setBGColor(szValue)
{
      g_state.bgColor = szValue

      if (g_state.bMode)
            idEditbox.document.body.bgColor = g_state.bgColor
}

function getBGColor()
{
      var szRet = g_state.bgColor
      return szRet
}

function setDefaultStyle(szValue)
{
      g_state.css = szValue
      if (g_state.bMode)
            idEditbox.document.body.style.cssText = g_state.css
}

function getDefaultStyle()
{
      var oRet = g_state.css
      return oRet
}

function setSkin(szSkin)
{
      if (szSkin == null)
            document.styleSheets.skin.cssText = g_state.defaultSkin
      else
            document.styleSheets.skin.cssText = szSkin
      document.styleSheets.skin.disabled = false      
}

function setPopupSkin(szSkin)
{
      if (szSkin == null)
            document.styleSheets.popupSkin.cssText = g_state.popupSkin
      else
            document.styleSheets.popupSkin.cssText = szSkin

      _CPopup_Init()
}

function setToolbar(id,g_state)
{
      var el = document.all[id]
      if (el)
            el.style.display = (g_state) ? "" : "none"      
      if (id=="tbmode")
            _setSize()
}

function setLinks(arLinks)
{
      g_state.aLinks = arLinks
}

function setBindings(aBindings)
{
      if ((aBindings) && (aBindings.length>0))
      {
            g_state.aBindings = aBindings

            for (var iField = DBSelect.length-1; iField > 0; iField--)
                  DBSelect[iField] = null

            for (var iField = 0; iField < g_state.aBindings.length; iField++)
                  DBSelect.add(new Option(g_state.aBindings[iField]))

            tbDBSelect.style.display = "inline"
      }
      else
            tbDBSelect.style.display = ""
}

function setMode(bMode)
{
      if (bMode!=g_state.bMode) {
            g_state.bMode = bMode
      
            var objBody = idEditbox.document.body
            if (!bMode&& !g_state.bMode)
            {
                  _CPopup_Hide()
                  objBody.bgColor = objBody.style.cssText = ""
                  if (g_state.customButtons)
                        idStandardBar.style.display = "none"
                  else
                        idToolbar.style.display = "none"
      
                  objBody.innerText = idEditbox.document.body.innerHTML
                  objBody.className = "textMode"
            }
            if ((bMode) && (g_state.bMode))
            {
                  setDefaultStyle(g_state.css)
                  setBGColor(g_state.bgColor)
                  objBody.className = idStandardBar.style.display = idToolbar.style.display = ""
                  objBody.innerHTML = idEditbox.document.body.innerText
            }
            _setSize()
            cbMode.checked = !bMode
            _Editor_MoveSelection(true)
            setFocus()
      }      
      return bMode
}

function addButton(sID,sButton)
{
      if (!sID)
            tbButtons.insertAdjacentHTML("beforeEnd","<BR>")
      else      
            tbButtons.insertAdjacentHTML("beforeEnd","<INPUT TYPE=\"button\" ONCLICK=\"_userButtonClick(this)\" CLASS=\"userButton\" ID=\"" + sID + "\" VALUE=\"" + sButton + "\">&nbsp;")
      
      g_state.customButtons = true
}

//  EDITOR PRIVATE

function _Format(szHow, szValue) {
      var oSel      = g_state.GetSelection()
      var sType   = oSel.type
      var oTarget = (sType == "None" ? idEditbox.document : oSel)
      var oBlock  = (oSel.parentElement != null ? _CUtil_GetBlock(oSel.parentElement()) : oSel.item(0))
      setFocus()
      switch(szHow)
      {
            case "BackColor":
                  var el = null
                  if (oSel.parentElement != null) {
                        el =  _CUtil_GetElement(oSel.parentElement(),"TD")
                        if (!el) el =  _CUtil_GetElement(oSel.parentElement(),"TH")
                        if (!el) el =  _CUtil_GetElement(oSel.parentElement(),"TR")
                        if (!el) el =  _CUtil_GetElement(oSel.parentElement(),"TABLE")
                  }
                  else
                        el = _CUtil_GetElement(oSel.item(0),"TABLE")
                  if (el)
                        el.bgColor = szValue
                  else
                        setBGColor(szValue)
                  break;
            case "Justify":
                  if (oBlock)
                  {
                        oBlock.style.textAlign = ""
                        if (((oBlock.tagName=="TABLE") || (oBlock.tagName=="IMG")) && (("left"==oBlock.align) && ("Left"==szValue))) {
                              oBlock.align = ""
                              break;
                        }      
                        oBlock.align = szValue
                        if ((oBlock.tagName=="HR") || ((oBlock.tagName=="IMG") && szValue!="Center")) break;
                  }
                  szHow=szHow+szValue
                  szValue=""
                  // Fall through
            default:
                  oTarget.execCommand(szHow, false, szValue)
                  break
      }
      g_state.RestoreSelection()
      setFocus()
      return true
}

function _initEditor() {
      g_state = new _CState()
      window.onresize = _setSize

      var sz  =   ""
      sz  +=  ""
      +   "<STYLE>"
      +         ".DataBound{border:1 solid #999999;margin:1;font-family:Courier;background:#F1F1F1}\n"
      +         ".textMode {border-top: 1px black solid;font: 10pt courier}\n.NOBORDER TD {border:1px gray solid}"
      +         "BODY {border: 1px black solid;border-top: none;}"
      +   "</STYLE>"
      +   "<BODY ONCONTEXTMENU=\"return false\">"
      +            "<DIV></DIV>"
      +   "</BODY>"
      _CPopup_Init()
      idEditbox.document.designMode = "on"
      idEditbox.document.open("text/html","replace")
      idEditbox.document.write(sz)
      idEditbox.document.close()
      idEditbox.document.body.onblur = g_state.SaveSelection      
      idEditbox.document.onkeydown = _Editor_KeyDownHandler
      idEditbox.document.onmousedown = _Editor_ClickHandler
      idEditbox.document.ondblclick = _Editor_DblClickHandler
      setTimeout("_pageReady()",0)
}

function _Editor_MoveSelection(bDir) {
      var tr = idEditbox.document.body.createTextRange()
      tr.collapse(bDir)
      tr.select()
}

function _Editor_ClickHandler() {
      g_state.selection = null
}

function _Editor_KeyDownHandler() {
      var ev = this.parentWindow.event
      if (ev.keyCode==9)
            g_state.SaveSelection()
      else
            g_state.selection=null
}

function _Editor_DblClickHandler() {
      // Shortcuts
      var el = this.parentWindow.event.srcElement
      if (el.tagName=="IMG")  {
            el.removeAttribute("width")
            el.removeAttribute("height")
            el.style.removeAttribute("width")
            el.style.removeAttribute("height")
            el.width = el.width
            el.height = el.height
      }
      if (el.tagName=="TABLE")
            _CPopup_Show('Table')
}

function _setSize() {
      document.all.idEditbox.style.pixelHeight = document.body.clientHeight - idToolbar.offsetHeight - document.all.idMode.offsetHeight
      document.all.idPopup.style.pixelLeft = (document.body.clientWidth - idPopup.document.all.puRegion.offsetWidth) / 2      
}

function _pageReady()
{
      idEditbox.document.body.oncontextmenu = new Function("return false")      
      if (g_state.szSearch!="")
            idPopup.document.domain = idEditbox.document.domain = document.domain = g_state.szSearch
      //_Editor_MoveSelection(false)
      if (self.parent.RTELoaded)
            self.parent.RTELoaded(self)
      if (document.styleSheets.skin.disabled)
            setSkin(null)
      _setSize()
      idEditor.style.visibility=""
}

function _userButtonClick(el)
{
      if (parent.RTEButton) parent.RTEButton(self, el.id)
}

function _drawToolbar()
{
      var aIds = new Array("cut","copy","paste","bar1","formatblock","fontstyle","fontsize","bar2","bold","italic","underline","bar3","left","center","right","bar4","orderedlist","unorderedlist","outdent","indent","bar5","line","link","table","image","bar6","bgcolor","textcolor","bar7","emoticon")
      var aTips = new Array(L_TIPCUT_TEXT,L_TIPCOPY_TEXT,L_TIPPASTE_TEXT,"",L_TIPP_TEXT,L_TIPFSTYLE_TEXT,L_TIPFSIZE_TEXT,"",L_TIPB_TEXT,L_TIPI_TEXT,L_TIPU_TEXT,"",L_TIPLJ_TEXT,L_TIPCJ_TEXT,L_TIPRJ_TEXT,"",L_TIPOL_TEXT,L_TIPUL_TEXT,L_TIPDINDENT_TEXT,L_TIPIINDENT_TEXT,"",L_TIPLINE_TEXT,L_TIPLINK_TEXT,L_TIPTABLE_TEXT,L_TIPPICTURE_TEXT,"",L_TIPBGCOLOR_TEXT,L_TIPFGCOLOR_TEXT,"",L_TIPEMOTICON_TEXT)
      var aCommand = new Array("_Format('cut')","_Format('copy')","_Format('paste')",null,"_CPopup_Show('formatblock')","_CPopup_Show('font')","_CPopup_Show('fontsize')",null,"_Format('bold')","_Format('italic')","_Format('underline')",null,"_Format('Justify','Left')","_Format('Justify','Center')","_Format('Justify','Right')",null,"_Format('insertorderedlist')","_Format('insertunorderedlist')","_Format('outdent')","_Format('indent')",null,"_Format('InsertHorizontalRule')","_CPopup_Show('Link')","_CPopup_Show('Table')","_CPopup_Show('Image')",null,"_CPopup_Show('BackColor')","_CPopup_Show('ForeColor')",null,"_CPopup_Show('Emoticon')")
      var sz = "<DIV ID=idStandardBar><NOBR>", iLeft=0, iHeight=24
      for (var i = 0 ; i < aSizes.length; i++)
      {
            sz      +=  ""
            +   "<SPAN CLASS=tbButton ONKEYPRESS=\"if (event.keyCode==13) {" + aCommand[i] + ";event.keyCode=0}\" " + (aTips[i]=="" ? "" : ("TABINDEX=" + (i+1))) + " "
            +         "ID=\"tb" + aIds[i] + "\" "
            +         "STYLE=\"width: " + aSizes[i] + ";height:" + iHeight
            +         "\""
            +   ">"
            +         "<SPAN "
            +               "STYLE=\""
            +                     "position:absolute;"
            +                     "width:" + aSizes[i] + ";height:" + iHeight + ";"
            +                     "clip: rect(0 " + aSizes[i] + " " + iHeight + " 0)"
            +               "\""
            +         ">"
            +               "<IMG "
            +                     "TITLE=\"" + aTips[i] + "\" "
            +                     "ONCLICK=\"" + aCommand[i] + "; event.cancelBubble=true\" "
            +                     "ONMOUSEDOWN=\"if (event.button==1) this.style.pixelTop=-" + (iHeight*2) + "\" "
            +                     "ONMOUSEOVER=\"this.style.pixelTop=-" + iHeight + "\" "
            +                     "ONMOUSEOUT=\"this.style.pixelTop=0\" "
            +                     "ONMOUSEUP=\"this.style.pixelTop=-" + iHeight + "\" "
            +                     "SRC=\"" + L_TOOLBARGIF_TEXT + "\" "
            +                     "STYLE=\"position:absolute;top:0;left:-" + iLeft + "\""
            +               ">"
            +         "</SPAN>"
            +   "</SPAN>"
            +  (aTips[i]=="" ?  "</NOBR><NOBR>" : "")
            iLeft += aSizes[i]
      }
      sz  +=  ""
      +   "</NOBR>"
      +   "<SPAN CLASS=tbButton ID=\"tbDBSelect\">"
      +         "<SPAN "
      +               "STYLE=\""
      +                     "position:absolute;"
      +                     "width: 100;"
      +                     "clip: rect(0 100 " + iHeight + " 0)"
      +               "\""
      +         ">"
      +         "<SELECT "
      +               "ID=DBSelect "
      +               "ONCLICK='event.cancelBubble=true;' "
      +               "ONCHANGE='_CPopup_InsertDatabound(this)' "
      +         ">"
      +               "<OPTION>"
      +                     "- " + L_TBDATABINDING_TEXT + " -"
      +               "</OPTION>"
      +         "</SELECT>"
      document.write(sz + "</DIV>")
}

function _drawModeSelect() {
      var sz = "<TABLE CELLSPACING=0 CELLPADDING=0 ID=idMode>"
      +      "<TR><TD><INPUT TYPE=checkbox ID=cbMode ONCLICK=\"setMode(!this.checked)\"></TD>"
      +   "<TD><LABEL FOR=cbMode>" + L_MODETITLE_TEXT + "</LABEL>" + L_MODEDESC_TEXT
      +   "</TD></TR></TABLE>"
      document.write(sz)
      cbMode.checked = false
}


//  _CState

function _CState()
{
      this.selection            = null
      this.bMode                  = true
      this.customButtons       = false
      this.css = this.bgColor      = ""
      this.defaultSkin      = document.styleSheets.skin.cssText
      this.popupSkin            = document.styleSheets.popupSkin.cssText
      this.aLinks                  = new Array()
      this.szSearch            = location.search.substring(1)
      this.aBindings            = new Array()
      this.aListPopups      = new Object()
      this.aCache                  = new Object()
      
      this.RestoreSelection      = _CState_RestoreSelection
      this.GetSelection      = _CState_GetSelection
      this.SaveSelection      = _CState_SaveSelection
}

function _CState_RestoreSelection()
{
      if (this.selection) this.selection.select()
}

function _CState_GetSelection()
{
      var oSel = this.selection

      if (!oSel) {
            oSel = idEditbox.document.selection.createRange()
            oSel.type = idEditbox.document.selection.type
      }
      return oSel
}

function _CState_SaveSelection()
{
      g_state.selection = idEditbox.document.selection.createRange()
      g_state.selection.type = idEditbox.document.selection.type
}


//  POPUP (Link, table and image popup need to be worked on)

function _CPopup_Init()
{
      var sz  =   ""
      +   "<HTML ID=popup>"
      +         "<STYLE>"
      +               document.styleSheets.defPopupSkin.cssText
      +               "\n"
      +               document.styleSheets.popupSkin.cssText
      +         "</STYLE>"
      +         "<SCRIPT>function IMAGELoaded(w) {parent._IMAGELoaded(w,self)}</SCRIPT>"
      +         "<BODY "
      +               "ONSCROLL=\"return false\" SCROLL=no TABINDEX=-1 "
      +               "ONSELECTSTART=\"return event.srcElement.tagName=='INPUT'\" "
      +         "><DIV ID=puRegion>"
      +               "<TABLE ID=header>"
      +                     "<TR>"
      +                           "<TH NOWRAP ID=caption></TH>"
      +                           "<TH VALIGN=middle ALIGN=RIGHT><DIV ID=close ONCLICK=\"parent._CPopup_Hide()\">"
      +                                 L_CLOSEBUTTON_TEXT
      +                           "</DIV></TH>"
      +                     "</TR>"
      +               "</TABLE>"
      +               "<DIV ALIGN=CENTER ID=content></DIV>"
      +         "</DIV></BODY>"
      +   "</HTML>"

      idPopup.document.open("text/html","replace")
      idPopup.document.write(sz)
      idPopup.document.close()
}

function _CPopup_InsertDatabound(eSelect)
{
      if (eSelect.selectedIndex != 0)
      {
            var sElemName = eSelect.options[eSelect.selectedIndex].text;
            var iLen = sElemName.length
            sElemName = sElemName.replace(/"/g, '&#034;')
            insertHTML('<INPUT CLASS=DataBound SIZE=' + (iLen + 2) + ' NAME="' + sElemName +'" VALUE=" ' + sElemName + ' ">')
            eSelect.selectedIndex = 0;
            idEditbox.focus()      
      }
}

function _CPopup_Hide()
{
      document.all.idPopup.style.zIndex=-1
      document.all.idPopup.style.visibility = "hidden"      
      idPopup.document._type = ""
         idPopup.document.onkeydown=idPopup.document.onmouseover=idPopup.document.onclick = null
      idEditbox.focus()
}

function _CPopup_Show(szType)
{
      var oRenderer, szCacheKey = "PopupRenderer." + szType
         if (idPopup.document._type == szType)
            _CPopup_Hide()
      else
      {
            document.all.idPopup.style.zIndex = -1
            oRenderer = g_state.aCache[szCacheKey]
            if ((!oRenderer) || ("Link"==szType))
                  g_state.aCache[szCacheKey] = oRenderer = new _CPopupRenderer(szType)
            // Force Sizing
            document.all.idPopup.style.visibility = ""
            idPopup.document.all.puRegion.style.pixelHeight = idPopup.document.all.puRegion.style.pixelWidth = 100
            
            idPopup.document._type                              = szType
            idPopup.document._renderer                        = oRenderer
            idPopup.document.all.caption.innerText      = oRenderer.GetCaption()
            idPopup.document.all.content.innerHTML      = oRenderer.GetHTML()
            idPopup.document.onkeydown                        = new Function("this._renderer.OnKeyDown()")
            idPopup.document.onmouseover                  = new Function("this._renderer.OnMouseOver()")
            idPopup.document.onclick                        = new Function("this._renderer.OnClick()")
            oRenderer.ResetContext(idPopup.document)
            setTimeout("_CPopupRenderer_Display('" + szType + "')",0)
      }
}

function _CPopupRenderer_Display(szType) {
      var oRenderer, szCacheKey = "PopupRenderer." + szType
      oRenderer = g_state.aCache[szCacheKey]
      if (oRenderer.autoSize) {      
            idPopup.document.all.puRegion.style.pixelHeight = document.all.idPopup.style.pixelHeight = idPopup.document.all.puRegion.offsetHeight
            idPopup.document.all.puRegion.style.pixelWidth = document.all.idPopup.style.pixelWidth = idPopup.document.all.puRegion.offsetWidth + 50
            document.all.idPopup.style.pixelLeft = (document.body.clientWidth - idPopup.document.all.puRegion.offsetWidth) / 2
      }
      else {
            idPopup.document.all.puRegion.style.pixelHeight  = document.all.idPopup.style.pixelHeight = document.body.clientHeight - idToolbar.offsetHeight- document.all.idMode.offsetHeight-20
            idPopup.document.all.puRegion.style.pixelWidth  = document.all.idPopup.style.pixelWidth = document.body.clientWidth - 50
            document.all.idPopup.style.pixelLeft = 25
      }
      document.all.idPopup.style.zIndex=2
      idPopup.focus()
}

function _CPopupRenderer(szType)
{
      this.szType            =  szType
      this.elCurrent      =  this.oDocument  = null

      this.ResetContext   =  _CPopupRenderer_ResetContext
      this.GetCaption      = _CPopupRenderer_GetCaption      
      this.GetHTML      = _CPopupRenderer_GetHTML
      this.autoSize      = true
      this.OnMouseOver = new Function()
      this.OnKeyDown      = _CListPopupRenderer_GenericOnKeyDown
      switch(szType)
      {
            case "formatblock":
            case "font":
            case "fontsize":
                  this.OnMouseOver= _CListPopupRenderer_OnMouseOver
                  this.OnKeyDown  = _CListPopupRenderer_OnKeyDown
            case "BackColor":
            case "ForeColor":
                  this.OnClick      = _CListPopupRenderer_OnClick
                  this.Highlight  = _CListPopupRenderer_Highlight
                  this.Select            = _CListPopupRenderer_Select
                  break
            default:
                  this.OnClick      = new Function()
                  break      
      }

      switch(szType)
      {
            case "formatblock":
                  this.szCaption            = L_PUTITLEPARAGRAPHSTYLE_TEXT
                  this.PrepareHTML      = _CFormatBlockPopupRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                  break
            case "font":
                  this.szCaption            = L_PUTITLEFONTFACE_TEXT
                  this.PrepareHTML      = _CFontFacesPopupRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                  break
            case "fontsize":
                  this.szCaption            = L_PUTITLEFONTSIZE_TEXT
                  this.PrepareHTML      =_CFontSizesPopupRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                  break
            case "Link":
                  this.szCaption            = L_PUTITLELINK_TEXT
                  this.PrepareHTML      = _CLinkPopupRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                  break
            case "Table":
                  this.szCaption            = L_PUTITLENEWTABLE_TEXT
                  this.PrepareHTML      = _CTablePopupRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                  break
            case "Image":
                  this.szCaption            = L_PUTITLEIMAGE_TEXT
                  this.PrepareHTML      = _CImagePopupRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                     this.autoSize            = false
                  break
            case "BackColor":
                  this.szCaption            = L_PUTITLEBGCOLOR_TEXT
                  this.szHTML                  = "<DIV ID=ColorPopup ALIGN=CENTER>" + _CUtil_BuildColorTable("") + "</DIV>"
                  break
            case "ForeColor":
                  this.szCaption            = L_PUTITLETEXTCOLOR_TEXT
                  this.szHTML                  = "<DIV ID=ColorPopup ALIGN=CENTER>" + _CUtil_BuildColorTable("") + "</DIV>"
                  break
            case "Emoticon":
                  this.szCaption            = L_PUTITLEEMOTICON_TEXT
                  this.PrepareHTML      = _CEmoticonRenderer_PrepareHTML
                  this.szHTML                  = this.PrepareHTML()
                  break
            default:
                  this.szCaption            = ""
                  break
      }
}

function _CPopupRenderer_ResetContext(oDoc)
{
      this.oDocument  = oDoc
      this.elCurrent  = null

      if (this.szType=="Table") {
                  var oSel      = idEditbox.document.selection.createRange()
            var oBlock  = (oSel.parentElement != null ? _CUtil_GetElement(oSel.parentElement(),"TABLE") : _CUtil_GetElement(oSel.item(0),"TABLE"))
            if (oBlock!=null) {
                  oDoc.all.tabEdit.className=""
                  oDoc.all.tabEditBodytxtPadding.value = oBlock.cellPadding
                  oDoc.all.tabEditBodytxtSpacing.value = oBlock.cellSpacing
                  oDoc.all.tabEditBodytxtBorder.value = oBlock.border
                  oDoc.all.tabEditBodytxtBorderColor.value = oBlock.borderColor
                  oDoc.all.tabEditBodytxtBackgroundImage.value = oBlock.background
                  oDoc.all.tabEditBodytxtBackgroundColor.value = oBlock.bgColor
            }
            oDoc.elCurrent = oBlock
      }
}

function _CPopupRenderer_GetCaption()
{
      return this.szCaption
}

function _CPopupRenderer_GetHTML()
{
      return this.szHTML
}

function _CEmoticonRenderer_PrepareHTML() {
      var sz = "<DIV ALIGN=center>"
      
      for (var i=0; i < arEmoticons.length; i++)
      {
            sz  +=  "<IMG TABINDEX=" + (i+1) + " ONCLICK=\"parent._CEmoticonRenderer_Select(this)\" CLASS=emoticon SRC=\"" + L_EMOTICONPATH_TEXT + arEmoticons[i] + "\" WIDTH=12 HEIGHT=12 HSPACE=3 VSPACE=3>"
            if ((i+1)%8==0) sz+="<BR>"
      }                  
      if (i%8!=0) sz+="<BR>"
      for (var i=0; i < arBigEmoticons.length; i++)
      {
            sz  +=  "<IMG TABINDEX=" + (i+arEmoticons.length) + " ONCLICK=\"parent._CEmoticonRenderer_Select(this)\" CLASS=emoticon SRC=\"" + L_EMOTICONPATH_TEXT + arBigEmoticons[i] + "\" WIDTH=16 HEIGHT=16 HSPACE=4 VSPACE=4>"
            if ((i+1)%6==0) sz+="<BR>"
      }                  
      
      sz+="</DIV>"
      return sz
}

function _CEmoticonRenderer_Select(elImg) {
      insertHTML("<IMG SRC=\"" + elImg.src + "\" WIDTH=" + elImg.width + " HEIGHT=" + elImg.height + ">")
      g_state.RestoreSelection()
      _CPopup_Hide()
}

function _CFontSizesPopupRenderer_PrepareHTML()
{  
      var sz  =  "<TABLE ALIGN=center ID=idList CELLSPACING=0 CELLPADDING=0>"
      for (var i=1; i <= 7; i++)
      {
            sz  +=  ""
            +   "<TR>"
            +         "<TD NOWRAP "
            +               "_item=" + i + " "
            +               "ALIGN=center "
            +               "STYLE=\"margin:0pt;padding:0pt\""
            +         ">"
            +               "<FONT SIZE=" + i + ">"
            +                     L_STYLESAMPLE_TEXT + "(" + i + ")"
            +               "</FONT>"
            +         "</TD>"
            +   "</TR>"
      }                  
      sz  +=  "</TABLE>"
      return sz
}

function _CFontFacesPopupRenderer_PrepareHTML()
{  
      var sz  =  "<TABLE ALIGN=center ID=idList CELLSPACING=0 CELLPADDING=0>"
      for (var i=0; i < defaultFonts.length; i++)
      {
            sz  +=  ""
            +   "<TR>"
            +         "<TD NOWRAP "
            +               "_item=" + i + " "
            +               "ALIGN=center "
            +               "STYLE=\"margin:0pt;padding:0pt\""
            +         ">"
            +               "<FONT FACE=\"" + defaultFonts[i][0] + "\">"
            +                     defaultFonts[i][1]
            +               "</FONT>"
            +                  (defaultFonts[i][2] ? ("(" + defaultFonts[i][1] + ")") : "")
            +         "</TD>"
            +   "</TR>"
      }
      
//      sz += "<TR><TD ONCLICK=\"parent._CFontFacesPopupRenderer_InsertOther(this)\" ALIGN=center _item=\"custom\" STYLE=\"margin:0pt;padding:0pt\" NOWRAP><FONT ID=customFont>" + L_CUSTOMFONT_TEXT + "</FONT></TR>"
      sz  +=  "</TABLE>"

      return sz
}

function _CFontFacesPopupRenderer_InsertOther(el) {
      if (el._item=="custom") {
            el._item = "input"
            var sz = "<INPUT ONSELECTSTART=\"event.cancelBubble=true\" ONKEYDOWN=\"event.cancelBubble=true\" ONKEYPRESS=\"if (event.keyCode==13) {this.face=this.value;document._renderer.Select(this.parentElement)};event.cancelBubble=true\" VALUE=\"" + L_CUSTOMFONTENTRY_TEXT + "\" ONFOCUS=\"if (this.value==this.defaultValue) this.select()\" TYPE=text>"
            el.innerHTML = sz
            el.children[0].focus()
      }
      el.document.parentWindow.event.cancelBubble = true      
}

function _CFormatBlockPopupRenderer_PrepareHTML()
{  
      var sz, defaultParagraphs   = new Array()

      defaultParagraphs[0] = new Array("<P>", L_STYLENORMAL_TEXT + " (P)")      
      for (var i=1; i <= 6; i++)
            defaultParagraphs[i] = new Array("<H"+i+">", L_STYLEHEADING_TEXT + i + " (H" + i + ")")      
      defaultParagraphs[7] = new Array("<PRE>", L_STYLEFORMATTED_TEXT + "(PRE)")

      sz  =  "<TABLE CLASS=block ALIGN=center ID=idList CELLSPACING=0 CELLPADDING=0>"
      for (var i=0; i < defaultParagraphs.length; i++)
      {
            sz  +=  ""
            +   "<TR>"
            +         "<TD NOWRAP "
            +               "_item=" + i + " "
            +               "ALIGN=center "
            +               "STYLE=\"margin:0pt;padding:0pt\""
            +         ">"
            +               defaultParagraphs[i][0]
            +               defaultParagraphs[i][1]
            +               "</" + defaultParagraphs[i][0].substring(1)
            +         "</TD>"
            +   "</TR>"
      }
      sz  +=  "</TABLE>"
      return sz
}

function _CImagePopupRenderer_PrepareHTML()
{  
      return "<IFRAME ID=idPhotos WIDTH=98% HEIGHT=90% STYLE=\"visibility: hidden;border: none\" SRC=\"photos/photos.htm" + ((g_state.szSearch!="") ? ("?" + g_state.szSearch) : "") +  "\"></IFRAME>"
}

function _IMAGELoaded(wPhotos,wPopup) {
      wPhotos.setBGColor("#F1F1F1")
      wPopup.document.all.idPhotos.style.visibility = ""
}

function _CTablePopupRenderer_PrepareHTMLPage(szID,bDisplay) {
      var sz=""
      +   "<TABLE height=100% " + ((!bDisplay) ? " style=\"display: none\"" : "") + " width=100% CELLSPACING=0 CELLPADDING=0 ID=" + szID + ">"
      +         "<TR ID=tableContents>"
      +               "<TD ID=tableOptions VALIGN=TOP NOWRAP WIDTH=150 ROWSPAN=2>"
      +                     "<A HREF=\"javascript:parent._CTablePopupRenderer_Select(this,'" + szID + "','prop1')\">"
      +                           L_TABLEROWSANDCOLS_TEXT
      +                     "</A>"
      +                     "<BR>"
      +                     "<A HREF=\"javascript:parent._CTablePopupRenderer_Select(this,'" + szID + "','prop2')\">"
      +                           L_TABLEPADDINGANDSPACING_TEXT
      +                     "</A>"
      +                     "<BR>"
      +                     "<A HREF=\"javascript:parent._CTablePopupRenderer_Select(this,'" + szID + "','prop3')\">"
      +                           L_TABLEBORDERS_TEXT
      +                     "</A>"
      +                     "<BR>"
      +                     "<A HREF=\"javascript:parent._CTablePopupRenderer_Select(this,'" + szID + "','prop4')\">"
      +                           L_TABLEBG_TEXT
      +                     "</A>"
      +                     "<BR>"
      +               "</TD>"
      +               "<TD BGCOLOR=black ID=puDivider ROWSPAN=2>"
      +               "</TD>"
      +               "<TD ID=tableProps VALIGN=TOP>"
      if (szID=="tabNewBody") {
            sz+= "<DIV ID='" + szID + "prop1'>"
            +      "<P CLASS=tablePropsTitle>" + L_TABLEROWSANDCOLS_TEXT + "</P>"
            +  "<TABLE><TR><TD>"
            +                           L_TABLEINPUTROWS_TEXT
            +                           "</TD><TD><INPUT SIZE=2 TYPE=text ID=" + szID + "txtRows VALUE=2 >"
            +                           "</TD></TR><TR><TD>"
            +                           L_TABLEINPUTCOLUMNS_TEXT
            +                           "</TD><TD><INPUT SIZE=2 TYPE=text ID=" + szID + "txtColumns VALUE=2 >"
            +                     "</TD></TR></TABLE></DIV>"
      }
      else  {
            sz+= "<DIV ID='" + szID + "prop1'>"
                  +      "<P CLASS=tablePropsTitle>" + L_TABLEROWSANDCOLS_TEXT + "</P>"      
                  +   "<INPUT type=button ID=" + szID + "txtRows VALUE=\"" + L_TABLEINSERTROW_TEXT + "\" ONCLICK=\"parent._CTablePopupRenderer_AddRow(this)\"><P>"
                  +   "<INPUT type=button ID=" + szID + "txtCells VALUE=\"" + L_TABLEINSERTCELL_TEXT + "\" ONCLICK=\"parent._CTablePopupRenderer_AddCell(this)\"><BR>"
                  +      "</DIV>"

      }

      sz +=                     "<DIV ID='" + szID + "prop2' STYLE=\"display: none\">"
      +                              "<P CLASS=tablePropsTitle>" + L_TABLEPADDINGANDSPACING_TEXT + "</P>"
      +                           L_TABLEINPUTCELLPADDING_TEXT
      +                           "<INPUT SIZE=2 TYPE=text ID=" + szID + "txtPadding VALUE=0>"
      +                           "<BR>"
      +                           L_TABLEINPUTCELLSPACING_TEXT
      +                           "<INPUT SIZE=2 TYPE=text ID=" + szID + "txtSpacing VALUE=0>"
      +                     "</DIV>"
      +                     "<DIV ID=" + szID + "prop3 STYLE=\"display: none\">"
      +                              "<P CLASS=tablePropsTitle>" + L_TABLEBORDERS_TEXT + "</P>"
      +                           L_TABLEINPUTBORDER_TEXT
      +                           "<INPUT SIZE=2 TYPE=text ID=" + szID + "txtBorder VALUE=1>"
      +                           "<BR>"
      +                           L_TABLEINPUTBORDERCOLOR_TEXT
      +                           "<INPUT SIZE=4 TYPE=text ID=" + szID + "txtBorderColor value=#000000><BR>"
      +                           _CUtil_BuildColorTable("idBorder"+szID, "", "parent._CTablePopupRenderer_ColorSelect(this,'" + szID + "txtBorderColor')")
      +                     "</DIV>"
      +                     "<DIV ID=" + szID + "prop4 SIZE=12 STYLE=\"display: none\">"
      +                              "<P CLASS=tablePropsTitle>" + L_TABLEBG_TEXT + "</P>"
      +                           L_TABLEINPUTBGIMGURL_TEXT
      +                           "<INPUT TYPE=text ID=" + szID + "txtBackgroundImage SIZE=15>"
      +                           "<BR>"
      +                           L_TABLEINPUTBGCOLOR_TEXT      
      +                           "<INPUT TYPE=text SIZE=4 ID=" + szID + "txtBackgroundColor><BR>"
      +                           _CUtil_BuildColorTable("idBackground"+szID, "", "parent._CTablePopupRenderer_ColorSelect(this,'" + szID + "txtBackgroundColor')")
      +                     "</DIV>"
      +               "</TD>"
      +         "</TR><TR><TD align=center ID=tableButtons valign=bottom>"
      if (szID=="tabNewBody") {
            sz +=      "<INPUT TYPE=submit ONCLICK=\"parent._CTablePopupRenderer_BuildTable('" + szID + "',this.document)\" VALUE=\"" + L_TABLEINSERT_TEXT + "\">"
                  +   " <INPUT TYPE=reset VALUE=\"" + L_CANCEL_TEXT + "\" ONCLICK=\"parent._CPopup_Hide()\">"
      } else {
            sz +=      "<INPUT TYPE=submit ONCLICK=\"parent._CTablePopupRenderer_BuildTable('" + szID + "',this.document)\" VALUE=\"" + L_TABLEUPDATE_TEXT + "\">"
                  +   " <INPUT TYPE=reset VALUE=\"" + L_CANCEL_TEXT + "\" ONCLICK=\"parent._CPopup_Hide()\">"
      }
      sz+=   "</TD></TR></TABLE>"
      return sz
}

function _CTablePopupRenderer_PrepareHTML()
{  
      var sz  = "<TABLE CLASS=tabBox ID=\"tabSelect\" CELLSPACING=0 CELLPADDING=0 WIDTH=95%><TR HEIGHT=15><TD CLASS=tabItem STYLE=\"border-bottom: none\" NOWRAP><DIV ONCLICK=\"if (tabEdit.className!='disabled') {this.className='selected';this.parentElement.style.borderBottom = tabEdit.className=tabNewBody.style.display='';tabEditBody.style.display='none';tabEdit.parentElement.style.borderBottom='1px black solid'}\" CLASS=selected ID=tabNew>New Table</DIV></TD>"
      +   "<TD CLASS=tabItem NOWRAP><DIV ONCLICK=\"if (this.className!='disabled') {this.className='selected';this.parentElement.style.borderBottom = tabNew.className=tabEditBody.style.display='';tabNew.parentElement.style.borderBottom='1px black solid';tabNewBody.style.display='none'}\" CLASS=disabled ID=tabEdit>Edit Table</DIV></TD><TD CLASS=tabSpace WIDTH=100%>&nbsp;</TD></TR><TR><TD VALIGN=TOP CLASS=tabBody COLSPAN=3>"
      +   _CTablePopupRenderer_PrepareHTMLPage("tabNewBody",true)
      +   _CTablePopupRenderer_PrepareHTMLPage("tabEditBody",false)
      +      "</TD></TR></TABLE>"
      return sz
}

function _CTablePopupRenderer_Select(el,szID, id)
{
      var d = el.document

      for (var i = 1; i < 5; i++)
            d.all[szID + "prop" + i].style.display = "none"

      d.all[szID + id].style.display = ""
}


function _CTablePopupRenderer_ColorSelect(el,id)
{
      el.document.all[id].value = el.bgColor
}      

function _CTablePopupRenderer_AddRow(el) {
      var elRow = el.document.elCurrent.insertRow()
      for (var i=0;i<el.document.elCurrent.rows[0].cells.length;i++) {
            var elCell = elRow.insertCell()
            elCell.innerHTML = "&nbsp;"
      }
}

function _CTablePopupRenderer_AddCell(el) {
      for (var i=0;i<el.document.elCurrent.rows.length;i++) {
            var elCell = el.document.elCurrent.rows[i].insertCell()
            elCell.innerHTML = "&nbsp;"
      }
}

function _CTablePopupRenderer_BuildTable(szID, d)
{
      if (szID=="tabNewBody") {
            var sz =   ""
            +   "<TABLE "
            +  (((d.all[szID + "txtBorder"].value=="") || (d.all[szID + "txtBorder"].value=="0")) ? "class=\"NOBORDER\"" : "")
            +         (d.all[szID + "txtPadding"].value != "" ? "cellPadding=\"" + d.all[szID + "txtPadding"].value + "\" " : "")
            +         (d.all[szID + "txtSpacing"].value != "" ? "cellSpacing=\"" + d.all[szID + "txtSpacing"].value + "\" " : "")

            +         (d.all[szID + "txtBorder"].value != "" ? "border=\"" + d.all[szID + "txtBorder"].value + "\" " : "")
            +         (d.all[szID + "txtBorderColor"].value != "" ? "bordercolor=\"" + d.all[szID + "txtBorderColor"].value + "\" " : "")
            +         (d.all[szID + "txtBackgroundImage"].value != "" ? "background=\"" + d.all[szID + "txtBackgroundImage"].value + "\" " : "")

            +         (d.all[szID + "txtBackgroundColor"].value != "" ? "bgColor=\"" + d.all[szID + "txtBackgroundColor"].value + "\" " : "")
            +   ">"

            for (var r=0; r < d.all[szID + "txtRows"].value; r++)
            {
                  sz +=  "<TR>"
                  
                  for (var c=0; c < d.all[szID + "txtColumns"].value; c++)
                        sz +=  "<TD>&nbsp;</TD>"
                  
                  sz +=  "</TR>"
            }

            sz +=  "</TABLE>"
            insertHTML(sz)
   } else
            if (d.elCurrent) {
                  d.elCurrent.cellPadding = d.all.tabEditBodytxtPadding.value
                  d.elCurrent.cellSpacing = d.all.tabEditBodytxtSpacing.value
                  d.elCurrent.border = d.all.tabEditBodytxtBorder.value
                  d.elCurrent.className = (d.elCurrent.border=="" || d.elCurrent.border==0) ? "NOBORDER" : ""
                   d.elCurrent.borderColor = d.all.tabEditBodytxtBorderColor.value
                  d.elCurrent.bgColor = d.all.tabEditBodytxtBackgroundColor.value
                  d.elCurrent.background = d.all.tabEditBodytxtBackgroundImage.value
   }
      _CPopup_Hide()      
}

function _CListPopupRenderer_OnClick()
{
      var elTD = _CUtil_GetElement(this.oDocument.parentWindow.event.srcElement, "TD")

      if (elTD && elTD._item) this.Select(elTD)
}

function _CListPopupRenderer_GenericOnKeyDown() {
      var ev            = this.oDocument.parentWindow.event
      if (ev.keyCode==27) _CPopup_Hide()
}

function _CListPopupRenderer_OnKeyDown()
{
      var el
      var iRow = iCell      = 0
      var ev            = this.oDocument.parentWindow.event
      var idList  = this.oDocument.all.idList
      var elTR      = _CUtil_GetElement(this.elCurrent,"TR")
      var elTD      = _CUtil_GetElement(this.elCurrent,"TD")
      
      
      if (elTR != null)
      {
            iRow      = elTR.rowIndex
            iCell   = elTD.cellIndex
      }
      switch (ev.keyCode)
      {
            case 37:
                  iCell--
                  if (iCell < 0)
                        iCell = idList.rows[iRow].cells.length-1
                  break
            case 38:
                  iRow--
                  if (iRow < 0)
                        iRow = idList.rows.length-1
                  break
            case 39:
                  iCell++
                  if (iCell > idList.rows[iRow].cells.length-1)
                        iCell = 0
                  break
            case 40:
                  iRow++
                  if (iRow > idList.rows.length-1)
                        iRow = 0
                  break
            case 13:
                  break;
            case 27:
                  _CPopup_Hide()
                  break;
            default:
                  return;
      }

      el = idList.rows[iRow].cells[iCell]
      if (el && el._item)
            if (13 == ev.keyCode) {
                  ev.keyCode=0            
                  this.Select(el)
            }
            else
                  this.Highlight(el)
}

function _CListPopupRenderer_OnMouseOver()
{
      var el = _CUtil_GetElement(this.oDocument.parentWindow.event.srcElement, "TD")

      if (el && el._item && el != this.elCurrent)
            this.Highlight(el)
}

function _CListPopupRenderer_Highlight(el)
{
      var elC = this.elCurrent
      if (elC) elC.style.borderWidth =  elC.style.borderColor = elC.style.borderStyle  =   ""
      el.style.borderWidth      =   "1px"
      el.style.borderColor      =   "green"
      el.style.borderStyle      =   "solid"
      this.elCurrent                  =   el
}

function _CListPopupRenderer_Select(elTD)
{
      g_state.RestoreSelection()

      var el = elTD.children[0]
      switch (this.szType)
      {
            case "font":
                  _Format("FontName",el.face)
                  break
            case "fontsize":
                  _Format("FontSize",el.size)                  
                  break
            case "formatblock":
                  _Format("FormatBlock","<" + el.tagName + ">")
                  break
            case "ForeColor":
                  _Format("ForeColor", elTD.bgColor)
                  break
            case "BackColor":
                  _Format("BackColor",elTD.bgColor)
                  break
      }
            
      _CPopup_Hide()
}

function _CLinkPopupRenderer_AddLink(d)
{
      var szURL = d.all.urlValue.value
      var szType = d.all.urlType[d.all.urlType.selectedIndex].text
      var oSel = g_state.GetSelection()
      var sType = oSel.type
      szURL = ((0 == szURL.indexOf("mailto:") || 0 == szURL.indexOf("http://") || 0 == szURL.indexOf("ftp://")) ? "" : szType) + szURL
      if (szURL!="")
      {
            if ((oSel.parentElement) && (oSel.text==""))
            {
                  oSel.expand("word")
                  if (oSel.text=="")
                  {
                        var oStore = oSel.duplicate()
                        if (d.all.pageList) {
                              var idx = d.all.pageList.selectedIndex
                              if (d.all.pageList[idx].value==szURL)
                                    oSel.text = d.all.pageList[idx].text
                              else
                                    oSel.text = szURL
                        }
                        else
                                    oSel.text = szURL                        
                        oSel.setEndPoint("StartToStart",oStore)
                  }
                  oSel.select()
                  sType="Text"
            }

            if ((oSel.item) && (oSel.item(0).tagName=="IMG"))
            {
                        oSel.item(0).width = oSel.item(0).offsetWidth
                        oSel.item(0).height = oSel.item(0).offsetHeight
                        oSel.item(0).border = (d.all.displayBorder.checked) ? 1 : ""
            }
            if (d.all.urlValue.value!="")
                  oSel.execCommand("CreateLink",false,szURL)      
            else
                  oSel.execCommand("UnLink",false,szURL)                  
      }

      idEditbox.focus()      
}

function _CLinkPopupRenderer__UpdateURL(oDoc,szURL) {
      var szType = szURL.substring(0,szURL.indexOf(":"))
      for (var i=0;i<oDoc.all.urlType.length;i++)
            if (oDoc.all.urlType[i].value==szType)
                  oDoc.all.urlType.selectedIndex = i
      if (("http"==szType) || ("ftp"==szType))
                  szURL = szURL.substring(szURL.indexOf("//")+2)
      else
                  szURL = szURL.substring(szURL.indexOf(":")+1)
      oDoc.all.urlValue.value = szURL
}

function _CLinkPopupRenderer_PrepareHTML()
{
      var d = this.oDocument
      var oSel = g_state.GetSelection()
      var oEl, sType = oSel.type, bImg = false, szURL = sz = ""
      if (oSel.parentElement)  
      {
            oEl = _CUtil_GetElement(oSel.parentElement(),"A")
      }
      else
      {

            oEl = _CUtil_GetElement(oSel.item(0),"A")
            bImg = oSel.item(0).tagName=="IMG"
      }

      if (oEl)
            szURL = oEl.href
      
      sz  ="<TABLE ALIGN=center>"
      
      if (g_state.aLinks.length>0)
      {
            sz  +=  ""
            +   "<TR>"
            +         "<TD>"
            +               L_LINKSELECT_TEXT
            +               "<SELECT ID=pageList ONCHANGE=\"parent._CLinkPopupRenderer__UpdateURL(this.document,this[this.selectedIndex].value)\">"
            +                     "<OPTION VALUE=''>"
            +                           "=="
            +                           L_LINKSELECTPAGE_TEXT
            +                           "=="
            +                     "</OPTION>"
            
            for (var i = 0; i < g_state.aLinks.length; i++)
            {
                  sz  +=  ""
                  +   "<OPTION VALUE=\"" + g_state.aLinks[i][0] + "\" "
                  +         (oEl && (g_state.aLinks[i][0]==oEl.href) ? "SELECTED" : "")
                  +   ">"
                  +         g_state.aLinks[i][1]
                  +   "</OPTION>"
            }

            sz  +=  "</SELECT>"
      }
      var arTypes = new Array("http","ftp","mailto")
      var arText = new Array("http://","ftp://","mailto:")
      var szType = szURL.substring(0,szURL.indexOf(":"))
      if (("http"==szType) || ("ftp"==szType))
                  szURL = szURL.substring(szURL.indexOf("//")+2)
      else
                  szURL = szURL.substring(szURL.indexOf(":")+1)

      sz  += ""
      +   "<BR>"
      +   L_LINKWEB_TEXT
      +   "<NOBR><SELECT ID=urlType>"
      
      for (var i=0;i<arTypes.length;i++) {
            sz+= "<OPTION VALUE='" + arTypes[i] + "' "
            +      (arTypes[i]==szType ? " SELECTED " : "")
            + ">" + arText[i]
      }
      sz += "</SELECT><INPUT ID=urlValue SIZE=45 VALUE=\"" + szURL + "\" TYPE=text></NOBR>"

      if (bImg)
      {
            sz  +=  ""
            +   "<BR>"
            +   "<INPUT TYPE=checkbox ID=displayBorder " + ((oSel.item(0).border!=0) ? " checked " : "") + ">"
            +   L_LINKIMGBORDER_TEXT
      }

      sz  +=  ""
      +               "</TD>"
      +         "</TR>"
      +         "<TR>"
      +               "<TD ALIGN=center>"
      +                     "<INPUT ONCLICK=\"parent._CLinkPopupRenderer_AddLink(this.document)\" TYPE=submit ID=idSave VALUE=\"" + L_INSERT_TEXT + "\"> <INPUT ONCLICK=\"parent._CPopup_Hide()\" TYPE=reset ID=idCancel VALUE=\"" + L_CANCEL_TEXT + "\">"
      +               "</TD>"
      +         "</TR>"
      +   "</TABLE>"
      return sz
}

//  UTIL

function _CUtil_GetElement(oEl,sTag)
{
      while (oEl!=null && oEl.tagName!=sTag)
            oEl = oEl.parentElement

      return oEl
}

function _CUtil_BuildColorTable(sID,fmt,szClick)
{
      var sz, cPick = new Array("00","33","66","99","CC","FF"), iCnt=2
      var iColors = cPick.length, szColor = ""


      sz = "<TABLE CELLSPACING=0 CELLPADDING=0><TR><TD VALIGN=middle><DIV CLASS=currentColor ID=\"" + sID + "Current\">&nbsp;</DIV></TD><TD>"
      +   "<TABLE ONMOUSEOUT=\"document.all." + sID + "Current.style.backgroundColor = ''\" ONMOUSEOVER=\"document.all." + sID + "Current.style.backgroundColor = event.srcElement.bgColor\" CLASS=colorTable CELLSPACING=0 CELLPADDING=0 ID=\"" + sID + "\">"
      for (var r=0;r<iColors;r++) {
            sz+="<TR>"
            for (var g=iColors-1;g>=0;g--)
                  for (var b=iColors-1;b>=0;b--) {
                        szColor = cPick[r]+cPick[g]+cPick[b]
                        sz+="<TD"
                                    + " BGCOLOR=\"#" + szColor + "\""
                                    + "_item=\"" + szColor + "\" "
                                    + "TITLE=\"#" + szColor + "\" "
                                    + (szClick ? "ONCLICK=\"" + szClick + "\" " : "")
                                    + ">&nbsp;</TD>"
                  }
            sz+="</TR>"
      }
      sz+="</TABLE></TD></TR></TABLE>"
      return sz
}

function _CUtil_GetBlock(oEl)
{
      var sBlocks = "|H1|H2|H3|H4|H5|H6|P|PRE|LI|TD|DIV|BLOCKQUOTE|DT|DD|TABLE|HR|IMG|"

      while ((oEl!=null) && (sBlocks.indexOf("|"+oEl.tagName+"|")==-1))
            oEl = oEl.parentElement
      return oEl
}
=================================================

Html Files handling these source code is :-
===============================================
<HTML>
<HEAD>
      <SCRIPT SRC="http://www.mydomain.com/os.js"></SCRIPT>
      <SCRIPT SRC="http://www.mydomain.com/os2.js"></SCRIPT>            
      <STYLE>
            body {margin:0pt;border:none;padding:0pt}
            #tbDBSelect {display:none;text-align:left;width: 100;margin-right: 1pt;margin-bottom: 0pt;margin-top: 0pt;padding: 0pt}
            #DBSelect, #idMode, .userButton {font:8pt arial}
            #DBSelect {width:100}
            #idMode {margin-top:0pt}
            .tbButton {text-align:left;margin:0pt 1pt 0pt 0pt;padding:0pt}
            #EditBox {position: relative}
      </STYLE>
      <STYLE ID=skin DISABLED>
            #EditBox {margin: 0px 11px 0px 11px}
            #tbUpRight, #tbUpLeft {width:20px}      
            #idMode {margin-left:11px;padding:0pt}
            #idMode LABEL {color: navy;text-decoration: underline}
            #tbTopBar {height:19px}
            #tbButtons, #tbContents {background: #FFFFFF; vertical-align: top}
            #tbContents {padding:0px 5px}
            #tbBottomBar {height:6px}
      </STYLE>
      <STYLE ID=defPopupSkin>
            #popup BODY {margin:0px;border-top:none}
            #popup .colorTable {height:91px}
            #popup #header {width:100%}
            #popup #close {cursor:default;font:bold 8pt system;width:16px;text-align: center}
            #popup #content {padding:10pt}
            #popup TABLE {vertical-align:top}
            #popup .tabBody {border:1px black solid;border-top: none}
            #popup .tabItem, #popup .tabSpace {border-bottom:1px black solid;border-left:1px black solid}
            #popup .tabItem {border-top:1px black solid;font:10pt arial,geneva,sans-serif;}
            #popup .currentColor {width:20px;height:20px; margin: 0pt;margin-right:15pt;border:1px black solid}
            #popup .tabItem DIV {margin:3px;padding:0px;cursor: hand}
            #popup .tabItem DIV.disabled {color: gray;cursor: default}
            #popup .selected {font-weight:bold}
            #popup .emoticon {cursor:hand}
      </STYLE>
      <STYLE ID=popupSkin>
            #popup BODY {border: 3px #006699 solid; background: #F1F1F1 }
            #popup #header {background: #006699; color: white}
            #popup #caption {text-align: left;font: bold 12pt arial , geneva, sans-serif}
            #popup .ColorTable, #popup #idList TD#current {border: 1px black solid}
            #popup #idList TD{cursor: hand;border: 1px #F1F1F1 solid}
            #popup #close {border: 1px #99CCFF solid;cursor:hand;color: #99CCFF;font-weight: bold;margin-right: 6px;padding:0px 4px 2px}
            #popup #tableProps .tablePropsTitle {color:#006699;text-align:left;margin:0pt;border-bottom: 1px black solid;margin-bottom:5pt}
            #tableButtons, #tableProps {padding:5px}
            #popup #tableContents {height:175px}
            #popup #tableProps .tablePropsTitle, #popup #tableProps, #popup #tableProps TABLE {font:bold 9pt Arial, Geneva, Sans-serif}
            #popup #tableOptions  {font:9pt Arial, Geneva, Sans-serif;padding:15pt 5pt}
            #popup #puDivider {background:black;width:1px}
            #popup #content {margin: 0pt;padding:5pt 5pt 10pt 5pt}
            #popup #ColorPopup {width: 250px}
            #popup .ColorTable TR {height:6px}
            #popup .ColorTable TD {width:6px;cursor:hand}
            #popup .block P,#popup .block H1,#popup .block H2,#popup .block H3,
            #popup .block H4, #popup .block H5,#popup .block H6,#popup .block PRE {margin:0pt;padding:0pt}
            #popup #customFont {font:12pt Arial;text-decoration:italic}
      </STYLE>
      <SCRIPT>
            var g_state
            window.onload      = _initEditor
      </SCRIPT>
</HEAD>                                                                              
<BODY ONCONTEXTMENU="return false" TABINDEX  ="-1" SCROLL ="no" ONSELECTSTART ="return false" ONDRAGSTART="return false" ONSCROLL="return false">
      <DIV ID="idEditor" STYLE="VISIBILITY:hidden">
            <TABLE ID=idToolbar WIDTH="100%" CELLSPACING=0 CELLPADDING=0 ONCLICK="_CPopup_Hide()">
                  <TR ID=tbTopBar><TD ID=tbUpLeft></TD><TD COLSPAN=2 ID=tbUpMiddle></TD><TD ID=tbUpRight></TD></TR>
                  <TR><TD ID=tbMidLeft></TD>
                        <TD ID=tbContents><SCRIPT>_drawToolbar()</SCRIPT></TD>
                        <TD ID=tbButtons ALIGN=right></TD><TD ID=tbMidRight></TD>
                  </TR>
                  <TR ID=tbbottomBar><TD ID=tbLowLeft></TD><TD COLSPAN=2 ID=tbLowMiddle></TD><TD ID=tbLowRight></TD></TR>
            </TABLE>
            <IFRAME NAME="idPopup" STYLE="HEIGHT: 200px; LEFT: 25px; MARGIN-TOP: 8px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 200px; Z-INDEX: -1"></IFRAME>
            <IFRAME ID="EditBox" NAME="idEditbox" WIDTH="100%" HEIGHT="100%" ONFOCUS="_CPopup_Hide()"></IFRAME>
            <DIV ID="tbmode"><SCRIPT>_drawModeSelect()</SCRIPT></DIV>
      </DIV>
</BODY>      
</HTML>
==========================================================

Ok now You have the source code, what I want next is the source code which I have pasted above there is a composition box there, i dont know whats its name but the source code I've just pasted have the compostion box too so please kindly name that composition box same as It was there on top of that page, so that it wont give any error.. and on that compostion box there is image called Insert Picture I dont want that if you can remove that would be great.

Thanks.

Sohaib
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6895888
the little i could understand of that, it seems like a hellua lot of work; give me sometime and a pay check if you will ;-)

lexxwern
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6895897
will be back
0
 
LVL 1

Author Comment

by:sohaib69
ID: 6896030
please let me know either ways if you can or cant do it. .  .

Thanks
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6898737
what you want can be done; ill see if i can do it or not; im working on something similiar to hotmail; imean aligning, font properties, etc; some small bugs i see;
give me some time;

lexxwern
0
 
LVL 1

Author Comment

by:sohaib69
ID: 6898845
Ok , no problem.

but what i dont want is there is one small image called insert picture I dont want that . . . . just remove that and name that message composition box the same as i paste before ........

Thanks
0
 

Accepted Solution

by:
ComTech earned 0 total points
ID: 7324231
This question will be placed in PAQ and points refunded.

Best regards,
ComTech
Community Support
Administrator @ EE

0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7325351
oops, sorry sohail, it just slipped out of my mind once i started college..
0
 
LVL 1

Author Comment

by:sohaib69
ID: 7325384
but can again help me if open that new comment.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now