Monotone-Parent: 95d8923e8079c979c08c78e8ff746c5c72aad02f

Monotone-Revision: be6f53a63508a39bc22a09d7c9f9b0cd33845b11 Monotone-Author: flachapelle@inverse.ca Monotone-Date: 2007-05-28T16:12:06 Monotone-Branch: ca.inverse.sogo
2026-02-20 00:46:23 +00:00 · 2007-05-28 16:12:06 +00:00
parent 71c48977b6
commit 3edb30fb31
10 changed files with 439 additions and 267 deletions
--- a/UI/WebServerResources/DOMContentLoaded.htm
+++ b/UI/WebServerResources/DOMContentLoaded.htm
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+<head>
+<title>DOMContentLoaded Sample Page</title>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
+<script type="text/javascript" src="js/events.js"></script>
+<script type="text/javascript">
+function leadingZero(nr)
+{
+	if (nr < 10) nr = "0" + nr;
+	return nr;
+}
+
+function showEvents(s) {
+	var el = document.getElementById("alerts");
+	var d = new Date();
+	el.innerHTML = el.innerHTML + leadingZero(d.getHours()) + ":" + leadingZero(d.getMinutes()) + ":" + leadingZero(d.getSeconds()) + " - " + s + "<br>";
+}
+
+function myFunction(){
+	showEvents("addEvent | DOMContentLoaded | myFunction: The DOM is ready");
+	var els = document.getElementsByTagName("h1");
+	if(els)
+		els[0].className = "red";
+	showEvents("addEvent | DOMContentLoaded | myFunction: Changed heading color");
+	document.body.className = "body";
+	showEvents("addEvent | DOMContentLoaded | myFunction: Changed font");
+};
+
+addEvent(window, 'DOMContentLoaded', myFunction);
+addEvent(window, 'DOMContentLoaded', function() {
+	showEvents("addEvent | DOMContentLoaded | anonymous function: Hello");
+});
+addEvent(window, 'load', function() {
+	showEvents("addEvent | load | anonymous function: The whole page is loaded.");
+});
+</script>
+<style type="text/css">
+.body { font: x-small/1.5 arial, sans-serif; }
+.red { color: red; }
+</style>
+</head>
+<body onload="showEvents('body | onload: First alert.');showEvents('body | onload: Second alert.');">
+<h1>DOMContentLoaded Sample Page</h1>
+<h2>alert log</h2>
+<div id="alerts"></div>
+<h2>large image</h2>
+<!-- Because it doesn't work with IE Mac
+<p id="poster"><img src="domfunction_iotbs.bmp" alt="Invasion of the Body Snatchers poster (1956)" /></p>
+-->
+<p id="poster"><img src="bodyswitchers.jpg" alt="Invasion of the Body Snatchers poster (1956)" /></p>
+<p>Footer</p>
+</body>
+</html>
--- a/UI/WebServerResources/HTMLElement.js
+++ b/UI/WebServerResources/HTMLElement.js
@@ -1,235 +1,189 @@
-if (navigator.vendor == "Apple Computer, Inc." || navigator.vendor == "KDE") { // WebCore/KHTML  
-  /*
-    Crossbrowser HTMLElement Prototyping
-    Copyright (C) 2005  Jason Davis, http://www.browserland.org
-    Additional thanks to Brothercake, http://www.brothercake.com
-    
-    This code is licensed under the LGPL:
-    http://www.gnu.org/licenses/lgpl.html
-  */
-
-  (function(c) {
-    for (var i in c)
-      window["HTML" + i + "Element"] = document.createElement(c[ i ]).constructor;
-  })({
-		Html: "html", Head: "head", Link: "link", Title: "title", Meta: "meta",
-			Base: "base", IsIndex: "isindex", Style: "style", Body: "body", Form: "form",
-			Select: "select", OptGroup: "optgroup", Option: "option", Input: "input",
-			TextArea: "textarea", Button: "button", Label: "label", FieldSet: "fieldset",
-			Legend: "legend", UList: "ul", OList: "ol", DList: "dl", Directory: "dir",
-			Menu: "menu", LI: "li", Div: "div", Paragraph: "p", Heading: "h1", Quote: "q",
-			Pre: "pre", BR: "br", BaseFont: "basefont", Font: "font", HR: "hr", Mod: "ins",
-			Anchor: "a", Image: "img", Object: "object", Param: "param", Applet: "applet",
-			Map: "map", Area: "area", Script: "script", Table: "table", TableCaption: "caption",
-			TableCol: "col", TableSection: "tbody", TableRow: "tr", TableCell: "td",
-			FrameSet: "frameset", Frame: "frame", IFrame: "iframe"
-			});
-  
-  function HTMLElement() {}
-  //HTMLElement.prototype     = HTMLHtmlElement.__proto__.__proto__;	
-  var HTMLDocument          = document.constructor;
-  var HTMLCollection        = document.links.constructor;
-  var HTMLOptionsCollection = document.createElement("select").options.constructor;
-  var Text                  = document.createTextNode("").constructor;
-  //var Node                  = Text;
-  
-  // More efficient for Safari 2
-  function Document() {} 
-  function Event() {} 
-  function HTMLCollection() {} 
-  function HTMLElement() {} 
-  function Node() {} 
-  Document.prototype = window["[[DOMDocument]]"]; 
-  Event.prototype = window["[[DOMEvent]]"]; 
-  HTMLCollection.prototype = window["[[HTMLCollection.prototype]]"]; 
-  HTMLElement.prototype = window["[[DOMElement.prototype]]"]; 
-  Node.prototype = window["[[DOMNode.prototype]]"]; 
-}
-
 /* custom extensions to the DOM api */
