]> err.no Git - scalable-opengroupware.org/blobdiff - UI/WebServerResources/SchedulerUI.js
git-svn-id: http://svn.opengroupware.org/SOGo/inverse/trunk@1052 d1b88da0-ebda-0310...
[scalable-opengroupware.org] / UI / WebServerResources / SchedulerUI.js
index d0f858b230d76dd99dae83f2c1e6e5922c846a2b..718df0f35153918e006a7a6465bc48a891768dbe 100644 (file)
@@ -1,3 +1,5 @@
+/* JavaScript for SOGoCalendar */
+
 var sortOrder = '';
 var sortKey = '';
 var listFilter = 'view_today';
@@ -5,7 +7,7 @@ var listFilter = 'view_today';
 var listOfSelection = null;
 var selectedCalendarCell;
 
-var hideCompletedTasks = 0;
+var showCompletedTasks = 0;
 
 var currentDay = '';
 var currentView = "dayview";
@@ -17,6 +19,9 @@ var contactSelectorAction = 'calendars-contacts';
 var eventsToDelete = new Array();
 var ownersOfEventsToDelete = new Array();
 
+var usersRightsWindowHeight = 250;
+var usersRightsWindowWidth = 502;
+
 function newEvent(sender, type) {
   var day = sender.getAttribute("day");
   if (!day)
@@ -37,7 +42,7 @@ function newEvent(sender, type) {
   if (params.length > 0)
     urlstr += "?" + params.join("&");
 
-  window.open(urlstr, "", "width=620,height=600,resizable=0");
+  window.open(urlstr, "", "width=490,height=470,resizable=0");
 
   return false; /* stop following the link */
 }
@@ -51,8 +56,7 @@ function _editEventId(id, owner) {
   var urlstr = urlBase + id + "/edit";
 
   var win = window.open(urlstr, "SOGo_edit_" + id,
-                        "width=620,height=600,resizable=0,scrollbars=0,toolbar=0," +
-                        "location=0,directories=0,status=0,menubar=0,copyhistory=0");
+                        "width=490,height=470,resizable=0");
   win.focus();
 }
 
@@ -81,8 +85,7 @@ function _batchDeleteEvents() {
                                                        events);
 }
 
