From 65a08b56cd1d784bb60cc306f02b90b2ca4d6202 Mon Sep 17 00:00:00 2001
From: Wolfgang Sourdeau <wsourdeau@inverse.ca>
Date: Mon, 12 Apr 2010 17:51:59 +0000
Subject: [PATCH] Monotone-Parent: 13d533568c7b2e2ef1d4aeffe0c294abce793f3d
 Monotone-Revision: 55bd0aadaff660782e65e1546472acf441f5dea3

Monotone-Author: wsourdeau@inverse.ca
Monotone-Date: 2010-04-12T17:51:59
Monotone-Branch: ca.inverse.sogo
---
 ChangeLog                                     |   7 +
 .../ContactsUI/UIxContactFoldersView.wox      | 136 ++---
 .../ContactsUI/UIxContactsListView.wox        |  79 +--
 UI/Templates/PreferencesUI/UIxPreferences.wox | 490 +++++++++---------
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |  15 +-
 UI/Templates/UIxPageFrame.wox                 |   1 +
 UI/WebServerResources/ContactsUI.css          |  26 +-
 UI/WebServerResources/ContactsUI.js           |   6 +-
 UI/WebServerResources/SOGoTabsController.js   | 160 ++++++
 UI/WebServerResources/SchedulerUI.css         |  18 +-
 UI/WebServerResources/SchedulerUI.js          |   9 +-
 UI/WebServerResources/UIxPreferences.css      |   2 +-
 UI/WebServerResources/UIxPreferences.js       |   4 +
 UI/WebServerResources/generic.css             |  56 +-
 UI/WebServerResources/generic.js              |  72 +--
 UI/WebServerResources/iefixes.css             |   6 +-
 16 files changed, 622 insertions(+), 465 deletions(-)
 create mode 100644 UI/WebServerResources/SOGoTabsController.js

diff --git a/ChangeLog b/ChangeLog
index 71887c484..460075699 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,10 @@
+2010-04-12  Wolfgang Sourdeau  <wsourdeau@inverse.ca>
+
+	* UI/WebServerResources/SOGoTabsController.js: new js module for
+	handling tabs, replacing non-object code from generic.js. Added
+	handling of tab overflows, with the appearance of two left/right
+	buttons to make them scroll.
+
 2010-04-09  Wolfgang Sourdeau  <wsourdeau@inverse.ca>
 
 	* UI/MailPartViewers/UIxMailPartICalActions.m
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index fda9d5acf..74eee38e7 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -10,21 +10,21 @@
   className="UIxPageFrame"
   title="name"
   var:popup="isPopup">
-    <style type="text/css">
+  <style type="text/css">
     <var:if condition="horizontalDragHandleStyle">
       DIV#dragHandle, DIV#rightPanel
-       { left: <var:string value="horizontalDragHandleStyle" />; }
+      { left: <var:string value="horizontalDragHandleStyle" />; }
       DIV#contactFoldersList
-       { width: <var:string value="horizontalDragHandleStyle" />; }
+      { width: <var:string value="horizontalDragHandleStyle" />; }
     </var:if><var:if condition="verticalDragHandleStyle">
       DIV#rightDragHandle, DIV#contactView
-       { top: <var:string value="verticalDragHandleStyle" />; }
+      { top: <var:string value="verticalDragHandleStyle" />; }
     </var:if><var:if condition="contactsListContentStyle">
       DIV#contactsListContent
-       { height: <var:string value="contactsListContentStyle" />; }
+      { height: <var:string value="contactsListContentStyle" />; }
     </var:if><var:if condition="isPopup">
     </var:if>
-    </style>
+  </style>
 
   <div id="uploadDialog" style="display: none" class="dialog left">
     <div>
@@ -52,43 +52,44 @@
           <span><var:string label:value="Done" /></span></a></p>
     </div>
   </div>
-    
-    <div class="menu" id="contactFoldersMenu">
-      <ul>
-	<li><var:string label:value="Properties" /></li>
-	<li><!-- separator --></li>
-	<li><var:string label:value="New Card" /></li>
-	<li><var:string label:value="New List" /></li>
-	<li><!-- separator --></li>
-	<li><var:string label:value="Import Cards" /></li>
-	<li><var:string label:value="Delete" /></li>
-	<li><!-- separator --></li>
-	<li><var:string label:value="Sharing..." /></li>
-      </ul>
-    </div>
+  
+  <div class="menu" id="contactFoldersMenu">
+    <ul>
+      <li><var:string label:value="Properties" /></li>
+      <li><!-- separator --></li>
+      <li><var:string label:value="New Card" /></li>
+      <li><var:string label:value="New List" /></li>
+      <li><!-- separator --></li>
+      <li><var:string label:value="Import Cards" /></li>
+      <li><var:string label:value="Delete" /></li>
+      <li><!-- separator --></li>
+      <li><var:string label:value="Sharing..." /></li>
+    </ul>
+  </div>
 
-    <div class="menu" id="contactMenu">
-      <ul>
-	<li><var:string label:value="Properties" /></li>
-	<li><!-- separator --></li>
-	<li><var:string label:value="Write" /></li>
-	<li><var:string label:value="Instant Message" /></li>
-	<li><!-- separator --></li>
-	<li><var:string label:value="Delete" /></li>
-	<li><!-- separator --></li>
-	<li><var:string label:value="Move To" /></li>
-	<li><var:string label:value="Copy To" /></li>
-	<li><var:string label:value="Export" /></li>
-      </ul>
-    </div>
+  <div class="menu" id="contactMenu">
+    <ul>
+      <li><var:string label:value="Properties" /></li>
+      <li><!-- separator --></li>
+      <li><var:string label:value="Write" /></li>
+      <li><var:string label:value="Instant Message" /></li>
+      <li><!-- separator --></li>
+      <li><var:string label:value="Delete" /></li>
+      <li><!-- separator --></li>
+      <li><var:string label:value="Move To" /></li>
+      <li><var:string label:value="Copy To" /></li>
+      <li><var:string label:value="Export" /></li>
+    </ul>
+  </div>
 
-    <div class="contactFoldersList" id="contactFoldersList">
-      <div class="tabsContainer" id="smallToolbarContainer">
-        <ul>
-          <li target="abToolbar">
-            <span><var:string label:value="Address Books" /></span>
-          </li>
-        </ul>
+  <div class="contactFoldersList" id="contactFoldersList">
+    <div class="tabsContainer" id="smallToolbarContainer">
+      <ul>
+        <li target="abToolbar">
+          <span><var:string label:value="Address Books" /></span>
+        </li>
+      </ul>
+      <div class="tabs">
         <div id="abToolbar" class="tab">
           <a href="#" class="smallToolbarButton">
             <span><img rsrc:src="add-addressbook.png" 
@@ -109,35 +110,36 @@
           </a>
         </div>
       </div>
-
-      <ul id="contactFolders">
-        <var:foreach list="contactFolders" item="currentFolder"
-          ><li var:id="currentContactFolderId"
-            var:owner="currentContactFolderOwner"
-            var:class="currentContactFolderClass"
-            ><var:string value="currentContactFolderName"/></li
-          ></var:foreach
-        >
-      </ul>
-
-      <var:if condition="hasContactSelectionButtons">
-        <div class="contactSelection">
-          <var:component value="selectorComponent" />
-        </div>
-      </var:if>
     </div>
 