-HTMLElement.prototype.addInterface = function(objectInterface) {
-  Object.extend(this, objectInterface);
-  if (this.bind)
-    this.bind();
-}
+Element.addMethods({

-HTMLElement.prototype.childNodesWithTag = function(tagName) {
-  var matchingNodes = new Array();
-  var tagName = tagName.toUpperCase();
+  addInterface: function(element, objectInterface) {
+    element = $(element);
+    Object.extend(element, objectInterface);
+    if (element.bind)
+      element.bind();
+  },

-  for (var i = 0; i < this.childNodes.length; i++) {
-    if (typeof(this.childNodes[i]) == "object"
-        && this.childNodes[i].tagName
-        && this.childNodes[i].tagName.toUpperCase() == tagName)
-      matchingNodes.push(this.childNodes[i]);
-  }
-
-  return matchingNodes;
-}
-
-HTMLElement.prototype.addClassName = function(className) {
-  var classStr = '' + this.getAttribute("class");
-
-  position = classStr.indexOf(className, 0);
-  if (position < 0) {
-    classStr = classStr + ' ' + className;
-    this.setAttribute('class', classStr);
-  }
-}
-
-HTMLElement.prototype.removeClassName = function(className) {
-  var classStr = '' + this.getAttribute('class');
-
-  position = classStr.indexOf(className, 0);
-  while (position > -1) {
-    classStr1 = classStr.substring(0, position); 
-    classStr2 = classStr.substring(position + 10, classStr.length);
-    classStr = classStr1 + classStr2;
-    position = classStr.indexOf(className, 0);
-  }
-
-  this.setAttribute('class', classStr);
-}
-
-HTMLElement.prototype.hasClassName = function(className) {
-  var classStr = '' + this.getAttribute('class');
-  position = classStr.indexOf(className, 0);
-  return (position > -1);
-}
-
-HTMLElement.prototype.getParentWithTagName = function(tagName) {
-  var currentElement = this;
-  tagName = tagName.toUpperCase();
-
-  currentElement = currentElement.parentNode;
-  while (currentElement
-         && currentElement.tagName != tagName) {
-    currentElement = currentElement.parentNode;
-  }
-
-  return currentElement;
-}
-
-HTMLElement.prototype.cascadeLeftOffset = function() {
-  var currentElement = this;
-
-  var offset = 0;
-  while (currentElement) {
-    offset += currentElement.offsetLeft;
-    currentElement = currentElement.getParentWithTagName("div");
-  }
-
-  return offset;
-}
-
-HTMLElement.prototype.cascadeTopOffset = function() {
-  var currentElement = this;
-  var offset = 0;
-
-  var i = 0;
-
-  while (currentElement
-         && currentElement instanceof HTMLElement) {
-    offset += currentElement.offsetTop;
-    currentElement = currentElement.parentNode;
-    i++;
-  }
-
-  return offset;
-}
-
-HTMLElement.prototype.dump = function(additionalInfo, additionalKeys) {
-  var id = this.getAttribute("id");
-  var nclass = this.getAttribute("class");
-  
-  var str = this.tagName;
-  if (id)
-    str += "; id = " + id;
-  if (nclass)
-    str += "; class = " + nclass;
-
-  if (additionalInfo)
-    str += "; " + additionalInfo;
-
-  if (additionalKeys)
-    for (var i = 0; i < additionalKeys.length; i++) {
-      var value = this.getAttribute(additionalKeys[i]);
-      if (value)
-        str += "; " + additionalKeys[i] + " = " + value;
+  childNodesWithTag: function(element, tagName) {
+    element = $(element);
+    var matchingNodes = new Array();
+    var tagName = tagName.toUpperCase();
+    
+    for (var i = 0; i < element.childNodes.length; i++) {
+      if (typeof(element.childNodes[i]) == "object"
+	  && element.childNodes[i].tagName
+	  && element.childNodes[i].tagName.toUpperCase() == tagName)
+	matchingNodes.push(element.childNodes[i]);
    }

-  log (str);
-}
+    return matchingNodes;
+  },

-HTMLElement.prototype.getSelectedNodes = function() {
-  var selArray = new Array();
+  removeClassName: function(element, className) {
+    element = $(element);
+    var classStr = '' + element.readAttribute('class');

-  for (var i = 0; i < this.childNodes.length; i++) {
-    node = this.childNodes.item(i);
-    if (node.nodeType == 1
-	&& isNodeSelected(node))
-      selArray.push(node);
+    position = classStr.indexOf(className, 0);
+    while (position > -1) {
+      classStr1 = classStr.substring(0, position); 
+      classStr2 = classStr.substring(position + 10, classStr.length);
+      classStr = classStr1 + classStr2;
+      position = classStr.indexOf(className, 0);
+    }
+    
+    element.setAttribute('class', classStr);
+  },
+
+  getParentWithTagName: function(element, tagName) {
+    element = $(element);
+    var currentElement = element;
+    tagName = tagName.toUpperCase();
+    
+    currentElement = currentElement.parentNode;
+    while (currentElement
+	   && currentElement.tagName != tagName) {
+      currentElement = currentElement.parentNode;
+    }
+    
+    return currentElement;
+  },
+
+  cascadeLeftOffset: function(element) {
+    element = $(element);
+    var currentElement = element;
+    
+    var offset = 0;
+    while (currentElement) {
+      offset += currentElement.offsetLeft;
+      currentElement = currentElement.getParentWithTagName("div");
+    }
+    
+    return offset;
+  },
+
+  cascadeTopOffset: function(element) {
+    element = $(element);
+    var currentElement = element;
+    var offset = 0;
+    
+    var i = 0;
+    
+    while (currentElement
+	   && currentElement instanceof HTMLElement) {
+      offset += currentElement.offsetTop;
+      currentElement = currentElement.parentNode;
+      i++;
+    }
+    
+    return offset;
+  },
+ 
+  dump: function(element, additionalInfo, additionalKeys) {
+    element = $(element);
+    var id = element.getAttribute("id");
+    var nclass = element.getAttribute("class");
+    
+    var str = element.tagName;
+    if (id)
+      str += "; id = " + id;
+    if (nclass)
+      str += "; class = " + nclass;
+    
+    if (additionalInfo)
+      str += "; " + additionalInfo;
+    
+    if (additionalKeys)
+      for (var i = 0; i < additionalKeys.length; i++) {
+	var value = element.getAttribute(additionalKeys[i]);
+	if (value)
+	  str += "; " + additionalKeys[i] + " = " + value;
+      }
+    
+    log (str);
+  },
+
+  getSelectedNodes: function(element) {
+    element = $(element);
+    var selArray = new Array();
+    
+    for (var i = 0; i < element.childNodes.length; i++) {
+      node = element.childNodes.item(i);
+      if (node.nodeType == 1
+	  && isNodeSelected(node))
+	selArray.push(node);
+    }
+    
+    return selArray;
+  },
+
+  getSelectedNodesId: function(element) {
+    element = $(element);
+    var selArray = new Array();
+    
+    for (var i = 0; i < element.childNodes.length; i++) {
+      node = element.childNodes.item(i);
+      if (node.nodeType == 1
+	  && isNodeSelected(node))
+	selArray.push(node.getAttribute("id"));
+    }
+
+    return selArray;
+  },
+
+  onContextMenu: function(element, event) {
+    element = $(element);
+    var popup = element.sogoContextMenu;
+
+    if (document.currentPopupMenu)
+      hideMenu(event, document.currentPopupMenu);
+    
+    var menuTop = event.pageY;
+    var menuLeft = event.pageX;
+    var heightDiff = (window.innerHeight
+		      - (menuTop + popup.offsetHeight));
+    if (heightDiff < 0)
+      menuTop += heightDiff;
+    
+    var leftDiff = (window.innerWidth
+		    - (menuLeft + popup.offsetWidth));
+    if (leftDiff < 0)
+      menuLeft -= popup.offsetWidth;
+    
+    popup.style.top = menuTop + "px;";
+    popup.style.left = menuLeft + "px;";
+    popup.style.visibility = "visible;";
+    
+    document.currentPopupMenu = popup;
+    Event.observe(document.body, "click", onBodyClickMenuHandler);
+  },
+
+  attachMenu: function(element, menuName) {
+    element = $(element);
+    element.sogoContextMenu = $(menuName);
+    Event.observe(element, "contextmenu", element.onContextMenu.bindAsEventListener(element));
+  },
+
+  select: function(element) {
+    element = $(element);
+    element.addClassName('_selected');
+  },
+
+  deselect: function(element) {
+    element = $(element);
+    element.removeClassName('_selected');
+  },
+
+  deselectAll: function (element) {
+    element = $(element);
+    for (var i = 0; i < element.childNodes.length; i++) {
+      var node = element.childNodes.item(i);
+      if (node.nodeType == 1)
+	node.deselect();
+    }
  }

-  return selArray;
-}
-
-HTMLElement.prototype.getSelectedNodesId = function() {
-  var selArray = new Array();
-
-  for (var i = 0; i < this.childNodes.length; i++) {
-    node = this.childNodes.item(i);
-    if (node.nodeType == 1
-	&& isNodeSelected(node))
-      selArray.push(node.getAttribute("id"));
-  }
-
-  return selArray;
-}
-
-HTMLElement.prototype.onContextMenu = function(event) {
-  var popup = this.sogoContextMenu;
-
-  if (document.currentPopupMenu)
-    hideMenu(event, document.currentPopupMenu);
-
-  var menuTop = event.pageY;
-  var menuLeft = event.pageX;
-  var heightDiff = (window.innerHeight
-		    - (menuTop + popup.offsetHeight));
-  if (heightDiff < 0)
-    menuTop += heightDiff;
-
-  var leftDiff = (window.innerWidth
-		  - (menuLeft + popup.offsetWidth));
-  if (leftDiff < 0)
-    menuLeft -= popup.offsetWidth;
-
-  popup.style.top = menuTop + "px;";
-  popup.style.left = menuLeft + "px;";
-  popup.style.visibility = "visible;";
-
-  document.currentPopupMenu = popup;
-  Event.observe(document.body, "click", onBodyClickMenuHandler);
-}
-
-HTMLElement.prototype.attachMenu = function(menuName) {
-  this.sogoContextMenu = $(menuName);
-  Event.observe(this, "contextmenu", this.onContextMenu.bindAsEventListener(this));
-}
-
-HTMLElement.prototype.select = function() {
-  this.addClassName('_selected');
-}
-
-HTMLElement.prototype.deselect = function() {
-  this.removeClassName('_selected');
-}
-
-HTMLElement.prototype.deselectAll = function () {
-  for (var i = 0; i < this.childNodes.length; i++) {
-    var node = this.childNodes.item(i);
-    if (node.nodeType == 1)
-      node.deselect();
-  }
-}
+});
--- a/UI/WebServerResources/HTMLInputElement.js
+++ b/UI/WebServerResources/HTMLInputElement.js
@@ -11,7 +11,7 @@ Form.Element.Methods._replicate =  function(element) {
 Form.Element.Methods.assignReplica = function(element, otherInput) {
  element = $(element);
  if (!element._onChangeBound) {
-    element.addEventListener("change", element._replicate, false);
+    Event.observe(element, "change", element._replicate, false);
    element._onChangeBound = true;
  }
  element.replica = otherInput;
--- a/UI/WebServerResources/MailerUI.js
+++ b/UI/WebServerResources/MailerUI.js
@@ -1078,8 +1078,8 @@ function updateMailboxTreeInPage() {
   var tree = $("mailboxTree");
   var nodes = document.getElementsByClassName("node", tree);
   for (i = 0; i < nodes.length; i++) {
-      Event.observe(nodes[i], "click", onMailboxTreeItemClick);
-      Event.observe(nodes[i], "contextmenu", onFolderMenuClick);
+      Event.observe(nodes[i], "click", onMailboxTreeItemClick.bindAsEventListener(nodes[i]));
+      Event.observe(nodes[i], "contextmenu", onFolderMenuClick.bindAsEventListener(nodes[i]));
      if (!inboxFound
 	  && nodes[i].parentNode.getAttribute("datatype") == "inbox") {
 	 openInbox(nodes[i]);
--- a/UI/WebServerResources/SchedulerUI.js
+++ b/UI/WebServerResources/SchedulerUI.js
@@ -1052,7 +1052,6 @@ function initCalendarSelector() {
    Event.observe(input, "change",  updateCalendarStatus);
    Event.observe(list[i], "mousedown",  listRowMouseDownHandler);
    Event.observe(list[i], "click",  onRowClick);
-//     list[i].addEventListener("contextmenu", onContactFoldersContextMenu, false);
  }

  var links = $("calendarSelectorButtons").childNodesWithTag("a");
@@ -1147,4 +1146,4 @@ function initCalendars() {
   }
 }

-Event.observe(window, "load", initCalendars);
+addEvent(window, 'DOMContentLoaded', initCalendars);
--- a/UI/WebServerResources/UIxAppointmentEditor.js
+++ b/UI/WebServerResources/UIxAppointmentEditor.js
@@ -248,7 +248,7 @@ this.onAdjustEndTime = function(event) {
 this.initTimeWidgets = function (widgets) {
  this.timeWidgets = widgets;

-  widgets['start']['date'].addEventListener("change", this.onAdjustEndTime, false);
-  widgets['start']['hour'].addEventListener("change", this.onAdjustEndTime, false);
-  widgets['start']['minute'].addEventListener("change", this.onAdjustEndTime, false);
+  Event.observe(widgets['start']['date'], "change", this.onAdjustEndTime, false);
+  Event.observe(widgets['start']['hour'], "change", this.onAdjustEndTime, false);
+  Event.observe(widgets['start']['minute'], "change", this.onAdjustEndTime, false);
 }
--- a/UI/WebServerResources/UIxAttendeesEditor.js
+++ b/UI/WebServerResources/UIxAttendeesEditor.js
@@ -22,7 +22,7 @@ function onContactKeydown(event) {
    while (!(row instanceof HTMLTableRowElement))
      row = row.nextSibling;
    this.blur();
-    var input = row.cells[0].childNodesWithTag("input")[0];
+    var input = $(row.cells[0]).childNodesWithTag("input")[0];
    if (input.readOnly)
      newAttendee(null);
    else {
@@ -111,7 +111,7 @@ function resetFreeBusyZone() {
  var table = $("freeBusy");
  var row = table.tHead.rows[2];
  for (var i = 1; i < row.cells.length; i++) {
-    var nodes = row.cells[i].childNodesWithTag("span");
+    var nodes = $(row.cells[i]).childNodesWithTag("span");
    for (var j = 0; j < nodes.length; j++)
      nodes[j].removeClassName("busy");
  }
@@ -165,7 +165,7 @@ function redisplayFreeBusyZone() {
  var currentCellNbr = stHour - 7;
  var currentCell = row.cells[currentCellNbr];
  var currentSpanNbr = stMinute;
-  var spans = currentCell.childNodesWithTag("span");
+  var spans = $(currentCell).childNodesWithTag("span");
  resetFreeBusyZone();
  while (deltaSpans > 0) {
    var currentSpan = spans[currentSpanNbr];
@@ -175,7 +175,7 @@ function redisplayFreeBusyZone() {
      currentSpanNbr = 0;
      currentCellNbr++;
      currentCell = row.cells[currentCellNbr];
-      spans = currentCell.childNodesWithTag("span");
+      spans = $(currentCell).childNodesWithTag("span");
    }
    deltaSpans--;
  }
@@ -185,15 +185,16 @@ function newAttendee(event) {
  var table = $("freeBusy");
  var tbody = table.tBodies[0];
  var model = tbody.rows[tbody.rows.length - 1];
-  var newAttendeeRow = tbody.rows[tbody.rows.length - 2]
+  var newAttendeeRow = tbody.rows[tbody.rows.length - 2];
  var newRow = model.cloneNode(true);
-  var input = newRow.cells[0].childNodesWithTag("input")[0];
-  input.setAttribute("autocomplete", "off");
  newRow.setAttribute("class", "");
  tbody.insertBefore(newRow, newAttendeeRow);
+  //table.tBodies[0].appendChild(newRow);
+  var input = $(newRow.cells[0]).childNodesWithTag("input")[0];
+  input.setAttribute("autocomplete", "off");
  input.serial = "pouet";
-  input.addEventListener("blur", checkAttendee, false);
-  input.addEventListener("keydown", onContactKeydown, false);
+  Event.observe(input, "blur", checkAttendee.bindAsEventListener(input));
+  Event.observe(input, "keydown", onContactKeydown.bindAsEventListener(input));
  input.focus();
  input.focussed = true;
 }
@@ -259,7 +260,7 @@ function setSlot(tds, nbr, status) {
  if (tdnbr > 7 && tdnbr < 19) {
    var i = (days * 11 + tdnbr - 7);
    var td = tds[i];
-    var spans = td.childNodesWithTag("span");
+    var spans = $(td).childNodesWithTag("span");
    if (status == '2')
      spans[spannbr].addClassName("maybe-busy");
    else
@@ -295,11 +296,11 @@ function resetAttendeesValue() {
      currentInput.setAttribute("uid", null);
    }
    currentInput.setAttribute("autocomplete", "off");
-    currentInput.addEventListener("keydown", onContactKeydown, false);
-    currentInput.addEventListener("blur", checkAttendee, false);
+    Event.observe(currentInput, "keydown", onContactKeydown.bindAsEventListener(currentInput), false);
+    Event.observe(currentInput, "blur", checkAttendee.bindAsEventListener(currentInput), false);
  }
  inputs[inputs.length - 2].setAttribute("autocomplete", "off");
-  inputs[inputs.length - 2].addEventListener("click", newAttendee, false);
+  Event.observe(inputs[inputs.length - 2], "click", newAttendee, false);
 }

 function resetAllFreeBusys() {
@@ -317,18 +318,18 @@ function initializeWindowButtons() {
   var okButton = $("okButton");
   var cancelButton = $("cancelButton");

-   okButton.addEventListener("click", onEditorOkClick, false);
-   cancelButton.addEventListener("click", onEditorCancelClick, false);
+   Event.observe(okButton, "click", onEditorOkClick, false);
+   Event.observe(cancelButton, "click", onEditorCancelClick, false);

   var buttons = $("freeBusyViewButtons").childNodesWithTag("a");
   for (var i = 0; i < buttons.length; i++)
-      buttons[i].addEventListener("click", listRowMouseDownHandler, false);
+     Event.observe(buttons[i], "click", listRowMouseDownHandler, false);
   buttons = $("freeBusyZoomButtons").childNodesWithTag("a");
   for (var i = 0; i < buttons.length; i++)
-      buttons[i].addEventListener("click", listRowMouseDownHandler, false);
+     Event.observe(buttons[i], "click", listRowMouseDownHandler, false);
   buttons = $("freeBusyButtons").childNodesWithTag("a");
   for (var i = 0; i < buttons.length; i++)
-      buttons[i].addEventListener("click", listRowMouseDownHandler, false);
+     Event.observe(buttons[i], "click", listRowMouseDownHandler, false);
 }

 function onEditorOkClick(event) {
@@ -398,14 +399,13 @@ function initializeTimeWidgets() {
   synchronizeWithParent("startTime", "startTime");
   synchronizeWithParent("endTime", "endTime");

-   $("startTime_date").addEventListener("change", onTimeDateWidgetChange, false);
-   $("startTime_time_hour").addEventListener("change", onTimeWidgetChange, false);
-   $("startTime_time_minute").addEventListener("change", onTimeWidgetChange,
-					       false);
+   Event.observe($("startTime_date"), "change", onTimeDateWidgetChange, false);
+   Event.observe($("startTime_time_hour"), "change", onTimeWidgetChange, false);
+   Event.observe($("startTime_time_minute"), "change", onTimeWidgetChange, false);

-   $("endTime_date").addEventListener("change", onTimeDateWidgetChange, false);
-   $("endTime_time_hour").addEventListener("change", onTimeWidgetChange, false);
-   $("endTime_time_minute").addEventListener("change", onTimeWidgetChange, false);
+   Event.observe($("endTime_date"), "change", onTimeDateWidgetChange, false);
+   Event.observe($("endTime_time_hour"), "change", onTimeWidgetChange, false);
+   Event.observe($("endTime_time_minute"), "change", onTimeWidgetChange, false);
 }

 function onTimeWidgetChange() {
@@ -462,7 +462,7 @@ function prepareTableHeaders() {
 	 var header3 = document.createElement("th");
 	 for (var span = 0; span < 4; span++) {
 	    var spanElement = document.createElement("span");
-	    spanElement.addClassName("freeBusyZoneElement");
+	    $(spanElement).addClassName("freeBusyZoneElement");
 	    header3.appendChild(spanElement);
 	 }
 	 rows[2].appendChild(header3);
--- a/UI/WebServerResources/UIxTaskEditor.js
+++ b/UI/WebServerResources/UIxTaskEditor.js
@@ -1,6 +1,6 @@
 var contactSelectorAction = 'calendars-contacts';

-window.addEventListener("load", onTaskEditorLoad, false);
+addEvent(window, 'DOMContentLoaded', onTaskEditorLoad);

 function uixEarlierDate(date1, date2) {
  // can this be done in a sane way?
@@ -249,9 +249,9 @@ this.onAdjustDueTime = function(event) {
 this.initTimeWidgets = function (widgets) {
  this.timeWidgets = widgets;

-  widgets['start']['date'].addEventListener("change", this.onAdjustDueTime, false);
-  widgets['start']['hour'].addEventListener("change", this.onAdjustDueTime, false);
-  widgets['start']['minute'].addEventListener("change", this.onAdjustDueTime, false);
+  Event.observe(widgets['start']['date'], "change", this.onAdjustDueTime, false);
+  Event.observe(widgets['start']['hour'], "change", this.onAdjustDueTime, false);
+  Event.observe(widgets['start']['minute'], "change", this.onAdjustDueTime, false);
 }

 function onStatusListChange(event) {
@@ -288,7 +288,7 @@ function onStatusListChange(event) {

 function initializeStatusLine() {
   var statusList = $("statusList");
-   statusList.addEventListener("mouseup", onStatusListChange, false);
+   Event.observe(statusList, "mouseup", onStatusListChange, false);
 }

 function onTaskEditorLoad() {
--- a/UI/WebServerResources/events.js
+++ b/UI/WebServerResources/events.js
@@ -0,0 +1,165 @@
+// written by Dean Edwards, 2005
+// with input from Tino Zijdel, Matthias Miller, Diego Perini
+// http://dean.edwards.name/weblog/2005/10/add-event/
+function addEvent(element, type, handler) {
+	// Modification by Tanny O'Haley, http://tanny.ica.com to add the
+	// DOMContentLoaded for all browsers.
+	if (type == "DOMContentLoaded" || type == "domload") {
+		addDOMLoadEvent(handler);
+		return;
+	}
+	
+	if (element.addEventListener) {
+		element.addEventListener(type, handler, false);
+	} else {
+		// assign each event handler a unique ID
+		if (!handler.$$guid) handler.$$guid = addEvent.guid++;
+		// create a hash table of event types for the element
+		if (!element.events) element.events = {};
+		// create a hash table of event handlers for each element/event pair
+		var handlers = element.events[type];
+		if (!handlers) {
+			handlers = element.events[type] = {};
+			// store the existing event handler (if there is one)
+			if (element["on" + type]) {
+				handlers[0] = element["on" + type];
+			}
+		}
+		// store the event handler in the hash table
+		handlers[handler.$$guid] = handler;
+		// assign a global event handler to do all the work
+		element["on" + type] = handleEvent;
+	}
+};
+// a counter used to create unique IDs
+addEvent.guid = 1;
+
+function removeEvent(element, type, handler) {
+	if (element.removeEventListener) {
+		element.removeEventListener(type, handler, false);
+	} else {
+		// delete the event handler from the hash table
+		if (element.events && element.events[type]) {
+			delete element.events[type][handler.$$guid];
+		}
+	}
+};
+
+function handleEvent(event) {
+	var returnValue = true;
+	// grab the event object (IE uses a global event object)
+	event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
+	// get a reference to the hash table of event handlers
+	var handlers = this.events[event.type];
+	// execute each event handler
+	for (var i in handlers) {
+		this.$$handleEvent = handlers[i];
+		if (this.$$handleEvent(event) === false) {
+			returnValue = false;
+		}
+	}
+	return returnValue;
+};
+
+function fixEvent(event) {
+	// add W3C standard event methods
+	event.preventDefault = fixEvent.preventDefault;
+	event.stopPropagation = fixEvent.stopPropagation;
+	return event;
+};
+fixEvent.preventDefault = function() {
+	this.returnValue = false;
+};
+fixEvent.stopPropagation = function() {
+	this.cancelBubble = true;
+};
+
+// End Dean Edwards addEvent.
+
+// Tino Zijdel - crisp@xs4all.nl This little snippet fixes the problem that the onload attribute on 
+// the body-element will overwrite previous attached events on the window object for the onload event.
+if (!window.addEventListener) {
+	document.onreadystatechange = function(){
+		if (window.onload && window.onload != handleEvent) {
+			addEvent(window, 'load', window.onload);
+			window.onload = handleEvent;
+		}
+	}
+}
+
+// Here are my functions for adding the DOMContentLoaded event to browsers other
+// than Mozilla.
+
+// Array of DOMContentLoaded event handlers.
+window.onDOMLoadEvents = new Array();
+window.DOMContentLoadedInitDone = false;
+
+// Function that adds DOMContentLoaded listeners to the array.
+function addDOMLoadEvent(listener) {
+	window.onDOMLoadEvents[window.onDOMLoadEvents.length]=listener;
+}
+
+// Function to process the DOMContentLoaded events array.
+function DOMContentLoadedInit() {
+	// quit if this function has already been called
+	if (window.DOMContentLoadedInitDone) return;
+
+	// flag this function so we don't do the same thing twice
+	window.DOMContentLoadedInitDone = true;
+
+	// iterates through array of registered functions 
+	for (var i=0; i<window.onDOMLoadEvents.length; i++) {
+		var func = window.onDOMLoadEvents[i];
+		func();
+	}
+}
+
+function DOMContentLoadedScheduler() {
+	// quit if the init function has already been called
+	if (window.DOMContentLoadedInitDone) return true;
+	
+	// First, check for Safari or KHTML.
+	// Second, check for IE.
+	//if DOM methods are supported, and the body element exists
+	//(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1] 
+	//in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
+	if(/KHTML|WebKit/i.test(navigator.userAgent)) {
+		if(/loaded|complete/.test(document.readyState)) {
+			DOMContentLoadedInit();
+		} else {
+			// Not ready yet, wait a little more.
+			setTimeout("DOMContentLoadedScheduler()", 250);
+		}
+	} else if(document.getElementById("__ie_onload")) {
+		return true;
+	} else if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null)) {
+		DOMContentLoadedInit();
+	} else {
+		// Not ready yet, wait a little more.
+		setTimeout("DOMContentLoadedScheduler()", 250);
+	}
+	
+	return true;
+}
+
+// Schedule to run the init function.
+setTimeout("DOMContentLoadedScheduler()", 250);
+
+// Just in case window.onload happens first, add it there too.
+addEvent(window, "load", DOMContentLoadedInit);
+
+// If addEventListener supports the DOMContentLoaded event.
+if(document.addEventListener)
+	document.addEventListener("DOMContentLoaded", DOMContentLoadedInit, false);
+
+/* for Internet Explorer */
+/*@cc_on @*/
+/*@if (@_win32)
+	document.write("<script id=__ie_onload defer src=\"//:\"><\/script>");
+	var script = document.getElementById("__ie_onload");
+	script.onreadystatechange = function() {
+		if (this.readyState == "complete") {
+			DOMContentLoadedInit(); // call the onload handler
+		}
+	};
+/*@end @*/
--- a/UI/WebServerResources/generic.js
+++ b/UI/WebServerResources/generic.js
@@ -1102,7 +1102,7 @@ function indexColor(number) {

 function onLoadHandler(event) {
    queryParameters = parseQueryParameters('' + window.location);
-    if (!document.body.hasClassName("popup")) {
+    if (!$(document.body).hasClassName("popup")) {
 	initLogConsole();
 	initCriteria();
    }
@@ -1151,7 +1151,7 @@ function configureLinkBanner() {
  }
 }

-Event.observe(window, "load", onLoadHandler, false);
+addEvent(window, 'DOMContentLoaded', onLoadHandler);

 /* stubs */
 function configureDragHandles() {