From 4999403a36dd45279a4725ca71a58226768c3775 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 1 Sep 2009 14:12:53 +0000
Subject: [PATCH] New Javascript address auto-completion interface. Added focus
 in HTML editor when replying to a message.

Monotone-Parent: 521171d2e85cdfe0ddb7e31feca69143aae35be9
Monotone-Revision: fb56e362d93bce06baf63f26f919dedfbafe8a51

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2009-09-01T14:12:53
Monotone-Branch: ca.inverse.sogo
---
 UI/Templates/MailerUI/UIxMailEditor.wox     |   2 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox  |   2 +-
 UI/Templates/MailerUI/UIxMailPopupView.wox  |   1 +
 UI/WebServerResources/SOGoAutoCompletion.js | 204 +++++++++++++++++
 UI/WebServerResources/UIxMailEditor.js      | 239 ++------------------
 UI/WebServerResources/UIxMailToSelection.js | 205 +++++++++--------
 6 files changed, 324 insertions(+), 329 deletions(-)
 create mode 100644 UI/WebServerResources/SOGoAutoCompletion.js

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index c43942889..1ea2ca12b 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -10,7 +10,7 @@
   className="UIxPageFrame"
   title="panelTitle"
   const:popup="YES"
-  const:jsFiles="UIxMailToSelection.js,ckeditor/ckeditor.js">
+  const:jsFiles="UIxMailToSelection.js,ckeditor/ckeditor.js,SOGoAutoCompletion.js">
   <script type="text/javascript">
     var mailIsReply = <var:string value="isMailReply"/>;
   </script>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 34a6e4518..b02dc1a83 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -7,7 +7,7 @@
   xmlns:label="OGo:label"
   className="UIxPageFrame"
   title="title"
-  const:jsFiles="dtree.js,MailerUIdTree.js">
+  const:jsFiles="dtree.js,MailerUIdTree.js,SOGoAutoCompletion.js">
   <script type="text/javascript">
     var textMailAccounts = '<var:string value="mailAccounts" const:escapeHTML="NO"/>';
     var textDefaultColumnsOrder = '<var:string value="defaultColumnsOrder" const:escapeHTML="NO"/>';
diff --git a/UI/Templates/MailerUI/UIxMailPopupView.wox b/UI/Templates/MailerUI/UIxMailPopupView.wox
index e21c58d66..1b77d6622 100644
--- a/UI/Templates/MailerUI/UIxMailPopupView.wox
+++ b/UI/Templates/MailerUI/UIxMailPopupView.wox
@@ -6,6 +6,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
+    const:jsFiles="SOGoAutoCompletion.js"
     const:popup="YES">
   <script type="text/javascript">
     var messageName = '<var:string value="clientObject.relativeImap4Name"/>';