-    <div class="dragHandle" id="dragHandle"><!-- space --></div>
+    <ul id="contactFolders">
+      <var:foreach list="contactFolders" item="currentFolder"
+        ><li var:id="currentContactFolderId"
+          var:owner="currentContactFolderOwner"
+          var:class="currentContactFolderClass"
+          ><var:string value="currentContactFolderName"/></li
+          ></var:foreach
+        >
+    </ul>
 
-    <div id="rightPanel">
-      <var:component className="UIxContactsFilterPanel" qualifier="qualifier" />
-
-	<div id="contactsListContent"><!-- space --></div>
-
-	<div class="dragHandle" id="rightDragHandle"><!-- space --></div>
-
-	<div id="contactView" onmousedown="return false;"><!-- space --></div>
+    <var:if condition="hasContactSelectionButtons">
+      <div class="contactSelection">
+        <var:component value="selectorComponent" />
       </div>
+    </var:if>
+  </div>
 
-    <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
+  <div class="dragHandle" id="dragHandle"><!-- space --></div>
+
+  <div id="rightPanel">
+    <var:component className="UIxContactsFilterPanel" qualifier="qualifier" />
+
+    <div id="contactsListContent"><!-- space --></div>
+
+    <div class="dragHandle" id="rightDragHandle"><!-- space --></div>
+
+    <div id="contactView" onmousedown="return false;"><!-- space --></div>
+  </div>
+
+  <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
 </var:component>
diff --git a/UI/Templates/ContactsUI/UIxContactsListView.wox b/UI/Templates/ContactsUI/UIxContactsListView.wox
index fd458b5d6..958142e88 100644
--- a/UI/Templates/ContactsUI/UIxContactsListView.wox
+++ b/UI/Templates/ContactsUI/UIxContactsListView.wox
@@ -1,40 +1,41 @@
 <?xml version='1.0' standalone='yes'?>
-  <container
-    xmlns="http://www.w3.org/1999/xhtml"
-    xmlns:var="http://www.skyrix.com/od/binding"
-    xmlns:const="http://www.skyrix.com/od/constant"
-    xmlns:uix="OGo:uix"
-    xmlns:label="OGo:label"
-    xmlns:rsrc="OGo:url">
-    <table id="contactsList" cellspacing="0">
-      <thead>
-        <tr class="tableview">
-          <!-- localize -->
-          <td class="tbtv_headercell sortableTableHeader" id="nameHeader"
-	    ><var:string label:value="Name"
-	      /></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="mailHeader"
-	    ><var:string label:value="Email"/></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="screenNameHeader"
-	    ><var:string label:value="Screen Name" /></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="orgHeader"
-	    ><var:string label:value="Organization" /></td
-	    ><td class="tbtv_headercell sortableTableHeader" id="phoneHeader"
-	    ><var:string label:value="Preferred Phone" /></td
-	    ></tr>
-      </thead>
-      <tbody id="contactsListTbody">
-        <var:foreach list="contactInfos" item="currentContact">
-          <tr class="tableview"
-            var:id="currentContact.c_name"
-            var:contactname="currentContact.c_cn">
-            <td class="displayName"><var:string value="currentContact.c_cn" const:escapeHTML="YES" /></td>
-            <td><var:string value="currentContact.c_mail"/></td>
-            <td><var:string value="currentContact.c_screenname"/></td>
-            <td><var:string value="currentContact.c_o"/></td>
-            <td><var:string value="currentContact.c_telephonenumber"/></td>
-          </tr>
-        </var:foreach>
-      </tbody>
-    </table>
-  </container>
+<!DOCTYPE container>
+<container
+  xmlns="http://www.w3.org/1999/xhtml"
+  xmlns:var="http://www.skyrix.com/od/binding"
+  xmlns:const="http://www.skyrix.com/od/constant"
+  xmlns:uix="OGo:uix"
+  xmlns:label="OGo:label"
+  xmlns:rsrc="OGo:url">
+  <table id="contactsList" cellspacing="0">
+    <thead>
+      <tr class="tableview">
+        <!-- localize -->
+        <td class="tbtv_headercell sortableTableHeader" id="nameHeader"
+          ><var:string label:value="Name"
+            /></td
+          ><td class="tbtv_headercell sortableTableHeader" id="mailHeader"
+          ><var:string label:value="Email"/></td
+          ><td class="tbtv_headercell sortableTableHeader" id="screenNameHeader"
+          ><var:string label:value="Screen Name" /></td
+          ><td class="tbtv_headercell sortableTableHeader" id="orgHeader"
+          ><var:string label:value="Organization" /></td
+          ><td class="tbtv_headercell sortableTableHeader" id="phoneHeader"
+          ><var:string label:value="Preferred Phone" /></td
+          ></tr>
+    </thead>
+    <tbody id="contactsListTbody">
+      <var:foreach list="contactInfos" item="currentContact">
+        <tr class="tableview"
+          var:id="currentContact.c_name"
+          var:contactname="currentContact.c_cn">
+          <td class="displayName"><var:string value="currentContact.c_cn" const:escapeHTML="YES" /></td>
+          <td><var:string value="currentContact.c_mail"/></td>
+          <td><var:string value="currentContact.c_screenname"/></td>
+          <td><var:string value="currentContact.c_o"/></td>
+          <td><var:string value="currentContact.c_telephonenumber"/></td>
+        </tr>
+      </var:foreach>
+    </tbody>
+  </table>
+</container>
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index fb599acfd..eea9c68da 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -21,7 +21,7 @@
           <li target="calendarOptionsView"><span><var:string
                 label:value="Calendar Options"/></span></li>
 	</var:if
-	><var:if condition="userHasMailAccess">
+          ><var:if condition="userHasMailAccess">
           <li target="mailOptionsView"><span><var:string
                 label:value="Mail Options"/></span></li>
           <li target="identitiesView"><span><var:string
@@ -39,266 +39,268 @@
           <li target="passwordView"><span><var:string label:value="Password"/></span></li>
         </var:if>
       </ul>
