From 3b49a8a8a8acd6d80a00a96a786694fda4804653 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 14 Sep 2007 18:20:51 +0000
Subject: [PATCH] Monotone-Parent: 6d6d161ae84abc675aca403d147c51afe68d09e1
 Monotone-Revision: 36df3bcfd6c56f483f2676ceb6b6757a6506dbb7

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2007-09-14T18:20:51
Monotone-Branch: ca.inverse.sogo
---
 NEWS                                        |   3 +
 UI/Templates/UIxPageFrame.wox               |   1 +
 UI/WebServerResources/ContactsUI.css        |  18 +-
 UI/WebServerResources/ContactsUI.js         |  47 +-
 UI/WebServerResources/HTMLTableElement.js   |  23 +
 UI/WebServerResources/MailerUI.css          |  30 +-
 UI/WebServerResources/MailerUI.js           |  36 +-
 UI/WebServerResources/UIxComponentEditor.js |   2 +-
 UI/WebServerResources/generic.css           |  33 +-
 UI/WebServerResources/generic.js            |  32 +-
 UI/WebServerResources/tablekit.js           | 848 ++++++++++++++++++++
 11 files changed, 1010 insertions(+), 63 deletions(-)
 create mode 100644 UI/WebServerResources/tablekit.js

diff --git a/NEWS b/NEWS
index f0c0a1b08..56abf6626 100644
--- a/NEWS
+++ b/NEWS
@@ -5,6 +5,9 @@
   given during an indirect bind;
 - deleting a message no longer expunges its parent folder;
 - fixed search in message content;
+- added tooltips for toolbar buttons (English and French);
+- added checkmarks in live search options popup menus;
+- initial support for resizable columns in tables;
 - countless bugfixes;
 
 0.9.0-20070824
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index 6bad635bb..447e65207 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -44,6 +44,7 @@
 	</script>
 	<script type="text/javascript" rsrc:src="events.js"><!-- space required --></script>
 	<script type="text/javascript" rsrc:src="prototype.js"><!-- space required --></script>
+	<script type="text/javascript" rsrc:src="tablekit.js"><!-- space required --></script>
 	<script type="text/javascript" rsrc:src="JavascriptAPIExtensions.js"><!-- space required --></script>
 	<script type="text/javascript" rsrc:src="HTMLElement.js"><!-- space required --></script>
 	<script type="text/javascript" rsrc:src="HTMLInputElement.js"><!-- space required --></script>
diff --git a/UI/WebServerResources/ContactsUI.css b/UI/WebServerResources/ContactsUI.css
index a610e2332..5cdfff85f 100644
--- a/UI/WebServerResources/ContactsUI.css
+++ b/UI/WebServerResources/ContactsUI.css
@@ -173,12 +173,12 @@ TABLE#contactsList
   width: 100%; }
 
 TABLE#contactsList TD
-{ white-space: nowrap;
-  width: 20%; }
+{ white-space: wrap;
+  /*width: 20%;*/ }
 
 TD#nameHeader,
 TD#mailHeader
