First steps for Larry's address book

10 files changed, 548 insertions, 21 deletions

diff --git a/skins/larry/addressbook.css b/skins/larry/addressbook.css
index 819a432bd..57a1b0da4 100644
--- a/skins/larry/addressbook.css
+++ b/skins/larry/addressbook.css
@@ -10,4 +10,184 @@
  * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
  *
  * $Id$
- */
\ No newline at end of file
+ */
+
+#addressview-left {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 220px;
+	bottom: 0;
+}
+
+#addressview-right {
+	position: absolute;
+	top: 0;
+	left: 232px;
+	right: 0;
+	bottom: 0;
+}
+
+#addressbooktoolbar {
+	position: absolute;
+	top: -6px;
+	left: 0;
+	right: 0;
+	height: 40px;
+	white-space: nowrap;
+}
+
+#directorylistbox {
+	position: absolute;
+	top: 42px;
+	left: 0;
+	width: 100%;
+	bottom: 0;
+}
+
+#addresslist {
+	position: absolute;
+	top: 42px;
+	left: 0;
+	width: 280px;
+	bottom: 0;
+}
+
+#contacts-box {
+	position: absolute;
+	top: 42px;
+	left: 292px;
+	right: 0;
+	bottom: 0;
+}
+
+#addressview-left #quicksearchbar input {
+	width: 156px;
+}
+
+#directorylist li a,
+#contacts-table .contact td.name {
+	background: url(images/listicons.png) -100px 0 no-repeat;
+	overflow: hidden;
+	padding-left: 36px;
+	text-overflow: ellipsis;
+}
+
+#directorylist li.addressbook a {
+	background-position: 6px -766px;
+}
+
+#directorylist li.addressbook.selected a {
+	background-position: 6px -791px;
+}
+
+#directorylist li.contactgroup a {
+	padding-left: 62px;
+	background-position: 32px -1555px;
+}
+
+#directorylist li.contactgroup.selected a {
+	background-position: 32px -1579px;
+}
+
+#contacts-table .contact td.name {
+	background-position: 6px -1603px;
+}
+
+#contacts-table .contact.selected td.name,
+#contacts-table .contact.unfocused td.name {
+	background-position: 6px -1627px;
+	font-weight: bold;
+}
+
+#contact-frame {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 28px;
+	border: 0;
+}
+
+#headerbuttons {
+	position: absolute;
+	top: 48px;
+	right: 10px;
+	width: auto;
+	z-index: 10;
+}
+
+#sourcename {
+	color: #999;
+	font-size: 10px;
+	margin: -5px 0 8px 2px;
+}
+
+#contactphoto {
+	float: left;
+	margin: 0 18px 20px 0;
+	width: 112px;
+}
+
+#contactpic {
+	width: 112px;
+	min-height: 112px;
+	background: white;
+}
+
+#contactpic img {
+	width: 112px;
+}
+
+#contacthead {
+	border: 0;
+	margin: 0 20em 1em 0;
+	padding: 0;
+	line-height: 1.5em;
+	font-size: 12px;
+}
+
+#contacthead .names span.namefield,
+#contacthead .names input {
+	font-size: 140%;
+	font-weight: bold;
+}
+
+#contacthead .displayname span.namefield {
+	font-size: 120%;
+	font-weight: bold;
+}
+
+#contacthead span.nickname:before,
+#contacthead span.nickname:after,
+#contacthead input.ff_nickname:before,
+#contacthead input.ff_nickname:after {
+	content: '"';
+}
+
+#contacthead input {
+	margin-right: 6px;
+	margin-bottom: 0.2em;
+}
+
+#contacthead .names input,
+#contacthead .addnames input {
+	width: 180px;
+}
+
+#contacthead input.ff_prefix,
+#contacthead input.ff_suffix {
+	width: 90px;
+}
+
+a.deletebutton {
+	position: relative;
+	left: 5px;
+	top: -3px;
+	display: inline-block;
+	width: 24px;
+	height: 18px;
+	text-decoration: none;
+	text-indent: -1000px;
+	background: url(images/buttons.png) -7px -337px no-repeat;
+}
diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png
index 84207cc8c..438768f91 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index 0fb0bdce6..5f4473fdd 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 8a29fa7ce..44721c551 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -541,14 +541,16 @@ html.chrome #messagelist tr td.threads {
 	background-position: -24px -1036px;
 }
 