-      <div id="generalView" class="tab">
-	<label><var:string label:value="Language :"/>
-          <var:popup list="languages" item="item"
-            const:id="language"
-            string="languageText" 
-            selection="language"
-            label:noSelectionString="choose" /></label><br/>
-	<label><var:string label:value="Current Time Zone :"/>
-          <var:popup list="timeZonesList" item="item"
-            const:id="timezone"
-            string="item" selection="userTimeZone" /></label><br/>
-	<br/>
-	<div id="dateTimeFormat">
-	  <label><var:string label:value="Short Date Format :"/>
-	    <var:popup list="shortDateFormatsList" item="item"
-	      const:id="shortDateFormat"
-	      string="itemShortDateFormatText" selection="userShortDateFormat"
-	      /></label><br/>
-	  <label><var:string label:value="Long Date Format :"/>
-	    <var:popup list="longDateFormatsList" item="item"
-	      const:id="longDateFormat"
-	      string="itemLongDateFormatText" selection="userLongDateFormat"
-	      /></label><br/>
-	  <label><var:string label:value="Time Format :"/>
-	    <var:popup list="timeFormatsList" item="item"
-	      const:id="timeFormat"
-	      string="itemTimeFormatText" selection="userTimeFormat"
-              /></label><br/>
-          <label><var:string label:value="Default module :"/>
-            <var:popup list="availableModules" item="item"
-              const:id="defaultModule"
-              string="itemModuleText" selection="userDefaultModule"
-              /></label>
-	</div>
-      </div>
-      <var:if condition="userHasCalendarAccess">
-	<div id="calendarOptionsView" class="tab">
-	  <label><var:string label:value="Week begins on :"/>
-	    <var:popup list="daysList" item="item"
-	      const:id="weekStartDay"
-	      string="itemWeekStartDay" selection="userWeekStartDay"
-	      /></label><br/>
-	  <label><var:string label:value="Day start time :"/>
-	    <var:popup list="hoursList" item="item"
-	      const:id="dayStartTime"
-	      string="item" selection="userDayStartTime"
-	      /></label>
-	  <label><var:string label:value="Day end time :"/>
-	    <var:popup list="hoursList" item="item"
-	      const:id="dayEndTime"
-	      string="item" selection="userDayEndTime"
-	      /></label><br/>
-	  <label><var:string label:value="First week of year :"/>
-	    <var:popup list="firstWeekList" item="item"
-	      const:id="firstWeek"
-	      string="itemFirstWeekText" selection="userFirstWeek"
-	      /></label><br/>
-          <label><var:string label:value="Categories"/></label>
-          <div id="categoriesListWrapper"
-            ><table id="categoriesList" cellspacing="0">
-              <thead>
-                <tr class="tableview"
-                  ><th const:class="tbtv_headercell" const:id="nameTableHeader"
-                    ><var:string label:value="Name"/></th
-                    ><th const:class="tbtv_headercell" const:id="colorTableHeader"
-                      ><var:string label:value="Color"/></th
-                      ></tr
-                  ></thead>
-              <tbody>
-                <var:foreach list="categoryList" item="category">
-                  <tr const:class="categoryListRow"
-                    ><td const:class="categoryListCell"
-                      ><var:string var:value="category"/></td
-                      ><td const:class="categoryListCell"
-                      ><div const:class="colorBox"><var:string var:value="categoryColor"
-                          /></div></td
-                      ></tr>
-                </var:foreach>
-              </tbody>
-            </table></div>
-          <div class="bottomToolbar">
-            <a const:id="categoryAdd" class="bottomButton" href="#">
-              <span><img rsrc:src="add-icon.png" label:title="Add" />
-              </span></a>
-            <a const:id="categoryDelete" class="bottomButton" href="#">
-              <span><img rsrc:src="remove-icon.png" label:title="Delete" />
-              </span></a>
+      <div class="tabs">
+        <div id="generalView" class="tab">
+          <label><var:string label:value="Language :"/>
+            <var:popup list="languages" item="item"
+              const:id="language"
+              string="languageText" 
+              selection="language"
+              label:noSelectionString="choose" /></label><br/>
+          <label><var:string label:value="Current Time Zone :"/>
+            <var:popup list="timeZonesList" item="item"
+              const:id="timezone"
+              string="item" selection="userTimeZone" /></label><br/>
+          <br/>
+          <div id="dateTimeFormat">
+            <label><var:string label:value="Short Date Format :"/>
+              <var:popup list="shortDateFormatsList" item="item"
+                const:id="shortDateFormat"
+                string="itemShortDateFormatText" selection="userShortDateFormat"
+                /></label><br/>
+            <label><var:string label:value="Long Date Format :"/>
+              <var:popup list="longDateFormatsList" item="item"
+                const:id="longDateFormat"
+                string="itemLongDateFormatText" selection="userLongDateFormat"
+                /></label><br/>
+            <label><var:string label:value="Time Format :"/>
+              <var:popup list="timeFormatsList" item="item"
+                const:id="timeFormat"
+                string="itemTimeFormatText" selection="userTimeFormat"
+                /></label><br/>
+            <label><var:string label:value="Default module :"/>
+              <var:popup list="availableModules" item="item"
+                const:id="defaultModule"
+                string="itemModuleText" selection="userDefaultModule"
+                /></label>
           </div>
-          <input type="hidden" const:id="categoriesValue" 
-            const:name="categoriesValue" var:value="categoriesValue"/>
-          <!-- 	  <br/> -->
-          <!-- 	  <label><input class="checkBox" -->
-          <!-- 	      type="checkbox" var:selection="reminderEnabled" -->
-          <!-- 	      var:checked="reminderEnabled"/><var:string -->
-          <!-- 	      label:value="Enable reminders for Calendar items"/></label><br/> -->
-          <!-- 	  <label><input class="checkBox" -->
-          <!-- 	      type="checkbox" var:selection="remindWithASound" -->
-          <!-- 	      var:checked="remindWithASound"/><var:string -->
-          <!-- 	      label:value="Play a sound when a reminder comes due"/></label><br/> -->
-          <!-- 	  <label><var:string label:value="Default reminder :"/> -->
-          <!-- 	    <var:popup list="reminderTimesList" item="item" -->
-          <!-- 	      string="itemReminderTimeText" selection="userReminderTime"/></label> -->
-	</div>
-      </var:if
-        ><var:if condition="userHasMailAccess">
-	<div id="mailOptionsView" class="tab">
-	  <label><input type="checkbox" 
-              const:name="subscribedFoldersOnly"
-              const:id="subscribedFoldersOnly"
-              var:checked="showSubscribedFoldersOnly" />
-	    <var:string label:value="Show subscribed mailboxes only"/></label><br/>
-	  <label><var:string label:value="Check for new mail:"/>
-	    <var:popup list="messageCheckList" item="item"
-	      const:id="messageCheck"
-	      string="itemMessageCheckText" selection="userMessageCheck"/></label><br/>
-	  <label><var:string label:value="Forward messages:"/>
-	    <var:popup list="messageForwardingList" item="item"
-	      const:id="messageForwarding"
-	      string="itemMessageForwardingText"
-	      selection="userMessageForwarding"/></label><br/>
-	  <var:popup list="replyPlacementList" item="item"
-            const:id="replyPlacementList"
-            string="itemReplyPlacementText"
-            selection="userReplyPlacement"/>
-          <br /><label><var:string label:value="And place my signature"/></label>
-	  <var:popup list="signaturePlacementList" item="item"
-            const:id="signaturePlacementList"
-            string="itemSignaturePlacementText"
-            selection="userSignaturePlacement"/>
-          <br /><label><var:string label:value="Compose messages in"/></label>
-	  <var:popup list="composeMessagesType" item="item"
-            const:id="composeMessagesType"
-            string="itemComposeMessagesText"
-            selection="userComposeMessagesType"/>
-          <var:if condition="isSieveScriptsEnabled"
-            ><br/><label><var:string label:value="Filters"/></label>
-            <script type="text/javascript">
-              var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
-            </script>
-            <div id="filtersListWrapper"
-              ><table id="filtersList" cellspacing="0">
+        </div>
+        <var:if condition="userHasCalendarAccess">
+          <div id="calendarOptionsView" class="tab">
+            <label><var:string label:value="Week begins on :"/>
+              <var:popup list="daysList" item="item"
+                const:id="weekStartDay"
+                string="itemWeekStartDay" selection="userWeekStartDay"
+                /></label><br/>
+            <label><var:string label:value="Day start time :"/>
+              <var:popup list="hoursList" item="item"
+                const:id="dayStartTime"
+                string="item" selection="userDayStartTime"
+                /></label>
+            <label><var:string label:value="Day end time :"/>
+              <var:popup list="hoursList" item="item"
+                const:id="dayEndTime"
+                string="item" selection="userDayEndTime"
+                /></label><br/>
+            <label><var:string label:value="First week of year :"/>
+              <var:popup list="firstWeekList" item="item"
+                const:id="firstWeek"
+                string="itemFirstWeekText" selection="userFirstWeek"
+                /></label><br/>
+            <label><var:string label:value="Categories"/></label>
+            <div id="categoriesListWrapper"
+              ><table id="categoriesList" cellspacing="0">
                 <thead>
                   <tr class="tableview"
                     ><th const:class="tbtv_headercell" const:id="nameTableHeader"
