Monotone-Parent: 4bfedf0d0ab8fc8042756a4922e29e7270a9c9c0

Monotone-Revision: ad74fe2a39d0af65f91d5693fada5eaec21e1c0d Monotone-Author: flachapelle@inverse.ca Monotone-Date: 2008-01-04T20:58:52 Monotone-Branch: ca.inverse.sogo
2008-01-04 20:58:52 +00:00 · 2008-01-04 20:58:52 +00:00 · 0c7f3b90b7
parent 7574a9bb3a
commit 0c7f3b90b7
6 changed files with 208 additions and 135 deletions
--- a/4
+++ b/4
@ -1,3 +1,7 @@
+0.9.0-2008MMDD (1.0 rc4)
+------------------------
+- improved the attendees window;
+
 0.9.0-20071217 (1.0 rc3)
 ------------------------
 - mail folders state is now saved;
--- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@ -29,9 +29,8 @@
 	string="itemZoomText" selection="zoom"/>
      <a href="#" class="button _disabled"><var:string label:value="+" /></a>
    </div>
-    <div/>
    <div id="freeBusyView">
-      <table id="freeBusy"
+      <table id="freeBusy" cellspacing="0" cellpadding="0"
 	xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:var="http://www.skyrix.com/od/binding"
 	xmlns:const="http://www.skyrix.com/od/constant"
@ -39,25 +38,41 @@
 	xmlns:rsrc="OGo:url"
 	xmlns:label="OGo:label">
 	<thead>
-	  <tr class="freeBusyHeader1"
-	    ><th class="attendees"><!--space --></th
-	      ></tr>
-	  <tr class="freeBusyHeader2"
-	    ><th class="attendees"><!--space --></th
-	      ></tr>
-	  <tr class="freeBusyHeader3"
-	    ><th class="attendees"><!--space --></th
-	      ></tr>
+          <tr>
+            <td><!--space --></td>
+            <td class="freeBusyHeader">
+              <div><table id="freeBusyHeader" cellspacing="0" cellpadding="0">
+	        <tr class="freeBusyHeader1"><!--space --></tr>
+	        <tr class="freeBusyHeader2"><!--space --></tr>
+	        <tr class="freeBusyHeader3"><!--space --></tr>
+              </table></div>
+            </td>
+          </tr>
 	</thead>
-
 	<tbody>
-	  <tr class="futureAttendee"
-	    ><td class="attendees"><input type="text" class="textField"
-		readonly="readonly" /></td
-	      ></tr>
-	  <tr class="attendeeModel"
-	    ><td class="attendees"><input type="text" class="textField" /></td
-	      ></tr>
+          <tr>
+            <td class="freeBusyAttendees">
+              <div><table id="freeBusyAttendees" cellspacing="0" cellpadding="0">
+                <tbody>
+	          <tr class="futureAttendee"
+	            ><td class="attendees"><input type="text" class="textField"
+		    readonly="readonly" /></td
+	          ></tr>
+	          <tr class="attendeeModel"
+	            ><td class="attendees"><input type="text" class="textField" /></td
+	          ></tr>
+                </tbody>
+              </table></div>
+            </td>
+            <td class="freeBusyData">
+              <div><table id="freeBusyData" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr class="futureData"></tr>
+                  <tr class="dataModel"></tr>
+                </tbody>
+              </table></div>
+            </td>
+          </tr>
 	</tbody>
      </table>
    </div>
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@ -127,7 +127,6 @@
 	  <script type="text/javascript" rsrc:src="HTMLElement.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="HTMLInputElement.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="HTMLTableElement.js"><!-- space --></script>
-	  <script type="text/javascript" rsrc:src="HTMLUListElement.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="generic.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="SOGoDragAndDrop.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="SOGoDragHandles.js"><!-- space --></script>
--- a/UI/WebServerResources/UIxAttendeesEditor.css
+++ b/UI/WebServerResources/UIxAttendeesEditor.css
@ -18,9 +18,9 @@ DIV#freeBusyView
  margin-top: 0.5em;
  top: 2em;
  bottom: 14.5em;
-  left: 15em;
+  left: 0px;
  right: 0px;
-  overflow: auto;
+  overflow: hidden;
  border-top: 2px solid #222;
  border-left: 2px solid #222;
  border-right: 1px solid #fff;
