Added the Midas Rich Editor for Mozilla 1.3.

docs/upgrades/upgrade_5.0.3-5.1.0.sql

@@ -158,7 +158,7 @@ delete from international where languageId=1 and namespace='WebGUI' and internat
 insert into international (internationalId,languageId,namespace,message,lastUpdated) values (494,1,'WebGUI','RealObjects edit-on Pro 2.x', 1044704984);
 delete from international where languageId=1 and namespace='WebGUI' and internationalId=495;
 insert into international (internationalId,languageId,namespace,message,lastUpdated) values (495,1,'WebGUI','htmlArea (Internet Explorer 5.5+)', 1044704928);
-INSERT INTO userProfileField VALUES ('richEditor','WebGUI::International::get(496)',1,0,'select','{\r\nhtmlArea=>WebGUI::International::get(495),\r\n#editOnPro2=>WebGUI::International::get(494),\r\nclassic=>WebGUI::International::get(879),\r\nlastResort=>WebGUI::International::get(880),\r\nnone=>WebGUI::International::get(881)\r\n}','[\'htmlArea\']',11,4,0);
+INSERT INTO userProfileField VALUES ('richEditor','WebGUI::International::get(496)',1,0,'select','{\r\nhtmlArea=>WebGUI::International::get(495),\r\nmidas=>WebGUI::International::get(887),\r\n#editOnPro2=>WebGUI::International::get(494),\r\nclassic=>WebGUI::International::get(879),\r\nlastResort=>WebGUI::International::get(880),\r\nnone=>WebGUI::International::get(881)\r\n}','[\'htmlArea\']',11,4,0);
 INSERT INTO userProfileField VALUES ('richEditorMode','WebGUI::International::get(882)',1,0,'select','{\r\ninline=>WebGUI::International::get(883),\r\npopup=>WebGUI::International::get(884)\r\n}','[\'inline\']',12,4,0);
 delete from international where internationalId=306 and namespace='WebGUI';
 delete from international where languageId=1 and namespace='WebGUI' and internationalId=618;