diff --git a/UI/WebServerResources/SOGoAutoCompletion.js b/UI/WebServerResources/SOGoAutoCompletion.js
new file mode 100644
index 000000000..04e6af2d0
--- /dev/null
+++ b/UI/WebServerResources/SOGoAutoCompletion.js
@@ -0,0 +1,204 @@
+/* -*- Mode: java; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+
+// The popup menu with id "contactsMenu" must exist before
+// using this interface.
+var SOGoAutoCompletionInterface = {
+    uidField: "c_name",
+    animationParent: null,
+    selectedIndex: -1,
+    delay: 0.750,
+    delayedSearch: false,
+    menu: null,
+    bind: function () {
+	this.menu = $('contactsMenu');
+	this.writeAttribute("autocomplete", "off");
+	this.observe("keydown", this.onKeydown.bindAsEventListener(this));
+        this.observe("blur", this.onBlur.bindAsEventListener(this));
+    },
+    onKeydown: function (event) {
+	if (event.ctrlKey || event.metaKey) {
+            this.focussed = true;
+            return;
+	}
+	if (event.keyCode == Event.KEY_TAB) {
+            if (this.confirmedValue)
+		this.value = this.confirmedValue;
+            else
+		this.uid = null;
+            if (document.currentPopupMenu)
+		hideMenu(document.currentPopupMenu);
+	}
+	else if (event.keyCode == 0
+		 || event.keyCode == Event.KEY_BACKSPACE
+		 || event.keyCode == 32  // Space
+		 || event.keyCode > 47) {
+            this.confirmedValue = null;
+            this.selectedIndex = -1;
+            if (this.delayedSearch)
+		window.clearTimeout(this.delayedSearch);
+	    this.delayedSearch = this.performSearch.delay(this.delay, this);
+	}
+	else if (event.keyCode == Event.KEY_RETURN) {
+            preventDefault(event);
+            if (this.confirmedValue)
+		this.value = this.confirmedValue;
+            $(this).select();
+            if (document.currentPopupMenu)
+		hideMenu(document.currentPopupMenu);
+            this.selectedIndex = -1;
+	}
+	else if (this.menu.getStyle('visibility') == 'visible') {
+            if (event.keyCode == Event.KEY_UP) { // Up arrow
+		if (this.selectedIndex > 0) {
+                    var contacts = this.menu.select("li");
+                    contacts[this.selectedIndex--].removeClassName("selected");
+                    this.value = contacts[this.selectedIndex].readAttribute("address");
+                    this.uid = contacts[this.selectedIndex].uid;
+                    contacts[this.selectedIndex].addClassName("selected");
+		}
+            }
+            else if (event.keyCode == Event.KEY_DOWN) { // Down arrow
+		var contacts = this.menu.select("li");
+		if (contacts.size() - 1 > this.selectedIndex) {
+                    if (this.selectedIndex >= 0)
+			contacts[this.selectedIndex].removeClassName("selected");
+                    this.selectedIndex++;
+                    this.value = contacts[this.selectedIndex].readAttribute("address");
+                    this.uid = contacts[this.selectedIndex].uid;
+                    contacts[this.selectedIndex].addClassName("selected");
+		}
+            }
+	}
+    },
+
+    onBlur: function (event) {
+	if (this.delayedSearch)
+            window.clearTimeout(this.delayedSearch);
+	if (this.confirmedValue)
+            this.value = this.confirmedValue;
+	else
+            this.uid = null;
+    },
+
+    performSearch: function (input) {
+	// Perform address completion
+        if (document.contactLookupAjaxRequest) {
+	    // Abort any pending request
+	    document.contactLookupAjaxRequest.aborted = true;
+	    document.contactLookupAjaxRequest.abort();
+        }
+        if (input.value.trim().length > 2) {
+	    var urlstr = (UserFolderURL + "Contacts/allContactSearch?search="
+                          + encodeURIComponent(input.value));
+            if (input.animationParent)
+		startAnimation(input.animationParent);
+            document.contactLookupAjaxRequest =
+                triggerAjaxRequest(urlstr, input.performSearchCallback.bind(input), input);
+        }
+        else {
+            if (document.currentPopupMenu)
+                hideMenu(document.currentPopupMenu);
+        }
+    },
+
+    performSearchCallback: function (http) {
+	if (http.readyState == 4) {
+	    var list = this.menu.down("ul");
+    
+            var input = http.callbackData;
+
+            if (http.status == 200) {
+		var start = input.value.length;
+		var data = http.responseText.evalJSON(true);
+
+		if (data.contacts.length > 1) {
+                    list.select("li").each(function(item) {
+			item.stopObserving("mousedown");
+                        item.remove();
+                    });
+		    
+                    // Populate popup menu
+                    for (var i = 0; i < data.contacts.length; i++) {
+			var contact = data.contacts[i];
+			var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
+			var node = new Element('li', { 'address': completeEmail });
+			var matchPosition = completeEmail.toLowerCase().indexOf(data.searchText.toLowerCase());
+			var matchBefore = completeEmail.substring(0, matchPosition);
+			var matchText = completeEmail.substring(matchPosition, matchPosition + data.searchText.length);
+			var matchAfter = completeEmail.substring(matchPosition + data.searchText.length);
+			list.appendChild(node);
+			node.uid = contact["c_mail"];
+			node.appendChild(document.createTextNode(matchBefore));
+			node.appendChild(new Element('strong').update(matchText));
+			node.appendChild(document.createTextNode(matchAfter));
+			if (contact["contactInfo"])
+                            node.appendChild(document.createTextNode(" (" + contact["contactInfo"] + ")"));
+			$(node).observe("mousedown", this.onAddressResultClick.bindAsEventListener(this));
+                    }
+		    
+                    // Show popup menu
+                    var offsetScroll = Element.cumulativeScrollOffset(input);
+		    var offset = Element.positionedOffset(input);
+		    if (offset.top == 0)
+			offset = Element.cumulativeOffset(input);
+                    var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
+                    var height = 'auto';
+                    var heightDiff = window.height() - offset[1];
+                    var nodeHeight = node.getHeight();
+		    
+                    if ((data.contacts.length * nodeHeight) > heightDiff)
+			// Limit the size of the popup to the window height, minus 12 pixels
+			height = parseInt(heightDiff/nodeHeight) * nodeHeight - 12 + 'px';
+		    
+                    this.menu.setStyle({ top: top + "px",
+				    left: offset[0] + "px",
+				    height: height,
+				    visibility: "visible" });
+                    this.menu.scrollTop = 0;
+		    
+                    document.currentPopupMenu = this.menu;
+		    $(document.body).stopObserving("click");
+                    $(document.body).observe("click", onBodyClickMenuHandler);
+		}
+		else {
+                    if (document.currentPopupMenu)
+			hideMenu(document.currentPopupMenu);
+		    
+                    if (data.contacts.length == 1) {
+			// Single result
+			var contact = data.contacts[0];
+			input.uid = contact[this.uidField];
+			var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
+			if (contact["c_cn"].substring(0, input.value.length).toUpperCase()
+                            == input.value.toUpperCase())
+                            input.value = completeEmail;
+			else
+                            // The result matches email address, not user name
+                            input.value += ' >> ' + completeEmail;
+			input.confirmedValue = completeEmail;
+			
+			var end = input.value.length;
+			$(input).selectText(start, end);
+			
+			this.selectedIndex = -1;
+                    }
+		}
+            }
+            else
+		if (document.currentPopupMenu)
+                    hideMenu(document.currentPopupMenu);
+            document.contactLookupAjaxRequest = null;
+	}
+    },
+    
+    onAddressResultClick: function(event) {
+	var e = Event.element(event);
+	if (e.tagName != 'LI')
+	    e = e.up('LI');
+	if (e) {
+            this.uid = e.uid;
+            this.value = e.readAttribute("address");
+            this.confirmedValue = this.value;
+	}
+    }
+};
diff --git a/UI/WebServerResources/UIxMailEditor.js b/UI/WebServerResources/UIxMailEditor.js
index 91bb6b01d..b8eb5cd00 100644
--- a/UI/WebServerResources/UIxMailEditor.js
+++ b/UI/WebServerResources/UIxMailEditor.js
@@ -139,11 +139,11 @@ function clickedEditorSend(sender) {
   
     var lastRow = $("lastRow");
     lastRow.down("select").name = "popup_last";
-  
+    
     window.shouldPreserve = true;
     document.pageform.action = "send";
     document.pageform.submit();
-  
+    
     return false;
 }
 
@@ -299,233 +299,13 @@ function onTextMouseDown(event) {
     }
 }
 
-/* address completion */
-
-function onContactKeydown(event) {
-    if (event.ctrlKey || event.metaKey) {
-        this.focussed = true;
-        return;
-    }
-    if (event.keyCode == Event.KEY_TAB) {
-        if (this.confirmedValue)
-            this.value = this.confirmedValue;
-        if (document.currentPopupMenu)
-            hideMenu(document.currentPopupMenu);
-    }
-    else if (event.keyCode == 0
-             || event.keyCode == Event.KEY_BACKSPACE
-             || event.keyCode == 32  // Space
-             || event.keyCode > 47) {
-        this.confirmedValue = null;
-        MailEditor.selectedIndex = -1;
-        MailEditor.currentField = this;
-        if (MailEditor.delayedSearch)
-            window.clearTimeout(MailEditor.delayedSearch);
-        MailEditor.delayedSearch = window.setTimeout("performSearch()", MailEditor.delay);
-    }
-    else if (event.keyCode == Event.KEY_RETURN) {
-        preventDefault(event);
-        if (this.confirmedValue)
-            this.value = this.confirmedValue;
-        $(this).select();
-        if (document.currentPopupMenu)
-            hideMenu(document.currentPopupMenu);
-        MailEditor.selectedIndex = -1;
-    }
-    else if ($('contactsMenu').getStyle('visibility') == 'visible') {
-        if (event.keyCode == Event.KEY_UP) { // Up arrow
-            if (MailEditor.selectedIndex > 0) {
-                var contacts = $('contactsMenu').select("li");
-                contacts[MailEditor.selectedIndex--].removeClassName("selected");
-                this.value = contacts[MailEditor.selectedIndex].readAttribute("address");
-                contacts[MailEditor.selectedIndex].addClassName("selected");
-            }
-        }
-        else if (event.keyCode == Event.KEY_DOWN) { // Down arrow
-            var contacts = $('contactsMenu').select("li");
-            if (contacts.size() - 1 > MailEditor.selectedIndex) {
-                if (MailEditor.selectedIndex >= 0)
-                    contacts[MailEditor.selectedIndex].removeClassName("selected");
-                MailEditor.selectedIndex++;
-                this.value = contacts[MailEditor.selectedIndex].readAttribute("address");
-                contacts[MailEditor.selectedIndex].addClassName("selected");
-            }
-        }
-    }
-}
-
-function onContactBlur(event) {
-    if (MailEditor.delayedSearch)
-        window.clearTimeout(MailEditor.delayedSearch);
-    MailEditor.currentField = null;
-}
-
-function findPos(obj) {
-    var curleft = curtop = 0;
-    if (obj.offsetParent) {
-        do {
-            curleft += obj.offsetLeft;
-            curtop += obj.offsetTop;
-        } while (obj = obj.offsetParent);
-    }
-    return [curleft,curtop];
-}
-
-function performSearch() {
-    // Perform address completion
-    var reference = $("referenceList");
-    if (reference) {
-        var field = reference.down ("TD.editing INPUT");
-        if (field && field.value.trim().length > 2) {
-            /*var pos = findPos (field);
-            $('contactsMenu').absolutize ();
-            $('contactsMenu').style.top = pos[1];*/
-            var urlstr = window.location.href + "/../../contactSearch?search="
-              + encodeURIComponent (field.value.trim());
-            document.contactLookupAjaxRequest =
-                triggerAjaxRequest(urlstr, performSearchCallback, field);
-        }
-    }
-    else if (MailEditor.currentField) {
-        if (document.contactLookupAjaxRequest) {
-            // Abort any pending request
-            document.contactLookupAjaxRequest.aborted = true;
-            document.contactLookupAjaxRequest.abort();
-        }
-        if (MailEditor.currentField.value.trim().length > 2) {
-            var urlstr = (UserFolderURL + "Contacts/allContactSearch?search="
-                          + encodeURIComponent(MailEditor.currentField.value));
-            document.contactLookupAjaxRequest =
-                triggerAjaxRequest(urlstr, performSearchCallback, MailEditor.currentField);
-        }
-        else {
-            if (document.currentPopupMenu)
-                hideMenu(document.currentPopupMenu);
-        }
-    }
-}
-
-function performSearchCallback(http) {
-    if (http.readyState == 4) {
-        var menu = $('contactsMenu');
-        var list = menu.down("ul");
-    
-        var input = http.callbackData;
-    
-        if (http.status == 200) {
-            var start = input.value.length;
-            var data = http.responseText.evalJSON(true);
-
-            if (data.contacts.length > 1) {
-                list.select("li").each(function(item) {
-                        item.remove();
-                    });
-	
-                // Populate popup menu
-                for (var i = 0; i < data.contacts.length; i++) {
-                    var contact = data.contacts[i];
-                    var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
-                    var node = new Element('li', { 'address': completeEmail });
-                    node.writeAttribute("mail", contact["c_mail"]);
-                    node.writeAttribute("name", contact["c_cn"]);
-                    var matchPosition = completeEmail.toLowerCase().indexOf(data.searchText.toLowerCase());
-                    var matchBefore = completeEmail.substring(0, matchPosition);
-                    var matchText = completeEmail.substring(matchPosition, matchPosition + data.searchText.length);
-                    var matchAfter = completeEmail.substring(matchPosition + data.searchText.length);
-                    list.appendChild(node);
-                    node.uid = contact["c_name"];
-                    node.appendChild(document.createTextNode(matchBefore));
-                    node.appendChild(new Element('strong').update(matchText));
-                    node.appendChild(document.createTextNode(matchAfter));
-                    if (contact["contactInfo"])
-                        node.appendChild(document.createTextNode(" (" + contact["contactInfo"] + ")"));
-                    $(node).observe("mousedown", onAddressResultClick);
-                }
-
-                // Show popup menu
-                var offsetScroll = Element.cumulativeScrollOffset(input);
-                var offset = Element.cumulativeOffset(input);
-                var top = offset[1] - offsetScroll[1] + node.offsetHeight + 3;
-                var height = 'auto';
-                var heightDiff = window.height() - offset[1];
-                var nodeHeight = node.getHeight();
-
-                if ((data.contacts.length * nodeHeight) > heightDiff)
-                    // Limit the size of the popup to the window height, minus 12 pixels
-                    height = parseInt(heightDiff/nodeHeight) * nodeHeight - 12 + 'px';
-
-                menu.setStyle({ top: top + "px",
-                            left: offset[0] + "px",
-                            height: height,
-                            visibility: "visible" });
-                menu.scrollTop = 0;
-
-                document.currentPopupMenu = menu;
-                $(document.body).observe("click", onBodyClickMenuHandler);
-            }
-            else {
-                if (document.currentPopupMenu)
-                    hideMenu(document.currentPopupMenu);
-
-                if (data.contacts.length == 1) {
-                    // Single result
-                    var contact = data.contacts[0];
-                    input.uid = contact["c_name"];
-                    if ($("referenceList")) {
-                        var line = $(input).ancestors().first();
-                        line.writeAttribute ("card", contact["c_name"]);
-                        line.writeAttribute ("name", contact["c_cn"]);
-                        line.writeAttribute ("mail", contact["c_mail"]);
-                    }
-                    var completeEmail = contact["c_cn"] + " <" + contact["c_mail"] + ">";
-                    if (contact["c_cn"].substring(0, input.value.length).toUpperCase()
-                        == input.value.toUpperCase())
-                        input.value = completeEmail;
-                    else
-                        // The result matches email address, not user name
-                        input.value += ' >> ' + completeEmail;
-                    input.confirmedValue = completeEmail;
-	  
-                    var end = input.value.length;
-                    $(input).selectText(start, end);
-
-                    MailEditor.selectedIndex = -1;
-                }
-            }
-        }
-        else
-            if (document.currentPopupMenu)
-                hideMenu(document.currentPopupMenu);
-        document.contactLookupAjaxRequest = null;
-    }
-}
-
-function onAddressResultClick(event) {
-    var reference = $("referenceList");
-    if (reference) {
-        var field = reference.down ("TD.editing INPUT");
-        var td = reference.down ("TD.editing");
-        td.writeAttribute ("card", this.uid);
-        td.writeAttribute ("mail", this.readAttribute("mail"));
-        td.writeAttribute ("name", this.readAttribute("name"));
-        field.value = $(this).readAttribute("address");
-        endAllEditables ();
-    }
-    if (MailEditor.currentField) {
-        MailEditor.currentField.uid = this.uid;
-        MailEditor.currentField.value = $(this).readAttribute("address");
-        MailEditor.currentField.confirmedValue = MailEditor.currentField.value;
-    }
-}
-
 function initTabIndex(addressList, subjectField, msgArea) {
     var i = 1;
     addressList.select("input.textField").each(function (input) {
             if (!input.readAttribute("readonly")) {
                 input.writeAttribute("tabindex", i++);
-                input.writeAttribute("autocomplete", "off");
-                input.observe("keydown", onContactKeydown); // bind listener for address completion
-                input.observe("blur", onContactBlur);
+                input.addInterface(SOGoAutoCompletionInterface);
+                input.uidField = "c_name";
             }
         });
     subjectField.writeAttribute("tabindex", i++);
@@ -590,6 +370,8 @@ function initMailEditor() {
                               ] 
                           }
                          );