@ -28,96 +28,97 @@ DIV#freeBusyView
  -moz-border-top-colors: #9c9a94 #000;
  -moz-border-left-colors: #9c9a94 #000; }

-TABLE#freeBusy
-{ border-collapse: collapse;
-  table-layout: auto; }
+TABLE
+{ border-collapse: separated;
+  table-layout: auto;
+  border-spacing: 0px 0px; }

-TABLE#freeBusy THEAD TH
+TABLE#freeBusyHeader TH
 { white-space: nowrap; }

 TABLE#freeBusy TD,
 TABLE#freeBusy TH
 { padding: 0px;
  margin: 0px;
-  border: 0px; }
+  border: 0px;
+  vertical-align: top; }

-TABLE#freeBusy TH.attendees,
-TABLE#freeBusy TD.attendees
-{ position: fixed;
-  padding: 0px .5em;
-  padding-right: 0px;
-  margin: 0px;
-  width: 15em;
-  border: 0px !important;
-  background-color: #d4d0c8;
-  overflow: hidden;
-  left: 0px; }
+TABLE#freeBusy TD.freeBusyHeader DIV,
+TABLE#freeBusy TD.freeBusyAttendees DIV
+{ overflow: hidden; }

-TABLE#freeBusy TD.attendees IMG
-{ position: absolute;
-  left: 0em;
-  top: 0.5em; }
+TABLE#freeBusy TD.freeBusyData DIV
+{ overflow: scroll; }

-TABLE#freeBusy TD.attendees INPUT
-{ background-image: url("abcard.gif");
-  background-repeat: no-repeat;
-  background-position: 2px center;
-  width: 12em;
-  margin: 0px;
-  padding-left: 24px;
-  margin-left: 5px;
-  margin-left: 1.5em; }
-
-TABLE#freeBusy TR.needs-action TD.attendees
+TABLE#freeBusyAttendees TR.needs-action TD.attendees
 { background-image: url("needs-action.png");
  background-repeat: no-repeat;
  background-position: 5px center; }

-TABLE#freeBusy TR.declined TD.attendees
+TABLE#freeBusyAttendees TR.declined TD.attendees
 { background-image: url("declined.png");
  background-repeat: no-repeat;
  background-position: 5px center; }

-TABLE#freeBusy TR.accepted TD.attendees
+TABLE#freeBusyAttendees TR.accepted TD.attendees
 { background-image: url("accepted.png");
  background-repeat: no-repeat;
  background-position: 5px center; }

-TABLE#freeBusy TR.futureAttendee INPUT
-{ background-image: none; }
-
-TABLE#freeBusy TR.freeBusyHeader2 TH
+TABLE#freeBusyHeader TR.freeBusyHeader2 TH
 { font-weight: normal; }