-                      ><var:string label:value="Name" /></th
-                      ><th const:class="tbtv_headercell" const:id="activeTableHeader"
-                      ><var:string label:value="Active" /></th
+                      ><var:string label:value="Name"/></th
+                      ><th const:class="tbtv_headercell" const:id="colorTableHeader"
+                      ><var:string label:value="Color"/></th
                       ></tr
                     ></thead>
-                <tbody><!--space --></tbody>
-              </table>
-              <input type="hidden" const:name="sieveFilters" const:id="sieveFilters"
-                var:value="sieveFiltersValue"/></div>
+                <tbody>
+                  <var:foreach list="categoryList" item="category">
+                    <tr const:class="categoryListRow"
+                      ><td const:class="categoryListCell"
+                        ><var:string var:value="category"/></td
+                        ><td const:class="categoryListCell"
+                        ><div const:class="colorBox"><var:string var:value="categoryColor"
+                            /></div></td
+                        ></tr>
+                  </var:foreach>
+                </tbody>
+              </table></div>
             <div class="bottomToolbar">
-              <a const:id="filterAdd" class="bottomButton" href="#">
+              <a const:id="categoryAdd" class="bottomButton" href="#">
                 <span><img rsrc:src="add-icon.png" label:title="Add" />
                 </span></a>
-              <a const:id="filterDelete" class="bottomButton" href="#">
+              <a const:id="categoryDelete" class="bottomButton" href="#">
                 <span><img rsrc:src="remove-icon.png" label:title="Delete" />
                 </span></a>
-              <a const:id="filterMoveUp" class="bottomButton" href="#">
-                <span><img rsrc:src="up-icon.png" label:title="Move Up" />
-                </span></a>
-              <a const:id="filterMoveDown" class="bottomButton" href="#">
-                <span><img rsrc:src="down-icon.png" label:title="Move Down" />
-                </span></a>
             </div>
-          </var:if>
-	</div>
-	<div id="identitiesView" class="tab"
-	  ><textarea const:id="signature" const:name="signature"
-	    var:value="signature"
-            /></div>
-	<var:if condition="isVacationEnabled">
-          <div id="vacationView" class="tab">
-	    <label><input type="checkbox" 
-                const:name="enableVacation"
-                const:id="enableVacation"
-                var:checked="enableVacation" />
-              <var:string label:value="Enable vacation auto reply"/></label>
-            <div id="vacation">
-              <label><var:string label:value="Auto reply message :"/><br/>
-                <textarea const:name="autoReplyText"
-                  const:id="autoReplyText"
-                  var:value="autoReplyText"/>
-              </label><br/>
+            <input type="hidden" const:id="categoriesValue" 
+              const:name="categoriesValue" var:value="categoriesValue"/>
+            <!-- 	  <br/> -->
+            <!-- 	  <label><input class="checkBox" -->
+            <!-- 	      type="checkbox" var:selection="reminderEnabled" -->
+            <!-- 	      var:checked="reminderEnabled"/><var:string -->
+            <!-- 	      label:value="Enable reminders for Calendar items"/></label><br/> -->
+            <!-- 	  <label><input class="checkBox" -->
+            <!-- 	      type="checkbox" var:selection="remindWithASound" -->
+            <!-- 	      var:checked="remindWithASound"/><var:string -->
+            <!-- 	      label:value="Play a sound when a reminder comes due"/></label><br/> -->
+            <!-- 	  <label><var:string label:value="Default reminder :"/> -->
+            <!-- 	    <var:popup list="reminderTimesList" item="item" -->
+            <!-- 	      string="itemReminderTimeText" selection="userReminderTime"/></label> -->
+          </div>
+        </var:if
+          ><var:if condition="userHasMailAccess">
+          <div id="mailOptionsView" class="tab">
+            <label><input type="checkbox" 
+                const:name="subscribedFoldersOnly"
+                const:id="subscribedFoldersOnly"
+                var:checked="showSubscribedFoldersOnly" />
+              <var:string label:value="Show subscribed mailboxes only"/></label><br/>
+            <label><var:string label:value="Check for new mail:"/>
+              <var:popup list="messageCheckList" item="item"
+                const:id="messageCheck"
+                string="itemMessageCheckText" selection="userMessageCheck"/></label><br/>
+            <label><var:string label:value="Forward messages:"/>
+              <var:popup list="messageForwardingList" item="item"
+                const:id="messageForwarding"
+                string="itemMessageForwardingText"
+                selection="userMessageForwarding"/></label><br/>
+            <var:popup list="replyPlacementList" item="item"
+              const:id="replyPlacementList"
+              string="itemReplyPlacementText"
+              selection="userReplyPlacement"/>
+            <br /><label><var:string label:value="And place my signature"/></label>
+            <var:popup list="signaturePlacementList" item="item"
+              const:id="signaturePlacementList"
+              string="itemSignaturePlacementText"
+              selection="userSignaturePlacement"/>
+            <br /><label><var:string label:value="Compose messages in"/></label>
+            <var:popup list="composeMessagesType" item="item"
+              const:id="composeMessagesType"
+              string="itemComposeMessagesText"
+              selection="userComposeMessagesType"/>
+            <var:if condition="isSieveScriptsEnabled"
+              ><br/><label><var:string label:value="Filters"/></label>
+              <script type="text/javascript">
+                var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
+              </script>
+              <div id="filtersListWrapper"
+                ><table id="filtersList" cellspacing="0">
+                  <thead>
+                    <tr class="tableview"
+                      ><th const:class="tbtv_headercell" const:id="nameTableHeader"
+                        ><var:string label:value="Name" /></th
+                        ><th const:class="tbtv_headercell" const:id="activeTableHeader"
+                        ><var:string label:value="Active" /></th
+                        ></tr
+                      ></thead>
+                  <tbody><!--space --></tbody>
+                </table>
+                <input type="hidden" const:name="sieveFilters" const:id="sieveFilters"
+                  var:value="sieveFiltersValue"/></div>
+              <div class="bottomToolbar">
+                <a const:id="filterAdd" class="bottomButton" href="#">
+                  <span><img rsrc:src="add-icon.png" label:title="Add" />
+                  </span></a>
+                <a const:id="filterDelete" class="bottomButton" href="#">
+                  <span><img rsrc:src="remove-icon.png" label:title="Delete" />
+                  </span></a>
+                <a const:id="filterMoveUp" class="bottomButton" href="#">
+                  <span><img rsrc:src="up-icon.png" label:title="Move Up" />
+                  </span></a>
+                <a const:id="filterMoveDown" class="bottomButton" href="#">
+                  <span><img rsrc:src="down-icon.png" label:title="Move Down" />
+                  </span></a>
+              </div>
+            </var:if>
+          </div>
+          <div id="identitiesView" class="tab"
+            ><textarea const:id="signature" const:name="signature"
+              var:value="signature"
+              /></div>
+          <var:if condition="isVacationEnabled">
+            <div id="vacationView" class="tab">
+              <label><input type="checkbox" 
+                  const:name="enableVacation"
+                  const:id="enableVacation"
+                  var:checked="enableVacation" />
+                <var:string label:value="Enable vacation auto reply"/></label>
+              <div id="vacation">
+                <label><var:string label:value="Auto reply message :"/><br/>
+                  <textarea const:name="autoReplyText"
+                    const:id="autoReplyText"
+                    var:value="autoReplyText"/>
+                </label><br/>
+                
+                <label><var:string label:value="Email addresses (separated by commas) :"/><br/>
+                  <input type="hidden"
+                    const:id="defaultEmailAddresses"
+                    var:value="defaultEmailAddresses" />
+                  <textarea const:name="autoReplyEmailAddresses"
+                    const:id="autoReplyEmailAddresses"
+                    var:value="autoReplyEmailAddresses" /><br/>
+                  <span><a href="#" class="button" id="addDefaultEmailAddresses"><span>
+                        <var:string label:value="Add default email addresses" /></span></a>
+                  </span>
+                </label><br/>
+
+                <label><var:string label:value="Days between responses :"/> 
+                  <var:popup list="daysBetweenResponsesList" item="item"
+                    const:id="daysBetweenResponsesList"
+                    string="item" 
+                    selection="daysBetweenResponses" /></label><br/>
+
+                <label><input type="checkbox" 
+                    const:name="ignoreLists"
+                    const:id="ignoreLists"
+                    var:checked="ignoreLists" />
+                  <var:string label:value="Do not send responses to mailing lists" /></label><br/>
+
+              </div>
+            </div>
+          </var:if
+            ><var:if condition="isForwardEnabled">
+            <div id="forwardView" class="tab">
+              <label><input type="checkbox" 
+                  const:name="enableForward"
+                  const:id="enableForward"
+                  var:checked="enableForward" />
+                <var:string label:value="Forward incoming messages"/></label><br/>
               