-function deleteEvent()
-{
+function deleteEvent() {
   if (listOfSelection) {
     var nodes = listOfSelection.getSelectedRows();
 
@@ -179,8 +182,7 @@ function modifyEventCallback(http) {
   }
 }
 
-function deleteEventCallback(http)
-{
+function deleteEventCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
     var nodes = http.callbackData;
@@ -202,8 +204,7 @@ function deleteEventCallback(http)
     log ("ajax fuckage");
 }
 
-function editDoubleClickedEvent(node)
-{
+function editDoubleClickedEvent(node) {
   _editEventId(node.getAttribute("id"),
                node.getAttribute("owner"));
   
@@ -227,8 +228,7 @@ function displayAppointment(event) {
   event.returnValue = false;
 }
 
-function onDaySelect(node)
-{
+function onDaySelect(node) {
   var day = node.getAttribute("day");
   var needRefresh = (listFilter == 'view_selectedday'
                      && day != currentDay);
@@ -251,8 +251,7 @@ function onDaySelect(node)
   return false;
 }
 
-function onDateSelectorGotoMonth(node)
-{
+function onDateSelectorGotoMonth(node) {
   var day = node.getAttribute("date");
 
   changeDateSelectorDisplay(day, true);
@@ -260,8 +259,7 @@ function onDateSelectorGotoMonth(node)
   return false;
 }
 
-function onCalendarGotoDay(node)
-{
+function onCalendarGotoDay(node) {
   var day = node.getAttribute("date");
 
   changeDateSelectorDisplay(day);
@@ -270,16 +268,14 @@ function onCalendarGotoDay(node)
   return false;
 }
 
-function gotoToday()
-{
+function gotoToday() {
   changeDateSelectorDisplay('');
   changeCalendarDisplay();
 
   return false;
 }
 
-function setDateSelectorContent(content)
-{
+function setDateSelectorContent(content) {
   var div = $("dateSelectorView");
 
   div.innerHTML = content;
@@ -287,8 +283,7 @@ function setDateSelectorContent(content)
     restoreCurrentDaySelection(div);
 }
 
-function dateSelectorCallback(http)
-{
+function dateSelectorCallback(http) {
   if (http.readyState == 4
       && http.status == 200) {
     document.dateSelectorAjaxRequest = null;
@@ -300,8 +295,7 @@ function dateSelectorCallback(http)
     log ("ajax fuckage");
 }
 
-function appointmentsListCallback(http)
-{
+function appointmentsListCallback(http) {
   var div = $("appointmentsListView");
 
   if (http.readyState == 4
@@ -320,8 +314,7 @@ function appointmentsListCallback(http)
     log ("ajax fuckage");
 }
 
-function tasksListCallback(http)
-{
+function tasksListCallback(http) {
   var div = $("tasksListView");
 
   if (http.readyState == 4
@@ -344,8 +337,7 @@ function tasksListCallback(http)
     log ("ajax fuckage");
 }
 
-function restoreCurrentDaySelection(div)
-{
+function restoreCurrentDaySelection(div) {
   var elements = div.getElementsByTagName("a");
   var day = null;
   var i = 9;
@@ -370,8 +362,7 @@ function restoreCurrentDaySelection(div)
     }
 }
 
-function changeDateSelectorDisplay(day, keepCurrentDay)
-{
+function changeDateSelectorDisplay(day, keepCurrentDay) {
   var url = ApplicationBaseURL + "dateselector";
   if (day)
     url += "?day=" + day;
@@ -380,7 +371,6 @@ function changeDateSelectorDisplay(day, keepCurrentDay)
     if (!keepCurrentDay)
       currentDay = day;
 
-    log (backtrace());
     var month = day.substr(0, 6);
     if (cachedDateSelectors[month]) {
 //       log ("restoring cached selector for month: " + month);
@@ -400,8 +390,7 @@ function changeDateSelectorDisplay(day, keepCurrentDay)
   }
 }
 
-function changeCalendarDisplay(time, newView)
-{
+function changeCalendarDisplay(time, newView) {
   var url = ApplicationBaseURL + ((newView) ? newView : currentView);
 
   selectedCalendarCell = null;
@@ -443,28 +432,23 @@ function _ensureView(view) {
   return false;
 }
 
-function onDayOverview()
-{
+function onDayOverview() {
   return _ensureView("dayview");
 }
 
-function onMulticolumnDayOverview()
-{
+function onMulticolumnDayOverview() {
   return _ensureView("multicolumndayview");
 }
 
-function onWeekOverview()
-{
+function onWeekOverview() {
   return _ensureView("weekview");
 }
 
-function onMonthOverview()
-{
+function onMonthOverview() {
   return _ensureView("monthview");
 }
 
-function scrollDayView(hour)
-{
+function scrollDayView(hour) {
   var rowNumber;
   if (hour) {
     if (hour.length == 3)
@@ -491,8 +475,7 @@ function onClickableCellsDblClick(event) {
   event.returnValue = false;
 }
 
-function calendarDisplayCallback(http)
-{
+function calendarDisplayCallback(http) {
   var div = $("calendarView");
 
 //   log ("calendardisplaycallback: " + div);
@@ -542,28 +525,27 @@ function calendarDisplayCallback(http)
     log ("ajax fuckage");
 }
 
-function assignCalendar(name)
-{
-  var node = $(name);
-
-  node.calendar = new skycalendar(node);
-  node.calendar.setCalendarPage(ResourcesURL + "/skycalendar.html");
-  var dateFormat = node.getAttribute("dateFormat");
-  if (dateFormat)
-    node.calendar.setDateFormat(dateFormat);
+function assignCalendar(name) {
+   if (typeof(skycalendar) != "undefined") {
+      var node = $(name);
+      
+      node.calendar = new skycalendar(node);
+      node.calendar.setCalendarPage(ResourcesURL + "/skycalendar.html");
+      var dateFormat = node.getAttribute("dateFormat");
+      if (dateFormat)
+        node.calendar.setDateFormat(dateFormat);
+   }
 }
 
-function popupCalendar(node)
-{
-  var nodeId = node.getAttribute("inputId");
-  var input = $(nodeId);
-  input.calendar.popup();
+function popupCalendar(node) {
+   var nodeId = node.getAttribute("inputId");
+   var input = $(nodeId);
+   input.calendar.popup();
 
-  return false;
+   return false;
 }
 
-function onAppointmentContextMenu(event, element)
-{
+function onAppointmentContextMenu(event, element) {
   var topNode = $("appointmentsList");
 //   log(topNode);
 
@@ -582,8 +564,7 @@ function onAppointmentContextMenu(event, element)
   element.select();
 }
 
-function onAppointmentContextMenuHide(event)
-{
+function onAppointmentContextMenuHide(event) {
   var topNode = $("appointmentsList");
 
   if (topNode.menuSelectedEntry) {
@@ -653,11 +634,10 @@ function refreshAppointments() {
 }
 
 function refreshTasks() {
-  return _loadTasksHref("taskslist?hide-completed=" + hideCompletedTasks);
+  return _loadTasksHref("taskslist?show-completed=" + showCompletedTasks);
 }
 
-function refreshAppointmentsAndDisplay()
-{
+function refreshAppointmentsAndDisplay() {
   refreshAppointments();
   changeCalendarDisplay();
 }
@@ -671,8 +651,7 @@ function onListFilterChange() {
   return refreshAppointments();
 }
 
-function onAppointmentClick(event)
-{
+function onAppointmentClick(event) {
   var node = event.target.getParentWithTagName("tr");
   var day = node.getAttribute("day");
   var hour = node.getAttribute("hour");
@@ -683,8 +662,7 @@ function onAppointmentClick(event)
   return onRowClick(event);
 }
 
-function selectMonthInMenu(menu, month)
-{
+function selectMonthInMenu(menu, month) {
   var entries = menu.childNodes[1].childNodesWithTag("LI");
   for (i = 0; i < entries.length; i++) {
     var entry = entries[i];
@@ -696,8 +674,7 @@ function selectMonthInMenu(menu, month)
   }
 }
 
-function selectYearInMenu(menu, month)
-{
+function selectYearInMenu(menu, month) {
   var entries = menu.childNodes[1].childNodes;
   for (i = 0; i < entries.length; i++) {
     var entry = entries[i];
@@ -711,8 +688,7 @@ function selectYearInMenu(menu, month)
   }
 }
 
-function popupMonthMenu(event, menuId)
-{
+function popupMonthMenu(event, menuId) {
   var node = event.target;
 
   if (event.button == 0) {
@@ -741,8 +717,7 @@ function popupMonthMenu(event, menuId)
   }
 }
 
-function onMonthMenuItemClick(node)
-{
+function onMonthMenuItemClick(node) {
   var month = '' + node.getAttribute("month");
   var year = '' + $("yearLabel").innerHTML;
   
@@ -817,47 +792,40 @@ function changeWeekCalendarDisplayOfSelectedDay(node) {
   node.addClassName("selectedDay");
 }
 
-function findMonthCalendarSelectedCell(table) {
-  var tbody = table.tBodies[0];
-  var rows = tbody.rows;
+function findMonthCalendarSelectedCell(daysContainer) {
+   var found = false;
+   var i = 0;
 
-  var i = 1;
-  while (i < rows.length && !table.selectedCell) {
-    var cells = rows[i].cells;
-    var j = 0;
-    while (j < cells.length && !table.selectedCell) {
-      if (cells[j].hasClassName("selectedDay"))
-        table.selectedCell = cells[j];
+   while (!found && i < daysContainer.childNodes.length) {
+      var currentNode = daysContainer.childNodes[i];
+      if (currentNode instanceof HTMLDivElement
+          && currentNode.hasClassName("selectedDay")) {
+         daysContainer.selectedCell = currentNode;
+         found = true;
+      }
       else
-        j++;
-    }
-    i++;
-  }
+         i++;
+   }
 }
 
-function changeMonthCalendarDisplayOfSelectedDay(node)
-{
-  var tr = node.parentNode;
-  var table = tr.parentNode.parentNode;
-
-  if (!table.selectedCell)
-    findMonthCalendarSelectedCell(table);
-
-  if (table.selectedCell)
-    table.selectedCell.removeClassName("selectedDay");
-  table.selectedCell = node;
-  node.addClassName("selectedDay");
+function changeMonthCalendarDisplayOfSelectedDay(node) {
+   var daysContainer = node.parentNode;
+   if (!daysContainer.selectedCell)
+      findMonthCalendarSelectedCell(daysContainer);
+   
+   if (daysContainer.selectedCell)
+      daysContainer.selectedCell.removeClassName("selectedDay");
+   daysContainer.selectedCell = node;
+   node.addClassName("selectedDay");
 }
 
-function onHideCompletedTasks(node)
-{
-  hideCompletedTasks = (node.checked ? 1 : 0);
+function onShowCompletedTasks(node) {
+  showCompletedTasks = (node.checked ? 1 : 0);
 
   return refreshTasks();
 }
 
-function updateTaskStatus(node)
-{
+function updateTaskStatus(node) {
   var taskId = node.parentNode.getAttribute("id");
   var taskOwner = node.parentNode.getAttribute("owner");
   var newStatus = (node.checked ? 1 : 0);
@@ -882,167 +850,91 @@ function updateTaskStatus(node)
   return false;
 }
 
-function updateCalendarStatus()
-{
+function updateCalendarStatus(event) {
   var list = new Array();
 
-  var clist = $("calendarsList");
-  var nodes = clist.childNodesWithTag("ul")[0].childNodesWithTag("li");
+  var nodes = $("calendarList").childNodesWithTag("li");
   for (var i = 0; i < nodes.length; i++) {
     var input = nodes[i].childNodesWithTag("input")[0];
-    if (input.checked)
-      list.push(nodes[i].getAttribute("uid"));
+    if (input.checked) {
+       var folderId = nodes[i].getAttribute("id");
+       var elems = folderId.split(":");
+       if (elems.length > 1)
+         list.push(elems[0]);
+       else
+         list.push(UserLogin);
+    }
   }
 
   if (!list.length) {
-    list.push(nodes[0].getAttribute("uid"));
-    nodes[0].childNodesWithTag("input")[0].checked = true;
+     list.push(UserLogin);
+     nodes[0].childNodesWithTag("input")[0].checked = true;
   }
 //   ApplicationBaseURL = (UserFolderURL + "Groups/_custom_"
-//                      + list.join(",") + "/Calendar/");
-
-  updateCalendarsList();
-  refreshAppointments();
-  refreshTasks();
-  changeCalendarDisplay();
+//                     + list.join(",") + "/Calendar/");
+
+  if (event) {
+     var folderID = this.parentNode.getAttribute("id");
+     var urlstr = URLForFolderID(folderID);
+     if (this.checked)
+       urlstr += "/activateFolder";
+     else
+       urlstr += "/deactivateFolder";
+     triggerAjaxRequest(urlstr, calendarStatusCallback, folderID);
+  }
+  else {
+     updateCalendarsList();
+     refreshAppointments();
+     refreshTasks();
+     changeCalendarDisplay();
+  }
 
   return false;
 }
 
-function calendarUidsList()
-{
-  var list = "";
-
-  var nodes = $("uixselector-calendarsList-display").childNodesWithTag("li");
-  for (var i = 0; i < nodes.length; i++) {
-    var currentNode = nodes[i];
-    var input = currentNode.childNodesWithTag("input")[0];
-    if (!input.checked)
-      list += "-";
-    list += currentNode.getAttribute("uid") + ",";
-  }
-
-  return list.substr(0, list.length - 1);
-}
-
-// function updateCalendarContacts(contacts)
-// {
-//   var list = contacts.split(",");
-
-//   var clist = $("calendarsList");
-//   var nodes = clist.childNodes[5].childNodes;
-//   for (var i = 0; i < nodes.length; i++) {
-//     var currentNode = nodes[i];
-//     if (currentNode instanceof HTMLLIElement) {
-//       var input = currentNode.childNodes[3];
-//       if (!input.checked)
-//         list += "-";
-//       list += currentNode.getAttribute("uid") + ",";
-//     }
-//   }
-// }
-
-function inhibitMyCalendarEntry()
-{
-  var clist = $("calendarsList");
-  var nodes = clist.childNodes[5].childNodes;
-  var done = false;
-
-  var i = 0;
-  while (!done && i < nodes.length) {
-    var currentNode = nodes[i];
-    if (currentNode instanceof HTMLLIElement) {
-      var input = currentNode.childNodes[3];
-      if (currentNode.getAttribute("uid") == UserLogin) {
-        done = true;
-//         currentNode.style.color = "#999;";
-        currentNode.style.fontWeight = "bold;";
-//         currentNode.setAttribute("onclick", "");
+function calendarStatusCallback(http) {
+   if (http.readyState == 4) {
+      if (http.status == 204) {
+         refreshAppointments();
+         refreshTasks();
+         changeCalendarDisplay();
       }
-    }
-    i++;
-  }
-}
-
-function userCalendarEntry(user, color) {
-  var li = document.createElement("li");
-  li.setAttribute("uid", user);
-  li.addEventListener("mousedown", listRowMouseDownHandler, false);
-  li.addEventListener("click", onRowClick, false);
-  var colorBox = document.createElement("span");
-  colorBox.addClassName("colorBox");
-  if (color) {
-    log("color:  " + color);
-    colorBox.style.backgroundColor = color + ";";
-  }
-  li.appendChild(colorBox);
-  var checkBox = document.createElement("input");
-  checkBox.addClassName("checkBox");
-  checkBox.type = "checkbox";
-  checkBox.addEventListener("change", updateCalendarStatus, false);
-  li.appendChild(checkBox);
-  var text = document.createTextNode(" " + user);
-  li.appendChild(text);
-
-  return li;
-}
-
-function ensureSelfIfPresent() {
-  var ul = $("uixselector-calendarsList-display");
-  var list = ul.childNodesWithTag("li");
-  var selfEntry = userCalendarEntry(UserLogin, indexColor(0));
-  selfEntry.style.fontWeight = "bold;";
-  if (list.length < 1) {
-    ul.appendChild(selfEntry);
-  } else if (list[0].getAttribute("uid") != UserLogin) {
-    ul.insertBefore(selfEntry, list[0]);
-  }
+      else {
+         var folder = $(http.callbackData);
+         var input = folder.childNodesWithTag("input")[0];
+         input.checked = (!input.checked);
+      }
+   }
 }
 
-function updateCalendarsList(method)
-{
-  ensureSelfIfPresent();
-  var url = (ApplicationBaseURL + "updateCalendars?ids="
-             + calendarUidsList());
-  if (document.calendarsListAjaxRequest) {
-    document.calendarsListAjaxRequest.aborted = true;
-    document.calendarsListAjaxRequest.abort();
-  }
-  var http = createHTTPClient();
-  if (http) {
-    http.url = url;
-    http.open("GET", url, false);
-    http.send("");
-
-    if (method == "removal")
-      updateCalendarStatus();
+function calendarEntryCallback(http) {
+   var disabled = true;
 
-    http = createHTTPClient();
-    http.url = ApplicationBaseURL + "checkRights";
-    http.open("GET", http.url, false /* not async */);
-    http.send("");
-    if (http.status == 200
-        && http.responseText.length > 0) {
-      rights = http.responseText.split(",");
-      var list = $("uixselector-calendarsList-display").childNodesWithTag("li");
-      for (var i = 0; i < list.length; i++) {
-        var input = list[i].childNodesWithTag("input")[0];
-        if (rights[i] == "1") {
-          list[i].removeClassName("denied");
-          input.disabled = false;
-        }
-        else {
-          input.checked = false;
-          input.disabled = true;
-          list[i].addClassName("denied");
-        }
+   if (http.readyState == 4) {
+      if (http.status == 200)
+        disabled = (http.responseText == "0");
+      var entry = $(http.callbackData);
+      var input = entry.childNodesWithTag("input")[0];
+      input.disabled = disabled;
+      if (disabled) {
+        input.checked = false;
+        entry.addClassName("denied");
       }
-    }
+      else
+        entry.removeClassName("denied");
+   }
+}
+
+function updateCalendarsList(method) {
+  var list = $("calendarList").childNodesWithTag("li");
+  for (var i = 0; i < list.length; i++) {
+     var folderID = list[i].getAttribute("id");
+     var url = URLForFolderID(folderID) + "/canAccessContent";
+     triggerAjaxRequest(url, calendarEntryCallback, folderID);
   }
 }
 
-function addContact(tag, fullContactName, contactId, contactName, contactEmail)
-{
+function addContact(tag, fullContactName, contactId, contactName, contactEmail) {
   var uids = $("uixselector-calendarsList-uidList");
 //   log("addContact");
   if (contactId)
@@ -1055,32 +947,17 @@ function addContact(tag, fullContactName, contactId, contactName, contactEmail)
             uids.value += ',' + contactId;
           else
             uids.value = contactId;
-          var names = $("uixselector-calendarsList-display");
+          var names = $("calendarList");
           var listElems = names.childNodesWithTag("li");
           var colorDef = indexColor(listElems.length);
           names.appendChild(userCalendarEntry(contactId, colorDef));
 
-          var styles = document.getElementsByTagName("style");
-          styles[0].innerHTML += ('.ownerIs' + contactId + ' {'
-                                  + ' background-color: '
-                                  + colorDef
-                                  + ' !important; }');
         }
     }
 
   return false;
 }
 
-function onChangeCalendar(list) {
-   var form = document.forms.editform;
-   log ("before: " + form.getAttribute("action"));
-   var urlElems = form.getAttribute("action").split("/");
-   urlElems[urlElems.length-4]
-      = list.childNodesWithTag("option")[list.value].innerHTML;
-   form.setAttribute("action", urlElems.join("/"));
-   log ("after: " + form.getAttribute("action"));
-}
-
 function validateBrowseURL(input) {
   var button = $("browseURLBtn");
 
@@ -1107,7 +984,7 @@ function initializeMenus() {
                         "appointmentsListMenu", "calendarsMenu", "searchMenu");
   initMenusNamed(menus);
 
-  $("calendarsList").attachMenu("calendarsMenu");
+  $("calendarSelector").attachMenu("calendarsMenu");
 
   var accessRightsMenuEntry = $("accessRightsMenuEntry");
   accessRightsMenuEntry.addEventListener("mouseup",
@@ -1116,16 +993,12 @@ function initializeMenus() {
 }
 
 function onAccessRightsMenuEntryMouseUp(event) {
-  var folders = $("uixselector-calendarsList-display");
+  var folders = $("calendarList");
   var selected = folders.getSelectedNodes()[0];
-  var uid = selected.getAttribute("uid");
-  log("application base url: " + ApplicationBaseURL);
-  if (uid == UserLogin)
-    url = ApplicationBaseURL + "acls";
-  else
-    url = UserFolderURL + "../" + uid + "/Calendar/acls";
+  var folderID = selected.getAttribute("id");
+  var urlstr = URLForFolderID(folderID) + "/acls";
 
-  openAclWindow(url, uid);
+  openAclWindow(urlstr);
 }
 
 function configureDragHandles() {
@@ -1144,22 +1017,110 @@ function configureDragHandles() {
   }
 }
 
-function initCalendarContactsSelector() {
-  var selector = $("calendarsList");
-  inhibitMyCalendarEntry();
+function initCalendarSelector() {
+  var selector = $("calendarSelector");
   updateCalendarStatus();
   selector.changeNotification = updateCalendarsList;
 
-  var list = $("uixselector-calendarsList-display").childNodesWithTag("li");
+  var list = $("calendarList").childNodesWithTag("li");
   for (var i = 0; i < list.length; i++) {
     var input = list[i].childNodesWithTag("input")[0];
     input.addEventListener("change", updateCalendarStatus, false);
+    list[i].addEventListener("mousedown", listRowMouseDownHandler, false);
+    list[i].addEventListener("click", onRowClick, false);
+//     list[i].addEventListener("contextmenu", onContactFoldersContextMenu, false);
   }
+
+  var links = $("calendarSelectorButtons").childNodesWithTag("a");
+  links[0].addEventListener("click", onCalendarAdd, false);
+  links[1].addEventListener("click", onCalendarRemove, false);
+}
+
+function onCalendarAdd(event) {
+   openUserFolderSelector(onFolderSubscribeCB, "calendar");
+
+   event.preventDefault();
+}
+
+function appendCalendar(folderName, folder) {
+   var calendarList = $("calendarList");
+   var lis = calendarList.childNodesWithTag("li");
+   var color = indexColor(lis.length);
+   log ("color: " + color);
+   var li = document.createElement("li");
+   li.setAttribute("id", folder);
+   li.addEventListener("mousedown", listRowMouseDownHandler, false);
+   li.addEventListener("click", onRowClick, false);
+   var checkBox = document.createElement("input");
+   checkBox.addClassName("checkBox");
+   checkBox.type = "checkbox";
+   checkBox.addEventListener("change", updateCalendarStatus, false);
+   li.appendChild(checkBox);
+   li.appendChild(document.createTextNode(" "));
+   var colorBox = document.createElement("div");
+   colorBox.appendChild(document.createTextNode("OO"));
+   colorBox.addClassName("colorBox");
+   if (color) {
+      colorBox.style.color = color + ";";
+      colorBox.style.backgroundColor = color + ";";
+   }
+   li.appendChild(colorBox);
+   li.appendChild(document.createTextNode(" " + folderName));
+
+   calendarList.appendChild(li);
+
+   var contactId = folder.split(":")[0];
+   var styles = document.getElementsByTagName("style");
+
+   var url = URLForFolderID(folder) + "/canAccessContent";
+   triggerAjaxRequest(url, calendarEntryCallback, folder);
+
+   styles[0].innerHTML += ('.ownerIs' + contactId + ' {'
+                          + ' background-color: '
+                          + color
+                          + ' !important; }');
+}
+
+function onFolderSubscribeCB(folderData) {
+   var folder = $(folderData["folder"]);
+   if (!folder)
+      appendCalendar(folderData["folderName"], folderData["folder"]);
+}
+
+function onFolderUnsubscribeCB(folderId) {
+   var node = $(folderId);
+   node.parentNode.removeChild(node);
+}
+
+function onCalendarRemove(event) {
+  var nodes = $("calendarList").getSelectedNodes();
+  if (nodes.length > 0) { 
+     nodes[0].deselect();
+     var folderId = nodes[0].getAttribute("id");
+     var folderIdElements = folderId.split(":");
+     if (folderIdElements.length > 1) {
+       unsubscribeFromFolder(folderId, onFolderUnsubscribeCB, folderId);
+     }
+  }
+
+  event.preventDefault();
+}
+
+function configureSearchField() {
+   var searchValue = $("searchValue");
+
+   searchValue.addEventListener("mousedown", onSearchMouseDown, false);
+   searchValue.addEventListener("click", popupSearchMenu, false);
+   searchValue.addEventListener("blur", onSearchBlur, false);
+   searchValue.addEventListener("focus", onSearchFocus, false);
+   searchValue.addEventListener("keydown", onSearchKeyDown, false);
 }
 
 function initCalendars() {
-  if (!document.body.hasClassName("popup"))
-    initCalendarContactsSelector();
+   if (!document.body.hasClassName("popup")) {
+      initCalendarSelector();
+      configureSearchField();
+   }
 }
 
 window.addEventListener("load", initCalendars, false);