+        if (focusField == textarea)
+            focusCKEditor();
     }
 
     Event.observe(window, "resize", onWindowResize);
@@ -597,6 +379,15 @@ function initMailEditor() {
     onWindowResize.defer();
 }
 
+function focusCKEditor(event) {
+    if (CKEDITOR.status != 'basic_ready')
+        setTimeout("focusCKEditor()", 100);
+    else
+        // CKEditor reports being ready but it's still not focusable;
+        // we wait for a few more milliseconds
+        setTimeout("CKEDITOR.instances.text.focus()", 500);
+}
+
 function initializePriorityMenu() {
     var priority = $("priority").value.toUpperCase();
     var priorityMenu = $("priority-menu").childNodesWithTag("ul")[0];
diff --git a/UI/WebServerResources/UIxMailToSelection.js b/UI/WebServerResources/UIxMailToSelection.js
index 098a47b1f..c806b38da 100644
--- a/UI/WebServerResources/UIxMailToSelection.js
+++ b/UI/WebServerResources/UIxMailToSelection.js
@@ -32,163 +32,162 @@
 var lastIndex = currentIndex;
 
 function sanitizedCn(cn) {
-  var parts;
-  parts = cn.split(', ');
-  if(parts.length == 1)
-    return cn;
-  return parts[0];
+    var parts;
+    parts = cn.split(', ');
+    if(parts.length == 1)
+        return cn;
+    return parts[0];
 }
 
 function hasAddress(email) {
-  var e = $(email);
-  if(e)
-    return true;
-  return false;
+    var e = $(email);
+    if(e)
+        return true;
+    return false;
 }
 
 function checkAddresses() {
-  alert("addressCount: " + this.getAddressCount() + " currentIndex: " + currentIndex + " lastIndex: " + lastIndex);
+    alert("addressCount: " + this.getAddressCount() + " currentIndex: " + currentIndex + " lastIndex: " + lastIndex);
 }
 
 function fancyAddRow(shouldEdit, text, type) {
-  var addr = $('addr_' + lastIndex);
-  if (addr && addr.value == '') {
-    var input = $('subjectField');
-    if (input && input.value != '') {
-      input.focus();
-      input.select();
-      return;
+    var addr = $('addr_' + lastIndex);
+    if (addr && addr.value == '') {
+        var input = $('subjectField');
+        if (input && input.value != '') {
+            input.focus();
+            input.select();
+            return;
+        }
     }
-  }
-  var addressList = $("addressList").tBodies[0];
-  var lastChild = $("lastRow");
+    var addressList = $("addressList").tBodies[0];
+    var lastChild = $("lastRow");
   
-  currentIndex++;
-  var proto = lastChild.previous("tr");
-  var row = proto.cloneNode(true);
-  row.writeAttribute("id", 'row_' + currentIndex);
-  var rowNodes = row.childNodesWithTag("td");
-  var select = $(rowNodes[0]).childNodesWithTag("select")[0];
-  select.name = 'popup_' + currentIndex;
-  select.value = (type? type : proto.down("select").value);
-  var input = $(rowNodes[1]).childNodesWithTag("input")[0];
-  input.name  = 'addr_' + currentIndex;
-  input.id = 'addr_' + currentIndex;
-  input.value = text;
-	input.stopObserving("keydown", onContactKeydown);
+    currentIndex++;
+    var proto = lastChild.previous("tr");
+    var row = proto.cloneNode(true);
+    row.writeAttribute("id", 'row_' + currentIndex);
+    var rowNodes = row.childNodesWithTag("td");
+    var select = $(rowNodes[0]).childNodesWithTag("select")[0];
+    select.name = 'popup_' + currentIndex;
+    select.value = (type? type : proto.down("select").value);
+    var input = $(rowNodes[1]).childNodesWithTag("input")[0];
+    input.name  = 'addr_' + currentIndex;
+    input.id = 'addr_' + currentIndex;
+    input.value = text;
+    input.stopObserving("keydown");
+    input.stopObserving("blur");
 
-  addressList.insertBefore(row, lastChild);
+    addressList.insertBefore(row, lastChild);
 
-  if (shouldEdit) {
-    input.writeAttribute("autocomplete", "off");
-    input.observe("keydown", onContactKeydown); // bind listener for address completion
-		input.observe("blur", onContactBlur);
-    input.focus();
-    input.select();
-  }
+    if (shouldEdit) {
+        input.addInterface(SOGoAutoCompletionInterface);
+        input.focus();
+        input.select();
+    }
 }
 
 function addressFieldGotFocus(sender) {
-  var idx;
+    var idx;
   
-  idx = this.getIndexFromIdentifier(sender.id);
-  if (lastIndex == idx) return;
-  this.removeLastEditedRowIfEmpty();
-  onWindowResize(null);
+    idx = this.getIndexFromIdentifier(sender.id);
+    if (lastIndex == idx) return;
+    this.removeLastEditedRowIfEmpty();
+    onWindowResize(null);
 
-  return false;
+    return false;
 }
 
 function addressFieldLostFocus(sender) {
-  lastIndex = this.getIndexFromIdentifier(sender.id);
+    lastIndex = this.getIndexFromIdentifier(sender.id);
 
-	if (sender.confirmedValue) {
-		sender.value = sender.confirmedValue;
-		sender.confirmedValue = false;
-	}
-	
-  var addresses = sender.value.split(',');
-  if (addresses.length > 0) {
-    sender.value = addresses[0].strip();
-    for (var i = 1; i < addresses.length; i++) {
-      var addr = addresses[i].strip();
-      if (addr.length > 0)
-				fancyAddRow(false, addr, $(sender).up("tr").down("select").value);
+    if (sender.confirmedValue) {
+        sender.value = sender.confirmedValue;
+        sender.confirmedValue = false;
     }
-  }
-  onWindowResize(null);
+	
+    var addresses = sender.value.split(',');
+    if (addresses.length > 0) {
+        sender.value = addresses[0].strip();
+        for (var i = 1; i < addresses.length; i++) {
+            var addr = addresses[i].strip();
+            if (addr.length > 0)
+                fancyAddRow(false, addr, $(sender).up("tr").down("select").value);
+        }
+    }
+    onWindowResize(null);
 
-  return false;
+    return false;
 }
 
 function removeLastEditedRowIfEmpty() {
-  var addr, addressList, senderRow;
+    var addr, addressList, senderRow;
   
-  addressList = $("addressList").tBodies[0];
+    addressList = $("addressList").tBodies[0];
   
-  if (lastIndex == 0 && addressList.childNodes.length <= 2) return;
-  addr = $('addr_' + lastIndex);
-  if (!addr) return;
-  if (addr.value.strip() != '') return;
-  senderRow = $("row_" + lastIndex);
-	addressList.removeChild(senderRow);
+    if (lastIndex == 0 && addressList.childNodes.length <= 2) return;
+    addr = $('addr_' + lastIndex);
+    if (!addr) return;
+    if (addr.value.strip() != '') return;
+    senderRow = $("row_" + lastIndex);
+    addressList.removeChild(senderRow);
 }
 
 function getIndexFromIdentifier(id) {
-  return id.split('_')[1];
+    return id.split('_')[1];
 }
 
 function getAddressIDs() {
-  var addressList, rows, i, count, addressIDs;
+    var addressList, rows, i, count, addressIDs;
 
-  addressIDs = new Array();
+    addressIDs = new Array();
 
-  addressList = $("addressList").tBodies[0];
-  rows  = addressList.childNodes;
-  count = rows.length;
+    addressList = $("addressList").tBodies[0];
+    rows  = addressList.childNodes;
+    count = rows.length;
 
-  for (i = 0; i < count; i++) {
-    var row, rowId;
+    for (i = 0; i < count; i++) {
+        var row, rowId;
     
-    row = rows[i];
-    rowId = row.id;
-    if (rowId && rowId != 'lastRow') {
-      var idx;
+        row = rows[i];
+        rowId = row.id;
+        if (rowId && rowId != 'lastRow') {
+            var idx;
 
-      idx = this.getIndexFromIdentifier(rowId);
-      addressIDs.push(idx);
+            idx = this.getIndexFromIdentifier(rowId);
+            addressIDs.push(idx);
+        }
     }
-  }
-  return addressIDs;
+    return addressIDs;
 }
 
 function getAddressCount() {
-  var addressCount, addressIDs, i, count;
+    var addressCount, addressIDs, i, count;
   
-  addressCount = 0;
-  addressIDs   = this.getAddressIDs();
-  count        = addressIDs.length;
-  for (i = 0; i < count; i++) {
-    var idx, input;
+    addressCount = 0;
+    addressIDs   = this.getAddressIDs();
+    count        = addressIDs.length;
+    for (i = 0; i < count; i++) {
+        var idx, input;
 
-    idx   = addressIDs[i];
-    input = $('addr_' + idx);
-    if (input && input.value != '')
-      addressCount++;
-  }
-  return addressCount;
+        idx   = addressIDs[i];
+        input = $('addr_' + idx);
+        if (input && input.value != '')
+            addressCount++;
+    }
+    return addressCount;
 }
 
 function hasRecipients() {
-  var count;
+    var count;
   
-  count = this.getAddressCount();
+    count = this.getAddressCount();
 
-  return (count > 0);
+    return (count > 0);
 }
 
 function initMailToSelection() {
-  currentIndex = lastIndex = $$("table#addressList tr").length - 2;
+    currentIndex = lastIndex = $$("table#addressList tr").length - 2;
 }
 
 document.observe("dom:loaded", initMailToSelection);