-              <label><var:string label:value="Email addresses (separated by commas) :"/><br/>
-                <input type="hidden"
-                  const:id="defaultEmailAddresses"
-                  var:value="defaultEmailAddresses" />
-                <textarea const:name="autoReplyEmailAddresses"
-                  const:id="autoReplyEmailAddresses"
-                  var:value="autoReplyEmailAddresses" /><br/>
-                <span><a href="#" class="button" id="addDefaultEmailAddresses"><span>
-                      <var:string label:value="Add default email addresses" /></span></a>
-                </span>
-              </label><br/>
+              <div id="forward">
+                <label><var:string label:value="Forward to address :"/> 
+                  <input type="text" 
+                    const:id="forwardAddress" 
+                    const:name="forwardAddress"
+                    var:value="forwardAddress"
+                    size="30" /></label><br/>
 
-              <label><var:string label:value="Days between responses :"/> 
-                <var:popup list="daysBetweenResponsesList" item="item"
-                  const:id="daysBetweenResponsesList"
-                  string="item" 
-                  selection="daysBetweenResponses" /></label><br/>
-
-              <label><input type="checkbox" 
-                  const:name="ignoreLists"
-                  const:id="ignoreLists"
-                  var:checked="ignoreLists" />
-                <var:string label:value="Do not send responses to mailing lists" /></label><br/>
+                <label><input type="checkbox" 
+                    const:name="forwardKeepCopy"
+                    const:id="forwardKeepCopy"
+                    var:checked="forwardKeepCopy" />
+                  <var:string label:value="Keep a copy" /></label><br/>
 
+              </div>
             </div>
+          </var:if
+            ></var:if
+          ><var:if condition="shouldDisplayPasswordChange">
+          <div id="passwordView" class="tab">
+            <p id="passwordFields"><label><var:string label:value="New password:"
+                  /><input const:id="newPasswordField" class="textField"
+                  type="password" const:value=""/></label><br/>
+              <label><var:string label:value="Confirmation:"
+                  /><input const:id="newPasswordConfirmationField" class="textField"
+                  type="password" const:value=""/></label><br/>
+              <a href="#" class="button" id="changePasswordBtn"
+                ><span><var:string label:value="Change"/></span></a>
+            </p>
+            <p id="passwordError"><!-- space --></p>
           </div>
-	</var:if
-	><var:if condition="isForwardEnabled">
-          <div id="forwardView" class="tab">
-	    <label><input type="checkbox" 
-                const:name="enableForward"
-                const:id="enableForward"
-                var:checked="enableForward" />
-              <var:string label:value="Forward incoming messages"/></label><br/>
-	    
-            <div id="forward">
-              <label><var:string label:value="Forward to address :"/> 
-                <input type="text" 
-                  const:id="forwardAddress" 
-                  const:name="forwardAddress"
-                  var:value="forwardAddress"
-                  size="30" /></label><br/>
-
-              <label><input type="checkbox" 
-                  const:name="forwardKeepCopy"
-                  const:id="forwardKeepCopy"
-                  var:checked="forwardKeepCopy" />
-                <var:string label:value="Keep a copy" /></label><br/>
-
-            </div>
-          </div>
-	</var:if
-          ></var:if
-        ><var:if condition="shouldDisplayPasswordChange">
-      	<div id="passwordView" class="tab">
-          <p id="passwordFields"><label><var:string label:value="New password:"
-                /><input const:id="newPasswordField" class="textField"
-                type="password" const:value=""/></label><br/>
-            <label><var:string label:value="Confirmation:"
-                /><input const:id="newPasswordConfirmationField" class="textField"
-                type="password" const:value=""/></label><br/>
-            <a href="#" class="button" id="changePasswordBtn"
-              ><span><var:string label:value="Change"/></span></a>
-          </p>
-          <p id="passwordError"><!-- space --></p>
-      	</div>
-      </var:if
-      ><var:if condition="shouldDisplayAdditionalPreferences"
-	><div id="additionalView" class="tab">
-	  <var:component className="UIxAdditionalPreferences"/>
-	</div></var:if>
-      <input type="hidden" id="hasChanged" name="hasChanged"
-        var:value="hasChanged"/>
+        </var:if
+          ><var:if condition="shouldDisplayAdditionalPreferences"
+          ><div id="additionalView" class="tab">
+            <var:component className="UIxAdditionalPreferences"/>
+          </div></var:if>
+        <input type="hidden" id="hasChanged" name="hasChanged"
+          var:value="hasChanged"/>
+      </div>
     </div>
   </form>
 </var:component>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 23b2cac71..cbf55e95b 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -135,14 +135,15 @@
         <li target="calendarSelectorView"
           ><span><var:string label:value="Calendars" /></span></li>
       </ul>