-{ width: 30%; }
+{ /*width: 30%;*/ }
 
 TABLE#contactsList TD IMG
 {
@@ -245,6 +245,18 @@ DIV.contactColumn H4
 INPUT#searchValue:focus
 { color: #000; }
 
+TABLE#contactsList TD.resize-handle-active
+{ cursor: e-resize; }
+
+DIV.resize-handle
+{ cursor: e-resize;
+  width: 2px;
+  border-right: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-height: 2em; }
+
 /* drag handles */
 DIV#dragHandle
 { 
diff --git a/UI/WebServerResources/ContactsUI.js b/UI/WebServerResources/ContactsUI.js
index f38c9d05b..4ae7d282e 100644
--- a/UI/WebServerResources/ContactsUI.js
+++ b/UI/WebServerResources/ContactsUI.js
@@ -2,6 +2,7 @@
 
 var cachedContacts = new Array();
 var currentContactFolder = null;
+var savedColumnsWidth = null;
 
 var usersRightsWindowHeight = 200;
 var usersRightsWindowWidth = 450;
@@ -78,7 +79,7 @@ function configureContactsListHeaders(cells) {
       var currentCell = $(cells[i]);
       Event.observe(currentCell, "click",
 		    onHeaderClick.bindAsEventListener(currentCell));
-      Event.observe(currentCell, "mousedown", listRowMouseDownHandler);
+      //Event.observe(currentCell, "mousedown", listRowMouseDownHandler);
    }
 }
 
@@ -88,11 +89,17 @@ function contactsListCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
     document.contactsListAjaxRequest = null;
-    div.innerHTML = http.responseText;
+    div.update(http.responseText);
 
     var table = $("contactsList");
-    if (table)
+    if (table) {
+       TableKit.Resizable.init(table);
+       if (savedColumnsWidth != null) {
+	 // Restore columns width
+	 table.setColumnsWidth(savedColumnsWidth);
+       }
        configureContactsListHeaders(table.tBodies[0].rows[0].cells);
+    }
 
     if (sorting["attribute"] && sorting["attribute"].length > 0) {
        var sortHeader;
@@ -147,11 +154,10 @@ function onContactFoldersContextMenu(event) {
   $(this).select();
 }
 
-function onContactContextMenu(event, element) {
+function onContactContextMenu(event, element) { log ("onContactContextMenu");
   var menu = $("contactMenu");
-  //Event.observe(menu, "hideMenu", onContactContextMenuHide, false);
+
   Event.observe(menu, "mousedown", onContactContextMenuHide, false);
-  //document.documentElement.onclick = onContactContextMenuHide;
   popupMenu(event, "contactMenu", element);
 
   var topNode = $("contactsList");
@@ -290,9 +296,19 @@ function onMenuEditContact(event) {
 
 function onMenuWriteToContact(event) {
    var contactId = document.menuTarget.getAttribute('id');
+   var contactRow = $(contactId);
+   var emailCell = contactRow.down('td', 1);
+
+   if (!emailCell.firstChild) { // .nodeValue is the contact email address
+     window.alert(labels["The selected contact has no email address."].decodeEntities());
+     return false;
+   }
 
    openMailComposeWindow(ApplicationBaseURL + currentContactFolder
 			 + "/" + contactId + "/write");
+
+   if (document.body.hasClassName("popup"))
+     window.close();
 }
 
 function onMenuDeleteContact(event) {
@@ -314,10 +330,22 @@ function onToolbarEditSelectedContacts(event) {
 function onToolbarWriteToSelectedContacts(event) {
   var contactsList = $('contactsList');
   var rows = contactsList.getSelectedRowsId();
+  var rowsWithEmail = 0;
 
-  for (var i = 0; i < rows.length; i++)
-    openMailComposeWindow(ApplicationBaseURL + currentContactFolder
-                          + "/" + rows[i] + "/write");
+  for (var i = 0; i < rows.length; i++) {
+    var emailCell = $(rows[i]).down('td', 1);
+    if (emailCell.firstChild) { // .nodeValue is the contact email address
+      rowsWithEmail++;
+      openMailComposeWindow(ApplicationBaseURL + currentContactFolder
+			    + "/" + rows[i] + "/write");
+    }
+  }
+  
+  if (rowsWithEmail == 0) {
+    window.alert(labels["The selected contact has no email address."].decodeEntities());
+  }
+  else if (document.body.hasClassName("popup"))
+    window.close();
 
   return false;
 }
@@ -390,6 +418,7 @@ function onHeaderClick(event) {
       sorting["ascending"] = true;
    }
 
+   savedColumnsWidth = this.up('table').getColumnsWidth();
    refreshCurrentFolder();
 
    preventDefault(event);
diff --git a/UI/WebServerResources/HTMLTableElement.js b/UI/WebServerResources/HTMLTableElement.js
index 7979e41fb..e029cd8ba 100644
--- a/UI/WebServerResources/HTMLTableElement.js
+++ b/UI/WebServerResources/HTMLTableElement.js
@@ -34,5 +34,28 @@ Element.addMethods({
 	  node.select();
       }
     }
+  },
+
+  getColumnsWidth: function(element) {
+    element = $(element);
+    var widths = new Array();
+    if (element.tagName == 'TABLE') {
+      var cells = TableKit.getHeaderCells(element);
+      for (var i = 0; i < cells.length; i++) {
+	widths[i] = $(cells[i]).getWidth();
+      }
+    }
+    return widths;
+  },
+
+  setColumnsWidth: function(element, widths) {
+    element = $(element);
+    if (element.tagName == 'TABLE') {
+      for (var i = 0; i < widths.length; i++) {
+	TableKit.Resizable.resize(element, i, widths[i]);
+      }
+    }
   }
+
+
 }); // Element.addMethods
diff --git a/UI/WebServerResources/MailerUI.css b/UI/WebServerResources/MailerUI.css
index 18798df29..6b2e4773a 100644
--- a/UI/WebServerResources/MailerUI.css
+++ b/UI/WebServerResources/MailerUI.css
@@ -14,7 +14,7 @@
   License for more details.
 
   You should have received a copy of the GNU Lesser General Public
-  License along with OGo; see the file COPYING.  If not, write to the
+  License along with OGo; see the file COPYING.  If not, write toge the
   Free Software Foundation, 59 Temple Place - Suite 330, Boston, MA
   02111-1307, USA.
 */
@@ -312,8 +312,7 @@ INPUT#editDraftButton
 }
 
 TABLE.mailer_fieldtable
-{
-  top: 0px;
+{ top: 0px;
   left: 0px;
   padding-top: .5em;
   padding-bottom: .5em;
@@ -321,7 +320,7 @@ TABLE.mailer_fieldtable
   overflow-x: hidden;
   border-bottom: 1px solid #808080;
   background: #d4d0c8;
-}
+  width: 100%; }
 
 DIV.mailer_mailcontent
 {
@@ -478,9 +477,7 @@ TABLE#addr_table
 }
 
 TABLE#messageList
-{ display: block;
-  position: relative;
-  width: 100%; }
+{ /*width: 100%;*/ }
 
 TABLE#messageList TD
 { height: 1.2em; }
@@ -494,19 +491,20 @@ TD#subjectHeader,
 TABLE#messageList TD.tbtv_subject_headercell,
 TABLE#messageList TD.mailer_unreadmailsubject,
 TABLE#messageList TD.mailer_readmailsubject
-{ width: 40%;
+{ /*width: 40%;*/
   min-width: 40%; }
 
 TD#fromHeader,
 TABLE#messageList TD.tbtv_from_headercell,
 TABLE#messageList TD.messageAddressColumn
-{ width: 35%;
+{ /*width: 35%;*/
+  min-width: 35%;
   overflow: hidden; }
 
 TD#dateHeader,
 TABLE#messageList TD.tbtv_date_headercell,
 TABLE#messageList TD.messageDateColumn
-{ width: 25%;
+{ /*width: 25%;*/
   overflow: hidden; }
 
 TABLE#messageList TR._selected TD
@@ -520,6 +518,18 @@ TABLE#messageList TR._deleted TD
   text-decoration: line-through;
 }
 
+TABLE#messageList TD.resize-handle-active
+{ cursor: e-resize; }
+
+DIV.resize-handle
+{ cursor: e-resize;
+  width: 2px;
+  border-right: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-height: 2em; }
+
 /* drag handles */
 DIV#verticalDragHandle
 {
diff --git a/UI/WebServerResources/MailerUI.js b/UI/WebServerResources/MailerUI.js
index 6fca56d53..ebd3b2204 100644
--- a/UI/WebServerResources/MailerUI.js
+++ b/UI/WebServerResources/MailerUI.js
@@ -241,7 +241,7 @@ function uixDeleteSelectedMessages(sender) {
       deleteCachedMessage(messageId);
       if (currentMessages[currentMailbox] == rowId) {
 	var div = $('messageContent');
-	div.innerHTML = "";
+	div.update();
 	currentMessages[currentMailbox] = null;
       }
     }
@@ -280,7 +280,7 @@ function moveMessages(rowIds, folder) {
       deleteCachedMessage(messageId);
       if (currentMessages[currentMailbox] == rowIds[i]) {
 	var div = $('messageContent');
-	div.innerHTML = "";
+	div.update();
 	currentMessages[currentMailbox] = null;
       }
     }
@@ -334,7 +334,7 @@ function onMailboxTreeItemClick(event) {
   currentMailboxType = this.parentNode.getAttribute("datatype");
   if (currentMailboxType == "account" || currentMailboxType == "additional") {
     currentMailbox = mailbox;
-    $("messageContent").innerHTML = "";
+    $("messageContent").update();
     var body = $("messageList").tBodies[0];
     for (var i = body.rows.length; i > 0; i--)
       body.deleteRow(i-1);
@@ -380,8 +380,8 @@ function openMailbox(mailbox, reload, idx) {
     currentMailbox = mailbox;
     var url = ApplicationBaseURL + mailbox + "/view?noframe=1";
     var messageContent = $("messageContent");
-    messageContent.innerHTML = '';
-
+    messageContent.update();
+   
     var currentMessage;
     if (!idx) {
       currentMessage = currentMessages[mailbox];
@@ -401,7 +401,6 @@ function openMailbox(mailbox, reload, idx) {
 	      + "&asc=" + sorting["ascending"]);
     if (idx)
       url += "&idx=" + idx;
-
     if (document.messageListAjaxRequest) {
       document.messageListAjaxRequest.aborted = true;
       document.messageListAjaxRequest.abort();
@@ -438,8 +437,11 @@ function messageListCallback(http) {
    
   if (http.readyState == 4
       && http.status == 200) {
-    document.messageListAjaxRequest = null;
-    div.innerHTML = http.responseText;
+    document.messageListAjaxRequest = null;    
+    div.update(http.responseText);
+
+    TableKit.Resizable.init($('messageList'));
+
     var selected = http.callbackData;
     if (selected) {
       var row = $("row_" + selected);
@@ -447,6 +449,7 @@ function messageListCallback(http) {
 	row.select();
     }
     configureMessageListEvents();
+    
     if (sorting["attribute"] && sorting["attribute"].length > 0) {
       var sortHeader;
       if (sorting["attribute"] == "subject")
@@ -652,7 +655,7 @@ function loadMessage(idx) {
     markMailInWindow(window, idx, true);
   } else {
     var div = $('messageContent');
-    div.innerHTML = cachedMessage['text'];
+    div.update(cachedMessage['text']);
     cachedMessage['time'] = (new Date()).getTime();
     document.messageAjaxRequest = null;
     configureLinksInMessage();
@@ -705,7 +708,7 @@ function messageCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
     document.messageAjaxRequest = null;
-    div.innerHTML = http.responseText;
+    div.update(http.responseText);
     configureLinksInMessage();
       
     if (http.callbackData) {
@@ -864,7 +867,7 @@ function onHeaderClick(event) {
 
   refreshCurrentFolder();
 
-  preventDefault(event);
+  Event.stop(event);
 }
 
 function refreshCurrentFolder() {
@@ -957,8 +960,8 @@ function configureMessageListHeaders(cells) {
   for (var i = 0; i < cells.length; i++) {
     var currentCell = $(cells[i]);
     Event.observe(currentCell, "click",
-		  onHeaderClick.bindAsEventListener(currentCell));
-    Event.observe(currentCell, "mousedown", listRowMouseDownHandler);
+    		  onHeaderClick.bindAsEventListener(currentCell));
+    //Event.observe(currentCell, "mousedown", listRowMouseDownHandler);
   }
 }
 
@@ -966,9 +969,10 @@ function configureMessageListEvents() {
   var messageList = $("messageList");
   if (messageList) {
     Event.observe(messageList, "mousedown",
-		  onMessageSelectionChange.bindAsEventListener(messageList));
+    		  onMessageSelectionChange.bindAsEventListener(messageList));
 
     configureMessageListHeaders(messageList.tHead.rows[0].cells);
+
     var cell = messageList.tHead.rows[1].cells[0];
     if ($(cell).hasClassName("tbtv_navcell")) {
       var anchors = $(cell).childNodesWithTag("a");
@@ -1059,9 +1063,7 @@ function openInbox(node) {
 
 function initMailer(event) {
   if (!document.body.hasClassName("popup")) {
-    configureMessageListEvents();
     initDnd();
-    currentMailbox = "/" + accounts[0] + "/folderINBOX";
     initMailboxTree();
   }
 }
@@ -1097,7 +1099,7 @@ function initMailboxTree() {
 }
 
 function updateMailboxTreeInPage() {
-  $("folderTreeContent").innerHTML = mailboxTree;
+  $("folderTreeContent").update(mailboxTree);
 
   var inboxFound = false;
   var tree = $("mailboxTree");
diff --git a/UI/WebServerResources/UIxComponentEditor.js b/UI/WebServerResources/UIxComponentEditor.js
index 82213035d..f15648bfb 100644
--- a/UI/WebServerResources/UIxComponentEditor.js
+++ b/UI/WebServerResources/UIxComponentEditor.js
@@ -170,7 +170,7 @@ function onComponentEditorLoad(event) {
 
    var menuItems = $("itemPrivacyList").childNodesWithTag("li");
    for (var i = 0; i < menuItems.length; i++)
-      Event.observe(menuItems[i], "mouseup",
+      Event.observe(menuItems[i], "mousedown",
 		    onMenuSetClassification.bindAsEventListener(menuItems[i]),
 		    false);
 }
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index 07f979f67..59077cd8e 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -54,13 +54,11 @@ LABEL
   margin-left: .5em; }
 
 TABLE
-{ display: block;
-  table-layout: fixed;
+{ table-layout: fixed;
   border-spacing: 0px; }
 
 TABLE TD
-{ white-space: nowrap;
-  padding-left: .25em;
+{ padding-left: .25em;
   padding-right: .25em; }
 
 a:link
@@ -94,7 +92,7 @@ div#header
 { margin-left: 5px;
   margin-right: 5px;
   padding: 0;
-  border-bottom: 1px solid #000000; }
+  border-bottom: 1px solid #000; }
 
 div#header img.headerlogo
 { float: right; 
@@ -354,6 +352,19 @@ SPAN.toolbarButton:active
 .menu LI.submenu:hover, .menu LI.submenu-selected
 { background-image: url('submenu-active.gif') !important; }
 
+/* live search popup menu */
+UL#searchOptions LI
+{ list-style-position: inside;
+  list-style-image: url("menu-nocheck.gif");
+  padding: 1px 3px;
+  margin: px; }
+
+UL#searchOptions LI._chosen
+{ list-style-image: url("menu-check.gif"); }
+
+UL#searchOptions LI._chosen:hover
+{ list-style-image: url("menu-check-hover.gif"); }
+
 DIV#logConsole
 { position: absolute;
   overflow: auto;
@@ -415,15 +426,13 @@ TD.tbtv_headercell:active
 
 TD.headerCell SPAN,
 td.tbtv_headercell SPAN
-{ float: left;
-  width: 100%; }
+{ float: left; }
 
 td.tbtv_headercell a
 { cursor: default;
   margin: 0px auto;
   display: block;
-  color: black;
-  width: 100%; }
+  color: black; }
 
 td.tbtv_headercell a:hover
 { margin: 0px auto;
@@ -452,8 +461,7 @@ TR.tableview TD
   padding-right: .3em; }
 
 TD.headerDateTime
-{ width: 30em;
-  min-width: 30em; }
+{ min-width: 30em; }
 
 TD.headerTitle
 { width: 30%; }
@@ -471,8 +479,7 @@ td img.tbtv_sortcell
 
 TD.subjectCell,
 td.tbtv_subject_headercell
-{ overflow: hidden;
-  width: auto; }
+{ overflow: hidden; }
 
 /* drag handles */
 DIV.dragHandle
diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js
index c16071500..fcc12081d 100644
--- a/UI/WebServerResources/generic.js
+++ b/UI/WebServerResources/generic.js
@@ -222,7 +222,7 @@ function openContactWindow(url, wId) {
   return w;
 }
 
-function openMailComposeWindow(url, wId) {
+function openMailComposeWindow(url, wId) { log (url);
   if (!wId)
     wId = "" + (new Date().getTime());
   var w = window.open(url, wId,
@@ -592,7 +592,7 @@ function onBodyClickMenuHandler(event) {
    preventDefault(event);
 }
 
-function hideMenu(menuNode) { //log ("hideMenu");
+function hideMenu(menuNode) {
   var onHide;
 
   if (menuNode.submenu) {
@@ -605,17 +605,17 @@ function hideMenu(menuNode) { //log ("hideMenu");
   if (menuNode.parentMenuItem) {
     menuNode.parentMenuItem.setAttribute('class', 'submenu');
     menuNode.parentMenuItem = null;
-    menuNode.parentMenu.setAttribute('onmousemove', null);
+    Event.stopObserving(menuNode, 'mousemove', checkDropDown);
     menuNode.parentMenu.submenuItem = null;
     menuNode.parentMenu.submenu = null;
     menuNode.parentMenu = null;
   }
 
-  if (document.createEvent) {
+  if (document.createEvent) { // Safari & Mozilla
     var onhideEvent;
     if (isSafari())
       onhideEvent = document.createEvent("UIEvents");
-    else // Mozilla
+    else
       onhideEvent = document.createEvent("Events");
     onhideEvent.initEvent("mousedown", false, true);
     menuNode.dispatchEvent(onhideEvent);
@@ -629,7 +629,6 @@ function onMenuEntryClick(event) {
   var node = event.target;
 
   id = getParentMenu(node).menuTarget;
-//   log("clicked " + id + "/" + id.tagName);
 
   return false;
 }
@@ -756,7 +755,7 @@ function dropDownSubmenu(event) {
 	     + parentNode.cascadeLeftOffset()))
 	 menuLeft = - submenuNode.offsetWidth + 3;
       
-      parentNode.setAttribute('onmousemove', 'checkDropDown(event);');
+      Event.observe(parentNode, "mousemove", checkDropDown);
       node.setAttribute('class', 'submenu-selected');
       submenuNode.setStyle({ top: menuTop + "px",
 				     left: menuLeft + "px",
@@ -780,7 +779,7 @@ function checkDropDown(event) {
       hideMenu(parentMenu.submenu);
       parentMenu.submenu = null;
       parentMenu.submenuItem = null;
-      parentMenu.setAttribute('onmousemove', null);
+      Event.stopObserving(parentMenu, 'mousemove', checkDropDown);
     }
   }
 }
@@ -818,6 +817,11 @@ function setSearchCriteria(event) {
 
   searchValue.setAttribute("ghost-phrase", this.innerHTML);
   searchCriteria.value = this.getAttribute('id');
+  
+  if (this.parentNode.chosenNode)
+    this.parentNode.chosenNode.removeClassName("_chosen");
+  this.addClassName("_chosen");
+  this.parentNode.chosenNode = this;
 }
 
 function checkSearchValue(event) {
@@ -835,6 +839,7 @@ function onSearchChange() {
 
 function configureSearchField() {
    var searchValue = $("searchValue");
+   var searchOptions = $("searchOptions");
 
    if (!searchValue) return;
 
@@ -848,6 +853,13 @@ function configureSearchField() {
 		 onSearchFocus.bindAsEventListener(searchValue));
    Event.observe(searchValue, "keydown",
 		 onSearchKeyDown.bindAsEventListener(searchValue));
+
+   if (!searchOptions) return;
+   
+   // Set the checkmark to the first option
+   var firstOption = searchOptions.down('li');
+   firstOption.addClassName("_chosen");
+   searchOptions.chosenNode = firstOption;
 }
 
 function onSearchMouseDown(event) {
@@ -875,7 +887,7 @@ function onSearchFocus() {
 
 function onSearchBlur(event) {
    var ghostPhrase = this.getAttribute("ghost-phrase");
-   //log ("search blur: '" + this.value + "'");
+
    if (!this.value) {
     this.setAttribute("modified", "");
     this.setStyle({ color: "#aaa" });
@@ -901,7 +913,7 @@ function onSearchFormSubmit(event) {
    var searchValue = $("searchValue");
    var searchCriteria = $("searchCriteria");
    var ghostPhrase = searchValue.getAttribute('ghost-phrase');
-
+   
    if (searchValue.value == ghostPhrase) return;
 
    search["criteria"] = searchCriteria.value;
diff --git a/UI/WebServerResources/tablekit.js b/UI/WebServerResources/tablekit.js
new file mode 100644
index 000000000..b7e78ffbe
--- /dev/null
+++ b/UI/WebServerResources/tablekit.js
@@ -0,0 +1,848 @@
+/*
+*
+* Copyright (c) 2007 Andrew Tetlaw & Millstream Web Software
+* http://www.millstream.com.au/view/code/tablekit/
+* Version: 1.2.1 2007-03-11
+* 
+* Permission is hereby granted, free of charge, to any person
+* obtaining a copy of this software and associated documentation
+* files (the "Software"), to deal in the Software without
+* restriction, including without limitation the rights to use, copy,
+* modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+* 
+* The above copyright notice and this permission notice shall be
+* included in all copies or substantial portions of the Software.
+* 
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+* BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+* * 
+*/
+
+// Use the TableKit class constructure if you'd prefer to init your tables as JS objects
+var TableKit = Class.create();
+
+TableKit.prototype = {
+	initialize : function(elm, options) {
+		var table = $(elm);
+		if(table.tagName !== "TABLE") {
+			return;
+		}
+		TableKit.register(table,Object.extend(TableKit.options,options || {}));
+		this.id = table.id;
+		var op = TableKit.option('sortable resizable editable', this.id);
+		if(op.sortable) {
+			TableKit.Sortable.init(table);
+		} 
+		if(op.resizable) {
+			TableKit.Resizable.init(table);
+		}
+		if(op.editable) {
+			TableKit.Editable.init(table);
+		}
+	},
+	sort : function(column, order) {
+		TableKit.Sortable.sort(this.id, column, order);
+	},
+	resizeColumn : function(column, w) {
+		TableKit.Resizable.resize(this.id, column, w);
+	},
+	editCell : function(row, column) {
+		TableKit.Editable.editCell(this.id, row, column);
+	}
+};
+
+Object.extend(TableKit, {
+	getBodyRows : function(table) {
+		table = $(table);
+		var id = table.id;
+		if(!TableKit.rows[id]) {
+			TableKit.rows[id] = (table.tHead && table.tHead.rows.length > 0) ? $A(table.tBodies[0].rows) : $A(table.rows).without(table.rows[0]);
+		}
+		return TableKit.rows[id];
+	},
+	getHeaderCells : function(table, cell) {
+		if(!table) { table = $(cell).up('table'); }
+		var id = table.id;
+		if(!TableKit.heads[id]) {
+		        //TableKit.heads[id] = $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[table.tHead.rows.length-1].cells : table.rows[0].cells);
+			TableKit.heads[id] = $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[0].cells : table.rows[0].cells);
+		}
+		return TableKit.heads[id];
+	},
+	getCellIndex : function(cell) {
+		return $A(cell.parentNode.cells).indexOf(cell);
+	},
+	getRowIndex : function(row) {
+		return $A(row.parentNode.rows).indexOf(row);
+	},
+	getCellText : function(cell, refresh) {
+		if(!cell) { return ""; }
+		TableKit.registerCell(cell);
+		var data = TableKit.cells[cell.id];
+		if(refresh || data.refresh || !data.textContent) {
+			data.textContent = cell.textContent ? cell.textContent : cell.innerText;
+			data.refresh = false;
+		}
+		return data.textContent;
+	},
+	register : function(table, options) {
+		if(!table.id) {
+			TableKit._tblcount += 1;
+			table.id = "tablekit-table-" + TableKit._tblcount;
+		}
+		var id = table.id;
+		TableKit.tables[id] = TableKit.tables[id] ? Object.extend(TableKit.tables[id], options || {}) : Object.extend({sortable:false,resizable:false,editable:false}, options || {});
+	},
+	registerCell : function(cell) {
+		if(!cell.id) {
+			TableKit._cellcount += 1;
+			cell.id = "tablekit-cell-" + TableKit._cellcount;
+		}
+		if(!TableKit.cells[cell.id]) {
+			TableKit.cells[cell.id] = {textContent : '', htmlContent : '', active : false};
+		}
+	},
+	isSortable : function(table) {
+		return TableKit.tables[table.id] ? TableKit.tables[table.id].sortable : false;
+	},
+	isResizable : function(table) {
+		return TableKit.tables[table.id] ? TableKit.tables[table.id].resizable : false;
+	},
+	isEditable : function(table) {
+		return TableKit.tables[table.id] ? TableKit.tables[table.id].editable : false;
+	},
+	setup : function(o) {
+		Object.extend(TableKit.options, o || {} );
+	},
+	option : function(s, id, o1, o2) {
+		o1 = o1 || TableKit.options;
+		o2 = o2 || (id ? (TableKit.tables[id] ? TableKit.tables[id] : {}) : {});
+		var key = id + s;
+		if(!TableKit._opcache[key]){
+			TableKit._opcache[key] = $A($w(s)).inject([],function(a,v){
+				a.push(a[v] = o2[v] || o1[v]);
+				return a;
+			});
+		}
+		return TableKit._opcache[key];
+	},
+	e : function(event) {
+		return event || window.event;
+	},
+	tables : {},
+	_opcache : {},
+	cells : {},
+	rows : {},
+	heads : {},
+	options : {
+		autoLoad : true,
+		stripe : true,
+		sortable : true,
+		resizable : true,
+		editable : true,
+		rowEvenClass : 'roweven',
+		rowOddClass : 'rowodd',
+		sortableSelector : ['table.sortable'],
+		columnClass : 'sortcol',
+		descendingClass : 'sortdesc',
+		ascendingClass : 'sortasc',
+		noSortClass : 'nosort',
+		sortFirstAscendingClass : 'sortfirstasc',
+		sortFirstDecendingClass : 'sortfirstdesc',
+		resizableSelector : ['table.resizable'],
+		minWidth : 10,
+		showHandle : true,
+		resizeOnHandleClass : 'resize-handle-active',
+		editableSelector : ['table.editable'],
+		formClassName : 'editable-cell-form',
+		noEditClass : 'noedit',
+		editAjaxURI : '/',
+		editAjaxOptions : {}
+	},
+	_tblcount : 0,
+	_cellcount : 0,
+	load : function() {
+		if(TableKit.options.autoLoad) {
+			if(TableKit.options.sortable) {
+				$A(TableKit.options.sortableSelector).each(function(s){
+					$$(s).each(function(t) {
+						TableKit.Sortable.init(t);
+					});
+				});
+			}
+			if(TableKit.options.resizable) {
+				$A(TableKit.options.resizableSelector).each(function(s){
+					$$(s).each(function(t) {
+						TableKit.Resizable.init(t);
+					});
+				});
+			}
+			if(TableKit.options.editable) {
+				$A(TableKit.options.editableSelector).each(function(s){
+					$$(s).each(function(t) {
+						TableKit.Editable.init(t);
+					});
+				});
+			}
+		}
+	}
+});
+
+TableKit.Rows = {
+	stripe : function(table) {
+		var rows = TableKit.getBodyRows(table);
+		rows.each(function(r,i) {
+			TableKit.Rows.addStripeClass(table,r,i);
+		});
+	},
+	addStripeClass : function(t,r,i) {
+		t = t || r.up('table');
+		var op = TableKit.option('rowEvenClass rowOddClass', t.id);
+		var css = ((i+1)%2 === 0 ? op[0] : op[1]);
+		// using prototype's assClassName/RemoveClassName was not efficient for large tables, hence:
+		var cn = r.className.split(/\s+/);
+		var newCn = [];
+		for(var x = 0, l = cn.length; x < l; x += 1) {
+			if(cn[x] !== op[0] && cn[x] !== op[1]) { newCn.push(cn[x]); }
+		}
+		newCn.push(css);
+		r.className = newCn.join(" ");
+	}
+};
+
+TableKit.Sortable = {
+	init : function(elm, options){
+		var table = $(elm);
+		if(table.tagName !== "TABLE") {
+			return;
+		}
+		TableKit.register(table,Object.extend(options || {},{sortable:true}));
+		var sortFirst;
+		var cells = TableKit.getHeaderCells(table);
+		var op = TableKit.option('noSortClass columnClass sortFirstAscendingClass sortFirstDecendingClass', table.id);
+		cells.each(function(c){
+			c = $(c);
+			if(!c.hasClassName(op.noSortClass)) {
+				Event.observe(c, 'mousedown', TableKit.Sortable._sort);
+				c.addClassName(op.columnClass);
+				if(c.hasClassName(op.sortFirstAscendingClass) || c.hasClassName(op.sortFirstDecendingClass)) {
+					sortFirst = c;
+				}
+			}
+		});
+
+		if(sortFirst) {
+			if(sortFirst.hasClassName(op.sortFirstAscendingClass)) {
+				TableKit.Sortable.sort(table, sortFirst, 1);
+			} else {
+				TableKit.Sortable.sort(table, sortFirst, -1);
+			}
+		} else { // just add row stripe classes
+			TableKit.Rows.stripe(table);
+		}
+	},
+	reload : function(table) {
+		table = $(table);
+		var cells = TableKit.getHeaderCells(table);
+		var op = TableKit.option('noSortClass columnClass', table.id);
+		cells.each(function(c){
+			c = $(c);
+			if(!c.hasClassName(op.noSortClass)) {
+				Event.stopObserving(c, 'mousedown', TableKit.Sortable._sort);
+				c.removeClassName(op.columnClass);
+			}
+		});
+		TableKit.Sortable.init(table);
+	},
+	_sort : function(e) {
+		if(TableKit.Resizable._onHandle) {return;}
+		e = TableKit.e(e);
+		Event.stop(e);
+		var cell = Event.element(e);
+		while(!(cell.tagName && cell.tagName.match(/td|th/gi))) {
+			cell = cell.parentNode;
+		}
+		TableKit.Sortable.sort(null, cell);
+	},
+	sort : function(table, index, order) {
+		var cell;
+		if(typeof index === 'number') {
+			if(!table || (table.tagName && table.tagName !== "TABLE")) {
+				return;
+			}
+			table = $(table);
+			index = Math.min(table.rows[0].cells.length, index);
+			index = Math.max(1, index);
+			index -= 1;
+			cell = (table.tHead && table.tHead.rows.length > 0) ? $(table.tHead.rows[table.tHead.rows.length-1].cells[index]) : $(table.rows[0].cells[index]);
+		} else {
+			cell = $(index);
+			table = table ? $(table) : cell.up('table');
+			index = TableKit.getCellIndex(cell);
+		}
+		var op = TableKit.option('noSortClass descendingClass ascendingClass', table.id);
+		
+		if(cell.hasClassName(op.noSortClass)) {return;}	
+		
+		order = order ? order : (cell.hasClassName(op.descendingClass) ? 1 : -1);
+		var rows = TableKit.getBodyRows(table);
+
+		if(cell.hasClassName(op.ascendingClass) || cell.hasClassName(op.descendingClass)) {
+			rows.reverse(); // if it was already sorted we just need to reverse it.
+		} else {
+			var datatype = TableKit.Sortable.getDataType(cell,index,table);
+			var tkst = TableKit.Sortable.types;
+			rows.sort(function(a,b) {
+				return order * tkst[datatype].compare(TableKit.getCellText(a.cells[index]),TableKit.getCellText(b.cells[index]));
+			});
+		}
+		var tb = table.tBodies[0];
+		var tkr = TableKit.Rows;
+		rows.each(function(r,i) {
+			tb.appendChild(r);
+			tkr.addStripeClass(table,r,i);
+		});
+		var hcells = TableKit.getHeaderCells(null, cell);
+		$A(hcells).each(function(c,i){
+			c = $(c);
+			c.removeClassName(op.ascendingClass);
+			c.removeClassName(op.descendingClass);
+			if(index === i) {
+				if(order === 1) {
+					c.removeClassName(op.descendingClass);
+					c.addClassName(op.ascendingClass);
+				} else {
+					c.removeClassName(op.ascendingClass);
+					c.addClassName(op.descendingClass);
+				}
+			}
+		});
+	},
+	types : {},
+	detectors : [],
+	addSortType : function() {
+		$A(arguments).each(function(o){
+			TableKit.Sortable.types[o.name] = o;
+		});
+	},
+	getDataType : function(cell,index,table) {
+		cell = $(cell);
+		index = (index || index === 0) ? index : TableKit.getCellIndex(cell);
+		
+		var colcache = TableKit.Sortable._coltypecache;
+		var cache = colcache[table.id] ? colcache[table.id] : (colcache[table.id] = {});
+		
+		if(!cache[index]) {
+			var t = '';
+			// first look for a data type id on the heading row cell
+			if(cell.id && TableKit.Sortable.types[cell.id]) {
+				t = cell.id;
+			}
+			t = cell.classNames().detect(function(n){ // then look for a data type classname on the heading row cell
+				return (TableKit.Sortable.types[n]) ? true : false;
+			});
+			if(!t) {
+				var rows = TableKit.getBodyRows(table);
+				cell = rows[0].cells[index]; // grab same index cell from body row to try and match data type
+				t = TableKit.Sortable.detectors.detect(
+						function(d){
+							return TableKit.Sortable.types[d].detect(TableKit.getCellText(cell));
+						});
+			}
+			cache[index] = t;
+		}
+		return cache[index];
+	},
+	_coltypecache : {}
+};
+
+TableKit.Sortable.detectors = $A($w('date-iso date date-eu date-au time currency datasize number casesensitivetext text')); // setting it here because Safari complained when I did it above...
+
+TableKit.Sortable.Type = Class.create();
+TableKit.Sortable.Type.prototype = {
+	initialize : function(name, options){
+		this.name = name;
+		options = Object.extend({
+			normal : function(v){
+				return v;
+			},
+			pattern : /.*/
+		}, options || {});
+		this.normal = options.normal;
+		this.pattern = options.pattern;
+		if(options.compare) {
+			this.compare = options.compare;
+		}
+		if(options.detect) {
+			this.detect = options.detect;
+		}
+	},
+	compare : function(a,b){
+		return TableKit.Sortable.Type.compare(this.normal(a), this.normal(b));
+	},
+	detect : function(v){
+		return this.pattern.test(v);
+	}
+};
+
+TableKit.Sortable.Type.compare = function(a,b) {
+	return a < b ? -1 : a === b ? 0 : 1;
+};
+
+TableKit.Sortable.addSortType(
+	new TableKit.Sortable.Type('number', {
+		pattern : /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?/,
+		normal : function(v) {
+			// This will grab the first thing that looks like a number from a string, so you can use it to order a column of various srings containing numbers.
+			v = parseFloat(v.replace(/^.*?([-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?).*$/,"$1"));
+			return isNaN(v) ? 0 : v;
+		}}),
+	new TableKit.Sortable.Type('text',{
+		normal : function(v) {
+			return v ? v.toLowerCase() : '';
+		}}),
+	new TableKit.Sortable.Type('casesensitivetext',{pattern : /^[A-Z]+$/}),
+	new TableKit.Sortable.Type('datasize',{
+		pattern : /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?\s?[k|m|g|t]b$/i,
+		normal : function(v) {
+			var r = v.match(/^([-+]?[\d]*\.?[\d]+([eE][-+]?[\d]+)?)\s?([k|m|g|t]?b)?/i);
+			var b = r[1] ? Number(r[1]).valueOf() : 0;
+			var m = r[3] ? r[3].substr(0,1).toLowerCase() : '';
+			var result = b;
+			switch(m) {
+				case  'k':
+					result = b * 1024;
+					break;
+				case  'm':				
+					result = b * 1024 * 1024;
+					break;
+				case  'g':
+					result = b * 1024 * 1024 * 1024;
+					break;
+				case  't':
+					result = b * 1024 * 1024 * 1024 * 1024;
+					break;
+			}
+			return result;
+		}}),
+	new TableKit.Sortable.Type('date-au',{
+		pattern : /^\d{2}\/\d{2}\/\d{4}\s?(?:\d{1,2}\:\d{2}(?:\:\d{2})?\s?[a|p]?m?)?/i,
+		normal : function(v) {
+			if(!this.pattern.test(v)) {return 0;}
+			var r = v.match(/^(\d{2})\/(\d{2})\/(\d{4})\s?(?:(\d{1,2})\:(\d{2})(?:\:(\d{2}))?\s?([a|p]?m?))?/i);
+			var yr_num = r[3];
+			var mo_num = parseInt(r[2],10)-1;
+			var day_num = r[1];
+			var hr_num = r[4] ? r[4] : 0;
+			if(r[7] && r[7].toLowerCase().indexOf('p') !== -1) {
+				hr_num = parseInt(r[4],10) + 12;
+			}
+			var min_num = r[5] ? r[5] : 0;
+			var sec_num = r[6] ? r[6] : 0;
+			return new Date(yr_num, mo_num, day_num, hr_num, min_num, sec_num, 0).valueOf();
+		}}),
+	new TableKit.Sortable.Type('date-us',{
+		pattern : /^\d{2}\/\d{2}\/\d{4}\s?(?:\d{1,2}\:\d{2}(?:\:\d{2})?\s?[a|p]?m?)?/i,
+		normal : function(v) {
+			if(!this.pattern.test(v)) {return 0;}
+			var r = v.match(/^(\d{2})\/(\d{2})\/(\d{4})\s?(?:(\d{1,2})\:(\d{2})(?:\:(\d{2}))?\s?([a|p]?m?))?/i);
+			var yr_num = r[3];
+			var mo_num = parseInt(r[1],10)-1;
+			var day_num = r[2];
+			var hr_num = r[4] ? r[4] : 0;
+			if(r[7] && r[7].toLowerCase().indexOf('p') !== -1) {
+				hr_num = parseInt(r[4],10) + 12;
+			}
+			var min_num = r[5] ? r[5] : 0;
+			var sec_num = r[6] ? r[6] : 0;
+			return new Date(yr_num, mo_num, day_num, hr_num, min_num, sec_num, 0).valueOf();
+		}}),
+	new TableKit.Sortable.Type('date-eu',{
+		pattern : /^\d{2}-\d{2}-\d{4}/i,
+		normal : function(v) {
+			if(!this.pattern.test(v)) {return 0;}
+			var r = v.match(/^(\d{2})-(\d{2})-(\d{4})/);
+			var yr_num = r[3];
+			var mo_num = parseInt(r[2],10)-1;
+			var day_num = r[1];
+			return new Date(yr_num, mo_num, day_num).valueOf();
+		}}),
+	new TableKit.Sortable.Type('date-iso',{
+		pattern : /[\d]{4}-[\d]{2}-[\d]{2}(?:T[\d]{2}\:[\d]{2}(?:\:[\d]{2}(?:\.[\d]+)?)?(Z|([-+][\d]{2}:[\d]{2})?)?)?/, // 2005-03-26T19:51:34Z
+		normal : function(v) {
+			if(!this.pattern.test(v)) {return 0;}
+		    var d = v.match(/([\d]{4})(-([\d]{2})(-([\d]{2})(T([\d]{2}):([\d]{2})(:([\d]{2})(\.([\d]+))?)?(Z|(([-+])([\d]{2}):([\d]{2})))?)?)?)?/);		
+		    var offset = 0;
+		    var date = new Date(d[1], 0, 1);
+		    if (d[3]) { date.setMonth(d[3] - 1) ;}
+		    if (d[5]) { date.setDate(d[5]); }
+		    if (d[7]) { date.setHours(d[7]); }
+		    if (d[8]) { date.setMinutes(d[8]); }
+		    if (d[10]) { date.setSeconds(d[10]); }
+		    if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
+		    if (d[14]) {
+		        offset = (Number(d[16]) * 60) + Number(d[17]);
+		        offset *= ((d[15] === '-') ? 1 : -1);
+		    }
+		    offset -= date.getTimezoneOffset();
+		    if(offset !== 0) {
+		    	var time = (Number(date) + (offset * 60 * 1000));
+		    	date.setTime(Number(time));
+		    }
+			return date.valueOf();
+		}}),
+	new TableKit.Sortable.Type('date',{
+		pattern: /^(?:sun|mon|tue|wed|thu|fri|sat)\,\s\d{1,2}\s(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)\s\d{4}(?:\s\d{2}\:\d{2}(?:\:\d{2})?(?:\sGMT(?:[+-]\d{4})?)?)?/i, //Mon, 18 Dec 1995 17:28:35 GMT
+		compare : function(a,b) { // must be standard javascript date format
+			if(a && b) {
+				return TableKit.Sortable.Type.compare(new Date(a),new Date(b));
+			} else {
+				return TableKit.Sortable.Type.compare(a ? 1 : 0, b ? 1 : 0);
+			}
+		}}),
+	new TableKit.Sortable.Type('time',{
+		pattern : /^\d{1,2}\:\d{2}(?:\:\d{2})?(?:\s[a|p]m)?$/i,
+		compare : function(a,b) {
+			var d = new Date();
+			var ds = d.getMonth() + "/" + d.getDate() + "/" + d.getFullYear() + " ";
+			return TableKit.Sortable.Type.compare(new Date(ds + a),new Date(ds + b));
+		}}),
+	new TableKit.Sortable.Type('currency',{
+		pattern : /^[$ŁĄ€¤]/, // dollar,pound,yen,euro,generic currency symbol
+		normal : function(v) {
+			return v ? parseFloat(v.replace(/[^-\d\.]/g,'')) : 0;
+		}})
+);
+
+TableKit.Resizable = {
+	init : function(elm, options){
+		var table = $(elm);
+		if(table.tagName !== "TABLE") {return;}
+		TableKit.register(table,Object.extend(options || {},{resizable:true}));		 
+		var cells = TableKit.getHeaderCells(table);
+		cells.each(function(c){
+			c = $(c);
+			//log ("init on " + c.firstChild.nodeValue);
+			Event.observe(c, 'mouseover', TableKit.Resizable.initDetect);
+			Event.observe(c, 'mouseout', TableKit.Resizable.killDetect);
+		});
+	},
+	resize : function(table, index, w) {
+		var cell;
+		if(typeof index === 'number') {
+			if(!table || (table.tagName && table.tagName !== "TABLE")) {return;}
+			table = $(table);
+			index = Math.min(table.rows[0].cells.length, index);
+			index = Math.max(1, index);
+			index -= 1;
+			cell = (table.tHead && table.tHead.rows.length > 0) ? $(table.tHead.rows[table.tHead.rows.length-1].cells[index]) : $(table.rows[0].cells[index]);
+		} else {
+			cell = $(index);
+			table = table ? $(table) : cell.up('table');
+			index = TableKit.getCellIndex(cell);
+		}
+		var pad = parseInt(cell.getStyle('paddingLeft'),10) + parseInt(cell.getStyle('paddingRight'),10);
+		w = Math.max(w-pad, TableKit.option('minWidth', table.id)[0]);
+		cell.setStyle({'width' : w + 'px'});
+	},
+	initDetect : function(e) {
+		e = TableKit.e(e);
+		var cell = Event.element(e);
+		Event.observe(cell, 'mousemove', TableKit.Resizable.detectHandle);
+		Event.observe(cell, 'mousedown', TableKit.Resizable.startResize);
+	},
+	detectHandle : function(e) {
+		e = TableKit.e(e);
+		var cell = Event.element(e);
+  		if(TableKit.Resizable.pointerPos(cell,Event.pointerX(e),Event.pointerY(e))){
+  			cell.addClassName(TableKit.option('resizeOnHandleClass', cell.up('table').id)[0]);
+  			TableKit.Resizable._onHandle = true;
+  		} else {
+  			cell.removeClassName(TableKit.option('resizeOnHandleClass', cell.up('table').id)[0]);
+  			TableKit.Resizable._onHandle = false;
+  		}
+	},
+	killDetect : function(e) {
+		e = TableKit.e(e);
+		TableKit.Resizable._onHandle = false;
+		var cell = Event.element(e);
+		if (!cell.tagName || cell.tagName != 'TD') return;
+		Event.stopObserving(cell, 'mousemove', TableKit.Resizable.detectHandle);
+		Event.stopObserving(cell, 'mousedown', TableKit.Resizable.startResize);
+		cell.removeClassName(TableKit.option('resizeOnHandleClass', cell.up('table').id)[0]);
+	},
+	startResize : function(e) {
+		e = TableKit.e(e);
+		if(!TableKit.Resizable._onHandle) { return;}
+		var cell = Event.element(e);
+		Event.stopObserving(cell, 'mousemove', TableKit.Resizable.detectHandle);
+		Event.stopObserving(cell, 'mousedown', TableKit.Resizable.startResize);
+		Event.stopObserving(cell, 'mouseout', TableKit.Resizable.killDetect);
+		TableKit.Resizable._cell = cell;
+		var table = cell.up('table');
+		TableKit.Resizable._tbl = table;
+		if(TableKit.option('showHandle', table.id)[0]) {
+			TableKit.Resizable._handle = $(document.createElement('div')).addClassName('resize-handle').setStyle({
+				'top' : Position.cumulativeOffset(cell)[1] + 'px',
+				'left' : Event.pointerX(e) + 'px',
+				'height' : table.getDimensions().height + 'px'
+			});
+			document.body.appendChild(TableKit.Resizable._handle);
+		}
+		Event.observe(document, 'mousemove', TableKit.Resizable.drag);
+		Event.observe(document, 'mouseup', TableKit.Resizable.endResize);
+		Event.stop(e);
+	},
+	endResize : function(e) {
+		e = TableKit.e(e);
+		var cell = TableKit.Resizable._cell;
+		TableKit.Resizable.resize(null, cell, (Event.pointerX(e) - Position.cumulativeOffset(cell)[0]));
+		Event.stopObserving(document, 'mousemove', TableKit.Resizable.drag);
+		Event.stopObserving(document, 'mouseup', TableKit.Resizable.endResize);
+		if(TableKit.option('showHandle', TableKit.Resizable._tbl.id)[0]) {
+			$$('div.resize-handle').each(function(elm){
+				document.body.removeChild(elm);
+			});
+		}
+		Event.observe(cell, 'mouseout', TableKit.Resizable.killDetect);
+		TableKit.Resizable._tbl = TableKit.Resizable._handle = TableKit.Resizable._cell = null;
+		Event.stop(e);
+	},
+	drag : function(e) {
+		e = TableKit.e(e);
+		if(TableKit.Resizable._handle === null) {
+			try {
+				TableKit.Resizable.resize(TableKit.Resizable._tbl, TableKit.Resizable._cell, (Event.pointerX(e) - Position.cumulativeOffset(TableKit.Resizable._cell)[0]));
+			} catch(e) {}
+		} else {
+			TableKit.Resizable._handle.setStyle({'left' : Event.pointerX(e) + 'px'});
+		}
+		return false;
+	},
+	pointerPos : function(element, x, y) {
+    	var offset = Position.cumulativeOffset(element);
+	    return (y >= offset[1] &&
+	            y <  offset[1] + element.offsetHeight &&
+	            x >= offset[0] + element.offsetWidth - 5 &&
+	            x <  offset[0] + element.offsetWidth);
+  	},
+	_onHandle : false,
+	_cell : null,
+	_tbl : null,
+	_handle : null
+};
+
+
+TableKit.Editable = {
+	init : function(elm, options){
+		var table = $(elm);
+		if(table.tagName !== "TABLE") {return;}
+		TableKit.register(table,Object.extend(options || {},{editable:true}));
+		Event.observe(table.tBodies[0], 'click', TableKit.Editable._editCell);
+	},
+	_editCell : function(e) {
+		e = TableKit.e(e);
+		var cell = Event.findElement(e,'td');
+		TableKit.Editable.editCell(null, cell);
+	},
+	editCell : function(table, index, cindex) {
+		var cell, row;
+		if(typeof index === 'number') {
+			if(!table || (table.tagName && table.tagName !== "TABLE")) {return;}
+			table = $(table);
+			index = Math.min(table.tBodies[0].rows.length, index);
+			index = Math.max(1, index);
+			index -= 1;
+			cindex = Math.min(table.rows[0].cells.length, cindex);
+			cindex = Math.max(1, cindex);
+			cindex -= 1;
+			row = $(table.tBodies[0].rows[index]);
+			cell = $(row.cells[cindex]);
+		} else {
+			cell = $(index);
+			table = (table && table.tagName && table.tagName !== "TABLE") ? $(table) : cell.up('table');
+			row = cell.up('tr');
+		}
+		var op = TableKit.option('noEditClass', table.id);
+		if(cell.hasClassName(op.noEditClass)) {return;}
+		
+		var head = $(TableKit.getHeaderCells(table, cell)[TableKit.getCellIndex(cell)]);
+		if(head.hasClassName(op.noEditClass)) {return;}
+		
+		TableKit.registerCell(cell);
+		var data = TableKit.cells[cell.id];
+		if(data.active) {return;}
+		data.htmlContent = cell.innerHTML;
+		var ftype = TableKit.Editable.types['text-input'];
+		if(head.id && TableKit.Editable.types[head.id]) {
+			ftype = TableKit.Editable.types[head.id];
+		} else {
+			var n = head.classNames().detect(function(n){
+					return (TableKit.Editable.types[n]) ? true : false;
+			});
+			ftype = n ? TableKit.Editable.types[n] : ftype;
+		}
+		ftype.edit(cell);
+		data.active = true;
+	},
+	types : {},
+	addCellEditor : function(o) {
+		if(o && o.name) { TableKit.Editable.types[o.name] = o; }
+	}
+};
+
+TableKit.Editable.CellEditor = Class.create();
+TableKit.Editable.CellEditor.prototype = {
+	initialize : function(name, options){
+		this.name = name;
+		this.options = Object.extend({
+			element : 'input',
+			attributes : {name : 'value', type : 'text'},
+			selectOptions : [],
+			showSubmit : true,
+			submitText : 'OK',
+			showCancel : true,
+			cancelText : 'Cancel',
+			ajaxURI : null,
+			ajaxOptions : null
+		}, options || {});
+	},
+	edit : function(cell) {
+		cell = $(cell);
+		var op = this.options;
+		var table = cell.up('table');
+		
+		var form = $(document.createElement("form"));
+		form.id = cell.id + '-form';
+		form.addClassName(TableKit.option('formClassName', table.id)[0]);
+		form.onsubmit = this._submit.bindAsEventListener(this);
+		
+		var field = document.createElement(op.element);
+			$H(op.attributes).each(function(v){
+				field[v.key] = v.value;
+			});
+			switch(op.element) {
+				case 'input':
+				case 'textarea':
+				field.value = TableKit.getCellText(cell);
+				break;
+				
+				case 'select':
+				var txt = TableKit.getCellText(cell);
+				$A(op.selectOptions).each(function(v){
+					field.options[field.options.length] = new Option(v[0], v[1]);
+					if(txt === v[1]) {
+						field.options[field.options.length-1].selected = 'selected';
+					}
+				});
+				break;
+			}
+			form.appendChild(field);
+			if(op.element === 'textarea') {
+				form.appendChild(document.createElement("br"));
+			}
+			if(op.showSubmit) {
+				var okButton = document.createElement("input");
+				okButton.type = "submit";
+				okButton.value = op.submitText;
+				okButton.className = 'editor_ok_button';
+				form.appendChild(okButton);
+			}
+			if(op.showCancel) {
+				var cancelLink = document.createElement("a");
+				cancelLink.href = "#";
+				cancelLink.appendChild(document.createTextNode(op.cancelText));
+				cancelLink.onclick = this._cancel.bindAsEventListener(this);
+				cancelLink.className = 'editor_cancel';      
+				form.appendChild(cancelLink);
+			}
+			cell.innerHTML = '';
+			cell.appendChild(form);
+	},
+	_submit : function(e) {
+		var cell = Event.findElement(e,'td');
+		var form = Event.findElement(e,'form');
+		Event.stop(e);
+		this.submit(cell,form);
+	},
+	submit : function(cell, form) {
+		var op = this.options;
+		form = form ? form : cell.down('form');
+		var head = $(TableKit.getHeaderCells(null, cell)[TableKit.getCellIndex(cell)]);
+		var row = cell.up('tr');
+		var table = cell.up('table');
+		var s = '&row=' + (TableKit.getRowIndex(row)+1) + '&cell=' + (TableKit.getCellIndex(cell)+1) + '&id=' + row.id + '&field=' + head.id + '&' + Form.serialize(form);
+		this.ajax = new Ajax.Updater(cell, op.ajaxURI || TableKit.option('editAjaxURI', table.id)[0], Object.extend(op.ajaxOptions || TableKit.option('editAjaxOptions', table.id)[0], {
+			postBody : s,
+			onComplete : function() {
+				var data = TableKit.cells[cell.id];
+				data.active = false;
+				data.refresh = true; // mark cell cache for refreshing, in case cell contents has changed and sorting is applied
+			}
+		}));
+	},
+	_cancel : function(e) {
+		var cell = Event.findElement(e,'td');
+		Event.stop(e);
+		this.cancel(cell);
+	},
+	cancel : function(cell) {
+		this.ajax = null;
+		var data = TableKit.cells[cell.id];
+		cell.innerHTML = data.htmlContent;
+		data.htmlContent = '';
+		data.active = false;
+	},
+	ajax : null
+};
+
+TableKit.Editable.textInput = function(n,attributes) {
+	TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
+		element : 'input',
+		attributes : Object.extend({name : 'value', type : 'text'}, attributes||{})
+	}));
+};
+TableKit.Editable.textInput('text-input');
+
+TableKit.Editable.multiLineInput = function(n,attributes) {
+	TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
+		element : 'textarea',
+		attributes : Object.extend({name : 'value', rows : '5', cols : '20'}, attributes||{})
+	}));	
+};	
+TableKit.Editable.multiLineInput('multi-line-input');
+
+TableKit.Editable.selectInput = function(n,attributes,selectOptions) {
+	TableKit.Editable.addCellEditor(new TableKit.Editable.CellEditor(n, {
+		element : 'select',
+		attributes : Object.extend({name : 'value'}, attributes||{}),
+		'selectOptions' : selectOptions
+	}));	
+};
+
+/*
+TableKit.Bench = {
+	bench : [],
+	start : function(){
+		TableKit.Bench.bench[0] = new Date().getTime();
+	},
+	end : function(s){
+		TableKit.Bench.bench[1] = new Date().getTime();
+		alert(s + ' ' + ((TableKit.Bench.bench[1]-TableKit.Bench.bench[0])/1000)+' seconds.') //console.log(s + ' ' + ((TableKit.Bench.bench[1]-TableKit.Bench.bench[0])/1000)+' seconds.')
+		TableKit.Bench.bench = [];
+	}
+} */
+
+if(window.FastInit) {
+	FastInit.addOnLoad(TableKit.load);
+} else {
+	Event.observe(window, 'load', TableKit.load);
+}