-#messagelist tr td.flag span.unflagged:hover {
+#messagelist tr td.flag span.unflagged:hover,
+#messagelist tr td.status span.msgicon:hover {
 	background-position: 0 -1056px;
 }
 
 #messagelist tr td.subject span.msgicon,
 #messagelist tr td.subject span.unreadchildren {
 	background-position: 0 -1056px;
-	margin: 0 4px 0 0;
+	margin: 0 1px 0 0;
+	width: 24px;
 }
 
 #messagelist tr td.subject span.replied {
@@ -580,10 +582,15 @@ html.chrome #messagelist tr td.threads {
 */
 #messagelist tr td.status span.status,
 #messagelist tr td.status span.unread,
-#messagelist tr td.subject span.unread {
+#messagelist tr td.subject span.unread,
+#messagelist tr td.status span.unread:hover {
 	background-position: 0 -1016px;
 }
 
+#messagelist thead tr td.status span.status {
+	background-position: -24px -1016px;
+}
+
 #messagelist tr td div.collapsed {
 	background-position: 0 -1136px;
 	cursor: pointer;
@@ -1132,10 +1139,11 @@ div.message-part blockquote blockquote blockquote {
 #compose-attachments {
 	position: absolute;
 	right: 0;
-	top: 0;
+	top: 1px;
 	bottom: 0;
 	width: 240px;
 	background: #f0f0f0;
+	border-left: 1px solid #ddd;
 	padding: 8px;
 	overflow: auto;
 }
@@ -1171,3 +1179,9 @@ div.message-part blockquote blockquote blockquote {
 	border: 0 !important;
 }
 