-
-      <div id="dateSelectorView" class="tab"
-        ><var:component className="UIxCalDateSelector"
-          selectedDate="thisMonth"
+      <div class="tabs">
+        <div id="dateSelectorView" class="tab"
+          ><var:component className="UIxCalDateSelector"
+            selectedDate="thisMonth"
           /></div>
-      <div id="calendarSelectorView" class="tab"
-        ><var:component className="UIxCalendarSelector"
-          var:calendarFolders="calendarFolders" /></div>
+        <div id="calendarSelectorView" class="tab"
+          ><var:component className="UIxCalendarSelector"
+            var:calendarFolders="calendarFolders" /></div>
+      </div>
     </div>
 
     <div id="tasksListView">
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index 48f76ddfb..df00f15f2 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -143,6 +143,7 @@
 	  <script type="text/javascript" rsrc:src="HTMLTableElement.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="generic.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="SOGoDragHandles.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="SOGoTabsController.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="scriptaculous.js"><!-- space --></script>
 	  <var:if condition="hasProductSpecificJavaScript"><script type="text/javascript"
 	      var:src="productJavaScriptURL"><!-- space --></script></var:if>
diff --git a/UI/WebServerResources/ContactsUI.css b/UI/WebServerResources/ContactsUI.css
index d9dbb1c39..fc2c10188 100644
--- a/UI/WebServerResources/ContactsUI.css
+++ b/UI/WebServerResources/ContactsUI.css
@@ -104,7 +104,7 @@ TABLE.titletable TD.titlecell SELECT
 
 DIV#contactFoldersList
 { position: absolute;
-  top: 65px;
+  top: 69px;
   left: 0px;
   width: 15em;
   bottom: 0px;
@@ -112,12 +112,16 @@ DIV#contactFoldersList
   padding: 0px;
   overflow: hidden; }
 