-TABLE#freeBusy TR.freeBusyHeader1 TH,
-TABLE#freeBusy TR.freeBusyHeader2 TH,
-TABLE#freeBusy TR.freeBusyHeader3 TH
+TABLE#freeBusyHeader TR.freeBusyHeader1 TH,
+TABLE#freeBusyHeader TR.freeBusyHeader2 TH,
+TABLE#freeBusyHeader TR.freeBusyHeader3 TH
 { text-align: left;
  color: #777;
  background: #fff; }

-TABLE#freeBusy TR.freeBusyHeader2 TH
+TABLE#freeBusyHeader TR.freeBusyHeader2 TH
 { padding-right: 2em; }

-TABLE#freeBusy TR.freeBusyHeader3 TH
+TABLE#freeBusyHeader TR.freeBusyHeader3 TH
 { border-left: 1px solid #fff;
  border-bottom: 1px solid #cecbff; }

-TABLE#freeBusy TR.attendeeModel
+TABLE#freeBusyAttendees TR.attendeeModel,
+TABLE#freeBusyData TR.dataModel
 { display: none; }

-TABLE#freeBusy TR.futureAttendee TD
-{ border-right: none; }
+TABLE#freeBusy TD.freeBusyHeader,
+TABLE#freeBusy TD.freeBusyData
+{ border-left: 2px solid #bbb; }

-TABLE#freeBusy TD
+TABLE#freeBusyAttendees TD,
+TABLE#freeBusyData TD
 { border-bottom: 1px solid #cecbff;
-  border-right: 1px solid #cecbff;
+  border-left: 1px solid #cecbff;
+  border-top: 0px;
+  border-right: 0px;
  height: 2em;
  background-color: #fff; }

-TABLE#freeBusy TD.noFreeBusy
-{ background-color: #559;
-  border-right: 0px; }
+TABLE#freeBusyAttendees TD
+{ border-left: 1px solid #fff; }
+
+TABLE#freeBusyData TR.futureData TD
+{ border-left: none; }
+
+TABLE#freeBusy TD.freeBusyAttendees DIV
+{ width: 16em; }
+
+TABLE#freeBusyAttendees TD.attendees INPUT
+{ background-image: url("abcard.gif");
+  background-repeat: no-repeat;
+  background-position: 4px center;
+  border: 0px;
+  width: 12em;
+  padding-left: 24px;
+  margin-left: 2em; }
+
+TABLE#freeBusyAttendees TR.futureAttendee INPUT
+{ background-image: none; }

 SPAN.freeBusyZoneElement
 { display: block;
@ -128,17 +129,17 @@ SPAN.freeBusyZoneElement
  padding: 0px;
  border: 0px; }

-TABLE#freeBusy TR.freeBusyHeader3 SPAN.freeBusyZoneElement
+TABLE#freeBusyHeader TR.freeBusyHeader3 SPAN.freeBusyZoneElement
 { height: .25em; }

-TABLE#freeBusy TD SPAN.freeBusyZoneElement
-{ height: 100%; }
+TABLE#freeBusyData TD SPAN.freeBusyZoneElement
+{ height: 98%; /* not nice under Safari */ }

-SPAN[class~="colorBox"].free,
-TABLE#freeBusy TD SPAN.freeBusyZoneElement
+SPAN.colorBox.free,
+TABLE#freeBusyData TD SPAN.freeBusyZoneElement
 { background-color: #8ca6bd; }

-TABLE#freeBusy TH SPAN[class~="freeBusyZoneElement"].busy
+TABLE#freeBusyHeader TH SPAN.freeBusyZoneElement.busy
 { background-color: #c55 !important; }

 DIV#freeBusyFooter
@ -184,15 +185,16 @@ SPAN.colorBox
  width: 1em;
  height: .75em; }

-SPAN[class~="colorBox"].busy,
-SPAN[class~="freeBusyZoneElement"].busy
+SPAN.colorBox.busy,
+SPAN.freeBusyZoneElement.busy
 { background-color: #5a6b79 !important; }

-SPAN[class~="colorBox"].maybe-busy,
-SPAN[class~="freeBusyZoneElement"].maybe-busy
+SPAN.colorBox.maybe-busy,
+SPAN.freeBusyZoneElement.maybe-busy
 { background-color: #adc0d0 !important; }

-SPAN[class~="colorBox"].noFreeBusy
+SPAN.colorBox.noFreeBusy,
+TABLE#freeBusyData TD.noFreeBusy
 { background-color: #559; }

 DIV#freeBusyViewButtons
@ -202,7 +204,7 @@ DIV#freeBusyViewButtons
  padding: 3px;
  height: 2em;
  top: 0px;
-  left: 15em; }
+  left: 16em; }

 DIV#freeBusyZoomButtons
 { position: absolute;
--- a/UI/WebServerResources/UIxAttendeesEditor.js
+++ b/UI/WebServerResources/UIxAttendeesEditor.js
@ -99,12 +99,9 @@ function performSearchCallback(http) {
 	}

 	// Show popup menu
-	var offset;
-	if (isSafari())
-	  offset = Position.positionedOffset(currentField);
-	else
-	  offset = Position.cumulativeOffset(currentField);
-	var top = offset[1] + node.offsetHeight + 3;
+	var offsetScroll = Element.cumulativeScrollOffset(currentField);
+	var offset = Element.cumulativeOffset(currentField);
+	var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
 	var height = 'auto';
 	if (data.length > 5) {
 	  height = 5 * node.getHeight() + 'px';
@ -161,9 +158,9 @@ function onAttendeeResultClick(event) {
 }

 function resetFreeBusyZone() {
-  var table = $("freeBusy");
-  var row = table.tHead.rows[2];
-  for (var i = 1; i < row.cells.length; i++) {
+  var table = $("freeBusyHeader");
+  var row = table.rows[2];
+  for (var i = 0; i < row.cells.length; i++) {
    var nodes = $(row.cells[i]).childNodesWithTag("span");
    for (var j = 0; j < nodes.length; j++)
      nodes[j].removeClassName("busy");
@ -171,8 +168,8 @@ function resetFreeBusyZone() {
 }

 function redisplayFreeBusyZone() {
-  var table = $("freeBusy");
-  var row = table.tHead.rows[2];
+  var table = $("freeBusyHeader");
+  var row = table.rows[2];
  var stDay = $("startTime_date").valueAsDate();
  var etDay = $("endTime_date").valueAsDate();

@ -215,7 +212,7 @@ function redisplayFreeBusyZone() {

  var deltaCells = (etHour - stHour) + (11 * addDays);
  var deltaSpans = (deltaCells * 4 ) + (etMinute - stMinute);
-  var currentCellNbr = stHour - 7;
+  var currentCellNbr = stHour - 7 - 1;
  var currentCell = row.cells[currentCellNbr];
  var currentSpanNbr = stMinute;
  var spans = $(currentCell).childNodesWithTag("span");
@ -235,12 +232,12 @@ function redisplayFreeBusyZone() {
 }

 function newAttendee(event) {
-   var table = $("freeBusy");
+   var table = $("freeBusyAttendees");
   var tbody = table.tBodies[0];
   var model = tbody.rows[tbody.rows.length - 1];
-   var newAttendeeRow = tbody.rows[tbody.rows.length - 2];
+   var futureRow = tbody.rows[tbody.rows.length - 2];
   var newRow = model.cloneNode(true);
-   tbody.insertBefore(newRow, newAttendeeRow);
+   tbody.insertBefore(newRow, futureRow);
  
   $(newRow).removeClassName("attendeeModel");
 
@ -250,6 +247,19 @@ function newAttendee(event) {

   input.focussed = true;
   input.activate();
+
+   table = $("freeBusyData");
+   tbody = table.tBodies[0];
+   model = tbody.rows[tbody.rows.length - 1];
+   futureRow = tbody.rows[tbody.rows.length - 2];
+   newRow = model.cloneNode(true);
+   tbody.insertBefore(newRow, futureRow);
+   $(newRow).removeClassName("dataModel");
+
+   var attendeesDiv = $$('TABLE#freeBusy TD.freeBusyAttendees DIV').first();
+   var dataDiv = $$('TABLE#freeBusy TD.freeBusyData DIV').first();
+   
+   dataDiv.scrollTop = attendeesDiv.scrollTop;
 }

 function checkAttendee() {
@ -267,8 +277,12 @@ function checkAttendee() {
  this.focussed = false;
  var row = this.parentNode.parentNode;
  var tbody = row.parentNode;
-  if (tbody && this.value.trim().length == 0)
+  if (tbody && this.value.trim().length == 0) {
+    var dataTable = $("freeBusyData").tBodies[0];
+    var dataRow = dataTable.rows[row.sectionRowIndex];
    tbody.removeChild(row);
+    dataTable.removeChild(dataRow);
+  }
  else if (this.readAttribute("modified") == "1") {
    if (!$(row).hasClassName("needs-action")) {
      $(row).addClassName("needs-action");
@ -287,13 +301,14 @@ function checkAttendee() {
  currentField = null;
 }

-function displayFreeBusyForNode(node) {
-  var nodes = node.parentNode.parentNode.cells;
-  if (node.uid) {
+function displayFreeBusyForNode(input) {
+  var rowIndex = input.parentNode.parentNode.sectionRowIndex;
+  var nodes = $("freeBusyData").tBodies[0].rows[rowIndex].cells;
+  if (input.uid) {
    if (document.contactFreeBusyAjaxRequest)
-      awaitingFreeBusyRequests.push(node);
+      awaitingFreeBusyRequests.push(input);
    else {
-      for (var i = 1; i < nodes.length; i++) {
+      for (var i = 0; i < nodes.length; i++) {
 	$(nodes[i]).removeClassName("noFreeBusy");
 	$(nodes[i]).innerHTML = ('<span class="freeBusyZoneElement"></span>'
 				 + '<span class="freeBusyZoneElement"></span>'
@ -307,16 +322,16 @@ function displayFreeBusyForNode(node) {
      }
      var sd = $('startTime_date').valueAsShortDateString();
      var ed = $('endTime_date').valueAsShortDateString();
-      var urlstr = ( UserFolderURL + "../" + node.uid + "/freebusy.ifb/ajaxRead?"
+      var urlstr = ( UserFolderURL + "../" + input.uid + "/freebusy.ifb/ajaxRead?"
 		     + "sday=" + sd + "&eday=" + ed + "&additional=" +
 		     additionalDays );
      document.contactFreeBusyAjaxRequest
 	= triggerAjaxRequest(urlstr,
 			     updateFreeBusyDataCallback,
-			     node);
+			     input);
    }
  } else {
-    for (var i = 1; i < nodes.length; i++) {
+    for (var i = 0; i < nodes.length; i++) {
      $(nodes[i]).addClassName("noFreeBusy");
      $(nodes[i]).update();
    }
@ -333,7 +348,7 @@ function setSlot(tds, nbr, status) {
  }
  if (tdnbr > 7 && tdnbr < 19) {
    var i = (days * 11 + tdnbr - 7);
-    var td = tds[i];
+    var td = tds[i - 1];
    var spans = $(td).childNodesWithTag("span");
    if (status == '2')
      $(spans[spannbr]).addClassName("maybe-busy");
@ -345,12 +360,13 @@ function setSlot(tds, nbr, status) {
 function updateFreeBusyDataCallback(http) {
  if (http.readyState == 4) {
    if (http.status == 200) {
-      var node = http.callbackData;
+      var input = http.callbackData;
      var slots = http.responseText.split(",");
-      var tds = node.parentNode.parentNode.cells;
+      var rowIndex = input.parentNode.parentNode.sectionRowIndex;
+      var nodes = $("freeBusyData").tBodies[0].rows[rowIndex].cells;
      for (var i = 0; i < slots.length; i++) {
        if (slots[i] != '0')
-	  setSlot(tds, i, slots[i]);
+	  setSlot(nodes, i, slots[i]);
      }
    }
    document.contactFreeBusyAjaxRequest = null;
@ -516,7 +532,7 @@ function prepareTableHeaders() {
   var endDate = endTimeDate.valueAsDate();
   endDate.setTime(endDate.getTime() + (additionalDays * 86400000));

-   var rows = $("freeBusy").tHead.rows;
+   var rows = $("freeBusyHeader").rows;
   var days = startDate.daysUpTo(endDate);
   for (var i = 0; i < days.length; i++) {
      var header1 = document.createElement("th");
@ -550,29 +566,37 @@ function prepareTableRows() {
   var endDate = endTimeDate.valueAsDate();
   endDate.setTime(endDate.getTime() + (additionalDays * 86400000));

-   var rows = $("freeBusy").tBodies[0].rows;
+   var rows = $("freeBusyData").tBodies[0].rows;
   var days = startDate.daysUpTo(endDate);
+   var width = $('freeBusyHeader').getWidth();
+   $("freeBusyData").setStyle({ width: width + 'px' });
   for (var i = 0; i < days.length; i++)
      for (var rowNbr = 0; rowNbr < rows.length; rowNbr++)
-	 for (var hour = dayStartHour; hour < (dayEndHour + 1); hour++)
-	    rows[rowNbr].appendChild(document.createElement("td"));
+	for (var hour = dayStartHour; hour < (dayEndHour + 1); hour++)
+	  rows[rowNbr].appendChild(document.createElement("td"));
 }

 function prepareAttendees() {
   var value = parent$("attendeesNames").value;
-   var table = $("freeBusy");
+   var tableAttendees = $("freeBusyAttendees");
+   var tableData = $("freeBusyData");
   if (value.length > 0) {
      attendeesEditor.names = parent$("attendeesNames").value.split(",");
      attendeesEditor.UIDs = parent$("attendeesUIDs").value.split(",");
      attendeesEditor.emails = parent$("attendeesEmails").value.split(",");
      attendeesEditor.states = parent$("attendeesStates").value.split(",");

-      var tbody = table.tBodies[0];
-      var model = tbody.rows[tbody.rows.length - 1];
-      var newAttendeeRow = tbody.rows[tbody.rows.length - 2];
+      var tbodyAttendees = tableAttendees.tBodies[0];
+      var modelAttendee = tbodyAttendees.rows[tbodyAttendees.rows.length - 1];
+      var newAttendeeRow = tbodyAttendees.rows[tbodyAttendees.rows.length - 2];
+
+      var tbodyData = tableData.tBodies[0];
+      var modelData = tbodyData.rows[tbodyData.rows.length - 1];
+      var newDataRow = tbodyData.rows[tbodyData.rows.length - 2];
+
      for (var i = 0; i < attendeesEditor.names.length; i++) {
-	 var row = model.cloneNode(true);
-	 tbody.insertBefore(row, newAttendeeRow);
+	 var row = modelAttendee.cloneNode(true);
+	 tbodyAttendees.insertBefore(row, newAttendeeRow);
 	 $(row).removeClassName("attendeeModel");
 	 $(row).addClassName(attendeesEditor.states[i]);
 	 var input = $(row).down("input");
@ -587,6 +611,11 @@ function prepareAttendees() {
 	 input.setAttribute("modified", "0");
 	 input.observe("blur", checkAttendee);
 	 input.observe("keydown", onContactKeydown);
+	 
+	 row = modelData.cloneNode(true);
+	 tbodyData.insertBefore(row, newDataRow);
+	 $(row).removeClassName("dataModel");
+	 
 	 displayFreeBusyForNode(input);
      }
   }
@ -596,11 +625,35 @@ function prepareAttendees() {
      attendeesEditor.emails = new Array();
   }

-   var inputs = table.getElementsByTagName("input");
+   var inputs = tableAttendees.getElementsByTagName("input");
   inputs[inputs.length - 2].setAttribute("autocomplete", "off");
   Event.observe(inputs[inputs.length - 2], "click", newAttendee);
 }

+function onWindowResize(event) {
+  var view = $('freeBusyView');
+  var attendeesCell = $$('TABLE#freeBusy TD.freeBusyAttendees').first();
+  var headerDiv = $$('TABLE#freeBusy TD.freeBusyHeader DIV').first();
+  var attendeesDiv = $$('TABLE#freeBusy TD.freeBusyAttendees DIV').first();
+  var dataDiv = $$('TABLE#freeBusy TD.freeBusyData DIV').first();
+  var width = view.getWidth() - attendeesCell.getWidth();
+  var height = view.getHeight() - headerDiv.getHeight();
+
+  attendeesDiv.setStyle({ height: (height - 20) + 'px' });
+  headerDiv.setStyle({ width: (width - 20) + 'px' });
+  dataDiv.setStyle({ width: (width - 4) + 'px',
+	             height: (height - 2) + 'px' });
+}
+
+function onScroll(event) {
+  var headerDiv = $$('TABLE#freeBusy TD.freeBusyHeader DIV').first();
+  var attendeesDiv = $$('TABLE#freeBusy TD.freeBusyAttendees DIV').first();
+  var dataDiv = $$('TABLE#freeBusy TD.freeBusyData DIV').first();
+
+  headerDiv.scrollLeft = dataDiv.scrollLeft;
+  attendeesDiv.scrollTop = dataDiv.scrollTop;
+}
+
 function onFreeBusyLoadHandler() {
   initializeWindowButtons();
   initializeTimeWidgets();
@ -608,6 +661,9 @@ function onFreeBusyLoadHandler() {
   prepareTableRows();
   redisplayFreeBusyZone();
   prepareAttendees();
+   onWindowResize(null);
+   Event.observe(window, "resize", onWindowResize);
+   Event.observe($$('TABLE#freeBusy TD.freeBusyData DIV').first(), "scroll", onScroll);
 }

 FastInit.addOnLoad(onFreeBusyLoadHandler);
--- a/UI/WebServerResources/iefixes.css
+++ b/UI/WebServerResources/iefixes.css
@ -78,23 +78,20 @@ DIV#attendeesMenu
  overflow-x: hidden; }

 DIV#attendeesView
-{ left: 0px; }
+{ left: 0.5em; }

 DIV#freeBusyView
 { border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top: 2px solid #222;
  border-left: 2px solid #222;
-  left: 0.5em;
-  margin-left: 0.5em; }
+  left: 0.5em; }

-TABLE#freeBusy TH.attendees,
-TABLE#freeBusy TD.attendees
-{ background-color: #fff !important;
-  padding-right: 5px;
-  padding-left: 0px; }
+TABLE#freeBusyData TD.noFreeBusy
+{ height: 2.2em; }

-TABLE#freeBusy TD.attendees INPUT
-{ border-bottom: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-  margin-left: 2.0em; }
+TABLE#freeBusyData TD SPAN.freeBusyZoneElement
+{ height: 103%; }
+
+TABLE
+{ empty-cells: show; }