@@ -716,7 +716,8 @@ delete from international where languageId=1 and namespace='WebGUI' and internat
 insert into international (internationalId,languageId,namespace,message,lastUpdated) values (606,1,'WebGUI','Think of pages as containers for content. For instance, if you want to write a letter to the editor of your favorite magazine you\'d get out a notepad (or open a word processor) and start filling it with your thoughts. The same is true with WebGUI. Create a page, then add your content to the page.\r\n<p>\r\n\r\n<b>Title</b><br>\r\nThe title of the page is what your users will use to navigate through the site. Titles should be descriptive, but not very long.\r\n<p>\r\n\r\n\r\n<b>Menu Title</b><br>\r\nA shorter or altered title to appear in navigation. If left blank this will default to <i>Title</i>.\r\n<p>\r\n\r\n<b>Hide from navigation?</b><br>\r\nSelect yes to hide this page from the navigation.\r\n<p>\r\n<B>NOTE:</b> This will not hide the page from the page tree or from the site map, only from navigation macros.\r\n<p>\r\n\r\n\r\n<b>Page URL</b><br>\r\nWhen you create a page a URL for the page is generated based on the page title. If you are unhappy with the URL that was chosen, you can change it here.\r\n<p>\r\n\r\n<b>Language</b><br/>\r\nChoose the default language for this page. All WebGUI generated messages will appear in that language and the character set will be changed to the character set for that language.\r\n<p/>\r\n\r\n<b>Redirect URL</b><br>\r\nWhen this page is visited, the user will be redirected to the URL specified here. In order to edit this page in the future, you\'ll have to access it from the "Manage page tree." menu under "Administrative functions..."\r\n<p>\r\n\r\n<b>Template</b><br>\r\nBy default, WebGUI has one big content area to place wobjects. However, by specifying a template other than the default you can sub-divide the content area into several sections.\r\n<p>\r\n\r\n<b>Synopsis</b><br>\r\nA short description of a page. It is used to populate default descriptive meta tags as well as to provide descriptions on Site Maps.\r\n<p>\r\n\r\n<b>Meta Tags</b><br>\r\nMeta tags are used by some search engines to associate key words to a particular page. There is a great site called <a href="http://www.metatagbuilder.com/">Meta Tag Builder</a> that will help you build meta tags if you\'ve never done it before.\r\n<p>\r\n\r\n<i>Advanced Users:</i> If you have other things (like JavaScript) you usually put in the  area of your pages, you may put them here as well.\r\n<p>\r\n\r\n<b>Use default meta tags?</b><br>\r\nIf you don\'t wish to specify meta tags yourself, WebGUI can generate meta tags based on the page title and your company\'s name. Check this box to enable the WebGUI-generated meta tags.\r\n<p>\r\n\r\n\r\n<b>Style</b><br>\r\nBy default, when you create a page, it inherits a few traits from its parent. One of those traits is style. Choose from the list of styles if you would like to change the appearance of this page. See <i>Add Style</i> for more details.\r\n<p>\r\n\r\nIf you select "Yes" below the style pull-down menu, all of the pages below this page will take on the style you\'ve chosen for this page.\r\n<p>\r\n\r\n<b>Start Date</b><br>\r\nThe date when users may begin viewing this page. Note that before this date only content managers with the rights to edit this page will see it.\r\n<p>\r\n\r\n<b>End Date</b><br>\r\nThe date when users will stop viewing this page. Note that after this date only content managers with the rights to edit this page will see it.\r\n<p>\r\n\r\n\r\n<b>Owner</b><br>\r\nThe owner of a page is usually the person who created the page. This user always has full edit and viewing rights on the page.\r\n<p>\r\n<b>NOTE:</b> The owner can only be changed by an administrator.\r\n<p>\r\n\r\n\r\n<b>Who can view?</b><br>\r\nChoose which group can view this page. If you want both visitors and registered users to be able to view the page then you should choose the "Everybody" group.\r\n<p>\r\n\r\n<b>Who can edit?</b><br>\r\nChoose the group that can edit this page. The group assigned editing rights can also always view the page.\r\n<p>\r\n\r\nYou can optionally recursively give these privileges to all pages under this page.\r\n<p>\r\n\r\n<b>What next?</b><br/>\r\nIf you leave this on the default setting you\'ll be redirected to the new page after creating it.\r\n<p/>', 1044740204);
 delete from international where languageId=1 and namespace='WebGUI' and internationalId=886;
 insert into international (internationalId,languageId,namespace,message,lastUpdated) values (886,1,'WebGUI','Hide from navigation?', 1044727952);
-
+alter table MailForm_field add column width int(11) default NULL;
+insert into international (internationalId,languageId,namespace,message,lastUpdated) values (887,1,'WebGUI','Midas (IE 6+ or Mozilla 1.3+)', 1045168392);
 
 
 

lib/WebGUI/Form.pm

@@ -684,6 +684,14 @@ sub HTMLArea {
                		$output .= '</script>'."\n";
 			$htmlArea = 1;
 		}