-DIV#contactFoldersList DIV.toolbar
-{ padding: 4px 0;
-  margin: 1px 0 0 0;
-  border-top: 1px solid #888;
-  border-left: 1px solid #aaa;
-  border-right: 1px solid #aaa; }
+DIV#smallToolbarContainer
+{ height: 50px;
+  margin: 0px 2px; }
+
+DIV#smallToolbarContainer > .tabs
+{ margin: 0px 2px;
+  height: 40px; }
+
+DIV#abToolbar
+{ height: 38px; }
 
 SPAN.toolbarButton
 { float: none;
@@ -135,7 +139,7 @@ UL#contactFolders
   color: #000;
   background: #CCDDEC;
   position: absolute; /* required for Safari & IE */
-  top: 76px; /* leave space for the mini addressbook */
+  top: 68px; /* leave space for the mini addressbook */
   bottom: 0px;
   left: 0;
   right: 0;
@@ -370,15 +374,9 @@ DIV.copy
   background-position: 1px -2px !important;
 }
 
-DIV#smallToolbarContainer
-{ top: 2em !important;
-  height: 44px;
-  right: 0px; }
-
 @media print
 {
   div#linkBanner, 
-  div#toolbar,
   div#contactFoldersList,
   div#dragHandle,
   div#rightDragHandle,
diff --git a/UI/WebServerResources/ContactsUI.js b/UI/WebServerResources/ContactsUI.js
index 19b75f41c..db719bde1 100644
--- a/UI/WebServerResources/ContactsUI.js
+++ b/UI/WebServerResources/ContactsUI.js
@@ -1165,6 +1165,11 @@ function initContacts(event) {
     if ($(document.body).hasClassName("popup")) {
         configureSelectionButtons();
     } else {
+        configureAbToolbar();
+        var tabsContainer = $("smallToolbarContainer");
+        var controller = new SOGoTabsController();
+        controller.attachToTabsContainer(tabsContainer);
+
         // Addressbook import form
         $("uploadCancel").observe("click", hideContactsImport);
         $("uploadOK").observe("click", hideImportResults);
@@ -1175,7 +1180,6 @@ function initContacts(event) {
     else
         Event.observe(document, "keydown", onDocumentKeydown);        
     
-    configureAbToolbar();
     configureAddressBooks();
     updateAddressBooksMenus();
 
diff --git a/UI/WebServerResources/SOGoTabsController.js b/UI/WebServerResources/SOGoTabsController.js
new file mode 100644
index 000000000..033af9f70
--- /dev/null
+++ b/UI/WebServerResources/SOGoTabsController.js
@@ -0,0 +1,160 @@
+/* -*- Mode: java; tab-width: 2; c-label-minimum-indentation: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+
+function SOGoTabsController() {
+}
+
+SOGoTabsController.prototype = {
+    container: null,
+    firstTab: null,
+    activeTab: null,
+
+    list: null,
+    offset: 0,
+
+    createScrollButtons: function STC_createScrollButtons() {
+        var scrollToolbar = createElement("div", null, "scrollToolbar");
+        scrollToolbar.hide();
+        var lnk = createElement("a", null,
+                                [ "leftScrollButton",
+                                  "scrollButton", "smallToolbarButton"],
+                                { href: "#" },
+                                null, scrollToolbar);
+        var span = createElement("span");
+        lnk.appendChild(span);
+        span.appendChild(document.createTextNode("<"));
+        this.onScrollLeftBound = this.onScrollLeft.bindAsEventListener(this);
+        lnk.observe("click", this.onScrollLeftBound, false);
+
+        var lnk = createElement("a", null,
+                                [ "rightScrollButton",
+                                  "scrollButton", "smallToolbarButton"],
+                                { href: "#" },
+                                null, scrollToolbar);
+        var span = createElement("span");
+        lnk.appendChild(span);
+        span.appendChild(document.createTextNode(">"));
+        this.onScrollRightBound = this.onScrollRight.bindAsEventListener(this);
+        lnk.observe("click", this.onScrollRightBound, false);
+
+        this.container.appendChild(scrollToolbar);
+        this.scrollToolbar = scrollToolbar;
+    },
+
+    onScrollLeft: function(event) {
+        if (this.offset < 0) {
+            var offset = this.offset + 20;
+            if (offset > 0) {
+                offset = 0;
+            }
+            this.list.setStyle("margin-left: " + offset + "px;");
+            // log("offset: " + offset);
+            this.offset = offset;
+        }
+        event.stop();
+    },
+    onScrollRight: function(event) {
+        if (this.offset > this.minOffset) {
+            var offset = this.offset - 20;
+            if (offset < this.minOffset) {
+                offset = this.minOffset;
+            }
+            this.list.setStyle("margin-left: " + offset + "px;");
+            // log("offset: " + offset);
+            this.offset = offset;
+        }
+        event.stop();
+    },
+
+    attachToTabsContainer: function STC_attachToTabsContainer(container) {
+        this.container = container;
+        this.onTabMouseDownBound
+        = this.onTabMouseDown.bindAsEventListener(this);
+        this.onTabClickBound
+        = this.onTabClick.bindAsEventListener(this);
+
+        var list = container.childNodesWithTag("ul");
+        if (list.length > 0) {
+            this.list = $(list[0]);
+            var nodes = this.list.childNodesWithTag("li");
+            if (nodes.length > 0) {
+                this.firstTab = $(nodes[0]);
+                for (var i = 0; i < nodes.length; i++) {
+                    var currentNode = $(nodes[i]);
+                    currentNode.observe("mousedown",
+                                        this.onTabMouseDownBound, false);
+                    currentNode.observe("click", this.onTabClickBound, false);
+                    //$(currentNode.getAttribute("target")).hide();
+                }
+
+                this.firstTab.addClassName("first");
+                this.firstTab.addClassName("active");
+                this.activeTab = this.firstTab;
+
+                var last = nodes.length - 1;
+                this.lastTab = $(nodes[last]);
+
+                var target = $(this.firstTab.getAttribute("target"));
+                target.addClassName("active");
+            }
+            this.onWindowResizeBound = this.onWindowResize.bindAsEventListener(this);
+            Event.observe(window, "resize", this.onWindowResizeBound, false);
+        }
+
+        this.createScrollButtons();
+        this.recomputeMinOffset();
+    },
+
+    onWindowResize: function STC_onWindowResize(event) {
+        this.recomputeMinOffset();
+    },
+
+    recomputeMinOffset: function() {
+        var tabsWidth = (this.lastTab.offsetLeft + this.lastTab.clientWidth
+                         - this.firstTab.offsetLeft
+                         + 4);
+        this.minOffset = (this.container.clientWidth - tabsWidth - 40);
+        if (this.minOffset < -40) {
+            this.scrollToolbar.show();
+        } else {
+            this.scrollToolbar.hide();
+            if (this.offset < 0) {
+                this.list.setStyle("margin-left: 0px;");
+                this.offset = 0;
+            }
+        }
+    },
+
+    onTabMouseDown: function STC_onTabMouseDown(event) {
+        event.stop();
+    },
+
+    onTabClick: function STC_onTabClick(event) {
+        var clickedTab = getTarget(event);
+        if (clickedTab.nodeType == 1) {
+            while (clickedTab.tagName.toLowerCase() != "li") {
+                clickedTab = $(clickedTab.parentNode);
+            }
+            var content = $(clickedTab.getAttribute("target"));
+            var oldContent = $(this.activeTab.getAttribute("target"));
+            oldContent.removeClassName("active");
+            this.activeTab.removeClassName("active"); // previous LI
+            this.activeTab = $(clickedTab);
+            this.activeTab.addClassName("active"); // current LI
+            content.addClassName("active");
+            event.stop();
+            // Prototype alternative
+        
+            //oldContent.removeClassName("active");
+            //container.activeTab.removeClassName("active"); // previous LI
+            //container.activeTab = node;
+            //container.activeTab.addClassName("active"); // current LI
+            
+            //container.activeTab.hide();
+            //oldContent.hide();
+            //content.show();
+
+            //container.activeTab = node;
+            //container.activeTab.show();
+        }
+    }
+}
diff --git a/UI/WebServerResources/SchedulerUI.css b/UI/WebServerResources/SchedulerUI.css
index 92f5c5f2f..173b146d7 100644
--- a/UI/WebServerResources/SchedulerUI.css
+++ b/UI/WebServerResources/SchedulerUI.css
@@ -8,14 +8,14 @@ DIV#leftPanel
 
 DIV#schedulerTabs
 { position: absolute;
-  top: 22px;
-  left: .2em;
-  right: .2em;
-  height: 14em; }
+  top: 4px;
+  left: 2px;
+  right: 2px;
+  height: 186px; }
 
 DIV#tasksListView
 { position: absolute;
-  top: 17em;
+  top: 200px;
   bottom: 0px;
   left: 2px;
   right: 0px;
@@ -31,10 +31,8 @@ DIV#tasksListView LABEL
 { margin: .25em; }
 
 DIV#calendarSelectorView
-{ top: 3px; }
-
-DIV#calendarSelectorView
-{ overflow: hidden; }
+{ top: 3px;
+  overflow: hidden; }
 
 DIV#calendarsList
 { height: 100%; }
@@ -64,7 +62,7 @@ UL#tasksList, UL#calendarList
 
 UL#calendarList
 { clear: left;
-  height: 102px; }
+  height: 115px; }
 
 UL#calendarList LI
 { cursor: pointer;
diff --git a/UI/WebServerResources/SchedulerUI.js b/UI/WebServerResources/SchedulerUI.js
index a71ad53d4..d0bb06509 100644
--- a/UI/WebServerResources/SchedulerUI.js
+++ b/UI/WebServerResources/SchedulerUI.js
@@ -2239,7 +2239,8 @@ function onCalendarExport(event) {
 }
 
 function onCalendarImport(event) {
-    var node = $("calendarList").getSelectedNodes().first();
+    var list = $("calendarList");
+    var node = list.getSelectedNodes().first();
     var folderId = node.getAttribute("id");
 
     var url = ApplicationBaseURL + folderId + "/import";
@@ -2250,6 +2251,7 @@ function onCalendarImport(event) {
     var cellDimensions = node.getDimensions();
     var left = cellDimensions['width'] - 20;
     var top = cellPosition[1];
+    top -= list.scrollTop;
 
     var div = $("uploadDialog");
     var res = $("uploadResults");
@@ -2556,6 +2558,11 @@ function initCalendars() {
     if (!$(document.body).hasClassName("popup")) {
         var node = $("filterpopup");
         listFilter = node.value;
+
+        var tabsContainer = $("schedulerTabs");
+        var controller = new SOGoTabsController();
+        controller.attachToTabsContainer(tabsContainer);
+
         initDateSelectorEvents();
         initCalendarSelector();
         configureSearchField();
diff --git a/UI/WebServerResources/UIxPreferences.css b/UI/WebServerResources/UIxPreferences.css
index 170e226e4..13e8c5fb4 100644
--- a/UI/WebServerResources/UIxPreferences.css
+++ b/UI/WebServerResources/UIxPreferences.css
@@ -1,6 +1,6 @@
 DIV#preferencesTabs
 { position: absolute;
-  top: 70px;
+  top: 54px;
   left: 5px;
   right: 5px;
   bottom: 5px; }
diff --git a/UI/WebServerResources/UIxPreferences.js b/UI/WebServerResources/UIxPreferences.js
index b6fe89ba6..8a839e20d 100644
--- a/UI/WebServerResources/UIxPreferences.js
+++ b/UI/WebServerResources/UIxPreferences.js
@@ -128,6 +128,10 @@ function addDefaultEmailAddresses(event) {
 }
 
 function initPreferences() {
+    var tabsContainer = $("preferencesTabs");
+    var controller = new SOGoTabsController();
+    controller.attachToTabsContainer(tabsContainer);
+
     var filtersListWrapper = $("filtersListWrapper");
     if (filtersListWrapper) {
         isSieveScriptsEnabled = true;
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index 6b94ece5b..55c961fe4 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -739,18 +739,38 @@ SPAN.caption
   border: 0px; }
 
 /* Tabs */
+
 DIV.tabsContainer
+{ overflow: hidden;
+  top: 0px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  padding: 0px 5px; }
+
+DIV.tabsContainer > DIV.scrollToolbar
 { position: absolute;
-  color: #535D6D;
-  background-color: #E6E7E6;
-  margin-top: 0.5em; 
+  background-color: #c6c7c6;
   border: 1px solid #9B9B9B;
-  top: 2.5em;
-  left: .5em;
-  right: .5em;
-  bottom: 2.5em;
-  margin-bottom: 1em;
-  padding: 0 5px; }
+  padding: 1px;
+  top: 8px;
+  right: 0px;
+  height: 12px;
+  vertical-align: bottom;
+  text-align: center;
+  width: 30px; }
+
+DIV.tabsContainer > DIV.scrollToolbar > A > SPAN
+{ border: 0px;
+  text-align: center;
+  width: 12px;
+  padding: 0px !important;
+  margin: 0px !important;
+  margin-top: 5px;  }
+
+DIV.tabsContainer > DIV.scrollToolbar > A,
+DIV.tabsContainer > DIV.scrollToolbar > A > SPAN
+{ height: 12px; }
 
 DIV.tabsContainer > UL
 { cursor: default;
@@ -758,7 +778,6 @@ DIV.tabsContainer > UL
   list-style-type: none;
   list-style-image: none;
   margin: 0px;
-  margin-top: -24px;
   padding: 0px; }
 
 DIV.tabsContainer > UL LI
@@ -787,7 +806,18 @@ DIV.tabsContainer > UL LI.first
 { margin-left: -1px;
   padding-left: -1px; }
 
-DIV.tabsContainer > DIV.tab
+DIV.tabsContainer > DIV.tabs
+{ position: absolute;
+  color: #535D6D;
+  background-color: #E6E7E6;
+  border: 1px solid #9B9B9B;
+  top: 23px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  overflow: hidden; }
+
+DIV.tabsContainer > DIV.tabs > DIV.tab
 { position: absolute;
   top: 5px;
   bottom: 5px;
@@ -856,8 +886,8 @@ A.toolbarButton SPAN,
 A.toolbarButton:hover SPAN {
   text-align: center;
   display: block;
-  line-height: 13px;
-  padding: 5px 2px 5px 5px;
+  line-height: 12px;
+  padding: 5px 2px 2px 5px;
   cursor: pointer;
 }
 
diff --git a/UI/WebServerResources/generic.js b/UI/WebServerResources/generic.js
index 51944508a..16c27ecae 100644
--- a/UI/WebServerResources/generic.js
+++ b/UI/WebServerResources/generic.js
@@ -409,15 +409,17 @@ function refreshOpener() {
 
 function eventIsLeftClick(event) {
    var isLeftClick = true;
-    if (isMac() && isSafari())
+    if (isMac() && isSafari()) {
         if (event.ctrlKey == 1)
             isLeftClick = false; // Control-click is equivalent to right-click under Mac OS X
         else if (event.metaKey == 1) // Command-click
             isLeftClick = true;
         else
             isLeftClick = Event.isLeftClick(event);
-    else
-        isLeftClick = Event.isLeftClick(event);
+    }
+    else {
+        isLeftClick = event.isLeftClick();
+    }
 
     return isLeftClick;
 }
@@ -1130,36 +1132,6 @@ function listRowMouseDownHandler(event) {
     return false;
 }
 
-/* tabs */
-function initTabs() {
-    var containers = document.getElementsByClassName("tabsContainer");
-    for (var x = 0; x < containers.length; x++) {
-        var container = containers[x];
-        var list = container.childNodesWithTag("ul");
-
-        if (list.length > 0) {
-            var firstTab = null;
-            var nodes = $(list[0]).childNodesWithTag("li");
-            for (var i = 0; i < nodes.length; i++) {
-                var currentNode = $(nodes[i]);
-                if (!firstTab)
-                    firstTab = currentNode;
-                currentNode.observe("mousedown", onTabMouseDown);
-                currentNode.observe("click", onTabClick);
-                //$(currentNode.getAttribute("target")).hide();
-            }
-
-            firstTab.addClassName("first");
-            firstTab.addClassName("active");
-            container.activeTab = firstTab;
-
-            var target = $(firstTab.getAttribute("target"));
-            target.addClassName("active");
-        }
-        //target.show();
-    }
-}
-
 function reverseSortByAlarmTime(a, b) {
     var x = parseInt(a[2]);
     var y = parseInt(b[2]);
@@ -1300,11 +1272,6 @@ function initMenu(menuDIV, callbacks) {
     }
 }
 
-function onTabMouseDown(event) {
-    event.stopPropagation();
-    event.preventDefault();
-}
-
 function openExternalLink(anchor) {
     return false;
 }
@@ -1342,32 +1309,6 @@ function getTopWindow() {
     return topWindow;
 }
 
-function onTabClick(event) {
-    var container = this.parentNode.parentNode;
-    var content = $(this.getAttribute("target"));
-    var oldContent = $(container.activeTab.getAttribute("target"));
-
-    oldContent.removeClassName("active");
-    container.activeTab.removeClassName("active"); // previous LI
-    container.activeTab = this;
-    container.activeTab.addClassName("active"); // current LI
-    content.addClassName("active");
-
-    // Prototype alternative
-
-    //oldContent.removeClassName("active");
-    //container.activeTab.removeClassName("active"); // previous LI
-    //container.activeTab = node;
-    //container.activeTab.addClassName("active"); // current LI
-
-    //container.activeTab.hide();
-    //oldContent.hide();
-    //content.show();
-
-    //container.activeTab = node;
-    //container.activeTab.show();
-}
-
 //function enableAnchor(anchor) {
 //    var classStr = '' + anchor.getAttribute("class");
 //    var position = classStr.indexOf("_disabled", 0);
@@ -1482,7 +1423,6 @@ function onLoadHandler(event) {
     initCriteria();
     configureSearchField();
     initMenus();
-    initTabs();
     configureDragHandles();
     configureLinkBanner();
     var progressImage = $("progressIndicator");
@@ -1518,7 +1458,7 @@ function onLinkBannerClick() {
 function onPreferencesClick(event) {
     var urlstr = UserFolderURL + "preferences";
     var w = window.open(urlstr, "_blank",
-                        "width=440,height=450,resizable=0,scrollbars=0,location=0");
+                        "width=440,height=450,resizable=1,scrollbars=0,location=0");
     w.opener = window;
     w.focus();
 
diff --git a/UI/WebServerResources/iefixes.css b/UI/WebServerResources/iefixes.css
index 7218ab5d9..24568312a 100644
--- a/UI/WebServerResources/iefixes.css
+++ b/UI/WebServerResources/iefixes.css
@@ -38,6 +38,9 @@ DIV#userRoles
 UL#userList
 { top: 3em; }
 
+DIV.tabsContainer > DIV.scrollToolbar > A > SPAN
+{ line-height: 12px; }
+
 /* UIxCalUserRightsEditor */
 
 DIV.calendarUserRights HR
@@ -127,8 +130,7 @@ TABLE.frame TBODY
 { padding: 20px; }
 
 UL#calendarList
-{ margin-top: 2px;
-  height: 100px; }
+{ margin-top: 2px; }
 
 A.toolbarButton SPAN,
 A.toolbarButton:hover SPAN {