+#composebody_toolbargroup {
+	border-bottom: 1px solid #ddd;
+}
+
+
+
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 80943a65a..48c8c6fb6 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -35,6 +35,7 @@ img {
 input[type="text"],
 input[type="password"],
 textarea {
+	margin: 0; /* Safari by default adds a margin */
 	padding: 4px;
 	border: 1px solid #b2b2b2;
 	border-radius: 4px;
@@ -82,6 +83,7 @@ input.button {
 	-webkit-box-shadow: 0 1px 1px 0 #ccc;
 	-moz-box-shadow: 0 1px 1px 0 #ccc;
 	text-decoration: none;
+	outline: none;
 }
 
 .formbuttons input.button {
@@ -103,7 +105,8 @@ input.button {
 	-moz-box-shadow: 0 1px 1px 0 #ccc, inset 0 1px 0 0 #888;
 }
 
-.formbuttons input.button:hover {
+.formbuttons input.button:hover,
+.formbuttons input.button:focus {
 	color: #f2f2f2;
 	border-color: #465864;
 	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #888;
@@ -176,7 +179,8 @@ a.button {
 }
 
 a.button:hover,
-input.button:hover {
+input.button:hover,
+input.button:focus {
 	border-color: #4fadd5;
 	box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
 	-moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6);
@@ -343,6 +347,11 @@ a.iconlink.edit {
 	background-position: -7px -397px;
 }
 
+a.iconlink.delete {
+	background-position: -7px -337px;
+}
+
+
 /*** message bar ***/
 
 #message div.loading,
@@ -698,6 +707,10 @@ table.layout td {
 	margin-top: 1px;
 }
 
+.boxfooter .listbutton.disabled {
+	opacity: 0.4;
+}
+
 .boxfooter .listbutton .inner {
 	display: inline-block;
 	width: 48px;
@@ -707,7 +720,11 @@ table.layout td {
 }
 
 .boxfooter .listbutton.add .inner {
-	background-position: 10px -1210px;
+	background-position: 10px -1211px;
+}
+
+.boxfooter .listbutton.delete .inner {
+	background-position: 10px -1252px;
 }
 
 .boxfooter .listbutton.groupactions .inner {
@@ -758,6 +775,7 @@ body.iframe .boxtitle {
 	top: 0;
 	left: 0;
 	width: 100%;
+	z-index: 100;
 }
 
 .boxcontent {
@@ -892,11 +910,12 @@ ul.proplist li {
 	-o-box-shadow: inset 0 1px 0 0 #fff;
 }
 
-#login-form input.button:hover {
-	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff;
-	-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff;
-	-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff;
-	-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.6), inset 0 1px 0 0 #fff;
+#login-form input.button:hover,
+#login-form input.button:focus {
+	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
+	-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
+	-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
+	-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9), inset 0 1px 0 0 #fff;
 }
 
 #login-form input.button:active {
@@ -982,7 +1001,7 @@ ul.proplist li {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	padding: 28px 2px 2px 2px;
+	padding: 28px 2px 0 2px;
 	text-shadow: 0px 1px 1px #eee;
 	box-shadow: none;
 	-moz-box-shadow: none;
@@ -1069,6 +1088,18 @@ ul.proplist li {
 	background-position: center -930px;
 }
 
+.toolbar a.button.search {
+	background-position: center -970px;
+}
+
+.toolbar a.button.import {
+	background-position: center -1010px;
+}
+
+.toolbar a.button.export {
+	background-position: center -1050px;
+}
+
 
 /*** popup menus ***/
 
@@ -1228,6 +1259,11 @@ ul.toolbarmenu li span.extwin {
 	margin: 20px 0 4px 0;
 }
 
+.ui-dialog .prompt input {
+	display: block;
+	margin: 8px 0;
+}
+
 .hint {
 	margin: 4px 0;
 	color: #999;
@@ -1300,3 +1336,57 @@ ul.toolbarmenu li span.extwin {
 	background: url(images/buttons.png) -8px -360px no-repeat;
 }
 
+
+/*** fieldset tabs ***/
+
+.tabsbar {
+	margin-bottom: 10px;
+	padding-top: 15px;
+	height: 27px;
+}
+
+.tabsbar .tablink {
+	padding: 15px 1px 15px 0;
+	background: #f8f8f8;
+	background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8));
+	background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
+	background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
+	background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
+	background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
+}
+
+.tabsbar .tablink:last-child {
+	background: none;
+}
+
+.tabsbar .tablink:last-child a {
+	border-right: 0;
+}
+
+.tabsbar .tablink a {
+	padding: 15px;
+	color: #999;
+	font-size: 12px;
+	font-weight: bold;
+	text-decoration: none;
+	background: #fff;
+	border-right: 1px solid #fafafa;
+}
+
+.tabsbar .tablink.selected a {
+	color: #004458;
+	background: #fff;
+	background: -moz-linear-gradient(top, #fff 40%, #efefef 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef));
+	background: -o-linear-gradient(top, #fff 40%, #efefef 100%);
+	background: -ms-linear-gradient(top, #fff 40%, #efefef 100%);
+	background: linear-gradient(top, #fff 40%, #efefef 100%);
+}
+
+fieldset.tab {
+	border: 0;
+	padding: 0;
+}
+
+
diff --git a/skins/larry/templates/addressbook.html b/skins/larry/templates/addressbook.html
new file mode 100644
index 000000000..23da1411d
--- /dev/null
+++ b/skins/larry/templates/addressbook.html
@@ -0,0 +1,92 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body>
+
+<roundcube:include file="/includes/header.html" />
+
+<div id="mainscreen">
+
+<div id="addressview-left">
+
+<!-- search box -->
+<div id="quicksearchbar">
+<roundcube:object name="searchform" id="quicksearchbox" />
+<roundcube:button name="searchmenulink" id="searchmenulink" class="iconbutton searchoptions" onclick="UI.show_popup('searchmenu');return false" title="searchmod" content=" " />
+<roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
+</div>
+
+<!-- sources/groups list -->
+<div id="directorylistbox" class="uibox listbox">
+<h2 class="boxtitle"><roundcube:label name="groups" /></h2>
+<div class="scroller withfooter">
+	<roundcube:object name="directorylist" id="directorylist" class="listing" />
+</div>
+<div class="boxfooter">
+	<roundcube:button command="group-create" type="link" title="newcontactgroup" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="groupoptions" id="groupoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="UI.show_popup('groupoptions');return false" innerClass="inner" content="&#9881;" />
+</div>
+</div>
+
+</div><!-- end addressview-left -->
+
+<div id="addressview-right">
+
+<!-- toolbar -->
+<div id="addressbooktoolbar" class="toolbar">
+	<roundcube:button command="advanced-search" type="link" class="button search disabled" classAct="button search" classSel="button search pressed" label="advsearch" />
+	<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" />
+	<roundcube:button command="import" type="link" class="button import disabled" classAct="button import" classSel="button import pressed" label="importcontacts" />
+	<roundcube:button command="export" type="link" class="button export disabled" classAct="button export" classSel="button export pressed" label="exportvcards" />
+	<roundcube:container name="toolbar" id="addressbooktoolbar" />
+</div>
+
+<!-- contacts list -->
+<div id="addresslist" class="uibox listbox">
+<h2 class="boxtitle"><roundcube:label name="contacts" /></h2>
+<div class="scroller withfooter">
+<roundcube:object name="addresslist" id="contacts-table" class="listing" noheader="true" />
+</div>
+<div class="boxfooter">
+	<roundcube:button command="add" type="link" title="newcontact" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button command="delete" type="link" title="deletecontact" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="x" />
+</div>
+</div>
+
+
+<div id="contacts-box" class="uibox">
+	<roundcube:object name="addressframe" id="contact-frame" style="width:100%; height:96%" src="/watermark.html" />
+	<roundcube:object name="message" id="message" class="statusbar" />
+</div>
+
+
+</div><!-- end addressview-right -->
+
+</div><!-- end mainscreen -->
+
+
+<div id="searchmenu" class="popupmenu">
+	<ul class="toolbarmenu">
+		<li><label><input type="checkbox" name="s_mods[]" value="name" onclick="UI.set_searchmod(this)" /> <roundcube:label name="name" /></label></li>
+		<li><label><input type="checkbox" name="s_mods[]" value="firstname" onclick="UI.set_searchmod(this)" /> <roundcube:label name="firstname" /></label></li>
+		<li><label><input type="checkbox" name="s_mods[]" value="surname" onclick="UI.set_searchmod(this)" /> <roundcube:label name="surname" /></label></li>
+		<li><label><input type="checkbox" name="s_mods[]" value="email" onclick="UI.set_searchmod(this)" /> <roundcube:label name="email" /></label></li>
+		<li><label><input type="checkbox" name="s_mods[]" value="*" onclick="UI.set_searchmod(this)" /> <roundcube:label name="allfields" /></label></li>
+	</ul>
+</div>
+
+<div id="groupoptions" class="popupmenu">
+	<ul id="groupoptionsmenu" class="toolbarmenu">
+		<li><roundcube:button command="group-rename" label="grouprename" classAct="active" /></li>
+		<li><roundcube:button command="group-delete" label="groupdelete" classAct="active" /></li>
+		<li><roundcube:button command="search-create" label="searchsave" classAct="active" /></li>
+		<li><roundcube:button command="search-delete" label="searchdelete" classAct="active" /></li>
+		<roundcube:container name="groupoptions" id="groupoptionsmenu" />
+	</ul>
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html
index b59c963a6..aad516d14 100644
--- a/skins/larry/templates/compose.html
+++ b/skins/larry/templates/compose.html
@@ -104,8 +104,8 @@
 <!-- (collapsable) message options -->
 <div id="composeoptionsbox">
 	<span class="composeoption">
-		<label><roundcube:label name="options" /></label>
-		<a href="#options" id="composeoptionstoggle">&nbsp;</a>
+		<label><roundcube:label name="options" />
+			<a href="#options" id="composeoptionstoggle">&nbsp;</a></label>
 	</span>
 	
 	<div id="composeoptions">
diff --git a/skins/larry/templates/contact.html b/skins/larry/templates/contact.html
new file mode 100644
index 000000000..d252049cd
--- /dev/null
+++ b/skins/larry/templates/contact.html
@@ -0,0 +1,33 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body class="iframe">
+
+<h1 class="boxtitle"><roundcube:label name="contactproperties" /></h1>
+
+<div id="contact-details" class="boxcontent">
+	<roundcube:if condition="strlen(env:sourcename)" />
+		<div id="sourcename"><roundcube:label name="addressbook" />: <roundcube:var name="env:sourcename" /></div>
+	<roundcube:endif />
+
+	<div id="contactphoto"><roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" /></div>
+	<roundcube:object name="contacthead" id="contacthead" />
+	<br style="clear:both" />
+
+	<div id="contacttabs" class="tabbed">
+		<roundcube:object name="contactdetails" />
+	</div>
+
+</div>
+
+<div id="headerbuttons" class="formbuttons">
+	<roundcube:button command="edit" type="input" class="button mainaction" label="editcontact" condition="!ENV:readonly" />
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/templates/contactedit.html b/skins/larry/templates/contactedit.html
new file mode 100644
index 000000000..562e6d2d6
--- /dev/null
+++ b/skins/larry/templates/contactedit.html
@@ -0,0 +1,52 @@
+<roundcube:object name="doctype" value="html5" />
+<html>
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+</head>
+<body class="iframe">
+
+<h1 class="boxtitle">
+	<roundcube:if condition="env:action=='add'" /><roundcube:label name="addcontact" />
+	<roundcube:else /><roundcube:label name="editcontact" />
+<roundcube:endif /></h1>
+
+<form name="editform" method="post" action="./" id="contact-details" class="boxcontent">
+	<roundcube:if condition="strlen(env:sourcename)" />
+		<div id="sourcename"><roundcube:label name="addressbook" />: <roundcube:var name="env:sourcename" condition="env:action!='add'" /><roundcube:object name="sourceselector" id="sourceselect" condition="env:action=='add'" /></div>
+	<roundcube:endif />
+
+	<div id="contactphoto">
+		<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
+		<div class="formlinks">
+			<roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="iconlink upload disabled" classAct="iconlink upload active" onclick="UI.show_uploadform();return false" condition="env:photocol" /><br/>
+			<roundcube:button command="delete-photo" type="link" label="delete" class="iconlink delete disabled" classAct="iconlink delete active" condition="env:photocol" />
+		</div>
+	</div>
+	<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
+	<br style="clear:both" />
+
+	<div id="contacttabs" class="tabbed">
+		<roundcube:object name="contacteditform" size="40" textareacols="60" form="editform" />
+	</div>
+
+</form>
+
+<div id="headerbuttons" class="formbuttons">
+	<roundcube:button command="save" type="input" class="button mainaction" label="save" />
+	<roundcube:button command="show" type="input" class="button" label="cancel" condition="env:action=='edit'" />
+	<roundcube:button name="cancel" type="input" class="button" label="cancel" onclick="history.back()" condition="env:action=='add'" />
+</div>
+
+<div id="upload-dialog" class="propform popupdialog">
+	<roundcube:object name="photoUploadForm" id="upload-form" size="30" buttons="no" />
+	<div class="formbuttons">
+		<roundcube:button command="upload-photo" type="input" class="button mainaction" label="upload" />
+		<roundcube:button name="close" type="input" class="button" label="cancel" onclick="UI.show_uploadform()" />
+	</div>
+</div>
+
+<roundcube:include file="/includes/footer.html" />
+
+</body>
+</html>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 806ff2c6a..4b811cbc2 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -34,6 +34,7 @@ function rcube_mail_ui()
 
   // export public methods
   this.init = init;
+  this.init_tabs = init_tabs;
   this.show_popup = show_popup;
   this.set_searchmod = set_searchmod;
   this.show_uploadform = show_uploadform;
@@ -68,12 +69,12 @@ function rcube_mail_ui()
       else if (rcmail.env.action == 'compose') {
         layout_composeview();
 
-        $('#composeoptionstoggle').click(function(){
-          $(this).toggleClass('enabled');
+        $('#composeoptionstoggle').parent().click(function(){
+          $('#composeoptionstoggle').toggleClass('enabled');
           $('#composeoptions').toggle();
           layout_composeview();
           return false;
-        });
+        }).css('cursor', 'pointer');
 
         new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right',
           orientation:'v', relative:true, start:248, min:150, size:12 }).init();
@@ -107,6 +108,12 @@ function rcube_mail_ui()
           orientation:'v', relative:true, start:305, min:150, size:12 }).init();
       }
     }
+    else if (rcmail.env.task == 'addressbook') {
+
+    }
+
+    // turn a group of fieldsets into tabs
+    $('.tabbed').each(function(idx, elem){ init_tabs(elem); })
 
     $(document.body).bind('mouseup', function(e){
       var config, obj, target = e.target;
@@ -189,8 +196,8 @@ function rcube_mail_ui()
     body.width(w).height(h);
 
     if (window.tinyMCE && tinyMCE.get('composebody')) {
-      $('#composebody_tbl').width((w+11)+'px').height('').css('margin-top', '1px');
-      $('#composebody_ifr').width((w+11)+'px').height((h-24)+'px');
+      $('#composebody_tbl').width((w+12)+'px').height('').css('margin-top', '1px');
+      $('#composebody_ifr').width((w+12)+'px').height((h-22)+'px');
     }
     else {
       $('#googie_edit_layer').height(h+'px');
@@ -540,6 +547,65 @@ function rcube_mail_ui()
     $('#' + which + '-link').show();
     this.resize_compose_body();
   }
+
+
+  /**
+   * Fieldsets-to-tabs converter
+   */
+  function init_tabs(elem, current)
+  {
+    var id = elem.id,
+      content = $(elem),
+      fs = content.children('fieldset');
+
+    if (!fs.length)
+      return;
+
+    if (!id) {
+      id = 'rcmtabcontainer';
+      elem.attr('id', id);
+    }
+
+    // first hide not selected tabs
+    current = current || 0;
+    fs.each(function(idx) { if (idx != current) $(this).hide(); });
+
+    // create tabs container
+    var tabs = $('<div>').addClass('tabsbar').prependTo(content);
+
+    // convert fildsets into tabs
+    fs.each(function(idx) {
+      var tab, a, elm = $(this), legend = elm.children('legend');
+
+      // create a tab
+      a   = $('<a>').text(legend.text()).attr('href', '#');
+      tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'})
+        .click(function() { show_tab(id, idx); return false })
+
+      // remove legend
+      legend.remove();
+      // style fieldset
+      elm.addClass('tab');
+      // style selected tab
+      if (idx == current)
+        tab.addClass('selected');
+
+      // add the tab to container
+      tab.append(a).appendTo(tabs);
+    });
+  }
+
+  function show_tab(id, index)
+  {
+    var fs = $('#'+id).children('fieldset');
+
+    fs.each(function(idx) {
+      // Show/hide fieldset (tab content)
+      $(this)[index==idx ? 'show' : 'hide']();
+      // Select/unselect tab
+      $('#tab'+idx).toggleClass('selected', idx==index);
+    });
+  }
 }