+        } elsif ($session{user}{richEditor} eq "midas" && (($browser->ie && $browser->version >= 6) || ($browser->gecko && $browser->version >= 1.3))) {
+                        $output .= '<script language="JavaScript">
+                                var formObj; var extrasDir="'.$session{config}{extrasURL}.'";
+                                function openEditWindow(obj) {
+                                        formObj = obj;
+                                        window.open("'.$session{config}{extrasURL}.'/midas/editor.html","editWindow","width=600,height=400,resizable=1");                    }
+                                </script>';
+                        $output .= $button;
 	} elsif ($session{user}{richEditor} eq "classic" && $browser->ie && $browser->version >= 5) {
 			$output .= '<script language="JavaScript">
 				var formObj; var extrasDir="'.$session{config}{extrasURL}.'";

www/extras/midas/colors.html

@@ -0,0 +1,134 @@
+<html>
+<head>
+<title>Text Color</title>
+<script>
+function selectColor(color)
+{
+parent.document.getElementById("edit").contentDocument.execCommand(parent.command, false, color);
+parent.document.getElementById("colorpalette").style.visibility="hidden";
+parent.document.getElementById("edit").contentWindow.focus();
+}
+
+function InitColorPalette() {
+  if (document.getElementsByTagName)
+    var x = document.getElementsByTagName('TD');
+  else if (document.all)
+    var x = document.all.tags('TD');
+  for (var i=0;i<x.length;i++)
+  {
+    x[i].onmouseover = over;
+    x[i].onmouseout = out;
+    x[i].onclick = click;
+  }
+}
+
+function over()
+{
+this.style.border='2px dotted white';
+}
+
+function out()
+{
+this.style.border='1px solid gray';
+}
+
+function click()
+{
+  selectColor(this.id);
+}
+</script>
+</head>
+<body bgcolor="white" onLoad="InitColorPalette()">
+<table border="1" cellpadding="1" cellspacing="1">
+<tr>
+<td id="#FFFFFF" bgcolor="#FFFFFF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFCCCC" bgcolor="#FFCCCC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFCC99" bgcolor="#FFCC99" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFFF99" bgcolor="#FFFF99" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFFFCC" bgcolor="#FFFFCC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#99FF99" bgcolor="#99FF99" width="20" height="20"><img width="1" height="1"></td>
+<td id="#99FFFF" bgcolor="#99FFFF" width="20" height="20"><img width="1" height="1"></td>
+
+<td id="#CCFFFF" bgcolor="#CCFFFF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#CCCCFF" bgcolor="#CCCCFF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFCCFF" bgcolor="#FFCCFF" width="20" height="20"><img width="1" height="1"></td>
+</tr>
+<tr>
+<td id="#CCCCCC" bgcolor="#CCCCCC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FF6666" bgcolor="#FF6666" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FF9966" bgcolor="#FF9966" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFFF66" bgcolor="#FFFF66" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFFF33" bgcolor="#FFFF33" width="20" height="20"><img width="1" height="1"></td>
+<td id="#66FF99" bgcolor="#66FF99" width="20" height="20"><img width="1" height="1"></td>
+<td id="#33FFFF" bgcolor="#33FFFF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#66FFFF" bgcolor="#66FFFF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#9999FF" bgcolor="#9999FF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FF99FF" bgcolor="#FF99FF" width="20" height="20"><img width="1" height="1"></td>
+</tr>
+<tr>
+
+<td id="#C0C0C0" bgcolor="#C0C0C0" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FF0000" bgcolor="#FF0000" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FF9900" bgcolor="#FF9900" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFCC66" bgcolor="#FFCC66" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFFF00" bgcolor="#FFFF00" width="20" height="20"><img width="1" height="1"></td>
+<td id="#33FF33" bgcolor="#33FF33" width="20" height="20"><img width="1" height="1"></td>
+<td id="#66CCCC" bgcolor="#66CCCC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#33CCFF" bgcolor="#33CCFF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#6666CC" bgcolor="#6666CC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#CC66CC" bgcolor="#CC66CC" width="20" height="20"><img width="1" height="1"></td>
+</tr>
+<tr>
+<td id="#999999" bgcolor="#999999" width="20" height="20"><img width="1" height="1"></td>
+<td id="#CC0000" bgcolor="#CC0000" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FF6600" bgcolor="#FF6600" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFCC33" bgcolor="#FFCC33" width="20" height="20"><img width="1" height="1"></td>
+<td id="#FFCC00" bgcolor="#FFCC00" width="20" height="20"><img width="1" height="1"></td>
+
+<td id="#33CC00" bgcolor="#33CC00" width="20" height="20"><img width="1" height="1"></td>
+<td id="#00CCCC" bgcolor="#00CCCC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#3366FF" bgcolor="#3366FF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#6633FF" bgcolor="#6633FF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#CC33CC" bgcolor="#CC33CC" width="20" height="20"><img width="1" height="1"></td>
+</tr>
+<tr>
+<td id="#666666" bgcolor="#666666" width="20" height="20"><img width="1" height="1"></td>
+<td id="#990000" bgcolor="#990000" width="20" height="20"><img width="1" height="1"></td>
+<td id="#CC6600" bgcolor="#CC6600" width="20" height="20"><img width="1" height="1"></td>
+<td id="#CC9933" bgcolor="#CC9933" width="20" height="20"><img width="1" height="1"></td>
+<td id="#999900" bgcolor="#999900" width="20" height="20"><img width="1" height="1"></td>
+<td id="#009900" bgcolor="#009900" width="20" height="20"><img width="1" height="1"></td>
+<td id="#339999" bgcolor="#339999" width="20" height="20"><img width="1" height="1"></td>
+<td id="#3333FF" bgcolor="#3333FF" width="20" height="20"><img width="1" height="1"></td>
+<td id="#6600CC" bgcolor="#6600CC" width="20" height="20"><img width="1" height="1"></td>
+<td id="#993399" bgcolor="#993399" width="20" height="20"><img width="1" height="1"></td>
+
+</tr>
+<tr>
+<td id="#333333" bgcolor="#333333" width="20" height="20"><img width="1" height="1"></td>
+<td id="#660000" bgcolor="#660000" width="20" height="20"><img width="1" height="1"></td>
+<td id="#993300" bgcolor="#993300" width="20" height="20"><img width="1" height="1"></td>
+<td id="#996633" bgcolor="#996633" width="20" height="20"><img width="1" height="1"></td>
+<td id="#666600" bgcolor="#666600" width="20" height="20"><img width="1" height="1"></td>
+<td id="#006600" bgcolor="#006600" width="20" height="20"><img width="1" height="1"></td>
+<td id="#336666" bgcolor="#336666" width="20" height="20"><img width="1" height="1"></td>
+<td id="#000099" bgcolor="#000099" width="20" height="20"><img width="1" height="1"></td>
+<td id="#333399" bgcolor="#333399" width="20" height="20"><img width="1" height="1"></td>
+<td id="#663366" bgcolor="#663366" width="20" height="20"><img width="1" height="1"></td>
+</tr>
+<tr>
+<td id="#000000" bgcolor="#000000" width="20" height="20"><img width="1" height="1"></td>
+<td id="#330000" bgcolor="#330000" width="20" height="20"><img width="1" height="1"></td>
+<td id="#663300" bgcolor="#663300" width="20" height="20"><img width="1" height="1"></td>
+
+<td id="#663333" bgcolor="#663333" width="20" height="20"><img width="1" height="1"></td>
+<td id="#333300" bgcolor="#333300" width="20" height="20"><img width="1" height="1"></td>
+<td id="#003300" bgcolor="#003300" width="20" height="20"><img width="1" height="1"></td>
+<td id="#003333" bgcolor="#003333" width="20" height="20"><img width="1" height="1"></td>
+<td id="#000066" bgcolor="#000066" width="20" height="20"><img width="1" height="1"></td>
+<td id="#330099" bgcolor="#330099" width="20" height="20"><img width="1" height="1"></td>
+<td id="#330033" bgcolor="#330033" width="20" height="20"><img width="1" height="1"></td>
+</tr>
+</table>
+</body>
+</html>

www/extras/midas/editor.html

@@ -0,0 +1,383 @@
+<html>
+<head>
+<title>Midas Demo</title>
+
+<style type="text/css">
+.imagebutton {height: 23; width: 22; border: solid 2px #C0C0C0; background-color: #C0C0C0}
+.image {position: relative; left: 1; top: 1; height:21; width:20; border:none;}
+.toolbar {height: 30; background-color: #C0C0C0;}
+</style>
+
+<script>
+
+var command = "";
+
+function InitToolbarButtons() {
+  kids = document.getElementsByTagName('DIV');
+
+  for (var i=0; i < kids.length; i++) {
+    if (kids[i].className = "imagebutton") {
+      kids[i].onmouseover = tbmouseover;
+      kids[i].onmouseout = tbmouseout;
+      kids[i].onmousedown = tbmousedown;
+      kids[i].onmouseup = tbmouseup;
+      kids[i].onclick = tbclick;
+    }
+  }
+}
+
+function tbmousedown()
+{
+  this.firstChild.style.left = 2;
+  this.firstChild.style.top = 2;
+  this.style.border="inset 2px";
+}
+
+function tbmouseup()
+{
+  this.firstChild.style.left = 1;
+  this.firstChild.style.top = 1;
+  this.style.border="outset 2px";
+}
+
+function tbmouseout()
+{
+  this.style.border="solid 2px #C0C0C0";
+}
+
+function tbmouseover()
+{
+  this.style.border="outset 2px";
+}
+
+  function insertNodeAtSelection(win, insertNode)
+  {
+      // get current selection
+      var sel = win.getSelection();
+
+      // get the first range of the selection
+      // (there's almost always only one range)
+      var range = sel.getRangeAt(0);
+
+      // deselect everything
+      sel.removeAllRanges();
+
+      // remove content of current selection from document
+      range.deleteContents();
+
+      // get location of current selection
+      var container = range.startContainer;
+      var pos = range.startOffset;
+
+      // make a new range for the new selection
+      range=document.createRange();
+
+      if (container.nodeType==3 && insertNode.nodeType==3) {
+
+        // if we insert text in a textnode, do optimized insertion
+        container.insertData(pos, insertNode.nodeValue);
+
+        // put cursor after inserted text
+        range.setEnd(container, pos+insertNode.length);
+        range.setStart(container, pos+insertNode.length);
+
+      } else {
+
+
+        var afterNode;
+        if (container.nodeType==3) {
+
+          // when inserting into a textnode
+          // we create 2 new textnodes
+          // and put the insertNode in between
+
+          var textNode = container;
+          container = textNode.parentNode;
+          var text = textNode.nodeValue;
+
+          // text before the split
+          var textBefore = text.substr(0,pos);
+          // text after the split
+          var textAfter = text.substr(pos);
+
+          var beforeNode = document.createTextNode(textBefore);
+          var afterNode = document.createTextNode(textAfter);
+
+          // insert the 3 new nodes before the old one
+          container.insertBefore(afterNode, textNode);
+          container.insertBefore(insertNode, afterNode);
+          container.insertBefore(beforeNode, insertNode);
+
+          // remove the old node
+          container.removeChild(textNode);
+
+        } else {
+
+          // else simply insert the node
+          afterNode = container.childNodes[pos];
+          container.insertBefore(insertNode, afterNode);
+        }
+
+        range.setEnd(afterNode, 0);
+        range.setStart(afterNode, 0);
+      }
+
+      sel.addRange(range);
+  };
+
+function getOffsetTop(elm) {
+
+  var mOffsetTop = elm.offsetTop;
+  var mOffsetParent = elm.offsetParent;
+
+  while(mOffsetParent){
+    mOffsetTop += mOffsetParent.offsetTop;
+    mOffsetParent = mOffsetParent.offsetParent;
+  }
+ 
+  return mOffsetTop;
+}
+
+function getOffsetLeft(elm) {
+
+  var mOffsetLeft = elm.offsetLeft;
+  var mOffsetParent = elm.offsetParent;
+
+  while(mOffsetParent){
+    mOffsetLeft += mOffsetParent.offsetLeft;
+    mOffsetParent = mOffsetParent.offsetParent;
+  }
+ 
+  return mOffsetLeft;
+}
+
+function tbclick()
+{
+  document.getElementById('edit').contentWindow.focus();
+  if ((this.id == "forecolor") || (this.id == "hilitecolor")) {
+    parent.command = this.id;
+    buttonElement = document.getElementById(this.id);
+    document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement);
+    document.getElementById("colorpalette").style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight;
+    document.getElementById("colorpalette").style.visibility="visible";
+  } else if (this.id == "createlink") {
+    var szURL = prompt("Enter a URL:", "");
+    document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL)
+  } else if (this.id == "createtable") {
+    e = document.getElementById("edit");
+    rowstext = prompt("enter rows");
+    colstext = prompt("enter cols");
+    rows = parseInt(rowstext);
+    cols = parseInt(colstext);
+    if ((rows > 0) && (cols > 0)) {
+      table = e.contentWindow.document.createElement("table");
+      table.setAttribute("border", "1");
+      table.setAttribute("cellpadding", "2");
+      table.setAttribute("cellspacing", "2");
+      tbody = e.contentWindow.document.createElement("tbody");
+      for (var i=0; i < rows; i++) {
+        tr =e.contentWindow.document.createElement("tr");
+        for (var j=0; j < cols; j++) {
+          td =e.contentWindow.document.createElement("td");
+          br =e.contentWindow.document.createElement("br");
+          td.appendChild(br);
+          tr.appendChild(td);
+        }
+        tbody.appendChild(tr);
+      }
+      table.appendChild(tbody);      
+      insertNodeAtSelection(e.contentWindow, table);
+    }
+  } else {
+    document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
+  }
+}
+
+function Select(selectname)
+{
+  var cursel = document.getElementById(selectname).selectedIndex;
+  /* First one is always a label */
+  if (cursel != 0) {
+    var selected = document.getElementById(selectname).options[cursel].value;
+    document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected);
+    document.getElementById(selectname).selectedIndex = 0;
+  }
+  document.getElementById("edit").contentWindow.focus();
+}
+
+function dismisscolorpalette()
+{
+  document.getElementById("colorpalette").style.visibility="hidden";
+}
+
+function Start() {
+  document.getElementById('edit').contentWindow.document.designMode = "on";
+  try {
+    document.getElementById('edit').contentWindow.document.execCommand("undo", false, null);
+  }  catch (e) {
+    alert("This demo is not supported on your level of Mozilla.");
+  }
+
+  InitToolbarButtons();
+  document.addEventListener("mousedown", dismisscolorpalette, true);
+  document.getElementById("edit").contentWindow.document.addEventListener("mousedown", dismisscolorpalette, true);
+  document.addEventListener("keypress", dismisscolorpalette, true);
+  document.getElementById("edit").contentWindow.document.addEventListener("keypress", dismisscolorpalette, true);
+  document.getElementById('edit').contentWindow.document.body.innerHTML=window.opener.formObj.value;
+}
+
+</script>
+</head>
+<body onLoad="Start()">
+<table width="100%" bgcolor="#C0C0C0" id="toolbar1">
+<tr>
+<td>
+
+<div class="imagebutton" id="cut"><img class="image" src="cut.gif" alt="Cut" title="Cut"></div>
+</td>
+<td>
+<div class="imagebutton" id="copy"><img class="image" src="copy.gif" alt="Copy" title="Copy"></div>
+</td>
+<td>
+<div class="imagebutton" id="paste"><img class="image" src="paste.gif" alt="Paste" title="Paste"></div>
+<td>
+</td>
+<td>
+</td>
+<td>
+<div class="imagebutton" id="undo"><img class="image" src="undo.gif" alt="Undo" title="Undo"></div>
+</td>
+<td>
+<div class="imagebutton" id="redo"><img class="image" src="redo.gif" alt="Redo" title="Redo"></div>
+</td>
+
+<td>
+</td>
+<td>
+<div style="left: 10;" class="imagebutton" id="createlink"><img class="image" src="link.gif" alt="Insert Link" title="Insert Link"></div>
+</td>
+<td>
+</td>
+<td>
+<div style="left: 10;" class="imagebutton" id="createtable"><img class="image" src="table.gif" alt="Insert Table" title="Insert Table"></div>
+</td>
+<td> </td>
+<td> <div style="left: 10;" class="imagebutton" id="justifyleft"><img class="image" src="justifyleft.gif" alt="Align Left" title="Align Left"></div> </td>
+<td> <div style="left: 40;" class="imagebutton" id="justifycenter"><img class="image" src="justifycenter.gif" alt="Center" title="Center"></div> </td>
+<td> <div style="left: 70;" class="imagebutton" id="justifyright"><img class="image" src="justifyright.gif" alt="Align Right" title="Align Right"></div> </td>
+<td> </td> 
+<td> <div style="left: 10;" class="imagebutton" id="insertorderedlist"><img class="image" src="orderedlist.gif" alt="Ordered List" title="Ordered List"></div> </td> 
+<td> <div style="left: 40;" class="imagebutton" id="insertunorderedlist"><img class="image" src="unorderedlist.gif" alt="Unordered List" title="Unordered List"></div> </td> 
+<td> </td>
+<td> <div style="left: 10;" class="imagebutton" id="outdent"><img class="image" src="outdent.gif" alt="Outdent" title="Outdent"></div> </td>
+<td> <div style="left: 40;" class="imagebutton" id="indent"><img class="image" src="indent.gif" alt="Indent" title="Indent"></div> </td>
+<td width="100%"></td>
+</tr>
+</table>
+<div style="height: 1px; background-color: white; border: 0px;"></div>
+<table bgcolor="#C0C0C0" width="100%" id="toolbar2">
+<tr>
+<td>
+<select id="formatblock" onchange="Select(this.id);">
+
+  <option value="<p>">Normal</option>
+  <option value="<p>">Paragraph</option>
+  <option value="<h1>">Heading 1 <h1></option>
+  <option value="<h2>">Heading 2 <h2></option>
+  <option value="<h3>">Heading 3 <h3></option>
+  <option value="<h4>">Heading 4 <h4></option>
+
+  <option value="<h5>">Heading 5 <h5></option>
+  <option value="<h6>">Heading 6 <h6></option>
+  <option value="<address>">Address <ADDR></option>
+  <option value="<pre>">Formatted <pre></option>
+</select>
+</td>
+<td>
+<select id="fontname" onchange="Select(this.id);">
+  <option value="Font">Font</option>
+
+  <option value="Arial">Arial</option>
+  <option value="Courier">Courier</option>
+  <option value="Times New Roman">Times New Roman</option>
+</select>
+</td>
+<td>
+<select unselectable="on" id="fontsize" onchange="Select(this.id);">
+  <option value="Size">Size</option>
+  <option value="1">1</option>
+
+  <option value="2">2</option>
+  <option value="3">3</option>
+  <option value="4">4</option>
+  <option value="5">5</option>
+  <option value="6">6</option>
+  <option value="7">7</option>  
+
+</select>
+</td>
+<td>
+<div class="imagebutton" id="bold"><img class="image" src="bold.gif" alt="Bold" title="Bold"></div>
+</td>
+<td>
+<div class="imagebutton" id="italic"><img class="image" src="italic.gif" alt="Italic" title="Italic"></div>
+</td>
+<td>
+<div class="imagebutton" id="underline"><img class="image" src="underline.gif" alt="Underline" title="Underline"></div>
+</td>
+<td>
+</td>
+<td>
+<div style="left: 10;" class="imagebutton" id="forecolor"><img class="image" src="forecolor.gif" alt="Text Color" title="Text Color"></div>
+</td>
+<td>
+
+<div style="left: 40;" class="imagebutton" id="hilitecolor"><img class="image" src="backcolor.gif" alt="Background Color" title="Background Color"></div>
+</td>
+<td width="100%"></td>
+
+</tr>
+</table>
+<div style="height: 1px; background-color: white; border: 0px;"></div>
+<iframe id="edit" width="100%" height="295px"></iframe>
+<iframe width="250" height="170" id="colorpalette" src="colors.html" style="visibility:hidden; position: absolute;"></iframe></iframe>
+
+<script>
+function viewsource(source)
+{
+  if (source) {
+    var html = document.createTextNode(document.getElementById('edit').contentWindow.document.body.innerHTML);
+    document.getElementById('edit').contentWindow.document.body.innerHTML = "";
+    document.getElementById('edit').contentWindow.document.body.appendChild(html);
+    document.getElementById("toolbar1").style.visibility="hidden";
+    document.getElementById("toolbar2").style.visibility="hidden";  
+  } else {
+    var html = document.getElementById('edit').contentWindow.document.body.ownerDocument.createRange();
+    html.selectNodeContents(document.getElementById('edit').contentWindow.document.body);
+    document.getElementById('edit').contentWindow.document.body.innerHTML = html.toString();
+    document.getElementById("toolbar1").style.visibility="visible";
+    document.getElementById("toolbar2").style.visibility="visible";  
+  }
+}
+
+function usecss(source)
+{
+  document.getElementById('edit').contentWindow.document.execCommand("useCSS", false, source);  
+}
+
+function readonly(source)
+{
+    document.getElementById('edit').contentWindow.document.execCommand("readonly", false, source);  
+}
+</script>
+<table width="100%"><tr><td>
+<input type="checkbox" onclick="viewsource(this.checked)">
+View HTML Source</input>
+<input checked type="checkbox" onclick="usecss(this.checked)">
+Use CSS</input>
+</td><td align="right">
+<a href="#" onClick="window.blur();window.opener.formObj.value=document.getElementById('edit').contentWindow.document.body.innerHTML;window.close();">Finished Editing</a>
+</td></tr></table>
+
+</body>
+</html>