First version of the newly restructured repository

51 files changed, 14013 insertions, 0 deletions

diff --git a/frontend/beta/js/Clipperz/PM/Components/BaseComponent.js b/frontend/beta/js/Clipperz/PM/Components/BaseComponent.js
new file mode 100644
index 0000000..67e257b
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/BaseComponent.js
@@ -0,0 +1,124 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+
+//#############################################################################
+
+var _Clipperz_PM_Components_Panels_base_id_ = 0;
+
+//#############################################################################
+
+Clipperz.PM.Components.BaseComponent = function(anElement, args) {
+	args = args || {};
+//	MochiKit.Base.bindMethods(this);
+//	Clipperz.PM.Components.BaseComponent.superclass.constructor.call(this, args);
+
+	this._element = anElement;
+	this._ids = {};
+	
+	return this;
+}
+
+//=============================================================================
+
+//MochiKit.Base.update(Clipperz.PM.Components.BaseComponent.prototype, {
+YAHOO.extendX(Clipperz.PM.Components.BaseComponent, YAHOO.ext.util.Observable, {
+
+	'isClipperzPMComponent': true,
+	
+	//-------------------------------------------------------------------------
+
+	'toString': function () {
+		return "Clipperz.PM.Components.BaseComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'domHelper': function() {
+		return Clipperz.YUI.DomHelper;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'element': function() {
+//MochiKit.Logging.logDebug(">>> BaseComponent.element");
+		return this._element;
+	},
+	
+	'setElement': function(aValue) {
+		this._element = aValue;
+	},
+
+	//-----------------------------------------------------
+
+	'remove': function() {
+//MochiKit.Logging.logDebug(">>> BaseComponent.remove");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+//MochiKit.Logging.logDebug("<<< BaseComponent.remove");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'getId': function(aValue) {
+		var	result;
+		
+		result = this._ids[aValue];
+		
+		if (typeof(result) == 'undefined') {
+			_Clipperz_PM_Components_Panels_base_id_ ++;
+			
+			result = "Clipperz_PM_Components_Panels_" + aValue + "_" + _Clipperz_PM_Components_Panels_base_id_;
+			this._ids[aValue] = result;
+//MochiKit.Logging.logDebug(">>> getId(" + aValue + ") = " + result);
+		} else {
+//MochiKit.Logging.logDebug("<<< getId(" + aValue + ") = " + result);
+		}
+	
+		return result;
+	},
+
+	'getDom': function(aValue) {
+		return YAHOO.util.Dom.get(this.getId(aValue));
+	},
+	
+	'getElement': function(aValue) {
+		return YAHOO.ext.Element.get(this.getId(aValue));
+	},
+	
+	'getActor': function(aValue, anAnimator) {
+ 		return new YAHOO.ext.Actor(this.getDom(aValue), anAnimator);
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/Compact/CompactHeader.js b/frontend/beta/js/Clipperz/PM/Components/Compact/CompactHeader.js
new file mode 100644
index 0000000..e51b56f
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Compact/CompactHeader.js
@@ -0,0 +1,86 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Compact) == 'undefined') { Clipperz.PM.Components.Compact = {}; }
+
+Clipperz.PM.Components.Compact.CompactHeader = function(anElement, args) {
+
+    Clipperz.PM.Components.Compact.CompactHeader.superclass.constructor.call(this, anElement, args);
+
+	this.render();
+	
+	return this;
+};
+
+YAHOO.extendX(Clipperz.PM.Components.Compact.CompactHeader, Clipperz.PM.Components.BaseComponent, {
+	
+	'toString': function() {
+		return "Clipperz.PM.Components.Compact.CompactHeader";
+	},
+
+	//-----------------------------------------------------
+	
+	'render': function() {
+		this.element().update("");
+
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', children:[
+			{tag:'img', src:'./images/logo.gif'},
+			{tag:'div', id:'lockBlock', children:[
+				{tag:'input', type:'checkbox', id:'autolock'},
+				{tag:'span', html:'auto'},
+				{tag:'a', href:'#', htmlString:Clipperz.PM.Strings['lockMenuLabel'], id:'lock'}
+			]}
+		]});
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom, 
+			{tag:'div', id:'compactMiscLinks', children:[
+				{tag:'a', id:'donateHeaderIconLink', target:'_blank', href:Clipperz.PM.Strings['donateHeaderLinkUrl'], children:[
+					{tag:'img', id:'donateHeaderLinkIcon', src:'./images/smiles_small.gif'}
+				]},
+				{tag:'ul', children:[
+					{tag:'li', children:[{tag:'a', id:'donateHeaderLink', html:'donate', target:'_blank'}]},
+					{tag:'li', children:[{tag:'a', id:'creditsHeaderLink', html:'credits', target:'_blank'}]},
+					{tag:'li', children:[{tag:'a', id:'feedbackHeaderLink', html:'feedback', target:'_blank'}]},
+					{tag:'li', children:[{tag:'a', id:'helpHeaderLink', html:'help', target:'_blank'}]},
+					{tag:'li', children:[{tag:'a', id:'forumHeaderLink', html:'forum', target:'_blank'}]}
+				]}
+			]}
+		);
+
+		YAHOO.ext.Element.get('lockBlock').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		Clipperz.NotificationCenter.notify(this, 'switchLanguage');
+	},
+
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});
+
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Compact/CompactInterface.js b/frontend/beta/js/Clipperz/PM/Components/Compact/CompactInterface.js
new file mode 100644
index 0000000..492f815
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Compact/CompactInterface.js
@@ -0,0 +1,312 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Compact) == 'undefined') { Clipperz.PM.Components.Compact = {}; }
+
+Clipperz.PM.Components.Compact.CompactInterface = function(anElement, args) {
+
+    Clipperz.PM.Components.Compact.CompactInterface.superclass.constructor.call(this, anElement, args);
+
+	this._directLoginItemTemplate = null;
+	this._user = args.user;
+	this._autoLockTimer = null;
+	
+	Clipperz.NotificationCenter.register(null, 'updatedProgressState', this, 'userNotificationHandler')
+	Clipperz.NotificationCenter.register(null, 'directLoginAdded', this, 'directLoginAddedHandler');
+	
+	this.render();
+	
+	return this;
+};
+
+YAHOO.extendX(Clipperz.PM.Components.Compact.CompactInterface, Clipperz.PM.Components.BaseComponent, {
+	
+	'toString': function() {
+		return "Clipperz.PM.Components.Compact.CompactInterface";
+	},
+
+	//-----------------------------------------------------
+	
+	'render': function() {
+		var result;
+		var	layout;
+		var registerButton;
+		
+//MochiKit.Logging.logDebug(">>> CompactInterface.render");
+		this.element().update("");
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', children:[
+			{tag:'div', id:this.getId('cantentPanel'), children:[
+				{tag:'h4', id:this.getId('message')},
+				{tag:'ul', id:'directLogins', children:[]}
+			]},
+			{tag:'div', id:this.getId('lockPanel'), cls:'lockPanel', children:[
+				{tag:'div', htmlString:Clipperz.PM.Strings['lockDescription']},
+				{tag:'form', id:'lockDialogForm', children:[
+					{tag:'input', type:'password', id:this.getId('lockPassphrase')}
+				]},
+				{tag:'div', id:this.getId('unlock')}
+			]}
+		]});
+
+		this.getElement('lockPanel').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+
+		YAHOO.ext.Element.get('lockBlock').show();
+		MochiKit.Signal.connect(YAHOO.ext.Element.get('lock').dom, 'onclick', this, 'doLockEventHandler');
+		new YAHOO.ext.Button(this.getId('unlock'), {text:Clipperz.PM.Strings['unlockButtonLabel'], handler:this.doUnlockEventHandler, scope:this, minWidth:0});
+		this.getElement('unlock').swallowEvent('click', true);
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('lockPassphrase'));
+		MochiKit.Signal.connect('lockDialogForm', 'onsubmit', this, 'doUnlockEventHandler');
+
+		this.getElement('cantentPanel').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+//MochiKit.Logging.logDebug("<<< CompactInterface.render");
+
+		return result;
+	},
+
+	//-----------------------------------------------------
+
+	'directLoginAddedHandler': function(anEvent) {
+		this.redrawDirectLoginItems();
+	},
+
+	//-----------------------------------------------------
+
+	'compareDirectLogins': function(a, b) {
+		return MochiKit.Base.compare(a.label().toLowerCase(), b.label().toLowerCase());
+	},
+
+	//-----------------------------------------------------
+
+	'redrawDirectLoginItems': function() {
+		var template;
+		var allDirectLogins;
+
+		this.getElement('message').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+//MochiKit.Logging.logDebug(">>> CompactInterface.redrawDirectLoginItems");
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 0");
+		MochiKit.Iter.forEach(YAHOO.ext.Element.get('directLogins').getChildrenByTagName('li'), function(aDirectLoginElement) {
+			MochiKit.Signal.disconnectAll(aDirectLoginElement.dom);
+//MochiKit.Logging.logDebug("disconnecting IMG " + aDirectLoginElement.getChildrenByTagName('img')[0].dom.src);
+			MochiKit.Signal.disconnectAll(aDirectLoginElement.getChildrenByTagName('img')[0].dom);
+		})
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 1");
+		YAHOO.ext.Element.get('directLogins').update("");
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 2");
+		allDirectLogins = MochiKit.Base.values(this.user().directLoginReferences());
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 3");
+		allDirectLogins.sort(this.compareDirectLogins);
+
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 4");
+		template = this.directLoginItemTemplate();
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 5");
+		MochiKit.Iter.forEach(allDirectLogins, MochiKit.Base.bind(function(aDirectLogin) {
+			var	directLoginElement;
+			var	faviconImageElementID;
+			
+			faviconImageElementID = aDirectLogin.reference() + "_faviconIMG";
+			directLoginElement = template.append('directLogins', {
+				elementID:faviconImageElementID,
+				faviconUrl:aDirectLogin.fixedFavicon(), 
+				directLoginTitle:aDirectLogin.label(),
+				directLoginReference:aDirectLogin.reference()
+			}, true);
+//MochiKit.Logging.logDebug("--- CompactInterface.redrawDirectLoginItems - 6: " + recordElement.dom);
+			directLoginElement.addClassOnOver("hover");
+			MochiKit.Signal.connect(directLoginElement.dom, 'onclick', this, 'handleDirectLoginClick');
+
+			MochiKit.Signal.connect(faviconImageElementID, 'onload', this, 'handleLoadedFaviconImage');
+			MochiKit.Signal.connect(faviconImageElementID, 'onerror', aDirectLogin, 'handleMissingFaviconImage');
+			MochiKit.Signal.connect(faviconImageElementID, 'onabort', aDirectLogin, 'handleMissingFaviconImage');
+			
+//			YAHOO.ext.Element.get(faviconImageElementID).dom.src = aDirectLogin.fixedFavicon();
+		}, this));
+		
+		this.resetAutoLockTimer();
+//MochiKit.Logging.logDebug("<<< CompactInterface.redrawDirectLoginItems");
+	},
+
+	//-----------------------------------------------------
+
+	'directLoginItemTemplate': function() {
+		if (this._directLoginItemTemplate == null) {
+			this._directLoginItemTemplate = Clipperz.YUI.DomHelper.createTemplate({tag:'li', id:'{directLoginReference}', children:[
+				{tag:'table', border:'0', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', width:'20', align:'center', valign:'top', children:[
+								{tag:'img', id:'{elementID}', src:'{faviconUrl}'}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'a', cls:'directLoginItemTitle', html:'{directLoginTitle}'}
+							]}
+						]}
+					]}
+				]}
+			]});
+			this._directLoginItemTemplate.compile();
+		}
+		
+		return this._directLoginItemTemplate;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleDirectLoginClick': function(anEvent) {
+		var	directLoginReference;
+//MochiKit.Logging.logDebug(">>> MainPanel.handleDirectLoginClick !!!");
+
+		directLoginReference = this.user().directLoginReferences()[anEvent.src().id];
+		this.openDirectLogin(directLoginReference);
+		this.resetAutoLockTimer();
+//MochiKit.Logging.logDebug("<<< MainPanel.handleDirectLoginClick");		
+	},
+
+	//-----------------------------------------------------
+
+	'openDirectLogin': function(aDirectLoginReference) {
+		var	deferredResult;
+		var	newWindow;
+				
+//MochiKit.Logging.logDebug(">>> MainPanel.openDirectLogin - " + aDirectLoginReference.label());
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.openDirectLogin - 1: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(aDirectLoginReference, 'setupJumpPageWindow'));
+		deferredResult.addCallback(MochiKit.Base.method(aDirectLoginReference, 'deferredDirectLogin'));
+		deferredResult.addCallback(function(aDirectLogin) {
+			aDirectLogin.runDirectLogin(newWindow);
+		});
+
+		newWindow = window.open(Clipperz.PM.Strings['directLoginJumpPageUrl'], "");
+//		MochiKit.Signal.connect(newWindow, 'onload', MochiKit.Base.method(deferredResult, 'callback', newWindow))
+//		MochiKit.Signal.connect(newWindow, 'onload', MochiKit.Base.partial(alert, "done"));
+		deferredResult.callback(newWindow);
+//MochiKit.Logging.logDebug("<<< MainPanel.openDirectLogin");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleLoadedFaviconImage': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.handleLoadedFaviconImage");
+		MochiKit.Signal.disconnectAll(anEvent.src())
+//MochiKit.Logging.logDebug("<<< MainPanel.handleLoadedFaviconImage");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'doLockEventHandler': function(anEvent) {
+		anEvent.stop();
+		this.lock();
+	},
+
+	'doUnlockEventHandler': function(anEvent) {
+		if (typeof(anEvent.stop) != 'undefined') {
+			anEvent.stop();
+		}
+		this.unlock();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'autolock': function() {
+		var	shouldAutoLock;
+		
+		shouldAutoLock = YAHOO.ext.Element.get('autolock').dom.checked;
+		
+		if (shouldAutoLock) {
+			this.lock();
+		} else {
+			this.resetAutoLockTimer();
+		}
+	},
+	
+	'lock': function() {
+//MochiKit.Logging.logDebug(">>> lock");
+		this.getDom('lockPassphrase').value = "";
+		this.getElement('lockPanel').show();
+		this.getElement('cantentPanel').hide();
+		YAHOO.ext.Element.get('lockBlock').hide();
+		//this.getElement('lockPassphrase').focus();
+//MochiKit.Logging.logDebug("<<< lock");
+	},
+	
+	'unlock': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> unlock");
+		if (this.getDom('lockPassphrase').value == this.user().passphrase()) {
+			this.getElement('lockPanel').hide();
+			this.getElement('cantentPanel').show();
+			YAHOO.ext.Element.get('lockBlock').show();
+			this.resetAutoLockTimer();
+		} else {
+			this.getDom('lockPassphrase').value = "";
+			this.getElement('lockPassphrase').focus();
+		}
+//MochiKit.Logging.logDebug("<<< unlock");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+	
+	//-----------------------------------------------------
+
+	'autoLockTimer': function() {
+		if (this._autoLockTimer == null) {
+//MochiKit.Logging.logDebug("--- timer started - 1");
+			this._autoLockTimer = MochiKit.Async.callLater(60, MochiKit.Base.method(this, 'autolock'));
+//MochiKit.Logging.logDebug("--- timer started - 2");
+		}
+		
+		return this._autoLockTimer;
+	},
+
+	'resetAutoLockTimer': function() {
+//MochiKit.Logging.logDebug(">>> timer resetted");
+		this.autoLockTimer().cancel();
+		this._autoLockTimer = null;
+//MochiKit.Logging.logDebug("--- timer resetted - 1");
+		this.autoLockTimer();
+//MochiKit.Logging.logDebug("<<< timer resetted");
+	},
+
+	//-----------------------------------------------------
+	
+	'userNotificationHandler': function(anEvent) {
+		this.getElement('message').update(anEvent.parameters().text);
+	},
+	
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});
+
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Compact/LoginForm.js b/frontend/beta/js/Clipperz/PM/Components/Compact/LoginForm.js
new file mode 100644
index 0000000..d708464
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Compact/LoginForm.js
@@ -0,0 +1,189 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Compact) == 'undefined') { Clipperz.PM.Components.Compact = {}; }
+
+Clipperz.PM.Components.Compact.LoginForm = function(anElement, args) {
+
+    Clipperz.PM.Components.Compact.LoginForm.superclass.constructor.call(this, anElement, args);
+
+	this.render();
+	Clipperz.NotificationCenter.register(null, 'updatedProgressState', this, 'userNotificationHandler')
+	
+	return this;
+};
+
+YAHOO.extendX(Clipperz.PM.Components.Compact.LoginForm, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Compact.LoginForm";
+	},
+
+	//-----------------------------------------------------
+	
+	'render': function() {
+		var result;
+		var	layout;
+		
+		MochiKit.Signal.disconnectAllTo(this);
+		this.element().update("");
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', id:this.getId('baseDiv'), cls:'LoginPanel', children:[
+			{tag:'div', id:'compactHeader'},
+			{tag:'div', id:'compactBody', children:[
+				{tag:'form', id:this.getId('loginForm_form'), children:[
+					{tag:'dl', children:[
+						{tag:'dt', htmlString:Clipperz.PM.Strings['loginFormUsernameLabel']},
+						{tag:'dd', children:[
+							{tag:'input', id:this.getId('login_username'), type:'text', size:'30', name:'username'}
+						]},
+						{tag:'dt', htmlString:Clipperz.PM.Strings['loginFormPassphraseLabel']},
+						{tag:'dd', children:[
+							{tag:'input', id:this.getId('login_passphrase'), type:'password', size:'30', name:'passphrase'}
+						]}
+					]},
+					{tag:'div', id:this.getId('login_submit')}
+				]},
+				{tag:'h4', id:this.getId('message')}
+			]}
+		]});
+
+		new Clipperz.PM.Components.Compact.CompactHeader(YAHOO.ext.Element.get('compactHeader'));
+
+		MochiKit.Signal.connect(this.getId('loginForm_form'), 'onsubmit', this, 'stopFormSubmit');
+		new YAHOO.ext.Button(this.getId('login_submit'), {text:Clipperz.PM.Strings['loginFormButtonLabel'], handler:this.doLogin, scope:this, minWidth:0});
+		this.getElement('login_submit').swallowEvent('click', true);
+		
+		MochiKit.Signal.connect(this.getId('loginForm_form'), 'onkeydown', this, 'onkeydown');
+
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('login_passphrase'));
+		this.getElement('login_username').focus();
+
+		return result;
+	},
+
+	//-----------------------------------------------------
+	
+	'doLogin': function(e) {
+//MochiKit.Logging.logDebug(">>> compact.LoginForm.doLogin");
+		if (this.checkLoginForm()) {
+			this.doLoginWithUsernameAndPassphrase(this.getDom('login_username').value, this.getDom('login_passphrase').value);
+		}
+//MochiKit.Logging.logDebug("<<< compact.LoginForm.doLogin");
+	},
+
+	//.........................................................................
+
+	'doLoginWithUsernameAndPassphrase': function(anUsername, aPassphrase) {
+		var deferredResult;
+		var user;
+
+//MochiKit.Logging.logDebug(">>> compact.LoginForm.doLoginWithUsernameAndPassphrase");
+		user = new Clipperz.PM.DataModel.User({username:anUsername, passphrase:aPassphrase});
+
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(MochiKit.Base.method(user, 'connect'));
+		deferredResult.addCallback(MochiKit.Base.method(user, 'loadPreferences'));
+		deferredResult.addCallback(MochiKit.Base.method(user, 'loadRecords'));
+		deferredResult.addCallback(MochiKit.Base.method(user, 'loadDirectLogins'));
+		deferredResult.addErrback(MochiKit.Base.bind(function() {
+			this.getElement('loginForm_form').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show();
+			this.getElement('message').update(Clipperz.PM.Strings['loginMessagePanelFailureText']);
+			this.getDom('login_passphrase').value = "";
+			this.getElement('login_passphrase').focus();
+		}, this))
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("compact.LoginForm.doLogin - 6: " + res); return res;});
+		deferredResult.callback("token");
+//MochiKit.Logging.logDebug("<<< compact.LoginForm.doLoginWithUsernameAndPassphrase");
+		
+		return deferredResult;
+	},
+	
+	//.........................................................................
+
+	'checkLoginForm': function() {
+		var result;
+		var username
+		var	passphrase;
+
+//MochiKit.Logging.logDebug(">>> checkLoginForm");
+		username = this.getDom('login_username').value;
+		passphrase = this.getDom('login_passphrase').value;
+		
+		if ((username != "") && (passphrase != "")) {
+			result = true;
+		} else {
+			if (username == "") {
+				this.getElement('login_username').focus();
+			} else if (passphrase == "") {
+				this.getElement('login_passphrase').focus();
+			}
+			
+			result = false;
+		}
+//MochiKit.Logging.logDebug("<<< checkLoginForm - " + result);
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'stopFormSubmit': function(anEvent) {
+		anEvent.stop();
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'onkeydown': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> onkeydown - " + anEvent.src().id);
+		if (anEvent.key().code == 13) {
+			this.doLogin();
+			anEvent.stop();
+		}
+	},
+
+	//-----------------------------------------------------
+
+	'userNotificationHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> compact.LoginForm.userNotificationHandler");
+//MochiKit.Logging.logDebug("userNotificationHandler - event: " + anEvent.event());
+		this.getElement('loginForm_form').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		if (this.getDom('message') != null) {
+			this.getElement('message').update(Clipperz.PM.Strings.messagePanelConfigurations[anEvent.parameters()]()['text']);
+		}
+//MochiKit.Logging.logDebug("<<< compact.LoginForm.userNotificationHandler");
+	},
+
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});
+
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportColumns.js b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportColumns.js
new file mode 100644
index 0000000..18b36da
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportColumns.js
@@ -0,0 +1,174 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+if (typeof(Clipperz.PM.Components.Import.CSVImport) == 'undefined') { Clipperz.PM.Components.Import.CSVImport = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.CSVImport.CSVImportColumns = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.CSVImport.CSVImportColumns.superclass.constructor.call(this, anElement, args);
+	this._mainComponent = args.mainComponent;
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.CSVImport.CSVImportColumns, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.CSVImport.CSVImportColumns component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var i,c;
+		var columnSelectorCheckboxCells;
+		var checkboxes;
+		var data;
+
+//MochiKit.Logging.logDebug(">>> CSVImportColumns.render");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.element().update("");
+
+		data = this.mainComponent().parsedValues();
+		columnSelectorCheckboxCells = [];
+		
+		c =	data[0].length;
+		for (i=0; i<c; i++) {
+			columnSelectorCheckboxCells.push({tag:'th', valign:'top', cls:(this.mainComponent().isColumnSelected(i) ? 'selectedColumn': 'skippedColumn'), children:[
+				{tag:'input', type:'checkbox', id:this.getId('columnCheckbox_' + i), value:i}
+			]})
+		}
+		
+		this.domHelper().append(this.element(), {tag:'div', children:[
+			{tag:'div', cls:'importStepDescription', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Columns']},
+			{tag:'div', id:this.getId('dataDiv'), cls:'csvImportPreview', children:[
+				{tag:'table', id:this.getId('previewDada'), cls:'csvImportPreview columns', cellspacing:'0', children:[
+					{tag:'thead', id:this.getId('previewData_thead'), children:[
+						{tag:'tr', children:columnSelectorCheckboxCells}
+					]},
+					{tag:'tbody', id:this.getId('previewData_tbody'), children:[]}
+				]}
+			]}
+		]});
+
+		c =	data[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				this.getDom('columnCheckbox_' + i).checked = true;
+			}
+		}
+		
+		this.renderData(this.getElement('previewData_tbody'), data);
+
+		checkboxes = MochiKit.DOM.getElementsByTagAndClassName('input', null, this.getDom('previewData_thead'));
+		c = checkboxes.length;
+		for (i=0; i<c; i++) {
+			MochiKit.Signal.connect(checkboxes[i], 'onclick', this, 'renderDataHandler');
+		}
+//MochiKit.Logging.logDebug("<<< CSVImportColumns.render");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'renderData': function(anElement, someData) {
+		var config;
+		var i,c;
+		
+//MochiKit.Logging.logDebug(">>> CSVImportColumns.renderData");
+//		anElement.update("");
+		MochiKit.DOM.replaceChildNodes(anElement.dom);
+
+		config = MochiKit.Base.map(MochiKit.Base.bind(function(aRowData) {
+			var result;
+			var i,c;
+			
+			result = {tag:'tr', children:[]};
+			c = aRowData.length;
+			for (i=0; i<c; i++) {
+				var field;
+				
+				field = aRowData[i];
+				result.children.push({tag:'td', valign:'top', cls:(this.mainComponent().isColumnSelected(i) ? 'selectedColumn': 'skippedColumn'), html:(MochiKit.Base.isNotEmpty(field) ? field.replace(/\n/g, '<br>') : '&nbsp;')});
+			}
+			
+			return result;
+		}, this), someData);
+		
+		MochiKit.Base.map(function(aRowConfig) {Clipperz.YUI.DomHelper.append(anElement, aRowConfig);}, config);
+
+		Clipperz.Style.applyZebraStylesToTable(this.getId('previewDada'));
+//MochiKit.Logging.logDebug("<<< CSVImportColumns.renderData");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderDataHandler': function(anEvent) {
+		var thElement;
+		
+		thElement = YAHOO.ext.Element.get(anEvent.src().parentNode);
+
+		if (anEvent.src().checked == true) {
+			this.mainComponent().skippedColumns().remove(anEvent.src().value);
+			thElement.addClass('selectedColumn');
+			thElement.removeClass('skippedColumn');
+		} else {
+			this.mainComponent().skippedColumns().add(anEvent.src().value);
+			thElement.removeClass('selectedColumn');
+			thElement.addClass('skippedColumn');
+		}
+
+		if (this.mainComponent().skippedColumns().allItems().length == this.mainComponent().parsedValues()[0].length) {
+			this.mainComponent().nextButton().disable();
+		} else {
+			this.mainComponent().nextButton().enable();
+		}
+		
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportFields.js b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportFields.js
new file mode 100644
index 0000000..a368747
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportFields.js
@@ -0,0 +1,247 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+if (typeof(Clipperz.PM.Components.Import.CSVImport) == 'undefined') { Clipperz.PM.Components.Import.CSVImport = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.CSVImport.CSVImportFields = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.CSVImport.CSVImportFields.superclass.constructor.call(this, anElement, args);
+	this._mainComponent = args.mainComponent;
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.CSVImport.CSVImportFields, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.CSVImport.CSVImportFields component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	fieldsHeaderCells;
+		var titleColumnIndex;
+		var notesColumnIndex;
+		var i,c;
+
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.element().update("");
+
+		titleColumnIndex = this.mainComponent().titleColumnIndex()
+		notesColumnIndex = this.mainComponent().notesColumnIndex()
+
+		fieldsHeaderCells = [];
+		fieldsHeaderCells.push({tag:'td', valign:'top', cls:'title', html:this.mainComponent().labelForColumn(titleColumnIndex)});
+		
+		c =	this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if ((i != titleColumnIndex) && (i != notesColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+				var trimmedLabel;
+				
+				trimmedLabel = Clipperz.Base.trim(this.mainComponent().labelForColumn(i));
+				fieldsHeaderCells.push({tag:'td', valign:'top', id:this.getId('fieldHeaderTD_' + i), cls:((trimmedLabel == "") ? 'missingLabelWarning' : (this.isColumnSetup(i) ? 'configuredColumn': 'unconfiguredColumn')), children:[
+					{tag:'span', html:((trimmedLabel == "") ? Clipperz.PM.Strings['CSV_ImportWizard_Fields_MissingLabelWarning'] : trimmedLabel)/*, cls:((trimmedLabel == "") ? 'missingLabelWarning' : '')*/},
+					{tag:'select', id:this.getId('select_' + i), name:i, children:[
+						{tag:'option', value:'UNDEFINED', html:"select data type", cls:'disabledOption'},
+						{tag:'option', value:'TXT', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['TXT']['shortDescription']},
+						{tag:'option', value:'PWD', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['PWD']['shortDescription']},
+						{tag:'option', value:'URL', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['URL']['shortDescription']},
+						{tag:'option', value:'DATE', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['DATE']['shortDescription']},
+						{tag:'option', value:'ADDR', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['ADDR']['shortDescription']}
+					]}
+				]})
+			}
+		}
+
+		if (notesColumnIndex != -1) {
+			fieldsHeaderCells.push({tag:'td', valign:'top', cls:'notes', html:this.mainComponent().labelForColumn(notesColumnIndex)});
+		}
+
+		this.domHelper().append(this.element(), {tag:'div', children:[
+			{tag:'div', cls:'importStepDescription', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Fields']},
+			{tag:'div', id:this.getId('dataDiv'), children:[
+				{tag:'div', children:[
+				]},
+				{tag:'div', cls:'csvImportPreview', children:[
+					{tag:'table', id:this.getId('previewDada'), cls:'csvImportPreview', cellspacing:'0', children:[
+						{tag:'thead', id:this.getId('previewData_thead'), children:[
+							{tag:'tr', cls:'CSV_previewData_header', children:fieldsHeaderCells}
+						]},
+						{tag:'tbody', id:this.getId('previewData_tbody'), children:[]}
+					]}
+				]}
+			]}
+		]});
+		
+		for (i=0; i<c; i++) {
+			if ((i != titleColumnIndex) && (i != notesColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+				Clipperz.DOM.selectOptionMatchingValue(this.getDom('select_' + i), this.mainComponent().typeForColumn(i));
+				MochiKit.Signal.connect(this.getDom('select_' + i), 'onchange', this, 'renderDataRowsHandler');
+			}
+		}
+		
+		this.renderDataRows(this.getElement('previewData_tbody'));
+//		Clipperz.NotificationCenter.register(null, 'updatedCSVImportColumnHeader', this, 'renderDataRowsHandler');
+	},
+
+	//-------------------------------------------------------------------------
+
+	'isColumnSetup': function(aColumnIndex) {
+		return ((Clipperz.Base.trim(this.mainComponent().labelForColumn(aColumnIndex)) != "") && (this.mainComponent().typeForColumn(aColumnIndex) != 'UNDEFINED'));
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderDataRowsHandler': function(anEvent) {
+		var columnIndex;
+		var tdElement;
+
+//MochiKit.Logging.logDebug(">>> renderDataRowsHandler")
+		columnIndex = anEvent.src().name;
+		this.mainComponent().setTypeForColumn(anEvent.src().value, columnIndex);
+		
+		tdElement = this.getElement('fieldHeaderTD_' + columnIndex);
+		
+		if (this.isColumnSetup(columnIndex)) {
+			tdElement.removeClass('unconfiguredColumn');
+			tdElement.addClass('configuredColumn');
+		} else {
+			tdElement.addClass('unconfiguredColumn');
+			tdElement.removeClass('configuredColumn');
+		}
+		
+		this.renderDataRows(this.getElement('previewData_tbody'));
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'renderDataRows': function(anElement) {
+		var titleColumnIndex;
+		var notesColumnIndex;
+		var data
+		var i,c;
+
+//MochiKit.Logging.logDebug("#### >> renderDataRows");
+//		anElement.update("");
+		MochiKit.DOM.replaceChildNodes(anElement.dom);
+
+		if (this.mainComponent().isFirstRowHeader()) {
+			data = this.mainComponent().parsedValues().slice(1);
+		} else {
+			data = this.mainComponent().parsedValues();
+		}
+		
+		
+		titleColumnIndex = this.mainComponent().titleColumnIndex();
+		notesColumnIndex = this.mainComponent().notesColumnIndex();
+		
+		c = data.length;
+		for (i=0; i<c; i++) {
+			var rowData;
+			var rowConfig;
+			var ii, cc;
+			
+			rowData = data[i];
+			
+			rowConfig = {tag:'tr', children:[
+				{tag:'td', valign:'top', cls:'title', html:(MochiKit.Base.isNotEmpty(rowData[titleColumnIndex]) ? rowData[titleColumnIndex].replace(/\n/g, '<br>') : '&nbsp;')}
+			]};
+
+			cc = rowData.length;
+			for (ii=0; ii<cc; ii++) {
+//				if ((ii != titleColumnIndex) && (ii != notesColumnIndex)) {
+				if ((ii != titleColumnIndex) && (ii != notesColumnIndex) && (this.mainComponent().isColumnSelected(ii))) {
+					rowConfig.children.push({
+						tag:'td',
+						valign:'top',
+						cls:(this.isColumnSetup(ii) ? 'configuredColumn' : 'unconfiguredColumn'),
+						html:(MochiKit.Base.isNotEmpty(rowData[ii]) ? rowData[ii].replace(/\n/g, '<br>') : '&nbsp;')
+					});
+				}
+			}
+			if (notesColumnIndex != -1) {
+				rowConfig.children.push({tag:'td', valign:'top', cls:'notes', html:(MochiKit.Base.isNotEmpty(rowData[notesColumnIndex]) ? rowData[notesColumnIndex].replace(/\n/g, '<br>') : '&nbsp;')});
+			}
+			
+			this.domHelper().append(anElement, rowConfig);
+		}
+
+		Clipperz.Style.applyZebraStylesToTable(this.getId('previewDada'));
+
+		this.checkWetherToEnableNextButton();
+//MochiKit.Logging.logDebug("#### << renderDataRows");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'checkWetherToEnableNextButton': function() {
+		var result;
+		var titleColumnIndex;
+		var notesColumnIndex;
+		var i,c;
+
+		titleColumnIndex = this.mainComponent().titleColumnIndex()
+		notesColumnIndex = this.mainComponent().notesColumnIndex()
+
+		result = true;
+		c =	this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if ((i != titleColumnIndex) && (i != notesColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+				result = result && this.isColumnSetup(i);
+			}
+		}
+		
+		if (result) {
+			this.mainComponent().nextButton().enable();
+		} else {
+			this.mainComponent().nextButton().disable();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportHeader.js b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportHeader.js
new file mode 100644
index 0000000..ebd243a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportHeader.js
@@ -0,0 +1,240 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+if (typeof(Clipperz.PM.Components.Import.CSVImport) == 'undefined') { Clipperz.PM.Components.Import.CSVImport = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.CSVImport.CSVImportHeader = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.CSVImport.CSVImportHeader.superclass.constructor.call(this, anElement, args);
+	this._mainComponent = args.mainComponent;
+
+	this._pendingDeferredLabelFieldHandlerEvents = 0;
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.CSVImport.CSVImportHeader, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.CSVImport.CSVImportHeader component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var thConfigs;
+		var i,c;
+		
+//MochiKit.Logging.logDebug(">>> CSVImportHeader.render");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		thConfigs = [];
+		c = this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+//				thConfigs.push({tag:'th', children:[{tag:'input', type:'text', id:this.getId('headerTextField_' + i), value:this.mainComponent().labelForColumn(i)}]});
+				thConfigs.push({tag:'th', children:[{tag:'input', type:'text', id:this.getId('headerTextField_' + i), value:""}]});
+			}
+		}
+		
+		this.element().update("");
+		this.domHelper().append(this.element(), {tag:'div', children:[
+			{tag:'div', cls:'importStepDescription', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Header']},
+			{tag:'div', cls:'importStepParameters', children:[
+				{tag:'input', type:'checkbox', name:'isFistRowHeader', id:this.getId('isFirstRowHeader_checkbox')},
+				{tag:'span', id:this.getId('isFirstRowHeader_span'), cls:'clickableSpan', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Header_Settings_firstRowHeaderLabel']}
+			]},
+			{tag:'div', id:this.getId('dataDiv'), children:[
+				{tag:'div', cls:'csvImportPreview', children:[
+					{tag:'table', id:this.getId('previewDada'), cls:'csvImportPreview header', cellspacing:'0', children:[
+						{tag:'thead', children:[{tag:'tr', children:thConfigs}]},
+						{tag:'tbody', id:this.getId('previewData_tbody')}
+					]}
+				]}
+			]}
+		]});
+
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				this.getElement('headerTextField_' + i).dom.value = this.mainComponent().labelForColumn(i);
+			}
+		}
+		
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+
+		if (this.mainComponent().isFirstRowHeader()) {
+			this.getDom('isFirstRowHeader_checkbox').click();
+		}
+
+		c = this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				MochiKit.Signal.connect(this.getDom('headerTextField_' + i), 'onchange',   MochiKit.Base.partial(MochiKit.Base.method(this, 'labelFieldHandler'), i));
+				MochiKit.Signal.connect(this.getDom('headerTextField_' + i), 'onkeypress', MochiKit.Base.partial(MochiKit.Base.method(this, 'deferredLabelFieldHandler'), i));
+			}
+		}
+
+		MochiKit.Signal.connect(this.getDom('isFirstRowHeader_checkbox'), 'onclick', this, 'toggleFirstRowHeaderCheckboxHandler');
+		if (Clipperz_IEisBroken != true) {
+			MochiKit.Signal.connect(this.getDom('isFirstRowHeader_span'), 'onclick', this.getDom('isFirstRowHeader_checkbox'), 'click');
+		}
+//MochiKit.Logging.logDebug("<<< CSVImportHeader.render");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'renderData': function(anElement, someData) {
+		var trConfigs;
+		var data;
+		var i,c;
+		
+//		anElement.update("");
+		MochiKit.DOM.replaceChildNodes(anElement.dom);
+
+		if (this.mainComponent().isFirstRowHeader()) {
+			data = someData.slice(1);
+		} else {
+			data = someData;
+		}
+		
+		trConfigs = MochiKit.Base.map(MochiKit.Base.bind(function(aRowData) {
+			var result;
+			var i,c;
+			
+			result = {tag:'tr', children:[]};
+			c = aRowData.length;
+			for (i=0; i<c; i++) {
+				if (this.mainComponent().isColumnSelected(i)) {
+					result.children.push({tag:'td', valign:'top', html:(MochiKit.Base.isNotEmpty(aRowData[i]) ? aRowData[i].replace(/\n/g, '<br>') : '&nbsp;')});
+				}
+			}
+			
+			return result;
+		}, this), data);
+		
+		MochiKit.Base.map(function(aRowConfig) {Clipperz.YUI.DomHelper.append(anElement, aRowConfig);}, trConfigs);
+
+		Clipperz.Style.applyZebraStylesToTable(this.getId('previewDada'));
+	},
+
+	//-------------------------------------------------------------------------
+
+	'toggleFirstRowHeaderCheckboxHandler': function() {
+		var firstRowData;
+		var i,c;
+
+//MochiKit.Logging.logDebug(">>> toggleFirstRowHeaderCheckboxHandler");
+		this.mainComponent().setIsFirstRowHeader(this.getDom('isFirstRowHeader_checkbox').checked);
+
+		firstRowData = this.mainComponent().parsedValues()[0];
+		
+		c = firstRowData.length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				var label;
+				
+				if (this.mainComponent().isFirstRowHeader()) {
+					label = firstRowData[i];
+				} else {
+					label = null;
+				}
+
+				this.mainComponent().setLabelForColumn(label, i);
+			}
+		};
+
+		this.updateInputFieldValues();
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+//MochiKit.Logging.logDebug("<<< toggleFirstRowHeaderCheckboxHandler");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateInputFieldValues': function() {
+		var i,c;
+
+//MochiKit.Logging.logDebug(">>> updateInputFieldValues");
+		c = this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				this.getDom('headerTextField_' + i).value = this.mainComponent().labelForColumn(i);
+			}
+		}
+//console.log('[1] fieldSettings', fieldSettings);
+//MochiKit.Logging.logDebug("<<< updateInputFieldValues");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'labelFieldHandler': function(aColumnIndex, anEvent) {
+		var inputField;
+		
+//MochiKit.Logging.logDebug(">>> labelFieldHandler");
+		inputField = anEvent.src();
+		
+		this.mainComponent().setLabelForColumn(inputField.value, aColumnIndex);
+//MochiKit.Logging.logDebug("##### [" + anEvent.src().id + "] -> label[" + aColumnIndex + "]: '" + inputField.value + "'");
+//MochiKit.Logging.logDebug("<<< labelFieldHandler");
+	},
+	
+	'deferredLabelFieldHandler': function(aColumnIndex, anEvent) {
+//MochiKit.Logging.logDebug(">>> deferredLabelFieldHandler");
+		this._pendingDeferredLabelFieldHandlerEvents ++;
+		MochiKit.Async.callLater(1, MochiKit.Base.partial(MochiKit.Base.method(this, 'deferredLabelFieldHandlerCatcher'), aColumnIndex, anEvent));
+//MochiKit.Logging.logDebug("<<< deferredLabelFieldHandler");
+	},
+
+	'deferredLabelFieldHandlerCatcher': function(aColumnIndex, anEvent) {
+//MochiKit.Logging.logDebug(">>> deferredLabelFieldHandlerCatcher");
+		this._pendingDeferredLabelFieldHandlerEvents --;
+		if (this._pendingDeferredLabelFieldHandlerEvents == 0) {
+			this.labelFieldHandler(aColumnIndex, anEvent);
+		}
+//MochiKit.Logging.logDebug("<<< deferredLabelFieldHandlerCatcher");
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportNotes.js b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportNotes.js
new file mode 100644
index 0000000..a53c531
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportNotes.js
@@ -0,0 +1,212 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+if (typeof(Clipperz.PM.Components.Import.CSVImport) == 'undefined') { Clipperz.PM.Components.Import.CSVImport = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.CSVImport.CSVImportNotes = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.CSVImport.CSVImportNotes.superclass.constructor.call(this, anElement, args);
+	this._mainComponent = args.mainComponent;
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.CSVImport.CSVImportNotes, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.CSVImport.CSVImportNotes component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	notesSelectorCheckboxCells;
+		var totalNumberOfColumns;
+		var titleColumnIndex;
+		var notesColumnIndex;
+		var i,c;
+
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.element().update("");
+
+		titleColumnIndex = this.mainComponent().titleColumnIndex()
+		notesColumnIndex = this.mainComponent().notesColumnIndex()
+
+		totalNumberOfColumns = this.mainComponent().parsedValues()[0].length;
+		
+		notesSelectorCheckboxCells = [{tag:'th', cls:'title', html:this.mainComponent().labelForColumn(titleColumnIndex)}];
+		c =	totalNumberOfColumns;
+		for (i=0; i<c; i++) {
+			if ((i != titleColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+				notesSelectorCheckboxCells.push({tag:'th', id:this.getId('th_' + i), valign:'top', children:[
+					{tag:'input', type:'radio', id:this.getId('radio_' + i), name:'CSVImportNotesColumn', value:i},
+					{tag:'span', cls:'clickableSpan', id:this.getId('columnLabel_' + i), html:this.mainComponent().labelForColumn(i)}
+				]})
+			}
+		}
+
+		this.domHelper().append(this.element(), {tag:'div', children:[
+			{tag:'div', cls:'importStepDescription', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Notes']},
+			{tag:'div', id:this.getId('dataDiv'), children:[
+				{tag:'div', cls:'importStepParameters', children:[
+					{tag:'input', id:this.getId('doNotSetNotes_radio'), type:'radio', name:'CSVImportNotesColumn', value:-1},
+					{tag:'span', id:this.getId('doNotSetNotes_span'), cls:'clickableSpan', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Notes_Settings_noSelectionLabel']}
+				]},
+				{tag:'div', cls:'csvImportPreview', children:[
+					{tag:'table', id:this.getId('previewDada'), cls:'csvImportPreview', cellspacing:'0', children:[
+						{tag:'thead', id:this.getId('previewData_thead'), children:[
+							{tag:'tr', children:notesSelectorCheckboxCells}
+						]},
+						{tag:'tbody', id:this.getId('previewData_tbody'), children:[]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+
+		if ((notesColumnIndex >= totalNumberOfColumns) || (notesColumnIndex == titleColumnIndex) || !(this.mainComponent().isColumnSelected(notesColumnIndex))) {
+			this.mainComponent().setNotesColumnIndex(-1);
+			notesColumnIndex = -1;
+		}
+		
+		c =	totalNumberOfColumns;
+		for (i=0; i<c; i++) {
+			if ((i != titleColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+				MochiKit.Signal.connect(this.getDom('radio_' + i), 'onclick', this, 'renderDataHandler');
+				if (Clipperz_IEisBroken != true) {
+					MochiKit.Signal.connect(this.getDom('columnLabel_' + i), 'onclick', this.getDom('radio_' + i), 'click');
+				}
+			}
+		}
+
+		MochiKit.Signal.connect(this.getDom('doNotSetNotes_radio'), 'onclick', this, 'renderDataHandler');
+		if (Clipperz_IEisBroken != true) {
+			MochiKit.Signal.connect(this.getDom('doNotSetNotes_span'), 'onclick', this.getDom('doNotSetNotes_radio'), 'click');
+		}
+
+		if (notesColumnIndex == -1) {
+			this.getDom('doNotSetNotes_radio').click();
+		} else {
+			this.getDom('radio_' + notesColumnIndex).click();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'renderData': function(anElement, someData) {
+		var data;
+		var config;
+		var titleColumnIndex;
+		var notesColumnIndex;
+		var i,c;
+		
+//		anElement.update("");
+		MochiKit.DOM.replaceChildNodes(anElement.dom);
+
+		titleColumnIndex = this.mainComponent().titleColumnIndex();
+		notesColumnIndex = this.mainComponent().notesColumnIndex();
+		
+		if (this.mainComponent().isFirstRowHeader()) {
+			data = someData.slice(1);
+		} else {
+			data = someData;
+		}
+
+		
+//		config = [{tag:'tr', cls:'CSV_previewData_header', children:[{tag:'td', valign:'top', html:header[titleColumnIndex], cls:'title'}]}];
+//		c = header.length;
+//		for (i=0; i<c; i++) {
+//			if (i != titleColumnIndex) {
+//				config[0].children.push({tag:'td', valign:'top', html:header[i], cls:((notesColumnIndex == i) ? 'notesColumn': '')})
+//			}
+//		}
+		
+		config = MochiKit.Base.map(MochiKit.Base.bind(function(aTitleColumnIndex, aRowData) {
+			var result;
+			var i,c;
+			
+			result = {tag:'tr', children:[{tag:'td', valign:'top', cls:'title', html:(MochiKit.Base.isNotEmpty(aRowData[aTitleColumnIndex]) ? aRowData[aTitleColumnIndex].replace(/\n/g, '<br>') : '&nbsp;')}]};
+			c = aRowData.length;
+			for (i=0; i<c; i++) {
+				if ((i != titleColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+					result.children.push({tag:'td', valign:'top', cls:((notesColumnIndex == i) ? 'notesColumn': ''), html:(MochiKit.Base.isNotEmpty(aRowData[i]) ? aRowData[i].replace(/\n/g, '<br>') : '&nbsp;')});
+				}
+			}
+			
+			return result;
+		}, this, titleColumnIndex), data);
+		
+		MochiKit.Base.map(function(aRowConfig) {Clipperz.YUI.DomHelper.append(anElement, aRowConfig);}, config);
+
+		Clipperz.Style.applyZebraStylesToTable(this.getId('previewDada'));
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderDataHandler': function(anEvent) {
+		var titleColumnIndex;
+		var i,c;
+		
+		this.mainComponent().setNotesColumnIndex(anEvent.src().value);
+		titleColumnIndex = this.mainComponent().titleColumnIndex();
+
+		c = this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if ((i != titleColumnIndex) && (this.mainComponent().isColumnSelected(i))) {
+				this.getElement('th_' + i).removeClass('notesColumn');
+			}
+		}
+		if (anEvent.src().value != -1) {
+			this.getElement('th_' + anEvent.src().value).addClass('notesColumn');
+		}
+
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportTitle.js b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportTitle.js
new file mode 100644
index 0000000..9162867
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImport/CSVImportTitle.js
@@ -0,0 +1,189 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+if (typeof(Clipperz.PM.Components.Import.CSVImport) == 'undefined') { Clipperz.PM.Components.Import.CSVImport = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.CSVImport.CSVImportTitle = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.CSVImport.CSVImportTitle.superclass.constructor.call(this, anElement, args);
+	this._mainComponent = args.mainComponent;
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.CSVImport.CSVImportTitle, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.CSVImport.CSVImportTitle component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	titleSelectorCheckboxCells;
+		var titleColumnIndex;
+		var i,c;
+		
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.element().update("");
+
+		titleColumnIndex = this.mainComponent().titleColumnIndex()
+		titleSelectorCheckboxCells = [];
+		c =	this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				titleSelectorCheckboxCells.push({tag:'th', valign:'top', id:this.getId('th_' + i), children:[
+					{tag:'input', type:'radio', id:this.getId('radio_' + i), name:'CSVImportTitleColumn', value:i},
+					{tag:'span', cls:'clickableSpan', id:this.getId('columnLabel_' + i), html:this.mainComponent().labelForColumn(i)}
+				]})
+			}
+		}
+		
+		if (titleColumnIndex >= titleSelectorCheckboxCells.length) {
+			this.mainComponent().setTitleColumnIndex(-1);
+		}
+		
+		this.domHelper().append(this.element(), {tag:'div', children:[
+			{tag:'div', cls:'importStepDescription', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Title']},
+			{tag:'div', id:this.getId('dataDiv'), cls:'csvImportPreview', children:[
+				{tag:'table', id:this.getId('previewDada'), cls:'csvImportPreview', cellspacing:'0', children:[
+					{tag:'thead', id:this.getId('previewData_thead'), children:[
+						{tag:'tr', children:titleSelectorCheckboxCells}
+					]},
+					{tag:'tbody', id:this.getId('previewData_tbody'), children:[]}
+				]}
+			]}
+		]});
+		
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+
+		c =	this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				MochiKit.Signal.connect(this.getDom('radio_' + i), 'onclick', this, 'renderDataHandler');
+				if (Clipperz_IEisBroken != true) {
+					MochiKit.Signal.connect(this.getDom('columnLabel_' + i), 'onclick', this.getDom('radio_' + i), 'click');
+				}
+			}
+		}
+		
+		if (titleColumnIndex != -1) {
+			this.getDom('radio_' + titleColumnIndex).click();
+		} else {
+			this.mainComponent().nextButton().disable();
+		}
+		
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'renderData': function(anElement, someData) {
+		var data;
+		var config;
+		var titleColumnIndex;
+		var i,c;
+		
+//		anElement.update("");
+		MochiKit.DOM.replaceChildNodes(anElement.dom);
+
+		titleColumnIndex = this.mainComponent().titleColumnIndex()
+		
+		if (this.mainComponent().isFirstRowHeader()) {
+			data = someData.slice(1);
+		} else {
+			data = someData;
+		}
+
+		config = MochiKit.Base.map(MochiKit.Base.bind(function(aRowData) {
+			var result;
+			var i,c;
+			
+			result = {tag:'tr', children:[]};
+			c = aRowData.length;
+			for (i=0; i<c; i++) {
+				if (this.mainComponent().isColumnSelected(i)) {
+					var field;
+				
+					field = aRowData[i];
+					result.children.push({tag:'td', valign:'top', cls:((titleColumnIndex == i) ? 'titleColumn': ''), html:(MochiKit.Base.isNotEmpty(field) ? field.replace(/\n/g, '<br>') : '&nbsp;')});
+				}
+			}
+			
+			return result;
+		}, this), data);
+		
+		MochiKit.Base.map(function(aRowConfig) {Clipperz.YUI.DomHelper.append(anElement, aRowConfig);}, config);
+
+		Clipperz.Style.applyZebraStylesToTable(this.getId('previewDada'));
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderDataHandler': function(anEvent) {
+		var i,c;
+		
+		this.mainComponent().setTitleColumnIndex(anEvent.src().value);
+
+		c = this.mainComponent().parsedValues()[0].length;
+		for (i=0; i<c; i++) {
+			if (this.mainComponent().isColumnSelected(i)) {
+				this.getElement('th_' + i).removeClass('titleColumn');
+			}
+		}
+		this.getElement('th_' + anEvent.src().value).addClass('titleColumn');
+		
+		if (anEvent.src().value != -1) {
+			this.mainComponent().nextButton().enable();
+		} else {
+			this.mainComponent().nextButton().disable();
+		}
+		
+		this.renderData(this.getElement('previewData_tbody'), this.mainComponent().parsedValues());
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/CSVImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImportComponent.js
new file mode 100644
index 0000000..707a3d2
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/CSVImportComponent.js
@@ -0,0 +1,548 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.CSVImportComponent = function(anElement, args) {
+	args = args || {};
+
+	this._steps = this._steps || ['CSV_EDIT', 'CSV_COLUMNS', 'CSV_HEADER', 'CSV_TITLE', 'CSV_NOTES', 'CSV_FIELDS', 'PREVIEW', 'IMPORT'];
+
+    Clipperz.PM.Components.Import.CSVImportComponent.superclass.constructor.call(this, anElement, args);
+
+	this._step1Component = null;
+	this._step2Component = null;
+	this._step3Component = null;
+	this._step4Component = null;
+	this._step5Component = null;
+
+	this._isFirstRowHeader = false;
+	this._titleColumnIndex = -1;
+	this._notesColumnIndex = -1;
+	this._fieldSettings = {};
+	this._skippedColumns = new Clipperz.Set();
+
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.CSVImportComponent, Clipperz.PM.Components.Import.GenericImportComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.CSVImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.domHelper().append(this.element(), {tag:'div', cls:'csvImportWizard', children:[
+			{tag:'h3', htmlString:Clipperz.PM.Strings['CSV_ImportWizard_Title']},
+			{tag:'div', cls:'importSteps', id:this.getId('importSteps')},
+			{tag:'div', cls:'importStepBlocks', children:[
+				{tag:'div', cls:'step_0', id:this.getId('step_0'), children:[
+					{tag:'div', children:[
+						{tag:'div', cls:'importOptionsDescription', htmlString:Clipperz.PM.Strings['importOptions_csv_description']},
+						{tag:'div', cls:'importOptionsParameters', children:[
+							{tag:'div', cls:'CSVImportOptionsParameters', children:[
+								{tag:'ul', children:[
+									{tag:'li', children:[
+										{tag:'label', 'for':this.getId('CSV_inputOptions_separator'), html:"separator"},
+										{tag:'select', name:this.getId('CSV_inputOptions_separator'), id:this.getId('CSV_inputOptions_separator'), children:[
+											{tag:'option', name:'comma', value:',', html:"comma (,)", selected:true},
+											{tag:'option', name:'tab', value:'\t', html:"tab"}
+										]}
+									]},
+
+									{tag:'li', children:[
+										{tag:'label', 'for':this.getId('CSV_inputOptions_quote'), html:"quote"},
+										{tag:'select', name:this.getId('CSV_inputOptions_quote'), id:this.getId('CSV_inputOptions_quote'), children:[
+											{tag:'option', name:'doubleQuote', value:'\"', html:"double quote (\")", selected:true},
+											{tag:'option', name:'singleQuote', value:'\'', html:"single quote (\')"}
+										]}
+									]},
+
+									{tag:'li', children:[
+										{tag:'label', 'for':this.getId('CSV_inputOptions_escape'), html:"escape"},
+										{tag:'select', name:this.getId('CSV_inputOptions_escape'), id:this.getId('CSV_inputOptions_escape'), children:[
+											{tag:'option', name:'doubleQuote', value:'\"', html:"double quote (\")", selected:true},
+											{tag:'option', name:'slash', value:'\/', html:"slash (\/)"},
+											{tag:'option', name:'backslash', value:'\\', html:"backslash (\\)"}
+										]}
+									]}
+								]}
+							]}
+						]},
+						this.textAreaConfig()
+					]}
+				]},
+				{tag:'div', cls:'step_1', id:this.getId('step_1'), children:[]},
+				{tag:'div', cls:'step_2', id:this.getId('step_2'), children:[]},
+				{tag:'div', cls:'step_3', id:this.getId('step_3'), children:[]},
+				{tag:'div', cls:'step_4', id:this.getId('step_4'), children:[]},
+				{tag:'div', cls:'step_5', id:this.getId('step_5'), children:[]},
+				{tag:'div', cls:'step_6', id:this.getId('step_6'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('previewDiv'), html:"preview"}
+					]}
+				]},
+				{tag:'div', cls:'step_7', id:this.getId('step_7'), children:[
+					{tag:'div', children:[
+						{tag:'h4', html:"done"}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importOptionsButtons', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('backActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('nextActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+
+		this.updateSteps();
+		
+		this.getElement('step_0').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show()
+		this.getElement('step_1').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_2').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_3').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_4').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_5').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_6').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_7').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		
+//		this.backButton().disable();
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'nextAction': function() {
+		switch (this.currentStep()) {
+			case 0:	//	-> 1
+				Clipperz.PM.Components.MessageBox.showProgressPanel(
+					MochiKit.Base.method(this, 'deferredParseValues'),
+					MochiKit.Base.method(this, 'handleParseError'),
+					this.getDom('nextActionButton')
+				);
+				break;
+			case 1:	//	-> 2
+				this.getElement('step_1').hide();
+				this.step2Component().render();
+				this.setCurrentStep(2);
+				this.getElement('step_2').show();
+				break;
+			case 2:	//	-> 3
+				this.getElement('step_2').hide();
+				this.step3Component().render();
+				this.setCurrentStep(3);
+				this.getElement('step_3').show();
+				break;
+			case 3:	//	-> 4
+				this.getElement('step_3').hide();
+				this.step4Component().render();
+				this.setCurrentStep(4);
+				this.getElement('step_4').show();
+				break;
+			case 4:	//	-> 5
+				this.getElement('step_4').hide();
+				this.step5Component().render();
+				this.setCurrentStep(5);
+				this.getElement('step_5').show();
+				break;
+			case 5:	//	-> 6
+				this.previewValues();
+				break;
+			case 6:	//	-> 7
+				this.importValues();
+				break;
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'deferredParseValues': function() {
+		var deferredResult;
+
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 1 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'parseImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 2 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 3 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'parseCSVValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 4 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setParsedValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 5 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this.step1Component(), 'render'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 6 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_0').hide();
+			this.getElement('step_1').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("CSVImportComponent.deferredParseValues - 7 " + res); return res;});
+		deferredResult.callback(this.textAreaContent());		
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'deferredPreviewValues': function() {
+		var deferredResult;
+
+//MochiKit.Logging.logDebug(">>> CSVImportComponent.deferredPreviewValues");
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 1 " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'previewImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 2 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 3 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'processCSVParsedValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 4 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setProcessedValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 5 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'previewRecordValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 6 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_5').hide();
+			this.getElement('step_6').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+		deferredResult.callback(this.parsedValues());		
+//MochiKit.Logging.logDebug("<<< CSVImportComponent.deferredPreviewValues");
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'csvProcessor': function() {
+		return new Clipperz.CSVProcessor({
+			quoteChar:		this.getDom('CSV_inputOptions_quote').value,
+			escapeChar:		this.getDom('CSV_inputOptions_escape').value,
+			separatorChar:	this.getDom('CSV_inputOptions_separator').value,
+			binary:true
+		});
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'parseCSVValues': function(someData) {
+		var deferredResult;
+		var csvProcessor;
+
+		csvProcessor = this.csvProcessor();		
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.parseKeePassValues - 1 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length)}, res);
+		})
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.parseKeePassValues - 2 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(csvProcessor, 'deferredParse'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.parseKeePassValues - 3 " + res); return res;});
+		deferredResult.callback(someData);
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'processCSVParsedValues': function (someValues) {
+		var deferredResult;
+		var records;
+		var titleColumnIndex;
+		var notesColumnIndex;
+		var i,c;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+		records = [];
+
+		titleColumnIndex = this.titleColumnIndex();
+		notesColumnIndex = this.notesColumnIndex();
+
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {steps:(someValues.length)});
+		
+		c = someValues.length;
+		if (this.isFirstRowHeader()) {
+			i = 1;
+		} else {
+			i = 0;
+		}
+		
+		for(  ; i<c; i++) {
+			deferredResult.addCallback(MochiKit.Async.wait, 0.2);
+			deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {});
+			deferredResult.addCallback(MochiKit.Base.bind(function(someRecords, someData) {
+				var record;
+				var recordVersion;
+				var ii;
+
+				record = new Clipperz.PM.DataModel.Record({user:this.user()});
+				record.setLabel(someData[titleColumnIndex]);
+				if (notesColumnIndex != -1) {
+					record.setNotes(someData[notesColumnIndex]);
+				}
+				recordVersion = record.currentVersion()
+
+				for (ii in someData) {
+//					if ((ii != titleColumnIndex) && (ii != notesColumnIndex) && (typeof(this.fieldSettings()[ii]) != 'undefined')) {
+					if ((ii != titleColumnIndex) && (ii != notesColumnIndex) && (this.isColumnSelected(ii))) {
+						var recordField;
+
+						recordField = new Clipperz.PM.DataModel.RecordField({
+							recordVersion:	recordVersion,
+							label:			this.labelForColumn(ii),
+							value:			someData[ii],
+							type:			this.typeForColumn(ii)
+						});
+						recordVersion.addField(recordField);
+					}
+				}
+			
+				someRecords.push(record);
+			
+				return someRecords;
+			}, this), records, someValues[i]);
+		}
+		deferredResult.addCallback(MochiKit.Async.succeed, records);
+		deferredResult.callback();
+		
+		return deferredResult;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'step1Component': function() {
+		if (this._step1Component == null) {
+			this._step1Component = new Clipperz.PM.Components.Import.CSVImport.CSVImportColumns(this.getElement('step_1'), {mainComponent:this});
+		}
+		
+		return this._step1Component;
+	},
+
+	'step2Component': function() {
+		if (this._step2Component == null) {
+			this._step2Component = new Clipperz.PM.Components.Import.CSVImport.CSVImportHeader(this.getElement('step_2'), {mainComponent:this});
+		}
+		
+		return this._step2Component;
+	},
+
+	'step3Component': function() {
+		if (this._step3Component == null) {
+			this._step3Component = new Clipperz.PM.Components.Import.CSVImport.CSVImportTitle(this.getElement('step_3'), {mainComponent:this});
+		}
+		
+		return this._step3Component;
+	},
+
+	'step4Component': function() {
+		if (this._step4Component == null) {
+			this._step4Component = new Clipperz.PM.Components.Import.CSVImport.CSVImportNotes(this.getElement('step_4'), {mainComponent:this});
+		}
+		
+		return this._step4Component;
+	},
+
+	'step5Component': function() {
+		if (this._step5Component == null) {
+			this._step5Component = new Clipperz.PM.Components.Import.CSVImport.CSVImportFields(this.getElement('step_5'), {mainComponent:this});
+		}
+		
+		return this._step5Component;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'isFirstRowHeader': function() {
+		return this._isFirstRowHeader;
+	},
+	
+	'setIsFirstRowHeader': function(aValue) {
+		this._isFirstRowHeader = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'titleColumnIndex': function() {
+		return this._titleColumnIndex;
+	},
+	
+	'setTitleColumnIndex': function(aValue) {
+		this._titleColumnIndex = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'notesColumnIndex': function() {
+		return this._notesColumnIndex;
+	},
+	
+	'setNotesColumnIndex': function(aValue) {
+		this._notesColumnIndex = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'fieldSettings': function() {
+		return this._fieldSettings;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'skippedColumns': function() {
+		return this._skippedColumns;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'isColumnSelected': function(aColumnIndex) {
+		return !this.skippedColumns().contains("" + aColumnIndex);
+	},
+
+	//=========================================================================
+	
+	'labelForColumn': function(aColumnIndex) {
+		var result;
+		
+		if ((typeof(this.fieldSettings()) != 'undefined') && (typeof(this.fieldSettings()[aColumnIndex]) != 'undefined')) {
+			if (this.isFirstRowHeader()) {
+				result = this.fieldSettings()[aColumnIndex]['_firstRowLabel'];
+//MochiKit.Logging.logDebug("--- updateInputFieldValues - [" + aColumnIndex + "] _firstRowLabel: " + label);
+			} else {
+				result = this.fieldSettings()[aColumnIndex]['_emptyLabel'];
+//MochiKit.Logging.logDebug("--- updateInputFieldValues - [" + aColumnIndex + "] _emptyLabel: " + label);
+			}
+		} else {
+			result = "";
+		}
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'setLabelForColumn': function(aLabel, aColumnIndex) {
+		var fieldSettings;
+
+//MochiKit.Logging.logDebug(">>> setLabelForColumn[" + aColumnIndex + "]: " + aLabel);
+		fieldSettings = this.fieldSettings();
+
+		if (typeof(fieldSettings[aColumnIndex]) == 'undefined') {
+			fieldSettings[aColumnIndex] = {}
+		}
+	
+		if (this.isFirstRowHeader()) {
+//MochiKit.Logging.logDebug("--- setLabelForColumn -> _firstRowLabel");
+			fieldSettings[aColumnIndex]['_firstRowLabel'] = aLabel;
+		} else {
+			if (typeof(fieldSettings[aColumnIndex]['_emptyLabel']) == 'undefined') {
+				if (aLabel == null) {
+//MochiKit.Logging.logDebug("--- setLabelForColumn -> _emptyLabel = \"\"");
+					fieldSettings[aColumnIndex]['_emptyLabel'] = "";
+				} else {
+					fieldSettings[aColumnIndex]['_emptyLabel'] = aLabel;
+				}
+			} else {
+//MochiKit.Logging.logDebug("--- setLabelForColumn -> _emptyLabel = " + aLabel);
+				if (aLabel != null) {
+					fieldSettings[aColumnIndex]['_emptyLabel'] = aLabel;
+				}
+			}
+		}
+//MochiKit.Logging.logDebug("<<< setLabelForColumn[" + aColumnIndex + "]: " + aLabel);
+	},
+	
+	//=========================================================================
+	
+	'typeForColumn': function(aColumnIndex) {
+		var result;
+		
+		if ((typeof(this.fieldSettings()) != 'undefined') && (typeof(this.fieldSettings()[aColumnIndex]) != 'undefined') && (typeof(this.fieldSettings()[aColumnIndex]['type']) != 'undefined')) {
+			result = this.fieldSettings()[aColumnIndex]['type'];
+		} else {
+			result = 'UNDEFINED';
+		}
+		
+		return result;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'setTypeForColumn': function(aType, aColumnIndex) {
+		var fieldSettings;
+
+		fieldSettings = this.fieldSettings();
+
+		if (typeof(fieldSettings[aColumnIndex]) == 'undefined') {
+			fieldSettings[aColumnIndex] = {}
+		}
+	
+		fieldSettings[aColumnIndex]['type'] = aType;
+	},
+	
+	//=========================================================================
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/ClipperzImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/ClipperzImportComponent.js
new file mode 100644
index 0000000..50dcb93
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/ClipperzImportComponent.js
@@ -0,0 +1,212 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.ClipperzImportComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.ClipperzImportComponent.superclass.constructor.call(this, anElement, args);
+
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.ClipperzImportComponent, Clipperz.PM.Components.Import.GenericImportComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.ClipperzImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.ClipperzImportComponent.render");
+		this.domHelper().append(this.element(), {tag:'div', cls:'clipperzImportWizard', children:[
+			{tag:'h3', htmlString:Clipperz.PM.Strings['Clipperz_ImportWizard_Title']},
+			{tag:'div', cls:'importSteps', id:this.getId('importSteps')},
+			{tag:'div', cls:'importStepBlocks', children:[
+				{tag:'div', cls:'step_0', id:this.getId('step_0'), children:[
+					{tag:'div', children:[
+						{tag:'div', cls:'importOptionsDescription', htmlString:Clipperz.PM.Strings['importOptions_clipperz_description']},
+						{tag:'div', cls:'importOptionsParameters', children:[]},
+						this.textAreaConfig()
+					]}
+				]},
+				{tag:'div', cls:'step_1', id:this.getId('step_1'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('previewDiv'), html:"preview"}
+					]}
+				]},
+				{tag:'div', cls:'step_2', id:this.getId('step_2'), children:[
+					{tag:'div', children:[
+						{tag:'h4', html:"done"}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importOptionsButtons', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('backActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('nextActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.updateSteps();
+		
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+		
+		this.getElement('step_0').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show()
+		this.getElement('step_1').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_2').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+//MochiKit.Logging.logDebug("<<< Import.ClipperzImportComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'nextAction': function() {
+		switch (this.currentStep()) {
+			case 0:	//	-> 1
+				this.previewValues();
+				break;
+			case 1:	//	-> 2
+				this.importValues();
+				break;
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'deferredPreviewValues': function() {
+		var deferredResult;
+
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'processClipperzValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setProcessedValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'previewRecordValues'));
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_0').hide();
+			this.getElement('step_1').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+//		deferredResult.addErrback(MochiKit.Base.bind(function() {
+//			this.processingAborted();
+//		}, this))
+		deferredResult.callback(this.textAreaContent());		
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'processClipperzValues': function(someData) {
+		var deferredResult;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Record.processClipperzValues - 1: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'parseImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Record.processClipperzValues - 2: " + res); return res;});
+		deferredResult.addCallback(Clipperz.Base.evalJSON);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Record.processClipperzValues - 3: " + res); return res;});
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length)}, res);
+		})
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Record.processClipperzValues - 4: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'previewImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Record.processClipperzValues - 5: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(someClipperzValues) {
+			var innerDeferredResult;
+			var records;
+			var i,c;
+			
+			innerDeferredResult = new MochiKit.Async.Deferred();
+			records = [];
+			
+			c = someClipperzValues.length;
+			for(i=0; i<c; i++) {
+				innerDeferredResult.addCallback(MochiKit.Async.wait, 0.2);
+				innerDeferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {});
+				innerDeferredResult.addCallback(MochiKit.Base.bind(function(someRecords, someData) {
+					var record;
+					var recordVersion;
+
+//MochiKit.Logging.logDebug("=== someData: " + Clipperz.Base.serializeJSON(someData));
+					record = new Clipperz.PM.DataModel.Record({user:this.user()});
+					record.setLabel(someData['label']);
+					record.setShouldProcessData(true);
+					record.processData(someData);
+
+					someRecords.push(record);
+
+					return someRecords;
+				}, this), records, someClipperzValues[i]);
+			}
+			innerDeferredResult.addCallback(MochiKit.Async.succeed, records);
+			innerDeferredResult.callback();
+			
+			return innerDeferredResult;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Record.processClipperzValues - 6: " + res); return res;});
+		deferredResult.callback(someData);
+
+		return deferredResult;
+	},
+
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/ExcelImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/ExcelImportComponent.js
new file mode 100644
index 0000000..ecdf509
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/ExcelImportComponent.js
@@ -0,0 +1,134 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.ExcelImportComponent = function(anElement, args) {
+	args = args || {};
+
+	this._steps = ['EXCEL_EDIT', 'CSV_COLUMNS', 'CSV_HEADER', 'CSV_TITLE', 'CSV_NOTES', 'CSV_FIELDS', 'PREVIEW', 'IMPORT'];
+
+    Clipperz.PM.Components.Import.ExcelImportComponent.superclass.constructor.call(this, anElement, args);
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.ExcelImportComponent, Clipperz.PM.Components.Import.CSVImportComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.ExcelImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.ExcelImportComponent.render");
+		this.domHelper().append(this.element(), {tag:'div', cls:'excelImportWizard', children:[
+			{tag:'h3', htmlString:Clipperz.PM.Strings['Excel_ImportWizard_Title']},
+			{tag:'div', cls:'importSteps', id:this.getId('importSteps')},
+			{tag:'div', cls:'importStepBlocks', children:[
+				{tag:'div', cls:'step_0', id:this.getId('step_0'), children:[
+					{tag:'div', children:[
+						{tag:'div', cls:'importOptionsDescription', htmlString:Clipperz.PM.Strings['importOptions_excel_description']},
+						{tag:'div', cls:'importOptionsParameters', children:[]},
+						this.textAreaConfig()
+					]}
+				]},
+				{tag:'div', cls:'step_1', id:this.getId('step_1'), children:[]},
+				{tag:'div', cls:'step_2', id:this.getId('step_2'), children:[]},
+				{tag:'div', cls:'step_3', id:this.getId('step_3'), children:[]},
+				{tag:'div', cls:'step_4', id:this.getId('step_4'), children:[]},
+				{tag:'div', cls:'step_5', id:this.getId('step_5'), children:[]},
+				{tag:'div', cls:'step_6', id:this.getId('step_6'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('previewDiv'), html:"preview"}
+					]}
+				]},
+				{tag:'div', cls:'step_7', id:this.getId('step_7'), children:[
+					{tag:'div', children:[
+						{tag:'h4', html:"done"}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importOptionsButtons', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('backActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('nextActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.updateSteps();
+		
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+		
+		this.getElement('step_0').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show()
+		this.getElement('step_1').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_2').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_3').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_4').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_5').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_6').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_7').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+//MochiKit.Logging.logDebug("<<< Import.ExcelImportComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'csvProcessor': function() {
+		return new Clipperz.CSVProcessor({
+//			quoteChar:		this.getDom('CSV_inputOptions_quote').value,
+//			escapeChar:		this.getDom('CSV_inputOptions_escape').value,
+			separatorChar:	'\t',
+			binary:true
+		});
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/GenericImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/GenericImportComponent.js
new file mode 100644
index 0000000..4f6b1e4
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/GenericImportComponent.js
@@ -0,0 +1,523 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.GenericImportComponent = function(anElement, args) {
+	args = args || {};
+
+	this._steps = this._steps || ['EDIT', 'PREVIEW', 'IMPORT'];
+
+    Clipperz.PM.Components.Import.GenericImportComponent.superclass.constructor.call(this, anElement, args);
+
+	this._user = args['user'];
+	
+	this._currentStep = 0;
+	this._currentStatus = 'IDLE'; //	'PROCESSING'
+
+	this._parsedValues = null;
+	this._processedValues = null;
+
+	this._backButton = null;
+	this._nextButton = null;
+
+	Clipperz.NotificationCenter.register(null, 'importProcessorProgressUpdate', this, 'updateProgressDialogStatus');
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.GenericImportComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.GenericImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'textAreaConfig': function() {
+		return {tag:'textarea', name:this.getId('importTextArea'), cls:'importTextArea', id:this.getId('importTextArea'), cols:60, rows:15, html:""};
+	},
+
+	'textAreaContent': function() {
+		return this.getDom('importTextArea').value
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'steps': function() {
+		return this._steps;
+	},
+	
+	'currentStep': function() {
+		return this._currentStep;
+	},
+	
+	'setCurrentStep': function(aValue) {
+		this._currentStep = aValue;
+		this.updateSteps();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'currentStatus': function() {
+		return this._currentStatus;
+	},
+
+	'startProcessing': function() {
+		this._currentStatus = 'PROCESSING';
+		this.updateSteps();
+	},
+	
+	'processingDone': function() {
+		this._currentStatus = 'IDLE';
+		this.setCurrentStep(this.currentStep() + 1);
+	},
+	
+	'processingAborted': function() {
+		this._currentStatus = 'IDLE';
+		this.updateSteps();
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'stepsConfig': function() {
+		var result;
+		var i,c;
+		
+		result = [];
+		c = this.steps().length;
+		for (i=0; i<c; i++) {
+			var cls;
+			
+			if (this.currentStep() == i) {
+				if (this.currentStatus() == 'IDLE') {
+					cls = 'current';
+				} else {
+					cls = 'currentProcessing';
+				}
+			} else {
+				cls = "";
+			}
+			
+			result.push({tag:'td', cls:cls, children:[
+				{tag:'div', children:[{tag:'span', htmlString:Clipperz.PM.Strings['ImportWizard'][this.steps()[i]]}]}
+			]})
+			if (i < (c-1)) {
+				if ((this.currentStep() == i) && (this.currentStatus() == 'PROCESSING')) {
+					cls = 'stepSeparatorProcessing';
+				} else {
+					cls = 'stepSeparator';
+				}
+				
+				result.push({tag:'td', cls:cls, children:[
+					{tag:'div', children:[{tag:'span', html:">"}]}
+				]});
+			}
+		}
+		
+		result = [{tag:'div', cls:'importWizardStepsBox', children:[
+			{tag:'div', cls:'importWizardStepsInnerBox', children:[
+				{tag:'table', cls:'importWizardSteps', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:result}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importWizardStepsBoxFooter'}
+		]}];
+		
+		return result;
+	},
+	
+	'updateSteps': function() {
+		this.getElement('importSteps').update("");
+		Clipperz.YUI.DomHelper.append(this.getDom('importSteps'), {tag:'div', children:this.stepsConfig()});
+	},
+
+	//-------------------------------------------------------------------------
+
+	'backAction': function() {
+//MochiKit.Logging.logDebug(">>> backAction");
+		if (this.currentStep() == 0) {
+			Clipperz.NotificationCenter.notify(this, 'importCancelled');
+		} else {
+			this.getElement('step_' + this.currentStep()).hide();
+			this.setCurrentStep(this.currentStep() - 1);
+			this.getElement('step_' + this.currentStep()).show();
+		
+			this.nextButton().enable();
+		}
+//MochiKit.Logging.logDebug("<<< backAction");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'backButton': function() {
+		return this._backButton;
+	},
+
+	'setBackButton': function(aValue) {
+		this._backButton = aValue;
+	},
+	
+	'nextButton': function() {
+		return this._nextButton;
+	},
+	
+	'setNextButton': function(aValue) {
+		this._nextButton = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.GenericImportComponent.render");
+		this.domHelper().append(this.element(), {tag:'div', children:[
+			{tag:'h2', html:this.toString()}
+		]});
+//MochiKit.Logging.logDebug("<<< Import.GenericImportComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'previewValues': function() {
+		Clipperz.PM.Components.MessageBox.showProgressPanel(
+			MochiKit.Base.method(this, 'deferredPreviewValues'),
+			MochiKit.Base.method(this, 'handlePreviewError'),
+			this.getDom('nextActionButton')
+		);
+	},
+
+	'deferredPreviewValues': function() {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+	
+	'handlePreviewError': function(anError) {
+console.log("anError", anError);
+		MochiKit.Logging.logError("An error occurred while previewing the data: " + anError);
+		alert("An error occurred while previewing the data");
+		Clipperz.PM.Components.MessageBox().hide();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'previewRecordValues': function(someProcessedRecords) {
+//MochiKit.Logging.logDebug(">>> previewRecordValues");
+		this.getElement('previewDiv').update("");
+//MochiKit.Logging.logDebug("--- previewRecordValues - 1");
+		this.domHelper().append(this.getElement('previewDiv'), {tag:'div', cls:'importPreviewDiv', children:[{tag:'table', id:'importPreview', cellspacing:'0', children:[
+			{tag:'tbody', children:
+				MochiKit.Base.map(MochiKit.Base.bind(function(aRecord) {
+					var result;
+//MochiKit.Logging.logDebug("--- previewRecordValues - 1.1");
+//console.log("fields", aRecord.currentVersion().fields());
+					result = {tag:'tr', children:[{tag:'td', children:[
+						{tag:'table', cls:'importPreview_record', children:[
+							{tag:'tbody', children:[
+								{tag:'tr', children:[
+									{tag:'td', rowspan:'2', valign:'top', children:[
+										{tag:'input', type:'checkbox', id:this.getId(aRecord.reference()), value:"aRecord.reference()", checked:true}
+									]},
+									{tag:'td', colspan:'2', children:[
+										{tag:'span', cls:'importPreview_title', html:aRecord.label()}
+									]}
+								]},
+								{tag:'tr', children:[
+									{tag:'td', valign:'top', children:[
+										{tag:'span', cls:'importPreview_notes', html:(MochiKit.Base.isNotEmpty(aRecord.notes()) ? aRecord.notes().replace(/\n/g, '<br>') : '&nbsp;')}
+									]},
+									{tag:'td', valign:'top', cls:'importPreview_fieds', children:[
+										{tag:'table', cls:'importPreview_fields', children:[
+											{tag:'tbody', children:MochiKit.Base.map(function(aField) {
+												var result;
+//MochiKit.Logging.logDebug("--- previewRecordValues - 1.1.1");
+												result = {tag:'tr', children:[
+													{tag:'td', valign:'top', children:[
+														{tag:'span', cls:'importPreview_fields_label', html:aField.label()}
+													]},
+													{tag:'td', valign:'top', children:[
+														{tag:'span', cls:'importPreview_fields_value', html:aField.value()}
+													]}
+												]};
+//MochiKit.Logging.logDebug("--- previewRecordValues - 1.1.2");
+												return result;
+											}, MochiKit.Base.values(aRecord.currentVersion().fields()))}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]}]};
+//MochiKit.Logging.logDebug("--- previewRecordValues - 1.2");
+					return result;
+				}, this), someProcessedRecords)
+			}
+		]}]});
+//MochiKit.Logging.logDebug("--- previewRecordValues - 2");
+
+		MochiKit.Base.map(MochiKit.Base.bind(function(aRecord) {
+			this.getElement(aRecord.reference()).dom.value = aRecord.reference();
+		}, this), someProcessedRecords);
+		
+		Clipperz.Style.applyZebraStylesToTable('importPreview');
+//MochiKit.Logging.logDebug("<<< previewRecordValues");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateProgressDialogStatus': function(anEvent) {
+		Clipperz.PM.Components.MessageBox().update({step:anEvent.parameters().progress});
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'parsedValues': function() {
+		return this._parsedValues;
+	},
+	
+	'setParsedValues': function(aValue) {
+		this._parsedValues = aValue;
+
+		return this._parsedValues;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'processedValues': function() {
+		return this._processedValues;
+	},
+
+	'setProcessedValues': function(aValue) {
+		this._processedValues = aValue;
+		return this._processedValues;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'importValues': function() {
+		var deferredResult;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+		
+		deferredResult.addCallback(MochiKit.Base.bind(function() {
+			this.nextButton().disable();
+			this.startProcessing();
+		},this));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'importProcessedValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'processingDone'));
+		deferredResult.addErrback (MochiKit.Base.method(this, 'processingAborted'));
+		deferredResult.callback();
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'importProcessedValues': function() {
+		var deferredResult;
+		var processedValues;
+		var selectedRecords;
+		var i,c;
+
+//MochiKit.Logging.logDebug(">>> GenericImportComponent.importProcessedValues");
+		processedValues = this.processedValues();
+		selectedRecords = [];
+		
+		c = processedValues.length;
+		for (i=0; i<c; i++) {
+			var currentRecord;
+			
+			currentRecord = processedValues[i];
+			if (this.getDom(currentRecord.reference()).checked == true) {
+				selectedRecords.push(currentRecord);
+			}
+		}
+
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 1: " + res); return res;});
+		deferredResult.addCallback(function(someRecords) {
+			var innerDeferredResult;
+			var text;
+			
+			text = Clipperz.PM.Strings['importData_importConfirmation_text'];
+			text = text.replace(/__numberOfRecords__/, someRecords.length);
+			
+			innerDeferredResult = new MochiKit.Async.Deferred();
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 1.1: " + res); return res;});
+			innerDeferredResult.addCallback(MochiKit.Async.succeed, someRecords);
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 1.2: " + res); return res;});
+
+			Clipperz.PM.Components.MessageBox().deferredShow({
+				title:Clipperz.PM.Strings['importData_importConfirmation_title'],
+				text:text,
+				width:240,
+				showProgressBar:false,
+				showCloseButton:false,
+				buttons:{
+					'yes':"yes",			//	Clipperz.PM.Strings['mainPanelDeleteRecordPanelConfirmButtonLabel'],
+					'no':"no"				//	Clipperz.PM.Strings['mainPanelDeleteRecordPanelDenyButtonLabel']
+				},
+				fn:MochiKit.Base.partial(function(aDeferred, aResult) {
+					if (aResult == 'yes') {
+						aDeferred.callback(aResult);
+					} else {
+						aDeferred.errback(aResult);
+					}
+				}, innerDeferredResult)
+			}/*, this.getId('nextActionButton')*/);
+			
+			return innerDeferredResult;
+		});
+
+//-------------------
+//		deferredResult.addCallback(MochiKit.Base.bind(function(someRecords) {
+//			Clipperz.PM.Components.MessageBox.showProgressPanel(
+//				MochiKit.Base.method(this, 'importProcessedValues_core', someRecords),
+//				MochiKit.Base.method(this, 'handleProcessError'),
+//				this.getDom('mainDiv')
+//			);
+//		}, this));
+
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 2: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+//				title:Clipperz.PM.Strings['accountPanelDeletingAccountPanelProgressTitle'],
+//				text:Clipperz.PM.Strings['accountPanelDeletingAccountPanelProgressText'],
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false
+			}
+		);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 3: " + res); return res;});
+		
+		deferredResult.addCallback(MochiKit.Base.bind(function(someRecords) {
+			var innerDeferredResult;
+
+//MochiKit.Logging.logDebug(">>> inner deferred");
+			innerDeferredResult = new MochiKit.Async.Deferred();
+			
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 3.1: " + res); return res;});
+			innerDeferredResult.addCallback(MochiKit.Base.method(this, 'importProcessedValues_core', someRecords));
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 3.2: " + res); return res;});
+			innerDeferredResult.addErrback(MochiKit.Base.method(this, 'handleProcessError'));
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 3.3: " + res); return res;});
+			innerDeferredResult.callback(someRecords);
+//MochiKit.Logging.logDebug("<<< inner deferred");
+			
+			return innerDeferredResult;
+		}, this), selectedRecords);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 4: " + res); return res;});
+
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'hide'), 'mainDiv');
+		
+		deferredResult.addErrback(MochiKit.Base.bind(function() {
+			this.nextButton().enable();
+			this.setCurrentStep(this.currentStep() -1);
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("GenericImportComponent - 5: " + res); return res;});
+
+		deferredResult.callback(selectedRecords);
+//MochiKit.Logging.logDebug("<<< GenericImportComponent.importProcessedValues");
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'importProcessedValues_core': function(someRecords) {
+		var deferredResult;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'processingImportData');
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {steps:(someRecords.length + 6 + 1)});
+		deferredResult.addCallback(MochiKit.Async.wait, 0.5);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("importProcessedValues_core - 3: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(someRecords) {
+			var i,c;
+			
+			c = someRecords.length;
+			for (i=0; i<c; i++) {
+				this.user().addRecord(someRecords[i], true);
+			}
+			
+			return someRecords;
+		}, this));
+		deferredResult.addCallback(MochiKit.Async.wait, 0.5);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("importProcessedValues_core - 4: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'recordAdded', null);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("importProcessedValues_core - 5: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this.user(), 'saveRecords'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("importProcessedValues_core - 6: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'selectTab', 'mainTabPanel.recordsTab');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("importProcessedValues_core - 7: " + res); return res;});
+		
+		if (this.user().preferences().shouldShowDonationPanel()) {
+			deferredResult.addCallback(Clipperz.PM.showDonationSplashScreen, this.user(), 'mainDiv');
+		}
+		
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'importCompleted', null);
+
+		deferredResult.callback(someRecords);
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'handleParseError': function(res) {
+		this.processingAborted();
+		MochiKit.Logging.logError("An error occurred while parsing the values: " + res);
+		alert("An error occurred while parsing the values: " + res);
+		Clipperz.PM.Components.MessageBox().hide();
+	},
+
+	'handleProcessError': function(res) {
+		this.processingAborted();
+		MochiKit.Logging.logError("An error occurred while processing the values: " + res);
+		alert("An error occurred while processing the values: " + res);
+		Clipperz.PM.Components.MessageBox().hide();
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/KeePassImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/KeePassImportComponent.js
new file mode 100644
index 0000000..0657520
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/KeePassImportComponent.js
@@ -0,0 +1,450 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.KeePassImportComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.KeePassImportComponent.superclass.constructor.call(this, anElement, args);
+
+	this._steps = ['EDIT', 'KEEPASS_SETTINGS', 'PREVIEW', 'IMPORT'];
+	this._definedFields = ['Group', 'Group Tree', 'UserName', 'URL', 'Password', 'Notes', 'UUID', 'Icon', 'Creation Time', 'Last Access', 'Last Modification', 'Expires', 'Attachment Description', 'Attachment'];
+
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.KeePassImportComponent, Clipperz.PM.Components.Import.GenericImportComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.KeePassImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.KeePassImportComponent.render");
+		this.domHelper().append(this.element(), {tag:'div', cls:'keePassImportWizard', children:[
+			{tag:'h3', htmlString:Clipperz.PM.Strings['KeePass_ImportWizard_Title']},
+			{tag:'div', cls:'importSteps', id:this.getId('importSteps')},
+			{tag:'div', cls:'importStepBlocks', children:[
+				{tag:'div', cls:'step_0', id:this.getId('step_0'), children:[
+					{tag:'div', children:[
+						{tag:'div', cls:'importOptionsDescription', htmlString:Clipperz.PM.Strings['importOptions_keePass_description']},
+						{tag:'div', cls:'importOptionsParameters', children:[]},
+						this.textAreaConfig()
+					]}
+				]},
+				{tag:'div', cls:'step_1', id:this.getId('step_1'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('settingsDiv'), children:[
+							{tag:'table', id:'KeePassSettings', children:[
+								{tag:'tbody', children:[
+									{tag:'tr', children:[
+										{tag:'td', width:'50%', valign:'top', children:[
+											{tag:'table', children:[
+												{tag:'tbody', children:[
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Group_checkbox'), name:'Group'/*, checked:true*/}]},
+														{tag:'td', width:'150', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Group_label'), html:"Group"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Group Tree_checkbox'), name:'Group Tree'/*, checked:true*/}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Group Tree_label'), html:"Group Tree"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('UserName_checkbox'), name:'UserName', checked:true}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('UserName_label'), html:"UserName"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('URL_checkbox'), name:'URL', checked:true}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('URL_label'), html:"URL"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Password_checkbox'), name:'Password', checked:true}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Password_label'), html:"Password"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Notes_checkbox'), name:'Notes', checked:true}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Notes_label'), html:"Notes"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('UUID_checkbox'), name:'UUID'/*, checked:true*/}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('UUID_label'), html:"UUID"}]}
+													]}
+												]}
+											]}
+										]},
+										{tag:'td', width:'50%', valign:'top', children:[
+											{tag:'table', children:[
+												{tag:'tbody', children:[
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Icon_checkbox'), name:'Icon'/*, checked:true*/}]},
+														{tag:'td', width:'150', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Icon_label'), html:"Icon"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Creation Time_checkbox'), name:'Creation Time'/*, checked:true*/}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Creation Time_label'), html:"Creation Time"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Last Access_checkbox'), name:'Last Access'/*, checked:true*/}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Last Access_label'), html:"Last Access"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Last Modification_checkbox'), name:'Last Modification'/*, checked:true*/}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Last Modification_label'), html:"Last Modification"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Expires_checkbox'), name:'Expires'/*, checked:true*/}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Expires_label'), html:"Expires"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Attachment Description_checkbox'), name:'Attachment Description', checked:true}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Attachment Description_label'), html:"Attachment Description"}]}
+													]},
+													{tag:'tr', children:[
+														{tag:'td', valign:'top', children:[{tag:'input', type:'checkbox', id:this.getId('Attachment_checkbox'), name:'Attachment', checked:true}]},
+														{tag:'td', valign:'top', children:[{tag:'span', cls:'keePassFieldLabel', id:this.getId('Attachment_label'), html:"Attachment"}]}
+													]}
+												]}
+											]}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]}
+				]},
+				{tag:'div', cls:'step_2', id:this.getId('step_2'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('previewDiv'), html:"preview"}
+					]}
+				]},
+				{tag:'div', cls:'step_3', id:this.getId('step_3'), children:[
+					{tag:'div', children:[
+						{tag:'h4', html:"done"}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importOptionsButtons', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('backActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('nextActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.updateSteps();
+		
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+		
+		this.getElement('step_0').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show()
+		this.getElement('step_1').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_2').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_3').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+//MochiKit.Logging.logDebug("<<< Import.KeePassImportComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'nextAction': function() {
+		switch (this.currentStep()) {
+			case 0:	//	-> 1
+				Clipperz.PM.Components.MessageBox.showProgressPanel(
+					MochiKit.Base.method(this, 'deferredParseValues'),
+					MochiKit.Base.method(this, 'handleParseError'),
+					this.getDom('nextActionButton')
+				);
+				break;
+			case 1:	//	-> 2
+				this.previewValues();
+				break;
+			case 2:	//	-> 3
+				this.importValues();
+				break;
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'deferredParseValues': function() {
+		var deferredResult;
+
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 1 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'parseImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 2 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 3 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'parseKeePassValues'));	//	processPasswordPlusValues
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 4 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setParsedValues'));		//	setProcessedValues
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 5 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'showSettings'));			//	previewRecordValues
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 6 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_0').hide();
+			this.getElement('step_1').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredParseValues - 7 " + res); return res;});
+		deferredResult.callback(this.textAreaContent());		
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'deferredPreviewValues': function() {
+		var deferredResult;
+
+//MochiKit.Logging.logDebug(">>> KeePassImportComonent.deferredPreviewValues");
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 1 " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'previewImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 2 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 3 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'processKeePassParsedValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 4 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setProcessedValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 5 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'previewRecordValues'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 6 " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_1').hide();
+			this.getElement('step_2').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 7 " + res); return res;});
+//		deferredResult.addErrback(MochiKit.Base.bind(function() {
+//			this.processingAborted();
+//		}, this))
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.deferredPreviewValues - 8 " + res); return res;});
+		deferredResult.callback(this.parsedValues());		
+//MochiKit.Logging.logDebug("<<< KeePassImportComonent.deferredPreviewValues");
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'definedFields': function() {
+		return this._definedFields;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'parseKeePassValues': function(someData) {
+		var deferredResult;
+		var keePassProcessor;
+
+		keePassProcessor = new Clipperz.KeePassExportProcessor();
+		
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.parseKeePassValues - 1 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length)}, res);
+		})
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.parseKeePassValues - 2 " + res.substring(0,50)); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(keePassProcessor, 'deferredParse'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("KeePassImportComponent.parseKeePassValues - 3 " + res); return res;});
+		deferredResult.callback(someData);
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showSettings': function(someValues) {
+		var availableFields;
+		var i,c;
+
+//MochiKit.Logging.logDebug(">>> KeePassImportCOmponent.showSettings");
+		availableFields = new Clipperz.Set();
+		c = this.parsedValues().length;
+		for (i=0; i<c; i++) {
+			var fieldLabel;
+
+			for (fieldLabel in this.parsedValues()[i]) {
+				availableFields.add(fieldLabel);
+			}
+		}
+		
+		c = this.definedFields().length;
+		for (i=0; i<c; i++) {
+			var definedField;
+			
+			definedField = this.definedFields()[i];
+			if (availableFields.contains(definedField)) {
+//MochiKit.Logging.logDebug("enabling field " + definedField);
+				this.getDom(definedField + '_checkbox').disabled = false;
+				this.getElement(definedField + '_label').removeClass('disabled');
+			} else {
+//MochiKit.Logging.logDebug("disabling field " + definedField);
+				this.getDom(definedField + '_checkbox').disabled = true;
+				this.getDom(definedField + '_checkbox').checked = false;	//	????
+				this.getElement(definedField + '_label').addClass('disabled');
+			}
+		}
+//MochiKit.Logging.logDebug("<<< KeePassImportCOmponent.showSettings");
+		
+		return MochiKit.Async.succeed(someValues);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'shouldImportField': function(aFieldName) {
+		var fieldCheckbox;
+		var result;
+
+//MochiKit.Logging.logDebug(">>> shouldImportField: " + aFieldName);
+//		fieldCheckbox = this.getDom(aFieldName + '_checkbox');
+		fieldCheckbox = MochiKit.DOM.getElement(this.getId(aFieldName + '_checkbox'));
+		if (fieldCheckbox != null) {
+			result = fieldCheckbox.checked;
+		} else {
+			result = false;
+		}
+//MochiKit.Logging.logDebug("<<< shouldImportField: " + result);
+		
+		return result;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'processKeePassParsedValues': function(someValues) {
+		var deferredResult;
+		var records;
+		var i,c;
+		
+//MochiKit.Logging.logDebug(">>> processKeePassParsedValues");
+		deferredResult = new MochiKit.Async.Deferred();
+		records = [];
+		
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("processKeePassParsedValues - 1: " + res); return res;});
+		c = someValues.length;
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:c}, res);
+		})
+		for(i=0; i<c; i++) {
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("[" + i + "] processKeePassParsedValues - 1.1: " + res); return res;});
+			deferredResult.addCallback(MochiKit.Async.wait, 0.2);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("[" + i + "] processKeePassParsedValues - 1.2: " + res); return res;});
+			deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("[" + i + "] processKeePassParsedValues - 1.3: " + res); return res;});
+			deferredResult.addCallback(MochiKit.Base.bind(function(someRecords, someData) {
+				var record;
+				var recordVersion;
+				var ii;
+
+				record = new Clipperz.PM.DataModel.Record({user:this.user()});
+				record.setLabel(someData['Title']);
+				if (this.shouldImportField('Notes')) {
+					record.setNotes(someData['Notes']);
+				}
+				recordVersion = record.currentVersion()
+
+				for (ii in someData) {
+					if ((ii != 'Title') && (ii != 'Notes') && (typeof(someData[ii]) != "undefined") && (this.shouldImportField(ii))) {
+						var recordField;
+						var recordFieldType;
+						
+						recordFieldType = 'TXT';
+						if (ii == 'Password') {
+							recordFieldType = 'PWD';
+						} else if (ii == 'URL') {
+							recordFieldType = 'URL';
+						} else if ((ii == 'Creation Time') || (ii == 'Last Access') || (ii == 'Last Modification') || (ii == 'Expires')) {
+							recordFieldType = 'Date';
+						}
+					
+						recordField = new Clipperz.PM.DataModel.RecordField({
+							recordVersion:	recordVersion,
+							label:			ii,
+							value:			someData[ii],
+							type:			recordFieldType
+						});
+						recordVersion.addField(recordField);
+					}
+				}
+			
+				someRecords.push(record);
+			
+				return someRecords;
+			}, this), records, someValues[i]);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("[" + i + "] processKeePassParsedValues - 1.4: " + res); return res;});
+		}
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("processKeePassParsedValues - 2: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Async.succeed, records);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("processKeePassParsedValues - 3: " + res); return res;});
+		deferredResult.callback();
+//MochiKit.Logging.logDebug("<<< processKeePassParsedValues");
+		
+		return deferredResult;
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/MainComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/MainComponent.js
new file mode 100644
index 0000000..54813bc
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/MainComponent.js
@@ -0,0 +1,332 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.MainComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.MainComponent.superclass.constructor.call(this, anElement, args);
+
+	this._user = args.user;
+	this._wizardComponent = null;
+
+	this._backButton = null;
+	this._nextButton = null;
+
+	this._selectedComponent = null;
+	
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.MainComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.MainComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'wizardComponent': function() {
+		return this._wizardComponent;
+	},
+	
+	'setWizardComponent': function(aValue) {
+		if (this._wizardComponent != null) {
+			this._wizardComponent.remove();
+		}
+		
+		if (aValue != null) {
+			this.getElement('importCover').hide();
+			this.getElement('importWizard').show();
+		}
+		this._wizardComponent = aValue;
+	},
+
+	'resetImportComponent': function() {
+//MochiKit.Logging.logDebug(">>> resetImportComponent");
+		this.setWizardComponent(null);
+		this.getElement('wizardComponent').update("");
+
+		this.getElement('importCover').show();
+		this.getElement('importWizard').hide();
+//MochiKit.Logging.logDebug("<<< resetImportComponent");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'backButton': function() {
+		return this._backButton;
+	},
+
+	'setBackButton': function(aValue) {
+		this._backButton = aValue;
+	},
+	
+	'nextButton': function() {
+		return this._nextButton;
+	},
+	
+	'setNextButton': function(aValue) {
+		this._nextButton = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.MainComponent.render");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.element().update("");
+		this.domHelper().append(this.element(), {tag:'div', id:this.getId('mainDiv'), children:[
+			{tag:'div', id:this.getId('importCover'), children:[
+				{tag:'h5', htmlString:Clipperz.PM.Strings['importTabTitle']},
+				{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['importTabDescription']},
+				{tag:'div', cls:'importFormats', children:[
+					{tag:'ul', cls:'radioList', children:[
+						{tag:'li', children:[
+							{tag:'table', children:[{tag:'tbody', children:[{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'input', id:this.getId('CSV_radio'), type:'radio', name:'importFormat', value:'CSV'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'h4', id:this.getId('CSV_title'), htmlString:Clipperz.PM.Strings['importFormats']['CSV']['label']},
+									{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['importFormats']['CSV']['description']}
+								]}
+							]}]}]}
+						]},
+						{tag:'li', children:[
+							{tag:'table', children:[{tag:'tbody', children:[{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'input', id:this.getId('Excel_radio'), type:'radio', name:'importFormat', value:'EXCEL'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'h4', id:this.getId('Excel_title'), htmlString:Clipperz.PM.Strings['importFormats']['Excel']['label']},
+									{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['importFormats']['Excel']['description']}
+								]}
+							]}]}]}
+						]},
+						{tag:'li', children:[
+							{tag:'table', children:[{tag:'tbody', children:[{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'input', id:this.getId('KeePass_radio'), type:'radio', name:'importFormat', value:'KEEPASS'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'h4', id:this.getId('KeePass_title'), htmlString:Clipperz.PM.Strings['importFormats']['KeePass']['label']},
+									{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['importFormats']['KeePass']['description']}
+								]}
+							]}]}]}
+						]},
+						{tag:'li', children:[
+							{tag:'table', children:[{tag:'tbody', children:[{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'input', id:this.getId('Roboform_radio'), type:'radio', name:'importFormat', value:'ROBOFORM'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'h4', id:this.getId('Roboform_title'), htmlString:Clipperz.PM.Strings['importFormats']['Roboform']['label']},
+									{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['importFormats']['Roboform']['description']}
+								]}
+							]}]}]}
+						]},
+						{tag:'li', children:[
+							{tag:'table', children:[{tag:'tbody', children:[{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'input', id:this.getId('PasswordPlus_radio'), type:'radio', name:'importFormat', value:'PASSWORD_PLUS'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'h4', id:this.getId('PasswordPlus_title'), htmlString:Clipperz.PM.Strings['importFormats']['PasswordPlus']['label']},
+									{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['importFormats']['PasswordPlus']['description']}
+								]}
+							]}]}]}
+						]},
+						{tag:'li', children:[
+							{tag:'table', children:[{tag:'tbody', children:[{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'input', id:this.getId('ClipperzExport_radio'), type:'radio', name:'importFormat', value:'CLIPPERZ_EXPORT'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'h4', id:this.getId('ClipperzExport_title'), htmlString:Clipperz.PM.Strings['importFormats']['ClipperzExport']['label']},
+									{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['importFormats']['ClipperzExport']['description']}
+								]}
+							]}]}]}
+						]}
+					]},
+
+					{tag:'div', cls:'importOptionsButtons', children:[
+						{tag:'table', children:[
+							{tag:'tbody', children:[
+								{tag:'tr', children:[
+									{tag:'td', html:'&nbsp;'},
+									{tag:'td', children:[
+										{tag:'div', id:this.getId('backActionButton')}
+									]},
+									{tag:'td', html:'&nbsp;'},
+									{tag:'td', children:[
+										{tag:'div', id:this.getId('nextActionButton')}
+									]},
+									{tag:'td', html:'&nbsp;'}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]},
+			{tag:'div', id:this.getId('importWizard'), children:[
+				{tag:'form', id:this.getId('importWizardForm'), children:[
+					{tag:'div', cls:'wizardComponent', id:this.getId('wizardComponent'), children:[]}
+				]}
+			]}
+		]});
+
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+
+		this.backButton().disable();
+		this.nextButton().disable();
+		
+		this.getElement('importCover').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show();
+		this.getElement('importWizard').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			this.getElement('mainDiv').addClass('read-only');
+
+			this.getDom('ClipperzExport_radio').disabled = true;
+			this.getDom('CSV_radio').disabled = true;
+			this.getDom('Excel_radio').disabled = true;
+			this.getDom('PasswordPlus_radio').disabled = true;
+			this.getDom('Roboform_radio').disabled = true;
+			this.getDom('KeePass_radio').disabled = true;
+		} else {
+			MochiKit.Signal.connect(this.getId('ClipperzExport_radio'), 'onclick', MochiKit.Base.method(this, 'selectComponent'));
+			MochiKit.Signal.connect(this.getId('CSV_radio'), 'onclick', MochiKit.Base.method(this, 'selectComponent'));
+			MochiKit.Signal.connect(this.getId('Excel_radio'), 'onclick', MochiKit.Base.method(this, 'selectComponent'));
+			MochiKit.Signal.connect(this.getId('PasswordPlus_radio'), 'onclick', MochiKit.Base.method(this, 'selectComponent'));
+			MochiKit.Signal.connect(this.getId('Roboform_radio'), 'onclick', MochiKit.Base.method(this, 'selectComponent'));
+			MochiKit.Signal.connect(this.getId('KeePass_radio'), 'onclick', MochiKit.Base.method(this, 'selectComponent'));
+
+			if (Clipperz_IEisBroken != true) {
+				MochiKit.Signal.connect(this.getId('ClipperzExport_title'), 'onclick', this.getDom('ClipperzExport_radio'), 'click');
+				MochiKit.Signal.connect(this.getId('CSV_title'), 'onclick', this.getDom('CSV_radio'), 'click');
+				MochiKit.Signal.connect(this.getId('Excel_title'), 'onclick', this.getDom('Excel_radio'), 'click');
+				MochiKit.Signal.connect(this.getId('PasswordPlus_title'), 'onclick', this.getDom('PasswordPlus_radio'), 'click');
+				MochiKit.Signal.connect(this.getId('Roboform_title'), 'onclick', this.getDom('Roboform_radio'), 'click');
+				MochiKit.Signal.connect(this.getId('KeePass_title'), 'onclick', this.getDom('KeePass_radio'), 'click');
+			}
+
+			Clipperz.NotificationCenter.register(null, 'importCompleted', this, 'resetImportComponent');
+			Clipperz.NotificationCenter.register(null, 'importCancelled', this, 'resetImportComponent');
+		}
+
+//MochiKit.Logging.logDebug("<<< Import.MainComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'selectedFormat': function() {
+		return this.getDom('importSelectionOptions').value;
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'updateSelectedImportWizardComponent': function(aComponent) {
+		var newWizardComponent;
+
+//MochiKit.Logging.logDebug(">>> Import.MainComponent.updateSelectedImportWizardComponent");
+		this.getElement('wizardComponent').update("");
+		
+		switch(aComponent) {
+			case 'CLIPPERZ_EXPORT':
+				newWizardComponent = new Clipperz.PM.Components.Import.ClipperzImportComponent(this.getElement('wizardComponent'), {user:this.user()});
+				break;
+			case 'CSV':
+				newWizardComponent = new Clipperz.PM.Components.Import.CSVImportComponent(this.getElement('wizardComponent'), {user:this.user()});
+				break;
+			case 'EXCEL':
+				newWizardComponent = new Clipperz.PM.Components.Import.ExcelImportComponent(this.getElement('wizardComponent'), {user:this.user()});
+				break;
+			case 'PASSWORD_PLUS':
+				newWizardComponent = new Clipperz.PM.Components.Import.PasswordPlusImportComponent(this.getElement('wizardComponent'), {user:this.user()});
+				break;
+			case 'ROBOFORM':
+				newWizardComponent = new Clipperz.PM.Components.Import.RoboFormImportComponent(this.getElement('wizardComponent'), {user:this.user()});;
+				break;
+			case 'KEEPASS':
+				newWizardComponent = new Clipperz.PM.Components.Import.KeePassImportComponent(this.getElement('wizardComponent'), {user:this.user()});
+				break;
+		}
+		
+		this.setWizardComponent(newWizardComponent);
+//MochiKit.Logging.logDebug("<<< Import.MainComponent.updateSelectedWizardComponent");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectComponent': function(anEvent) {
+		this.setSelectedComponent(anEvent.src().value);
+		this.nextButton().enable();
+	},
+
+	'selectedComponent': function() {
+		return this._selectedComponent;
+	},
+	
+	'setSelectedComponent': function(aValue) {
+		this._selectedComponent = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'backAction': function() {
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'nextAction': function() {
+		this.updateSelectedImportWizardComponent(this.selectedComponent());
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/PasswordPlusImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/PasswordPlusImportComponent.js
new file mode 100644
index 0000000..f476ac2
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/PasswordPlusImportComponent.js
@@ -0,0 +1,315 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.PasswordPlusImportComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.PasswordPlusImportComponent.superclass.constructor.call(this, anElement, args);
+
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.PasswordPlusImportComponent, Clipperz.PM.Components.Import.GenericImportComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.PasswordPlusImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.PasswordPlusImportComponent.render");
+		this.domHelper().append(this.element(), {tag:'div', cls:'passwordPlusImportWizard', children:[
+			{tag:'h3', htmlString:Clipperz.PM.Strings['PasswordPlus_ImportWizard_Title']},
+			{tag:'div', cls:'importSteps', id:this.getId('importSteps')},
+			{tag:'div', cls:'importStepBlocks', children:[
+				{tag:'div', cls:'step_0', id:this.getId('step_0'), children:[
+					{tag:'div', children:[
+						{tag:'div', cls:'importOptionsDescription', htmlString:Clipperz.PM.Strings['importOptions_passwordPlus_description']},
+						{tag:'div', cls:'importOptionsParameters', children:[]},
+						this.textAreaConfig()
+					]}
+				]},
+				{tag:'div', cls:'step_1', id:this.getId('step_1'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('previewDiv'), html:"preview"}
+					]}
+				]},
+				{tag:'div', cls:'step_2', id:this.getId('step_2'), children:[
+					{tag:'div', children:[
+						{tag:'h4', html:"done"}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importOptionsButtons', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('backActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('nextActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.updateSteps();
+		
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+		
+		this.getElement('step_0').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show()
+		this.getElement('step_1').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_2').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+//MochiKit.Logging.logDebug("<<< Import.PasswordPlusImportComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'backAction': function() {
+		switch (this.currentStep()) {
+			case 1:	//	-> 0
+				this.backButton().disable();
+				this.getElement('step_1').hide();
+				this.setCurrentStep(0);
+				this.getElement('step_0').show();
+				break;
+		}
+	},
+*/
+	//-------------------------------------------------------------------------
+	
+	'nextAction': function() {
+		switch (this.currentStep()) {
+			case 0:	//	-> 1
+				this.previewValues();
+				break;
+			case 1:	//	-> 2
+				this.importValues();
+				break;
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'deferredPreviewValues': function() {
+		var deferredResult;
+
+//		this.setFormValues(MochiKit.DOM.formContents(this.getDom('dataForm')));
+
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'processPasswordPlusValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setProcessedValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'previewRecordValues'));
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_0').hide();
+			this.getElement('step_1').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+//		deferredResult.addErrback(MochiKit.Base.bind(function() {
+//			this.processingAborted();
+//		}, this))
+		deferredResult.callback(this.textAreaContent());		
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'processPasswordPlusValues': function(someData) {
+		var deferredResult;
+		var csvProcessor;
+
+		csvProcessor = new Clipperz.CSVProcessor({binary:true});
+		
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'parseImportData');
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length * 2)}, res);
+		})
+		deferredResult.addCallback(MochiKit.Base.method(csvProcessor, 'deferredParse'));
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'previewImportData');
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length * 2), step:res.length}, res);
+		})
+		deferredResult.addCallback(MochiKit.Base.bind(function(someCSVValues) {
+			var innerDeferredResult;
+			var records;
+			var i,c;
+			
+			innerDeferredResult = new MochiKit.Async.Deferred();
+			records = [];
+			
+			c = someCSVValues.length;
+			i=0;
+			i++;	//	Dataviz Passwords Plus Export, Version,1, Minimum Version To Read,1
+			i++;	//	Is Template,Title,Category,Field 1 Label,Field 1 Value,Field 1 Hidden,Field 2 Label,Field 2 Value,Field 2 Hidden,Field 3 Label,Field 3 Value,Field 3 Hidden,Field 4 Label,Field 4 Value,Field 4 Hidden,Field 5 Label,Field 5 Value,Field 5 Hidden,Field 6 Label,Field 6 Value,Field 6 Hidden,Field 7 Label,Field 7 Value,Field 7 Hidden,Field 8 Label,Field 8 Value,Field 8 Hidden,Field 9 Label,Field 9 Value,Field 9 Hidden,Field 10 Label,Field 10 Value,Field 10 Hidden,Note
+
+			for(    ; i<c; i++) {
+				innerDeferredResult.addCallback(MochiKit.Async.wait, 0.2);
+				innerDeferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {});
+				innerDeferredResult.addCallback(MochiKit.Base.bind(function(someRecords, someData) {
+					if (someData[0] == '0') {
+						var record;
+						var recordVersion;
+						var ii, cc;
+					
+						record = new Clipperz.PM.DataModel.Record({user:this.user()});
+						if (someData[1] != "") {
+							record.setLabel(someData[1]);
+						} else {
+							record.setLabel("imported record [" + (i+1) + "]");
+						}
+						record.setNotes(someData[33]);
+						recordVersion = record.currentVersion()
+
+						cc = 10;
+						for (ii=0; ii<cc; ii++) {
+							var currentFieldValueIndex;
+							var currentType;
+				
+							currentFieldValueIndex = (ii * 3) + 4;
+						
+							if (someData[currentFieldValueIndex] != "") {
+								var recordField;
+								var recordFieldType;
+								
+								recordFieldType = 'TXT';
+								if (someData[currentFieldValueIndex + 1] == 1) {
+									recordFieldType = 'PWD';
+								} else if (/^http/.test(someData[currentFieldValueIndex])) {
+									recordFieldType = 'URL';
+								}
+							
+								recordField = new Clipperz.PM.DataModel.RecordField({
+									recordVersion:	recordVersion,
+									label:			someData[currentFieldValueIndex - 1],
+									value:			someData[currentFieldValueIndex],
+									type:			recordFieldType
+								});
+								recordVersion.addField(recordField);
+							}
+						}
+
+	//					this.user().addRecord(record, true);
+					
+						someRecords.push(record);
+					}
+				
+					return someRecords;
+				}, this), records, someCSVValues[i]);
+			}
+			innerDeferredResult.addCallback(MochiKit.Async.succeed, records);
+			innerDeferredResult.callback();
+			
+			return innerDeferredResult;
+		}, this));
+		deferredResult.callback(someData);
+
+		return deferredResult;
+
+/*
+0	Is Template
+1	Title
+2	Category
+
+3	Field 1 Label
+4	Field 1 Value
+5	Field 1 Hidden
+
+6	Field 2 Label
+7	Field 2 Value
+8	Field 2 Hidden
+
+9	Field 3 Label
+10	Field 3 Value
+11	Field 3 Hidden
+
+12	Field 4 Label
+13	Field 4 Value
+14	Field 4 Hidden
+
+15	Field 5 Label
+16	Field 5 Value
+17	Field 5 Hidden
+
+18	Field 6 Label
+19	Field 6 Value
+20	Field 6 Hidden
+
+21	Field 7 Label
+22	Field 7 Value
+23	Field 7 Hidden
+
+24	Field 8 Label
+25	Field 8 Value
+26	Field 8 Hidden
+
+27	Field 9 Label
+28	Field 9 Value
+29	Field 9 Hidden
+
+30	Field 10 Label
+31	Field 10 Value
+32	Field 10 Hidden
+
+33	Note
+*/
+	},
+
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Import/RoboFormImportComponent.js b/frontend/beta/js/Clipperz/PM/Components/Import/RoboFormImportComponent.js
new file mode 100644
index 0000000..d35bdc6
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Import/RoboFormImportComponent.js
@@ -0,0 +1,392 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Import) == 'undefined') { Clipperz.PM.Components.Import = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Import.RoboFormImportComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Import.RoboFormImportComponent.superclass.constructor.call(this, anElement, args);
+
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Import.RoboFormImportComponent, Clipperz.PM.Components.Import.GenericImportComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Import.RoboFormImportComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> Import.RoboFormImportComponent.render");
+		this.domHelper().append(this.element(), {tag:'div', cls:'roboFormImportWizard', children:[
+			{tag:'h3', htmlString:Clipperz.PM.Strings['RoboForm_ImportWizard_Title']},
+			{tag:'div', cls:'importSteps', id:this.getId('importSteps')},
+			{tag:'div', cls:'importStepBlocks', children:[
+				{tag:'div', cls:'step_0', id:this.getId('step_0'), children:[
+					{tag:'div', children:[
+						{tag:'div', cls:'importOptionsDescription', htmlString:Clipperz.PM.Strings['importOptions_roboForm_description']},
+						{tag:'div', cls:'importOptionsParameters', children:[]},
+						this.textAreaConfig()
+					]}
+				]},
+				{tag:'div', cls:'step_1', id:this.getId('step_1'), children:[
+					{tag:'div', children:[
+						{tag:'div', id:this.getId('previewDiv'), html:"preview"}
+					]}
+				]},
+				{tag:'div', cls:'step_2', id:this.getId('step_2'), children:[
+					{tag:'div', children:[
+						{tag:'h4', html:"done"}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'importOptionsButtons', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('backActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'},
+							{tag:'td', children:[
+								{tag:'div', id:this.getId('nextActionButton')}
+							]},
+							{tag:'td', html:'&nbsp;'}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.updateSteps();
+		
+		this.setBackButton(new YAHOO.ext.Button(this.getDom('backActionButton'), {text:"back", handler:this.backAction, scope:this}));
+		this.setNextButton(new YAHOO.ext.Button(this.getDom('nextActionButton'), {text:"next", handler:this.nextAction, scope:this}));
+		
+		this.getElement('step_0').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show()
+		this.getElement('step_1').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.getElement('step_2').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+//MochiKit.Logging.logDebug("<<< Import.RoboFormImportComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'nextAction': function() {
+		switch (this.currentStep()) {
+			case 0:	//	-> 1
+				this.previewValues();
+				break;
+			case 1:	//	-> 2
+				this.importValues();
+				break;
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'deferredPreviewValues': function() {
+		var deferredResult;
+
+//		this.setFormValues(MochiKit.DOM.formContents(this.getDom('dataForm')));
+
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.startProcessing();
+			
+			return res;
+		}, this));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'processRoboFormValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'setProcessedValues'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'previewRecordValues'));
+		deferredResult.addCallback(MochiKit.Base.bind(function(res) {
+			this.processingDone();
+			this.getElement('step_0').hide();
+			this.getElement('step_1').show();
+			this.backButton().enable();
+			
+			return res;
+		}, this));
+//		deferredResult.addErrback(MochiKit.Base.bind(function() {
+//			this.processingAborted();
+//		}, this))
+		deferredResult.callback(this.textAreaContent());		
+
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'processRoboFormValues': function(someData) {
+		var result;
+		
+		if (someData.match(/^\<HTML\>\<HEAD\>\<TITLE\>RoboForm Passcards List /g)) {
+			result = this.processRoboFormPasscardsValues(someData);
+		} else if (someData.match(/\<HTML\>\<HEAD\>\<TITLE\>RoboForm Safenotes List /g)) {
+			result = this.processRoboFormSafenotesValues(someData);
+		}
+
+		return result;
+	},
+
+	//.........................................................................
+
+	'processRoboFormPasscardsValues': function(someData) {
+		var deferredResult;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 1: "/* + res*/); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'parseImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 2: "/* + res*/); return res;});
+		deferredResult.addCallback(function(someData) {
+			var result;
+			var data;
+			
+			data = someData.replace(/\r?\n/g, "");
+			result = data.match(/\<TABLE width\=\"100\%\"\>.*?\<\/TABLE\>/g);
+
+			return result;
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 3: "/* + res*/); return res;});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 3.1: " + res.length); return res;});
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length)}, res);
+		})
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 4: "/* + res*/); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(someRecordValues) {
+			var innerDeferredResult;
+			var records;
+			var i,c;
+
+			innerDeferredResult = new MochiKit.Async.Deferred();
+			records = [];
+			
+			c = someRecordValues.length;
+			for(i=0; i<c; i++) {
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 1: " + res); return res;});
+				innerDeferredResult.addCallback(MochiKit.Async.wait, 0.2);
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 2: " + res); return res;});
+				innerDeferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {});
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 3: " + res); return res;});
+				innerDeferredResult.addCallback(MochiKit.Base.bind(function(someRecords, someData) {
+					var data;
+					var record;
+					var recordVersion;
+					var fields;
+					var ii, cc;
+					var hasNotes;
+
+					var caption;
+					var subcaption;
+
+//MochiKit.Logging.logDebug("data: " + someData);
+					data = someData.replace(/\<WBR\>/g, "");
+					hasNotes = false;
+					
+					/\<TD class\=caption colSpan\=3\>(.*?)\<\/TD\>/.test(data);		//	<TD class=caption colSpan=3>110mb</TD>
+					caption = RegExp.$1;
+//MochiKit.Logging.logDebug("caption: " + caption);
+					
+					/\<TD class\=subcaption colSpan\=3\>(.*?)\<\/TD\>/.test(data);		//	<TD class=subcaption colSpan=3>110<WBR>mb.com</TD>
+					subcaption = RegExp.$1;
+//MochiKit.Logging.logDebug("subcaption: " + subcaption);
+					
+					record = new Clipperz.PM.DataModel.Record({user:this.user()});
+					recordVersion = record.currentVersion()
+
+					record.setLabel(caption);
+//					record.setNotes(subcaption);
+					if (subcaption != null) {
+						var recordField;
+						
+						recordField = new Clipperz.PM.DataModel.RecordField({
+							recordVersion:	recordVersion,
+							label:			"url",
+							value:			subcaption,
+							type:			'URL'
+						});
+						recordVersion.addField(recordField);
+					}
+
+					fields = data.match(/\<TR\>.*?\<\/TR\>/g) || [];
+					cc = fields.length;
+//MochiKit.Logging.logDebug("fields.length: " + cc);
+					for (ii=0; ii<cc; ii++) {
+						var recordField;
+						var fieldString;
+						var fieldName;
+						var fieldValue;
+
+//MochiKit.Logging.logDebug("fieldString: " + fields[ii]);
+						fieldString = fields[ii];
+//MochiKit.Logging.logDebug("fieldString (cleaned): " + fieldString);
+						/\<TD class\=field vAlign\=top align\=left width\=\"40\%\"\>(.*?)\<\/TD\>/.test(fieldString);
+						fieldName = RegExp.$1;
+						
+						/\<TD class\=wordbreakfield vAlign\=top align\=left width\=\"55\%\"\>(.*?)\<\/TD\>/.test(fieldString);
+						fieldValue = RegExp.$1;
+
+						if (fieldName == "Note$") {
+							record.setNotes(fieldValue);
+							hasNotes = true;
+						} else {
+							var fieldType;
+
+							if (((ii == 1) && (hasNotes == false)) || ((ii == 2) && (hasNotes == true))) {
+								fieldType = 'PWD';
+							} else {
+								fieldType = 'TXT';
+							}
+							
+							recordField = new Clipperz.PM.DataModel.RecordField({
+								recordVersion:	recordVersion,
+								label:			fieldName,
+								value:			fieldValue,
+								type:			fieldType
+							});
+							recordVersion.addField(recordField);
+						}
+					}
+					
+					someRecords.push(record);
+				
+					return someRecords;
+				}, this), records, someRecordValues[i]);
+			}
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 4: " + res); return res;});
+			innerDeferredResult.addCallback(MochiKit.Async.succeed, records);
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 5: " + res); return res;});
+			innerDeferredResult.callback();
+			
+			return innerDeferredResult;
+		}, this));
+		deferredResult.callback(someData);
+
+		return deferredResult;
+	},
+
+
+	//.........................................................................
+
+	'processRoboFormSafenotesValues': function(someData) {
+		var deferredResult;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 1: "/* + res*/); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'parseImportData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 2: "/* + res*/); return res;});
+		deferredResult.addCallback(function(someData) {
+			var result;
+			var data;
+			
+			data = someData.replace(/\r?\n/g, "");
+			result = data.match(/\<TABLE width\=\"100\%\"\>.*?\<\/TABLE\>/g);
+
+			return result;
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 3: "/* + res*/); return res;});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 3.1: " + res.length); return res;});
+		deferredResult.addCallback(function(res) {
+			return Clipperz.NotificationCenter.deferredNotification(this, 'updatedProgressState', {steps:(res.length)}, res);
+		})
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues - 4: "/* + res*/); return res;});
+		deferredResult.addCallback(MochiKit.Base.bind(function(someRecordValues) {
+			var innerDeferredResult;
+			var records;
+			var i,c;
+
+			innerDeferredResult = new MochiKit.Async.Deferred();
+			records = [];
+			
+			c = someRecordValues.length;
+			for(i=0; i<c; i++) {
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 1: " + res); return res;});
+				innerDeferredResult.addCallback(MochiKit.Async.wait, 0.2);
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 2: " + res); return res;});
+				innerDeferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', {});
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 3: " + res); return res;});
+				innerDeferredResult.addCallback(MochiKit.Base.bind(function(someRecords, someData) {
+					var data;
+					var record;
+					var recordVersion;
+
+					var caption;
+					var wordbreakfield;
+
+//MochiKit.Logging.logDebug("data: " + someData);
+					data = someData.replace(/\<WBR\>/g, "");
+					hasNotes = false;
+					
+					/\<TD class\=caption colSpan\=3\>(.*?)\<\/TD\>/.test(data);		//	<TD class=caption colSpan=3>110mb</TD>
+					caption = RegExp.$1;
+//MochiKit.Logging.logDebug("caption: " + caption);
+					
+					/\<TD class\=wordbreakfield vAlign=top align\=left width\=\"\1\0\0\%\"\>(.*?)\<\/TD\>/.test(data);		//	<TD class=wordbreakfield vAlign=top align=left width="100%">7759500</TD>
+					wordbreakfield = RegExp.$1;
+//MochiKit.Logging.logDebug("subcaption: " + subcaption);
+					
+					record = new Clipperz.PM.DataModel.Record({user:this.user()});
+					recordVersion = record.currentVersion()
+
+					record.setLabel(caption);
+					record.setNotes(wordbreakfield);
+					
+					someRecords.push(record);
+				
+					return someRecords;
+				}, this), records, someRecordValues[i]);
+			}
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 4: " + res); return res;});
+			innerDeferredResult.addCallback(MochiKit.Async.succeed, records);
+//innerDeferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("RoboFormImportComponent.processRoboFormValues __inner loop__ - 5: " + res); return res;});
+			innerDeferredResult.callback();
+			
+			return innerDeferredResult;
+		}, this));
+		deferredResult.callback(someData);
+
+		return deferredResult;
+	},
+
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/MessageBox.js b/frontend/beta/js/Clipperz/PM/Components/MessageBox.js
new file mode 100644
index 0000000..d2bc09a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/MessageBox.js
@@ -0,0 +1,224 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+
+
+
+Clipperz.PM.Components.MessageBoxImplementation = function() {
+	this._step = 0;
+	this._steps = 0;
+	
+	return this;
+};
+
+//YAHOO.extendX(Clipperz.PM.Components.MessageBoxImplementation, Clipperz.PM.Components.BaseComponent, {
+Clipperz.PM.Components.MessageBoxImplementation.prototype = MochiKit.Base.update(null, {
+	
+	'toString': function() {
+		return "Clipperz.PM.Components.MessageBox";
+	},
+
+	//-----------------------------------------------------
+
+	'step': function() {
+		return this._step;
+	},
+	
+	'setStep': function(aValue) {
+		if (aValue == 'next') {
+			this._step = this._step + 1;
+		} else {
+			this._step = aValue;
+		}
+		
+		if (this._step > this.steps()) {
+//MochiKit.Logging.logDebug("overstepping: " + this._step + " (" + this.steps() + ")");
+			this._step = this.steps();
+		}
+	},
+	
+	//-----------------------------------------------------
+
+	'steps': function() {
+		return this._steps;
+	},
+	
+	'setSteps': function(aValue) {
+		if (aValue.constructor == String) {
+			if (aValue.charAt(0) == '+') {
+				this._steps += aValue.substring(1)*1;
+			} else if (aValue.charAt(0) == '-') {
+				this._steps -= aValue.substring(1)*1;
+			} else {
+				this._steps = aValue.substring(1)*1;
+			}
+		} else {
+			this._steps = aValue;
+		}
+	},
+	
+	//-----------------------------------------------------
+
+	'deferredShow': function(aConfiguration, anAnimationTargetElement, aValue) {
+		this.show(aConfiguration, anAnimationTargetElement);
+		
+		return aValue;
+	},
+	
+	'show': function(aConfiguration, anAnimationTargetElement) {
+		var	messageBoxConfiguration;
+		
+		messageBoxConfiguration = MochiKit.Base.clone(aConfiguration);
+		messageBoxConfiguration.msg = messageBoxConfiguration.text;
+		messageBoxConfiguration.animEl = anAnimationTargetElement;
+		messageBoxConfiguration.progress = messageBoxConfiguration.showProgressBar;
+		messageBoxConfiguration.closable = messageBoxConfiguration.showCloseButton;
+		this.setSteps(aConfiguration.steps || 0);
+		this.setStep(aConfiguration.step || 0);
+		delete messageBoxConfiguration.buttons;
+		
+		Clipperz.YUI.MessageBox.show(messageBoxConfiguration);
+	},
+
+	//-----------------------------------------------------
+
+	'update': function(someValues) {
+//MochiKit.Logging.logDebug(">>> MessageBox.update");
+		if (someValues.title) {
+			Clipperz.YUI.MessageBox.getDialog().setTitle(someValues.title);
+		};
+
+		if (someValues.text) {
+			Clipperz.YUI.MessageBox.updateText(someValues.text);
+		};
+		
+		if (typeof(someValues.showProgressBar) != 'undefined') {
+            Clipperz.YUI.MessageBox.progressElement().setDisplayed(someValues.showProgressBar);
+            Clipperz.YUI.MessageBox.updateProgress(0);
+		};
+
+		if (typeof(someValues.steps) != 'undefined') {
+			this.setSteps(someValues.steps);
+		};
+
+		if (typeof(someValues.step) != 'undefined') {
+			this.setStep(someValues.step);
+		} else {
+			this.setStep('next');
+		}
+		Clipperz.YUI.MessageBox.updateProgress(this.step() / this.steps());
+		
+
+		if (typeof(someValues.fn) != 'undefined') {
+            Clipperz.YUI.MessageBox.opt().fn = someValues.fn;
+		};
+
+		if (typeof(someValues.scope) != 'undefined') {
+            Clipperz.YUI.MessageBox.opt().scope = someValues.scope;
+		};
+		
+		if (someValues.buttons) {
+			Clipperz.YUI.MessageBox.updateButtons(someValues.buttons);
+		};
+		
+//		if (someValues.title) {
+//			Clipperz.YUI.MessageBox.getDialog().setTitle(someValues.title + " [" + this.step() + " / " + this.steps() + "]");
+//		};
+		
+//MochiKit.Logging.logDebug("--- MessageBox.update - step: " + this.step() + " / " + this.steps() + " - " + someValues.text);
+//MochiKit.Logging.logDebug("<<< MessageBox.update");
+	},
+
+	//-----------------------------------------------------
+	
+	'hide': function(anAnimationTargetElement) {
+		if (anAnimationTargetElement) {
+			Clipperz.YUI.MessageBox.getDialog().animateTarget = anAnimationTargetElement;
+		}
+		
+		Clipperz.YUI.MessageBox.hide();
+	},
+	
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});
+
+
+//##########################################################
+
+_clipperz_pm_components_messageBox = null;
+
+Clipperz.PM.Components.MessageBox = function() {
+	if (_clipperz_pm_components_messageBox == null) {
+		_clipperz_pm_components_messageBox = new Clipperz.PM.Components.MessageBoxImplementation();
+	}
+	
+	return _clipperz_pm_components_messageBox;
+}
+
+//---------------------------------------------------------
+
+Clipperz.PM.Components.MessageBox.showProgressPanel = function(aCallback, anErrback, anActivationItem) {
+	var deferredResult;
+
+	deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Clipperz.PM.Components.MessageBox.showProgressPanel - 0: " + res); return res;});
+	deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+		{
+			title: "",
+			text: "",
+			width:240,
+			showProgressBar:true,
+			showCloseButton:false,
+			fn:MochiKit.Base.method(deferredResult, 'cancel'),
+			scope:this,
+			buttons:{
+			//	'ok':Clipperz.PM.Strings['loginMessagePanelInitialButtonLabel']
+			}
+		},
+		anActivationItem
+	);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Clipperz.PM.Components.MessageBox.showProgressPanel - 1: " + res); return res;});
+	deferredResult.addCallback(aCallback);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Clipperz.PM.Components.MessageBox.showProgressPanel - 2: " + res); return res;});
+	deferredResult.addCallback(MochiKit.Async.wait, 0.5);
+	deferredResult.addCallback(function(res) {
+		Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get(anActivationItem));
+		return res;
+	});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Clipperz.PM.Components.MessageBox.showProgressPanel - 3: " + res); return res;});
+	deferredResult.addErrback(anErrback);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("Clipperz.PM.Components.MessageBox.showProgressPanel - 4: " + res); return res;});
+	deferredResult.callback();
+	
+	return deferredResult;
+};
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/OTP/MainComponent.js b/frontend/beta/js/Clipperz/PM/Components/OTP/MainComponent.js
new file mode 100644
index 0000000..9d191f6
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/OTP/MainComponent.js
@@ -0,0 +1,490 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.OTP) == 'undefined') { Clipperz.PM.Components.OTP = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.OTP.MainComponent = function(anElement, args) {
+	args = args || {};
+
+//MochiKit.Logging.logDebug("new OTP.MainComponent");
+    Clipperz.PM.Components.OTP.MainComponent.superclass.constructor.call(this, anElement, args);
+
+	this._user = args.user;
+	this._shouldRender = true;
+
+	this._deleteButton = null;
+	this._printButton = null;
+
+	Clipperz.NotificationCenter.register(null, 'tabSelected', this, 'tabSelectedHandler');
+//	Clipperz.NotificationCenter.register(null, 'oneTimePasswordAdded', this, 'render');
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.OTP.MainComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.OTP.MainComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug("### OTP.MainComponent.render");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			this.element().update("");
+			this.domHelper().append(this.element(), {tag:'div', cls:'oneTimePasswordReadOnlyMessage', htmlString:Clipperz.PM.Strings['oneTimePasswordReadOnlyMessage']});
+		} else {
+			var deferredResult;
+
+			deferredResult = new MochiKit.Async.Deferred();
+
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("OTP.MainComponent.render - 1: " + res); return res;});
+			deferredResult.addCallback(MochiKit.Base.bind(function() {
+				this.element().update("");
+				Clipperz.YUI.DomHelper.append(this.element(), {tag:'div', htmlString:Clipperz.PM.Strings['oneTimePasswordLoadingMessage']});
+			}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("OTP.MainComponent.render - 2: " + res); return res;});
+			deferredResult.addCallback(MochiKit.Base.method(this.user(), 'loadOneTimePasswords'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("OTP.MainComponent.render - 3: " + res); return res;});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("OTP.MainComponent.render - 3.1: " + Clipperz.Base.serializeJSON(res.serializedData())); return res;});
+			deferredResult.addCallback(MochiKit.Base.bind(function(aResult) {
+				var	tbodyElement;
+				var	oneTimePasswordReferenceKeys;
+				var imageExtension;
+				var isThereAnyActiveOneTimePassword;
+
+				isThereAnyActiveOneTimePassword = false;
+				
+				this.element().update("");
+				Clipperz.YUI.DomHelper.append(this.element(), {tag:'div', id:'oneTimePasswordList', children:[
+					{tag:'div', id:'oneTimePasswords_header', children:[
+						{tag:'table', width:'100%', children:[
+							{tag:'tbody', children:[
+								{tag:'tr', children:[
+									{tag:'td', width:'10%', children:[
+										{tag:'div', id:this.getId('createNewOneTimePasswordButton')}
+									]},
+									{tag:'td', width:'40%', children:[
+										{tag:'div', id:this.getId('deleteSelectedOneTimePasswordButton')}
+									]},
+									{tag:'td', width:'50%', align:'right', children:[
+										{tag:'div', id:this.getId('printOneTimePasswordButton')}
+									]}
+								]}
+							]}
+						]},
+						{tag:'div', children:[
+							{tag:'ul', children:[
+								{tag:'li', children:[
+									{tag:'span', htmlString:Clipperz.PM.Strings['oneTimePasswordSelectionLink_selectLabel']}
+								]},
+								{tag:'li', children:[
+									{tag:'a', href:'#', id:this.getId('selectAllOneTimePasswords_link'), htmlString:Clipperz.PM.Strings['oneTimePasswordSelectionLink_all']}
+								]},
+								{tag:'li', children:[
+									{tag:'a', href:'#', id:this.getId('selectNoneOneTimePasswords_link'), htmlString:Clipperz.PM.Strings['oneTimePasswordSelectionLink_none']}
+								]},
+								{tag:'li', children:[
+									{tag:'a', href:'#', id:this.getId('selectUsedOneTimePasswords_link'), htmlString:Clipperz.PM.Strings['oneTimePasswordSelectionLink_used']}
+								]},
+								{tag:'li', children:[
+									{tag:'a', href:'#', id:this.getId('selectUnusedOneTimePasswords_link'), htmlString:Clipperz.PM.Strings['oneTimePasswordSelectionLink_unused']}
+								]}
+							]}
+						]}
+					]},
+					{tag:'form', id:this.getId('oneTimePasswords_form'), children:[
+						{tag:'table', cls:'oneTimePassword', cellspacing:'0', cellpadding:'2', children:[
+							{tag:'tbody', id:this.getId('oneTimePasswords_tbody'), children:[
+							]}
+						]}
+					]}
+				]});
+
+				imageExtension = (Clipperz_IEisBroken == true) ? 'gif': 'png';
+
+				tbodyElement = this.getElement('oneTimePasswords_tbody');
+				oneTimePasswordReferenceKeys = MochiKit.Base.keys(this.user().oneTimePasswordManager().oneTimePasswords()).reverse();
+				c = oneTimePasswordReferenceKeys.length;
+				if (c>0) {
+					for (i=0; i<c; i++) {
+						var otpReference;
+						var currentOTP;
+						var loginSessionInfoConfig;
+
+						imageExtension = (Clipperz_IEisBroken == true) ? 'gif': 'png';
+
+						otpReference = oneTimePasswordReferenceKeys[i];
+						currentOTP = this.user().oneTimePasswordManager().oneTimePasswords()[otpReference];
+
+						switch (currentOTP.status()) {
+							case 'USED':
+								var loginSessionInfo;
+
+								loginSessionInfo = currentOTP.connectionInfo();
+								try {
+									var ip;
+
+									ip = (currentOTP.connectionInfo()['ip'].match(/^\d{1,3}(.\d{1,3}){3}$/)) ? currentOTP.connectionInfo()['ip'] : Clipperz.PM.Strings['unknown_ip'];
+
+									loginSessionInfoConfig = [
+										{tag:'div', cls:'oneTimePassword_usageDateDescription', children:[
+											{tag:'span', cls:'value', html:Clipperz.PM.Date.getElapsedTimeDescription(currentOTP.usageDate())}
+										]},
+										{tag:'div', cls:'oneTimePassword_usageDetails', children:[
+											{tag:'img', cls:'flag', title:Clipperz.PM.Strings['countries'][ loginSessionInfo['country']], src:Clipperz.PM.Strings['icons_baseUrl'] + "/flags/" + loginSessionInfo['country'].toLowerCase() + "." +  imageExtension, width:'32', height:'32'},
+											{tag:'img', cls:'browser', title:Clipperz.PM.Strings['browsers'][ loginSessionInfo['browser']], src:Clipperz.PM.Strings['icons_baseUrl'] + "/browsers/" + loginSessionInfo['browser'].toLowerCase() + "." + imageExtension, width:'32', height:'32'},
+											{tag:'img', cls:'operatingSystem', title:Clipperz.PM.Strings['operatingSystems'][loginSessionInfo['operatingSystem']], src:Clipperz.PM.Strings['icons_baseUrl'] + "/operatingSystems/" + loginSessionInfo['operatingSystem'].toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+										]},
+										{tag:'div', cls:'oneTimePassword_usageDate', html:Clipperz.PM.Date.formatDateWithTemplate(currentOTP.usageDate(), Clipperz.PM.Strings['fullDate_format'])},
+										{tag:'div', cls:'oneTimePassword_IP', children:[
+											{tag:'span', cls:'oneTimePassword_IPLabel', htmlString:Clipperz.PM.Strings['loginHistoryIPLabel']},
+											{tag:'span', cls:'oneTimePassword_IPValue', html:ip}
+										]}
+									];
+								} catch(exception) {
+									MochiKit.Logging.logWarning("an error occured while showing the One Time Password session details");
+									loginSessionInfoConfig = [];
+								}
+								break;
+							case 'DISABLED':
+								loginSessionInfoConfig = [
+									{tag:'span', cls:'disabledOneTimePassword', htmlString:Clipperz.PM.Strings['disabledOneTimePassword_warning']}
+								];
+								break;
+							case 'ACTIVE':
+							default:
+								loginSessionInfoConfig = [];
+								break;
+						}
+
+
+						if (currentOTP.isExpired() == false) {
+							isThereAnyActiveOneTimePassword = true;
+						};
+
+						
+						this.domHelper().append(tbodyElement, {tag:'tr', cls:(currentOTP.isExpired() ? 'oneTimePassword_used': 'oneTimePassword_new'), children:[
+							{tag:'td', valign:'top', children:[
+								{tag:'input', type:'checkbox', cls:'otpCheckbox', name:currentOTP.reference()}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'span', cls:'oneTimePassword_value', html:currentOTP.password()}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'div', cls:'oneTimePassword_usageStats', children:loginSessionInfoConfig}
+							]}
+						]});
+					}
+				} else {
+					this.domHelper().append(tbodyElement, {tag:'tr', children:[
+						{tag:'td', children:[
+							{tag:'div', cls:'oneTimePassword_noPasswordPresent', htmlString:Clipperz.PM.Strings['oneTimePasswordNoPasswordAvailable']}
+						]}
+					]});
+				}
+
+				new YAHOO.ext.Button(this.getDom('createNewOneTimePasswordButton'), {text:Clipperz.PM.Strings['createNewOTPButtonLabel'], handler:this.createNewOneTimePassword, scope:this});
+				this.setDeleteButton(new YAHOO.ext.Button(this.getDom('deleteSelectedOneTimePasswordButton'), {text:Clipperz.PM.Strings['deleteOTPButtonLabel'], handler:this.deleteSelectedOneTimePasswords, scope:this}));
+				this.setPrintButton(new YAHOO.ext.Button(this.getDom('printOneTimePasswordButton'), {text:Clipperz.PM.Strings['printOTPButtonLabel'], handler:this.printOneTimePasswords, scope:this}));
+
+				MochiKit.Signal.connect(this.getId('selectAllOneTimePasswords_link'),	'onclick', this, 'selectAllOneTimePasswords');
+				MochiKit.Signal.connect(this.getId('selectNoneOneTimePasswords_link'),	'onclick', this, 'selectNoneOneTimePasswords');
+				MochiKit.Signal.connect(this.getId('selectUsedOneTimePasswords_link'),	'onclick', this, 'selectUsedOneTimePasswords');
+				MochiKit.Signal.connect(this.getId('selectUnusedOneTimePasswords_link'),'onclick', this, 'selectUnusedOneTimePasswords');
+
+				MochiKit.Base.map(MochiKit.Base.bind(function(aCheckbox) {
+					MochiKit.Signal.connect(aCheckbox, 'onclick', this, 'handleCheckboxClick');
+				}, this), this.oneTimePasswordCheckboxes());
+
+				this.updateDeleteButtonStatus();
+
+				if (isThereAnyActiveOneTimePassword == true) {
+					this.printButton().enable();
+				} else {
+					this.printButton().disable();
+				}
+				
+//				Clipperz.NotificationCenter.register(null, 'oneTimePasswordAdded', this, 'render');
+				Clipperz.NotificationCenter.register(null, 'oneTimePassword_saveChanges_done', this, 'render');
+
+			}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("OTP.MainComponent.render - 4: " + res); return res;});
+
+			deferredResult.callback();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'printOneTimePasswords': function() {
+		var newWindow;
+		var activeOneTimePasswords;
+
+//MochiKit.Logging.logDebug(">>> printAllData");
+		newWindow = window.open("", "");
+		newWindow.document.write(
+"<html>" +
+"<header>" +
+"	<title>Clipperz One Time Password</title>" +
+"<style>" +
+"div.oneTimePassword_print h2 {" +
+"	font-family: monospace;" +
+"	font-weight: normal;" +
+"	padding: 10px 20px;" +
+"}" +
+"</style>" +
+"" +
+"<!--[if IE]>" +
+"<style>" +
+"</style>" +
+"<![endif]-->" +
+"" +
+"</header>" +
+"<body>" +
+"</body>" +
+"</html>"
+		);
+
+		activeOneTimePasswords = MochiKit.Base.filter(function(aOneTimePassword) {return (aOneTimePassword.isExpired() == false)}, MochiKit.Base.values(this.user().oneTimePasswordManager().oneTimePasswords()).reverse());
+
+		MochiKit.Iter.forEach(activeOneTimePasswords, MochiKit.Base.partial(function(aWindow, aOneTimePassword) {
+			MochiKit.DOM.withWindow(aWindow, MochiKit.Base.partial(function(aOneTimePassword) {
+				var newBlock;
+
+				newBlock = MochiKit.DOM.DIV({'class': 'oneTimePassword_print'},
+					MochiKit.DOM.H2(null, aOneTimePassword.password())
+				);
+				MochiKit.DOM.appendChildNodes(MochiKit.DOM.currentDocument().body, newBlock);
+			
+			}, aOneTimePassword));
+		}, newWindow));
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'generateRandomBase32OTPValue': function(aButton) {
+		var randomValue;
+		var	result;
+
+		randomValue = Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(160/8);
+		result = randomValue.toBase32String();
+		result = result.replace(/.{4}\B/g, '$&' + ' ');
+		result = result.replace(/(.{4} ){2}/g, '$&' + '- ');
+
+		return result;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'createNewOneTimePassword': function() {
+		var newOneTimePassword;
+		var password;
+		
+		password = this.generateRandomBase32OTPValue();
+		newOneTimePassword = new Clipperz.PM.DataModel.OneTimePassword({
+									user:this.user(),
+									password:password
+		});
+		this.user().oneTimePasswordManager().addOneTimePassword(newOneTimePassword);
+		Clipperz.PM.Components.MessageBox.showProgressPanel(MochiKit.Base.method(newOneTimePassword, 'saveChanges'), null, this.getDom('createNewOneTimePasswordButton'));
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'oneTimePasswordCheckboxes': function() {
+		return MochiKit.DOM.getElementsByTagAndClassName('input', 'otpCheckbox', this.getId('oneTimePasswords_tbody'));
+	},
+
+	'checkedOneTimePasswordCheckboxes': function() {
+		return MochiKit.Base.filter(function(aCheckbox) {return (aCheckbox.checked == true)}, this.oneTimePasswordCheckboxes());
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'selectAllOneTimePasswords': function(anEvent) {
+		var checkboxes;
+		var i,c;
+
+		anEvent.stop();
+		checkboxes = this.oneTimePasswordCheckboxes();
+		c = checkboxes.length;
+		for (i=0; i<c; i++) {
+			checkboxes[i].checked = true;
+		}
+
+		this.updateDeleteButtonStatus();
+	},
+	
+	'selectNoneOneTimePasswords': function(anEvent) {
+		var checkboxes;
+		var i,c;
+		
+		anEvent.stop();
+		checkboxes = this.oneTimePasswordCheckboxes();
+		c = checkboxes.length;
+		for (i=0; i<c; i++) {
+			checkboxes[i].checked = false;
+		}
+
+		this.updateDeleteButtonStatus();
+	},
+
+	'selectUsedOneTimePasswords': function(anEvent) {
+		var checkboxes;
+		var oneTimePasswordManager;
+		var i,c;
+		
+		anEvent.stop();
+		oneTimePasswordManager = this.user().oneTimePasswordManager();
+		checkboxes = this.oneTimePasswordCheckboxes();
+		c = checkboxes.length;
+		for (i=0; i<c; i++) {
+			var matchingOneTimePassword;
+
+			matchingOneTimePassword = oneTimePasswordManager.oneTimePasswordWithReference(checkboxes[i].name);
+			checkboxes[i].checked = matchingOneTimePassword.isExpired();
+		}
+
+		this.updateDeleteButtonStatus();
+	},
+
+	'selectUnusedOneTimePasswords': function(anEvent) {
+		var checkboxes;
+		var oneTimePasswordManager;
+		var i,c;
+		
+		anEvent.stop();
+		oneTimePasswordManager = this.user().oneTimePasswordManager();
+		checkboxes = this.oneTimePasswordCheckboxes();
+		c = checkboxes.length;
+		for (i=0; i<c; i++) {
+			var matchingOneTimePassword;
+
+			matchingOneTimePassword = oneTimePasswordManager.oneTimePasswordWithReference(checkboxes[i].name);
+			checkboxes[i].checked = !matchingOneTimePassword.isExpired();
+		}
+
+		this.updateDeleteButtonStatus();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleCheckboxClick': function(anEvent) {
+		this.updateDeleteButtonStatus();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'deleteSelectedOneTimePasswords': function() {
+		var deferredResult;
+		var otpToDelete;
+		var i,c;
+		
+		otpToDelete = this.checkedOneTimePasswordCheckboxes();
+		c = otpToDelete.length;
+		for (i=0; i<c; i++) {
+//MochiKit.Logging.logDebug("otp to delete: " + otpToDelete[i].name);
+			this.user().oneTimePasswordManager().deleteOneTimePasswordWithReference(otpToDelete[i].name);
+		};
+
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("ActiveOTPPanel.deleteSelectedOneTimePasswords - 0: " + res); return res;});
+		deferredResult.addCallback(Clipperz.PM.Components.MessageBox.showProgressPanel, MochiKit.Base.method(this.user().oneTimePasswordManager(), 'saveChanges'), null, null);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("ActiveOTPPanel.deleteSelectedOneTimePasswords - 1: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'render'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("ActiveOTPPanel.deleteSelectedOneTimePasswords - 2: " + res); return res;});
+		deferredResult.callback();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'shouldRender': function() {
+		return this._shouldRender;
+	},
+	
+	'setShouldRender': function(aValue) {
+		this._shouldRender = aValue;
+	},
+	
+	'tabSelectedHandler': function(anEvent) {
+		if ((this.shouldRender()) && (anEvent.source().selectedTab() == 'manageOTPTab')) {
+			this.render();
+			this.setShouldRender(false);
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'deleteButton': function() {
+		return this._deleteButton;
+	},
+	
+	'setDeleteButton': function(aValue) {
+		this._deleteButton = aValue;
+	},
+
+	'updateDeleteButtonStatus': function() {
+		if (this.checkedOneTimePasswordCheckboxes().length > 0) {
+			this.deleteButton().enable();
+		} else {
+			this.deleteButton().disable();
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'printButton': function() {
+		return this._printButton;
+	},
+	
+	'setPrintButton': function(aValue) {
+		this._printButton = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/AccountPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/AccountPanel.js
new file mode 100644
index 0000000..6b467d0
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/AccountPanel.js
@@ -0,0 +1,784 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.AccountPanel = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new AccountPanel");
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.AccountPanel.superclass.constructor.call(this, anElement, args);
+
+	Clipperz.NotificationCenter.register(null, 'setupDone', this, 'render');
+
+	this._shouldLoadLoginHistory = true;
+	
+//	this.render();
+//MochiKit.Logging.logDebug("<<< new AccountPanel");
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.AccountPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.AccountPanel component";
+	},
+
+	//-------------------------------------------------------------------------
+ 
+	'render': function() {
+		var errorMessageActor;
+		var	changePasswordButton;
+		var deleteAccountButton;
+
+try {
+//MochiKit.Logging.logDebug(">>> AccountPanel.render");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+			{tag:'tbody', children:[
+				{tag:'tr', children:[
+					{tag:'td', valign:'top', width:'200', children:[
+						{tag:'ul', id:"accountSubMenu", cls:'subMenu', children:[
+							{tag:'li', id:'changePassphraseTab', htmlString:Clipperz.PM.Strings['changePasswordTabLabel']},
+							{tag:'li', id:'manageOTPTab', htmlString:Clipperz.PM.Strings['manageOTPTabLabel']},
+							{tag:'li', id:'accountPreferencesTab', htmlString:Clipperz.PM.Strings['accountPreferencesLabel']},
+							{tag:'li', id:'loginHistoryTab', htmlString:Clipperz.PM.Strings['accountLoginHistoryLabel']},
+							{tag:'li', id:'deleteAccountTab', htmlString:Clipperz.PM.Strings['deleteAccountTabLabel']}
+//							{tag:'li', id:'paidAccountTab'), htmlString:Clipperz.PM.Strings['paidAccountTabLabel']}
+						]}
+					]},
+					{tag:'td', valign:'top', children:[
+						{tag:'ul', cls:'clipperzTabPanels', children:[
+							{tag:'li', id:this.getId('changePassphrasePanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['changePasswordTabTitle']},
+									{tag:'div', cls:'panelBody', id:'changePassphraseBlock', children:[
+										{tag:'form', id:this.getId('changePassphraseForm'), children:[
+											{tag:'h5', cls:'errorMessage', id:this.getId('changePassphrase_errorMessage')},
+											{tag:'table', cls:'panelBody', children:[
+												{tag:'tr', children:[
+													{tag:'td', children:[
+														{tag:'span', cls:'formLabel', htmlString:Clipperz.PM.Strings['changePasswordFormUsernameLabel']}
+													]},
+													{tag:'td', children:[
+														{tag:'input', type:'text', name:'username', id:this.getId('changePassphrase_username')}
+													]}
+												]},
+												{tag:'tr', children:[
+													{tag:'td', children:[
+														{tag:'span', cls:'formLabel', htmlString:Clipperz.PM.Strings['changePasswordFormOldPassphraseLabel']}
+													]},
+													{tag:'td', children:[
+														{tag:'input', type:'password', name:'oldPassphrase', id:this.getId('changePassphrase_oldPassphrase')}
+													]}
+												]},
+												{tag:'tr', children:[
+													{tag:'td', children:[
+														{tag:'span', cls:'formLabel', htmlString:Clipperz.PM.Strings['changePasswordFormNewPassphraseLabel']}
+													]},
+													{tag:'td', children:[
+														{tag:'input', type:'password', name:'newPassphrase', id:this.getId('changePassphrase_newPassphrase')}
+													]}
+												]},
+												{tag:'tr', children:[
+													{tag:'td', children:[
+														{tag:'span', cls:'formLabel', htmlString:Clipperz.PM.Strings['changePasswordFormRetypePassphraseLabel']}
+													]},
+													{tag:'td', children:[
+														{tag:'input', type:'password', name:'renewPassphrase', id:this.getId('changePassphrase_renewPassphrase')}
+													]}
+												]},
+												{tag:'tr', children:[
+													{tag:'td', align:'right', children:[
+														{tag:'input', type:'checkbox', id:this.getId('changePassphrase_safetyCheck')}
+													]},
+													{tag:'td', children:[
+														{tag:'span', htmlString:Clipperz.PM.Strings['changePasswordFormSafetyCheckboxLabel']}
+													]}
+												]}
+											]},
+											{tag:'div', cls:'clipperzSubPanelButtonBox', children:[
+												{tag:'div', id:this.getId('changePassphraseButton')}
+											]}
+										]}
+									]}
+								]}
+							]},
+							{tag:'li', id:this.getId('manageOTPPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['manageOTPTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['manageOTPTabDescription']},
+									{tag:'div', id:'OTPComponent'}
+								]}
+							]},
+							{tag:'li', id:this.getId('accountPreferencesPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['accountPreferencesTabTitle']},
+									{tag:'div', cls:'panelBody', id:this.getId('preferencesPanelBody')}
+								]}
+							]},
+							{tag:'li', id:this.getId('loginHistoryAccountPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['loginHistoryTabTitle']},
+									{tag:'div', cls:'panelBody', id:'loginHistoryAccountBlock'}
+								]}
+							]},
+							{tag:'li', id:this.getId('deleteAccountPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['deleteAccountTabTitle']},
+
+									{tag:'div', cls:'panelBody', id:'deleteAccountBlock', children:[
+										{tag:'form', id:this.getId('deleteAccountForm'), children:[
+											{tag:'h5', cls:'errorMessage', id:this.getId('deleteAccount_errorMessage')},
+											{tag:'table', cls:'panelBody', children:[
+												{tag:'tr', children:[
+													{tag:'td', children:[
+														{tag:'span', cls:'formLabel', htmlString:Clipperz.PM.Strings['deleteAccountFormUsernameLabel']}
+													]},
+													{tag:'td', children:[
+														{tag:'input', type:'text', name:'username', id:this.getId('deleteAccount_username')}
+													]}
+												]},
+												{tag:'tr', children:[
+													{tag:'td', children:[
+														{tag:'span', cls:'formLabel', htmlString:Clipperz.PM.Strings['deleteAccountFormPassphraseLabel']}
+													]},
+													{tag:'td', children:[
+														{tag:'input', type:'password', name:'passphrase', id:this.getId('deleteAccount_passphrase')}
+													]}
+												]},
+												{tag:'tr', children:[
+													{tag:'td', align:'right', children:[
+														{tag:'input', type:'checkbox', id:this.getId('deleteAccount_safetyCheck')}
+													]},
+													{tag:'td', children:[
+														{tag:'span', htmlString:Clipperz.PM.Strings['deleteAccountFormSafetyCheckboxLabel']}
+													]}
+												]}
+											]},
+											{tag:'div', cls:'clipperzSubPanelButtonBox', children:[
+												{tag:'div', id:this.getId('deleteAccountButton')}
+											]}
+										]}
+									]}
+								]}
+							]}
+/*							
+							{tag:'li', id:this.getId('paidAccountPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['upgradeAccountTabTitle']},
+									{tag:'div', htmlString:Clipperz.PM.Strings['comingSoon']}
+								]}
+							]}
+*/
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+//MochiKit.Logging.logDebug("--- AccountPanel.render - 1");
+		MochiKit.Signal.connect(this.getId('changePassphraseForm'), 'onkeydown', this, 'onkeydown');
+		errorMessageActor = this.getActor('changePassphrase_errorMessage');
+		errorMessageActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		errorMessageActor.update("---");
+		errorMessageActor.hide();
+		changePasswordButton = new YAHOO.ext.Button(this.getDom('changePassphraseButton'), {text:Clipperz.PM.Strings['changePasswordFormSubmitLabel'], handler:this.doChangePassphrase, scope:this});
+
+//MochiKit.Logging.logDebug("--- AccountPanel.render - 2");
+		
+		MochiKit.Signal.connect(this.getId('deleteAccountForm'), 'onkeydown', this, 'onkeydown');
+		errorMessageActor = this.getActor('deleteAccount_errorMessage');
+		errorMessageActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		errorMessageActor.update(Clipperz.PM.Strings['deleteAccountFormEmptyErrorMessage']);
+		errorMessageActor.hide();
+		deleteAccountButton = new YAHOO.ext.Button(this.getDom('deleteAccountButton'), {text:Clipperz.PM.Strings['deleteAccountFormSubmitLabel'], handler:this.doDeleteAccount, scope:this});
+//MochiKit.Logging.logDebug("--- AccountPanel.render - 5");
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			this.getElement('changePassphraseForm').addClass('read-only');
+//			this.getElement('accountPreferencesForm').addClass('read-only');
+			this.getElement('deleteAccountForm').addClass('read-only');
+			changePasswordButton.disable();
+			deleteAccountButton.disable();
+		}
+//MochiKit.Logging.logDebug("--- AccountPanel.render - 6");
+
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('changePassphrase_oldPassphrase'));
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('changePassphrase_newPassphrase'));
+		
+		new Clipperz.PM.Components.OTP.MainComponent(YAHOO.ext.Element.get('OTPComponent'), {user:this.user()});
+		
+		this.tabPanelController().setUp();
+		Clipperz.NotificationCenter.register(null, 'tabSelected', this, 'tabSelectedHandler');
+		Clipperz.NotificationCenter.register(null, 'updatedPreferences', this, 'renderPreferences');
+		Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'switchLanguageHandler');
+//MochiKit.Logging.logDebug("<<< AccountPanel.render");
+
+} catch(exception) {
+	MochiKit.Logging.logError("### " + exception);
+	throw exception;
+}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'tabPanelController': function() {
+		if (this._tabPanelController == null) {
+			var tabPanelControllerConfig;
+			
+			tabPanelControllerConfig = {}
+			tabPanelControllerConfig['changePassphraseTab'] = this.getId('changePassphrasePanel');
+			tabPanelControllerConfig['manageOTPTab'] = this.getId('manageOTPPanel');
+			tabPanelControllerConfig['accountPreferencesTab'] = this.getId('accountPreferencesPanel');
+			tabPanelControllerConfig['loginHistoryTab'] = this.getId('loginHistoryAccountPanel');
+			tabPanelControllerConfig['deleteAccountTab'] = this.getId('deleteAccountPanel');
+//			tabPanelControllerConfig['paidAccountTab'] = this.getId('paidAccountPanel');
+
+			this._tabPanelController = new Clipperz.PM.Components.TabPanel.TabPanelController({
+												name:'accountTabPanel',
+												config:tabPanelControllerConfig,
+												selectedTab:'changePassphraseTab'
+			});
+		}
+		
+		return this._tabPanelController;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'doChangePassphrase': function() {
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly() == false) {
+			var	username;
+			var	oldPassphrase;
+			var newPassphrase;
+			var renewPassphrase;
+			var safetyCheck;
+			var	areThereAnyErrors;
+			var errorMessageActor;
+
+			errorMessageActor = this.getActor('changePassphrase_errorMessage');
+
+			areThereAnyErrors = false;
+			username = this.getDom('changePassphrase_username').value;
+			oldPassphrase= this.getDom('changePassphrase_oldPassphrase').value;
+			newPassphrase= this.getDom('changePassphrase_newPassphrase').value;
+			renewPassphrase= this.getDom('changePassphrase_renewPassphrase').value;
+			safetyCheck = this.getDom('changePassphrase_safetyCheck').checked;
+
+			if (this.user().username() != username) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['changePasswordFormWrongUsernameWarning']);
+				this.getElement('changePassphrase_username').focus().dom.select();
+				areThereAnyErrors = true;
+			} else if (this.user().passphrase() != oldPassphrase) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['changePasswordFormWrongPassphraseWarning']);
+				this.getElement('changePassphrase_oldPassphrase').focus().dom.select();
+				areThereAnyErrors = true;
+			} else if (newPassphrase != renewPassphrase) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['changePasswordFormWrongRetypePassphraseWarning']);
+				this.getElement('changePassphrase_renewPassphrase').focus().dom.select();
+				areThereAnyErrors = true;
+			} else if (safetyCheck != true) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['changePasswordFormSafetyCheckWarning']);
+				this.getElement('changePassphrase_safetyCheck').focus();
+				areThereAnyErrors = true;
+			}
+
+			if (areThereAnyErrors == false) {
+				errorMessageActor.hide();
+				this.doChangePassphraseWithUsernameAndPassphrase(username, newPassphrase);
+			}
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'doChangePassphraseWithUsernameAndPassphrase': function(anUsername, aPassphrase) {
+		var deferredResult;
+
+//MochiKit.Logging.logDebug(">>> AccountPanel.doChangePassphraseWithUsernameAndPassphrase - this.user: " + this.user());
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 1: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+				title:Clipperz.PM.Strings['changePasswordFormProgressDialogTitle'],
+				text:Clipperz.PM.Strings['changePasswordFormProgressDialogEmptyText'],
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false,
+				steps:4
+			},
+			this.getDom('changePassphraseButton')
+		);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 2: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(this.user(), 'changeCredentials'), anUsername, aPassphrase);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 3: " + res); return res;});
+		deferredResult.addCallback(function() {
+			Clipperz.PM.Components.MessageBox().update({
+				title:Clipperz.PM.Strings['changePasswordFormProgressDialogConnectedMessageTitle'],
+				text:Clipperz.PM.Strings['changePasswordFormProgressDialogConnectedMessageText'],
+				/*showProgressBar:false,*/
+				step:'next'
+			});
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 4: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Async.wait, 1);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 5: " + res); return res;});
+		deferredResult.addCallback(function(anAccountPanel, res) {
+			Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get('main'));
+			
+			anAccountPanel.getDom('changePassphrase_username').value = "";
+			anAccountPanel.getDom('changePassphrase_oldPassphrase').value = "";
+			anAccountPanel.getElement('changePassphrase_oldPassphrase').focus();
+			anAccountPanel.getDom('changePassphrase_newPassphrase').value = "";
+			anAccountPanel.getElement('changePassphrase_newPassphrase').focus();
+			anAccountPanel.getDom('changePassphrase_renewPassphrase').value = "";
+			anAccountPanel.getDom('changePassphrase_safetyCheck').checked = false;
+
+			anAccountPanel.getElement('changePassphrase_username').focus();
+			return res;
+		}, this);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 6: " + res); return res;});
+		deferredResult.addErrback(function() {
+			Clipperz.PM.Components.MessageBox().update({
+				title:Clipperz.PM.Strings['changePasswordFormProgressDialogErrorMessageTitle'],
+				text:Clipperz.PM.Strings['changePasswordFormProgressDialogErrorMessageText'],
+				buttons:{'ok':"close"}
+			});
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug(" AccountPanel.doChangePassphraseWithUsernameAndPassphrase 7: " + res); return res;});
+		deferredResult.callback();
+
+//MochiKit.Logging.logDebug("<<< AccountPanel.doChangePassphraseWithUsernameAndPassphrase");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'doDeleteAccount': function() {
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly() == false) {
+			var	username;
+			var	passphrase;
+			var safetyCheck;
+			var	areThereAnyErrors;
+			var errorMessageActor;
+		
+			errorMessageActor = this.getActor('deleteAccount_errorMessage');
+
+			areThereAnyErrors = false;
+			username = this.getDom('deleteAccount_username').value;
+			passphrase= this.getDom('deleteAccount_passphrase').value;
+			safetyCheck = this.getDom('deleteAccount_safetyCheck').checked;
+
+			if (this.user().username() != username) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['deleteAccountFormWrongUsernameWarning']);
+				this.getElement('deleteAccount_username').focus().dom.select();
+				areThereAnyErrors = true;
+			} else if (this.user().passphrase() != passphrase) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['deleteAccountFormWrongPassphraseWarning']);
+				this.getElement('deleteAccount_passphrase').focus().dom.select();
+				areThereAnyErrors = true;
+			} else if (safetyCheck != true) {
+				this.showFormErrorMessageAnimation(errorMessageActor, Clipperz.PM.Strings['deleteAccountFormSafetyCheckWarning']);
+				this.getElement('deleteAccount_safetyCheck').focus();
+				areThereAnyErrors = true;
+			}
+
+			if (areThereAnyErrors == false) {
+				var deferred;
+			
+				deferred = new MochiKit.Async.Deferred();
+				errorMessageActor.hide();
+
+				deferred.addCallback(function() {
+					var deferredResult;
+
+					//	TODO: if the form is submitted with the return key, the confirmation dialog is skipped!?
+					deferredResult = new MochiKit.Async.Deferred();
+					Clipperz.PM.Components.MessageBox().deferredShow({
+						title:Clipperz.PM.Strings['accountPanelDeletingAccountPanelConfirmationTitle'],
+						text:Clipperz.PM.Strings['accountPanelDeleteAccountPanelConfirmationText'],
+						width:240,
+						showProgressBar:false,
+						showCloseButton:false,
+						buttons:{
+							'yes':Clipperz.PM.Strings['accountPanelDeleteAccountPanelConfirmButtonLabel'],
+							'no':Clipperz.PM.Strings['accountPanelDeleteAccountPanelDenyButtonLabel']
+	 					},
+						fn:MochiKit.Base.partial(function(aDeferred, aResult) {
+							if (aResult == 'yes') {
+								aDeferred.callback(aResult);
+							} else {
+								aDeferred.errback(aResult);
+							}
+						}, deferredResult)
+					});
+				
+					return deferredResult;
+				});
+				deferred.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+					{
+						title:Clipperz.PM.Strings['accountPanelDeletingAccountPanelProgressTitle'],
+						text:Clipperz.PM.Strings['accountPanelDeletingAccountPanelProgressText'],
+						width:240,
+						showProgressBar:true,
+						showCloseButton:false
+					}
+				);
+				deferred.addCallback(MochiKit.Base.method(this.user(), 'deleteAccountAction'));
+				deferred.addCallback(Clipperz.PM.exit, 'accountDeleted.html');
+				deferred.addErrback(function(res) {
+					alert(res);
+				})
+				deferred.callback();
+			}
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'showFormErrorMessageAnimation': function(anActor, anErrorMessage, aCallback) {
+		anActor.update(anErrorMessage);
+		anActor.show(true);
+		anActor.play(aCallback);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'onkeydown': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> onkeydown - " + anEvent.src().id);
+		if (anEvent.key().code == 13) {
+			anEvent.stop();
+
+			if (anEvent.src() == this.getDom('changePassphraseForm')) {
+				this.doChangePassphrase();
+			} else if (anEvent.src() == this.getDom('deleteAccountForm')) {
+				this.doDeleteAccount();
+			} else {
+			}
+			
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectSelectedLanguageOption': function() {
+		var	userSelectedLanguage;
+
+		userSelectedLanguage = this.user().preferences().preferredLanguage() || "default";
+		MochiKit.Base.filter(function(anOption) {return (anOption.value == userSelectedLanguage)}, this.getDom('languageSelector').childNodes)[0].selected = true;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'doSaveUserPreferences': function() {
+		var selectedLanguage;
+		var showDonationReminderDialog;
+//		var disableUnsecureFaviconLoadingForIE;
+		
+//MochiKit.Logging.logDebug(">>> AccountPanel.doSaveUserPreferences");
+		selectedLanguage = this.getDom('languageSelector').value;
+		if (selectedLanguage == "default") {
+			selectedLanguage = null;
+		}
+		this.user().preferences().setPreferredLanguage(selectedLanguage);
+
+		showDonationReminderDialog = this.getDom('showDonationReminderCheckbox').checked;
+		this.user().preferences().setShouldShowDonationPanel(showDonationReminderDialog);
+
+//		disableUnsecureFaviconLoadingForIE = this.getDom('disableFaviconForIECheckbox').checked;
+//		this.user().preferences().setDisableUnsecureFaviconLoadingForIE(disableUnsecureFaviconLoadingForIE);
+		
+		this.user().preferences().saveChanges(this.getDom('saveUserPreferences'));
+	},
+	
+	'doCancelUserPreferences': function() {
+		this.renderPreferences();
+	},
+
+//	'switchLanguage': function(anEvent) {
+//		Clipperz.PM.Strings.Languages.setSelectedLanguage(anEvent.src().value);
+//	},
+
+	//-------------------------------------------------------------------------
+
+	'renderLoginHistory': function() {
+		var element;
+		
+//MochiKit.Logging.logDebug(">>> AccountPanel.renderLoginHistory");
+		element = YAHOO.ext.Element.get('loginHistoryAccountBlock');
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			element.update("");
+			this.domHelper().append(element, {tag:'div', cls:'loginHistoryReadOnlyMessage', htmlString:Clipperz.PM.Strings['loginHistoryReadOnlyMessage']});
+		} else {
+			var deferredResult;
+			
+			deferredResult = new MochiKit.Async.Deferred();
+			deferredResult.addCallback(MochiKit.Base.bind(function(anElement) {
+				anElement.update("");
+				Clipperz.YUI.DomHelper.append(anElement, {tag:'div', cls:'loadingMessage', htmlString:Clipperz.PM.Strings['loginHistoryLoadingMessage']});
+			}, this), element);
+			deferredResult.addCallback(MochiKit.Base.method(this.user(), 'loadLoginHistory'));
+			deferredResult.addCallback(MochiKit.Base.bind(function(anElement, aResult) {
+				var loginListItems;
+				var tBodyElement;
+				var imageExtension;
+				var now;
+				var i, c;
+
+				loginListItems = aResult;
+//MochiKit.Logging.logDebug("=== loginListItems: " + Clipperz.Base.serializeJSON(loginListItems));
+				imageExtension = (Clipperz_IEisBroken == true) ? 'gif': 'png';
+
+				now = new Date();
+				anElement.update("");
+				Clipperz.YUI.DomHelper.append(anElement, {tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['loginHistoryLoadedMessage']});
+				Clipperz.YUI.DomHelper.append(anElement, {tag:'table', id:'loginHistoryTable', cellspacing:'0', cellpadding:'2', border:'0', children:[
+					{tag:'tbody', id:this.getId('loginHistoryTBody'), children:[]}
+				]});
+//#				Clipperz.YUI.DomHelper.append(anElement, {tag:'div', id:'loginHistoryFooter', children:[
+				Clipperz.YUI.DomHelper.append(anElement, {tag:'div', cls:'clipperzSubPanelButtonBox', children:[
+					{tag:'div', id:this.getId('reloadHistoryButton')}
+				]});
+				
+				new YAHOO.ext.Button(this.getDom('reloadHistoryButton'), {text:Clipperz.PM.Strings['loginHistoryReloadButtonLabel'], handler:this.reloadHistory, scope:this});
+				
+				tBodyElement = this.getElement('loginHistoryTBody');
+				c = loginListItems.length;
+				for (i=0; i<c; i++) {
+					var ip;
+					var date;
+					var mainText;
+
+					date = Clipperz.PM.Date.parseDateWithUTCFormat(loginListItems[i]['date']);
+
+					if (loginListItems[i]['isCurrent'] === true) {
+						mainText ={tag:'div', cls:'currentSession', htmlString:Clipperz.PM.Strings['loginHistoryCurrentSessionText']}
+					} else {
+						mainText = {tag:'div', cls:'elapsedTime', html:Clipperz.PM.Date.getElapsedTimeDescription(date)}
+					}
+					
+					if (loginListItems[i]['connectionType'] == "ONE_TIME_PASSPHRASE") {
+						optionalInfo = [
+							{tag:'span', html:"OTP"}
+						];
+					} else {
+						optionalInfo = [];
+					}
+					
+					ip = (loginListItems[i]['ip'].match(/^\d{1,3}(.\d{1,3}){3}$/)) ? loginListItems[i]['ip'] : Clipperz.PM.Strings['unknown_ip'];
+					Clipperz.YUI.DomHelper.append(tBodyElement, {tag:'tr', children:[
+						{tag:'td', cls:'loginHistoryValues', valign:'top', children:[
+							mainText,
+							{tag:'div', cls:'fullDate', html:Clipperz.PM.Date.formatDateWithTemplate(date, Clipperz.PM.Strings['fullDate_format'])},
+							{tag:'div', cls:'loginHistoryIP', children:[
+								{tag:'span', cls:'loginHistoryIPLabel', htmlString:Clipperz.PM.Strings['loginHistoryIPLabel']},
+								{tag:'span', cls:'loginHistoryIPValue', html:ip}
+							]}
+						]},
+						{tag:'td', cls:'loginHistoryCountry', valign:'top', children:optionalInfo},
+						{tag:'td', cls:'loginHistoryCountry', valign:'top', align:'center', children:[
+							{tag:'img', title:Clipperz.PM.Strings['countries'][loginListItems[i]['country']], cls:'flag', src:Clipperz.PM.Strings['icons_baseUrl'] + "/flags/" + loginListItems[i]['country'].toLowerCase() + "." +  imageExtension, width:'32', height:'32'}
+//							{tag:'span', cls:'label', htmlString:Clipperz.PM.Strings['countries'][loginListItems[i]['country']]}
+						]},
+						{tag:'td', cls:'loginHistoryBrowser', valign:'top', align:'center', children:[
+							{tag:'img', title:Clipperz.PM.Strings['browsers'][loginListItems[i]['browser']], cls:'browser', src:Clipperz.PM.Strings['icons_baseUrl'] + "/browsers/" + loginListItems[i]['browser'].toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+//							{tag:'span', cls:'label', htmlString:Clipperz.PM.Strings['browsers'][loginListItems[i]['browser']]}
+						]},
+						{tag:'td', cls:'loginHistoryOperatingSystem', valign:'top', align:'center', children:[
+							{tag:'img', title:Clipperz.PM.Strings['operatingSystems'][loginListItems[i]['operatingSystem']], cls:'operatingSystem', src:Clipperz.PM.Strings['icons_baseUrl'] + "/operatingSystems/" + loginListItems[i]['operatingSystem'].toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+//							{tag:'span', cls:'label', htmlString:Clipperz.PM.Strings['operatingSystems'][loginListItems[i]['operatingSystem']]}
+						]}
+					]});
+				}
+
+				Clipperz.Style.applyZebraStylesToTable('loginHistoryTable');
+			}, this), element);
+			
+			deferredResult.callback();
+		}
+//MochiKit.Logging.logDebug("<<< AccountPanel.renderLoginHistory");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderPreferences': function() {
+		var saveUserPreferencesButton;
+		var cancelUserPreferencesButton;
+		var preferencedPanelBodyElement;
+		
+		preferencedPanelBodyElement = this.getElement('preferencesPanelBody');
+		
+		preferencedPanelBodyElement.update("");
+		Clipperz.YUI.DomHelper.append(preferencedPanelBodyElement,
+			{tag:'form', id:this.getId('accountPreferencesForm'), children:[
+				{tag:'table', cls:'panelBody', children:[
+					{tag:'tr', cls:'openPreferenceBlock', children:[
+						{tag:'td', children:[
+							{tag:'div', cls:'preferenceBlockTitle', htmlString:Clipperz.PM.Strings['accountPreferencesLanguageTitle']},
+							{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['accountPreferencesLanguageDescription']},
+							{tag:'div', cls:'panelDescription', children:[
+								{tag:'select',
+								 	id:this.getId('languageSelector'),
+									children:MochiKit.Base.concat([{tag:'option', value:"default", html:"---"}], Clipperz.PM.Strings['loginPanelSwitchLanguageSelectOptions'])
+								}
+							]}
+						]}
+					]},
+					{tag:'tr', cls:'openPreferenceBlock', children:[
+						{tag:'td', children:[
+							{tag:'div', cls:'preferenceBlockTitle', htmlString:Clipperz.PM.Strings['showDonationReminderPanelTitle']},
+							{tag:'table', cellpadding:'0', cellspacing:'0', children:[
+								{tag:'tbody', children:[
+									{tag:'tr', children:[
+										{tag:'td', valign:'top', children:[
+											{tag:'div', cls:'panelDescription', children:[
+												{tag:'input', type:'checkbox', id:this.getId('showDonationReminderCheckbox')}
+											]}
+										]},
+										{tag:'td', valign:'top', children:[
+											{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['showDonationReminderPanelDescription']}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]}	//,
+/*
+					{tag:'tr', cls:'openPreferenceBlock', children:[
+						{tag:'td', children:[
+							{tag:'div', cls:'preferenceBlockTitle', htmlString:Clipperz.PM.Strings['disableFaviconForIETitle']},
+							{tag:'table', cellpadding:'0', cellspacing:'0', children:[
+								{tag:'tbody', children:[
+									{tag:'tr', children:[
+										{tag:'td', valign:'top', children:[
+											{tag:'div', cls:'panelDescription', children:[
+												{tag:'input', type:'checkbox', id:this.getId('disableFaviconForIECheckbox')}
+											]}
+										]},
+										{tag:'td', valign:'top', children:[
+											{tag:'div', cls:'panelDescription', children:Clipperz.PM.Strings['disableFaviconForIEDescriptionConfig']}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]},
+*/
+			//		{tag:'tr', cls:'openPreferenceBlock', children:[
+			//			{tag:'td', children:[
+			//				{tag:'div', cls:'preferenceBlockTitle', htmlString:Clipperz.PM.Strings['accountPreferencesInterfaceTitle']},
+			//				{tag:'div', cls:'panelDescription', children:Clipperz.PM.Strings['accountPreferencesInterfaceDescriptionConfig']}
+			//			]}
+			//		]}
+				]},
+				{tag:'div', cls:'clipperzSubPanelButtonBox', children:[
+					{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', width:'100', align:'right', cls:'newRecordPanelButtonTD', children:[
+									{tag:'div', id:this.getId('saveUserPreferences')}
+								]},
+								{tag:'td', width:'10', html:"&nbsp;"},
+								{tag:'td', cls:'newRecordPanelButtonTD', children:[
+									{tag:'div', id:this.getId('cancelUserPreferences')}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}		
+		);
+
+		this.selectSelectedLanguageOption();
+		if (this.user().preferences().shouldShowDonationPanel()) {
+			this.getDom('showDonationReminderCheckbox').checked = true;
+		}
+//		if (this.user().preferences().disableUnsecureFaviconLoadingForIE()) {
+//			this.getDom('disableFaviconForIECheckbox').checked = true;
+//		}
+		
+//MochiKit.Logging.logDebug("--- AccountPanel.render - 3");
+//#		saveUserPreferencesButton = new YAHOO.ext.Button(this.getDom('saveUserPreferences'), {text:Clipperz.PM.Strings['saveUserPreferencesFormSubmitLabel'], handler:this.doSaveUserPreferences, scope:this});
+		saveUserPreferencesButton = new YAHOO.ext.Button(this.getDom('saveUserPreferences'), {text:'-----------------', handler:this.doSaveUserPreferences, scope:this});
+		saveUserPreferencesButton.setText(Clipperz.PM.Strings['saveUserPreferencesFormSubmitLabel']);
+//#		cancelUserPreferencesButton = new YAHOO.ext.Button(this.getDom('cancelUserPreferences'), {text:Clipperz.PM.Strings['cancelUserPreferencesFormSubmitLabel'], handler:this.doCancelUserPreferences, scope:this});
+		cancelUserPreferencesButton = new YAHOO.ext.Button(this.getDom('cancelUserPreferences'), {text:'-----------------', handler:this.doCancelUserPreferences, scope:this});
+		cancelUserPreferencesButton.setText(Clipperz.PM.Strings['cancelUserPreferencesFormSubmitLabel']);
+//MochiKit.Logging.logDebug("--- AccountPanel.render - 4");
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			this.getElement('accountPreferencesForm').addClass('read-only');
+			saveUserPreferencesButton.disable();
+			cancelUserPreferencesButton.disable();
+		}
+
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'reloadHistory': function() {
+		this.setShouldLoadLoginHistory(true);
+		this.renderLoginHistory();
+	},
+	
+	'shouldLoadLoginHistory': function() {
+		return this._shouldLoadLoginHistory;
+	},
+	
+	'setShouldLoadLoginHistory': function(aValue) {
+		this._shouldLoadLoginHistory = aValue;
+	},
+	
+	'tabSelectedHandler': function(anEvent) {
+		if (anEvent.parameters() == 'accountPreferencesTab') {
+			this.renderPreferences();
+		}
+
+		if ((this.shouldLoadLoginHistory()) && (anEvent.parameters() == 'loginHistoryTab')) {
+			this.renderLoginHistory();
+			this.setShouldLoadLoginHistory(false);
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
+	
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/BasePanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/BasePanel.js
new file mode 100644
index 0000000..bf60f45
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/BasePanel.js
@@ -0,0 +1,96 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//var _Clipperz_PM_Components_Panels_base_id_ = 0;
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.BasePanel = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.BasePanel.superclass.constructor.call(this, anElement, args);
+	
+	this._user = args.user || null;
+	this._delegate = args.delegate || null;
+	this._tabPanelController = null;
+//	Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'switchLanguageHandler');
+
+//	this._ids = {};
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.BasePanel, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Panels.BasePanel component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+	
+	'setUser': function(aValue) {
+		this._user = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'delegate': function() {
+		return this._delegate;
+	},
+	
+	'setDelegate': function(aValue) {
+		this._delegate = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'tabPanelController': function() {
+		return this._tabPanelController;
+	},
+	
+	'switchLanguageHandler': function() {
+//MochiKit.Logging.logDebug(">>> BasePanel.switchLanguageHandler [" + this.toString() + "]");
+		this.render();
+//MochiKit.Logging.logDebug("<<< BasePanel.switchLanguageHandler [" + this.toString() + "]");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/ContactsPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/ContactsPanel.js
new file mode 100644
index 0000000..f0eb9c8
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/ContactsPanel.js
@@ -0,0 +1,105 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.ContactsPanel = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.ContactsPanel.superclass.constructor.call(this, anElement, args);
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.ContactsPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.ContactsPanel component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//		var tabPanelControllerConfig;
+
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+			{tag:'tbody', children:[
+				{tag:'tr', children:[
+					{tag:'td', valign:'top', width:'200', children:[
+						{tag:'ul', id:"dataSubMenu", cls:'subMenu', children:[
+							{tag:'li', id:this.getId('contacts'), htmlString:Clipperz.PM.Strings['contactsTabLabel']},
+						]}
+					]},
+					{tag:'td', valign:'top', children:[
+						{tag:'ul', cls:'clipperzTabPanels', children:[
+							{tag:'li', id:this.getId('contactsPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['contactsTabTitle']},
+									{tag:'div', htmlString:Clipperz.PM.Strings['comingSoon']}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+//		tabPanelControllerConfig = {}
+//		tabPanelControllerConfig[this.getId('contacts')] = this.getId('contactsPanel');
+//		new Clipperz.PM.Components.TabPanel.TabPanelController({ config:tabPanelControllerConfig, selectedTab:this.getId('contacts') });
+		this.tabPanelController().setUp();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'tabPanelController': function() {
+		if (this._tabPanelController == null) {
+			var tabPanelControllerConfig;
+			
+			tabPanelControllerConfig = {}
+			tabPanelControllerConfig[this.getId('contacts')] = this.getId('contactsPanel');
+			this._tabPanelController = new Clipperz.PM.Components.TabPanel.TabPanelController({ config:tabPanelControllerConfig, selectedTab:this.getId('contacts') });
+		}
+		
+		return this._tabPanelController;
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
+	
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/DataPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/DataPanel.js
new file mode 100644
index 0000000..759903f
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/DataPanel.js
@@ -0,0 +1,486 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.DataPanel = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.DataPanel.superclass.constructor.call(this, anElement, args);
+
+	this._progressWidth = 400;
+
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.DataPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.DataPanel component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		MochiKit.Signal.disconnectAllTo(this);
+		Clipperz.NotificationCenter.unregister(this);
+		this.element().update("");
+
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+			{tag:'tbody', children:[
+				{tag:'tr', children:[
+					{tag:'td', valign:'top', width:'200', children:[
+						{tag:'ul', id:"dataSubMenu", cls:'subMenu', children:[
+							{tag:'li', id:'offlineCopyTab', htmlString:Clipperz.PM.Strings['offlineCopyTabLabel']},
+							{tag:'li', id:'sharingTab', htmlString:Clipperz.PM.Strings['sharingTabLabel']},
+							{tag:'li', id:'importTab', htmlString:Clipperz.PM.Strings['importTabLabel']},
+							{tag:'li', id:'printingTab', htmlString:Clipperz.PM.Strings['printingTabLabel']}
+						]}
+					]},
+					{tag:'td', valign:'top', children:[
+						{tag:'ul', cls:'clipperzTabPanels', children:[
+							{tag:'li', id:this.getId('offlineCopyPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['offlineCopyTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['offlineCopyTabDescription']},
+									{tag:'div', id:this.getId('offlineCopyLinkBox'), children:[
+										{tag:'a', id:'offlineCopyLink', href:'#', htmlString:Clipperz.PM.Strings['offlineCopyDownloadLinkLabel']}
+									]},
+									{tag:'div', id:this.getId('offlineCopyLinkBox_read-only'), children:[
+										{tag:'span', cls:'read-only', htmlString:Clipperz.PM.Strings['offlineCopyDownloadLinkLabel']}
+									]}
+								]}
+							]},
+							{tag:'li', id:this.getId('sharingPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['sharingTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['sharingTabDescription']}
+								]}
+							]},
+							{tag:'li', id:this.getId('importPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'div', id:this.getId('importPanelMainComponent')}
+								]}
+							]},
+							{tag:'li', id:this.getId('printingPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['printingTabTitle']},
+
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['printingTabDescription']},
+									{tag:'div', id:this.getId('printingLinkBox'), children:[
+										{tag:'a', id:'printingLink', href:'#', htmlString:Clipperz.PM.Strings['printingLinkLabel']}
+									]},
+
+									{tag:'hr'},
+
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['exportTabDescription']},
+									{tag:'div', id:this.getId('exportLinkBox'), children:[
+										{tag:'a', id:'exportLink', href:'#', htmlString:Clipperz.PM.Strings['exportLinkLabel']}
+									]}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		this.tabPanelController().setUp();
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			this.getElement('offlineCopyLinkBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		} else {
+			this.getElement('offlineCopyLinkBox_read-only').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+			MochiKit.Signal.connect('offlineCopyLink', 'onclick', this, 'downloadOfflineCopy');
+		}
+
+		new Clipperz.PM.Components.Import.MainComponent(this.getElement('importPanelMainComponent'), {user:this.user()});
+		
+		MochiKit.Signal.connect('printingLink', 'onclick', this, 'printAllData');
+		MochiKit.Signal.connect('exportLink', 'onclick', this, 'exportAllData');
+
+		Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'switchLanguageHandler');
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'tabPanelController': function() {
+		if (this._tabPanelController == null) {
+			var tabPanelControllerConfig;
+			
+			tabPanelControllerConfig = {}
+			tabPanelControllerConfig['offlineCopyTab'] = this.getId('offlineCopyPanel');
+			tabPanelControllerConfig['sharingTab'] = this.getId('sharingPanel');
+			tabPanelControllerConfig['importTab'] = this.getId('importPanel');
+			tabPanelControllerConfig['printingTab'] = this.getId('printingPanel');
+			this._tabPanelController = new Clipperz.PM.Components.TabPanel.TabPanelController({
+												name: 'dataTabPanel',
+												config:tabPanelControllerConfig,
+												selectedTab:'offlineCopyTab'
+			});
+		}
+		
+		return this._tabPanelController;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'downloadOfflineCopy': function(anEvent) {
+		var downloadHref;
+		
+		downloadHref = window.location.href.replace(/\/[^\/]*$/,'') + Clipperz_dumpUrl;
+
+		if (Clipperz_IEisBroken == true) {
+			window.open(downloadHref, "");
+		} else {
+			var	deferredResult;
+			var newWindow;
+
+			newWindow = window.open("", "");
+
+			anEvent.preventDefault();
+
+			deferredResult = new MochiKit.Async.Deferred();
+			deferredResult.addCallback(MochiKit.Base.method(this.user().connection(), 'message'), 'echo', {'echo':"echo"});
+			deferredResult.addCallback(function(aWindow) {
+				aWindow.location.href = downloadHref;
+			}, newWindow);
+			deferredResult.callback();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'compareRecords': function(a, b) {
+		return MochiKit.Base.compare(a.label().toLowerCase(), b.label().toLowerCase());
+	},
+
+	'logo': function() {
+		var result;
+	
+		if (Clipperz_IEisBroken == true) {
+			if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+				result = "<span><span class=\"clipperzLogoSpan\">clipper</span><span class=\"clipperzLoggoZSpan\">z</span></span>";
+			} else {
+				result = "<img src=\"./images/exportLogo.png\" />";
+			}
+		} else {
+			result = "<img src=\"data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAABOCAIAAADTtH9XAAANIWlDQ1BJQ0MgUHJvZmlsZQAAeJyV13k0lG8bB/BrFsYyZhhjDyO77LKHLJFItmwp2bdhJiZRypIUIkso2iiSFC0kEtWPLCHJkq2oyJI9kmXeP6R6f+f9ve95rz+ecz3385xz389zzud7nxsAr+FKpZKRABAQSAuyNjEgOTg6kTBdgAJewAEzaLi6B1P1LS3N4R9roRMQAADtcq5UKvmf3/uPhQtycHQCQMgCANF7vd8OAES39d4WAIhHaFQaAMIHAIjuPq4eAIhwAJANsrU2BEAUAADOe70vBwCc23pfDwC4EHdvGgCiG4CREOjhGwiAmQBg1PXwDHYHwMkCgIdHsHsAAC4ZACwCAigeALgPACDlTg2iAeCZAEDOwdGJtL7kffEAW/kAmMx+jx1JByjNAZDa/XtM9BEAtytAbuLvsTlrQAAAgrs12EtFGQAAEFgDAIYBOn1OAgCTCrCaQqcv59Lpq9cBUH0ANWT3w0EhP/8XAtEM8L/u17/5Z6EQAEgAhBgiH3kUFY4OZzjBGImJZjrJbMRcy3Ka9Qw2ju0srozdhyOFkMKZSjzPlc6dzpPJW8tPEcjelC14WaiedFgkd/N10VbxYxL5km3SJ2Rub+mUi5a/o9CjdFr5vsp71bNqZeqDmklaFdrDOmm6T/XG9DMMnhtO7sgyrjOZNb26q9FsYXeuRcue15avrdqsV2wL93bYddp3OXQ7offdc+7b339gwOX9wQ9uWPfHHp88P3sNe4/4fPEd9eciPwv4GjhJmaJOH5oJmg2ep80f/haycGQx9HvY0tEfx1bCV46vRkhHdkQjTiJjUKfQsQynGc9g4pjimRNYzrImYpPYzuGS8SnsqRxphPOc6cQMrkzuCzwXebP4svkvCVzedEXwqtA14RxSrsj1zTdE88TyxW9KFkjekiqUvi1ze7yIfEf2rlyxQoniPaX7Sg+UH24tVS1TK1t4FFKu/lijQqtS+8m2qm1PdZ6uVUfU6D3b/lz/hcFfhrXo2pi6HS+N600aTBtNm1iaEl6ZNZu3WLTiWs+9tmyzemPdTmhPfWvTYdu5t4u7K7Pb/p1Dj1Mvf292n3O/88D+90Lvr35wGTw4JDKU+9Htk/tnj2Hx4fwRry/eoz5j0mOF434T/l/Jk3KTd6cCpykz1Fml2ftzQfPB32gLqgtliyHfQ5fCfoQtay1XrhxbDV/TWXtKpwMgRJE45DSqCX2bIY0xHOPNZMtsyLKVVRIrycaL48HzsvNycBEkOKWIGlzm3Ad4gnmT+Ir5mwRGBTmF1IS9SRdEXooixHTED0nck5ySlpIhb6mUQ8nrK6QoDipLq8Ru7VKTUadq1GrxaIdue6XLrUfZ/txAzPCYUZuxkEnozirTJTMlc8/d6RZtljgrE+tQmzzbt3Ys9tsdDjledqrbN7Vf+MAel6MHc11r3UY9uDz1vBy8T/hc863x6/dfCuAM3EIxovocCg9KDs6llR6uD+k9Mha6cBR1jCOcdFz2hGrE9kizqD3R+04ejPE8RY6lnQ46ExkXGX8yIe5samJCUta5i8mZKSmpl9JSz2ekX8goyLx54e7Fgqzb2cWXnlx+cqX26qtrbTntue3X22/05n3KH7k5VPD51lThzO2posk7s3enisdLJu6N3B98MPSwp7StrOFRTfmjx8UVlypTn0RWBTzdV21Ws+2ZzHPC86UXH/5qrH1Yl/YyqN6mQa1RoJHe1PPqYXN8i1OraOvw6wdtx9/saMe197+91uHXqdK52tXcnfZuf490z1xvRV90v9kAcWDg/a0PwYPaQ+ihxo/nPx34LPl5YrhiJOrLrlGu0f6xG+PkCdWJta8Nk6lT+6bFpidmHsyGz5nME+a7v+UtUBY1v6O+v1xK+bFvWXT560rZauSaKZ2bTgeAk4hQ5FGUNqoCfZxBj6GaMQpzismYqZY5luU0azx2F7aJLRGXiE9i38PeypFMSOVMI6Zx2XK95c7gyeC9wJfFny2QvemSoLNgv9BV4WukHJGczTmi18VuiOdJ5EvelCqQviXjKzO2pVC2SO6O/F2FYsUSpXvK91UebH2oWqZWpl6mEarxXbNCq0K7ctsTnSrdE7pretXba/SfGTw3fGEUswO9o9a4zuTlznrThl2NZgnmWPNXu5stWva0WiZbsVu1Wb+xabd9u7fTLsOe277LodvxnVPPvmxnAee+/f0H3rt8OPjBNcdNxG3I/aPHJ8/PXvneEusJ4jfmf5ssS574txSZ+5Ui5WEaYUtHfxxbDl85vnpiLYIeBdHIX0mCOYOJY4priN+VwHoWm4hNYjuHT2ZP4fiVJdyZPBd4f2bJpj+zJHfouvsN0TyxfImbEhtpUiR7R+6u/B9ZolK6tUz1kXq5+mONCs1K7SfaVdue6lbr/pEjO+qMXxrXmzTsbDRtMnsV0rK51eK1ZZvlG6v24x0ynXZd9t3RPQq9Tn2xAyrv4wZVh85+8hjWHkkZ9R33+0qeoszEzzstnFtKWLWm0wHW9z4AAEY1gIwtAHZZADa5ALFbACRdALgLACzZAGw1AckgBEgdKiB26WzsH4AAdhAEeTAARwiGZCiB7wgSwgwRiihAtCBGkHikCTIKWYVcQemgolB1qBW0CNoRnY/+xmDMcIqhmGGK0YQxh3EYw4VxxlQxYZg0mWKYxpm1mCnMNSxyLJEs5aw41ijWd1giNhD7hW0H20m2QZwr7jkehffCT7BbsWewr3LEccwStAh5nOqceZxTRBfiIpcvVxn3Fu6XPF68GN5CPnG+I3zz/JcFTATmNl0TFBMMF0IIlQr7kURIPSLnN2/eHCmKF20VSxHfK8EvMSR5W8pQ6pa0gQyHzOCWB7Kn5ZzlVRSwCiOKfynlKkereGw1UZVV41RbUR/WyNTEadZolWjnbDuvc0Y3Qu/I9kP6ZANfQx8jnx3+xoEmtJ3HTGN2nTPLNr+1u9yiYU+f5Yw1xkbIVmOvjR3VPsnhruNrpzln3v26B7xckg9Wun5x5/Ew8QzzKvLl9bP0jyfXBiIp+tSoQy+CGWlmh1NDxcIoR5+Esxx3OlEUQY+yjUGeco59dIYz7lB8W2J60lKyS0pdmsL5rMzgCx+zbLJrr9y9Jp5z+TpPPvvNpFu4wnN3MosFS27clys1Kmsrd308U8XztKjG4AWtFl9XVL+rKb5ZrqXtdUh7XQe1S6C7vk+iv/t9/KDep6Jhjy/Coz1f7aa4p7tms+ZdFieWSpcj6Lx0OgAggQV4QBr0wAEOQzqUwwACg1BEuCCSENWIOaQM0gWZhXyLwqN2o86imtFs6D3odHQvA4nBl6GE4TujIeM5xncYccxhzAsmApMHUzkzK7Mz810WNMsBloesLKzurNVYLiwV28wmw5bINoEzxxXj2fAUfCf7dvYbHDiOEI5egjHhHieJM5VzjRhM/MrlxzXGTeae5aHxLPAe5UPwneXn5y8U0BSo22S3aVQwUohPqEzYSniMFCsiIVK/OVCUR/SpmLs4VvyZRKCksOQbqThpA+lVmcot4bI6soty1fJnFGwVRRSnlKqVU1T8thqpCqkuq3WoP9a4rBml5a1tv01HR0FXRI+wHa2P0p81mDGcMhrfMWw8ZzK+89supBnRnGe3koXunj2W1lb+1mE22bb3976y67VfcSQ6KeyzcD60/+KBWpcRV2Y3RXcfjyzPaq9pH2lfT79M/44AgcC9lGzqlyCp4BBaQ4jgkeDQxqOix5LCx044RtRHqUXnxRBOJZ0mnMmI503ITlRNakn2TPmRlpiunvH5wpUsv0t7r0hfY8iZuP48r/TmxVuxt93vOBcb39N4sLVU/pHcY6lK8SqpasVnei921lq9JDccakppvtb6pG2gnd4p3K3T49GXMFDxYeIj32eDkcjRgvFPk/zTXrNX5ocXpZYCl8vWEHQ6ADACOwiCAThCMpTAmw37G+7X1aPxaEf0NwZjhqyf3tcwzkzCTDFM48y2zDUsciyXWHGsUayL2EDsFzYPnCvuI94LP8EezL7KEUfgJuRxqnM2El2Ii1zJv0xb8M3/9GwphBAq/WnZal3yT8ch0gZ/Gv4t+KffN5o1WiW/7f6W+89u/5ta70FfXj/Lv6sN6fm72+jCP+WeVf4tN4Nxw+5lzQ29N9I2/BYRNgQ/KN8wXHlyXfGzng3HDaNN8a/+as5oaXsd8kawva6D2lnSFdtd3xPSJ9HvP2D0Pn5Qb+j0R7dPRZ8Xhtu/CI/6j5mOS01gvtpN5k/FTnvP7JyVmWOdm5x//e3BQsai7eLE95glgx+SP4aXI1Z4V66scqzGrC6u3aAn0OkA6+clAABgMaSQKUEkc0Oj//Ow978qgHx4Yw4kAGA9A/faAAABAKR8aaa2AEAEAC0wBAqQgQJBQAJzMASjn1cSuP964guwfpYDAGBkB7hkDwBQ/f1Y5N/npXmG0gAADCnUsCBfbx8aSZ9KJXuSDCkB1MM0zyBZkmmgu7wsSVlRURUA4F93RgACxGzQPQAAAAlwSFlzAAALEwAACxMBAJqcGAAAC25JREFUeJztnHlUE9cex38JYY2JGhQ14Hae1BSXKoK4C0UtbtRqRUWlomi1NK5Y6tKKQpG2qK0pWo8oPp+ix+rRFlCPyxEVV9TXpx7klOdxKQFERQ1CWMLM+wMfDZk7k5nJMsHez8k/+d3f/d1fJt+5d+6SiEiSBAxGOMRCJ4D5u4MliBEYLEGMwGAJYgQGSxAjMFiCGIHBEsQIDJYgRmCwBDECgyWIERgsQYzAYAliBAZLECMwWIIYgcESxAgMliBGYLAEMQKDJYgRGCxBjMBgCWIEBksQIzASoRN4w+93X25YpWkl8zCyifr37bDsy5mcfDAtDkeRYFFRmVZbbmKsrixeBjM5+WBaHI4yEJNg/ufMbHwwLQ5HkSDmb0uLl6BM1kroFDAW0ZIkqNfXU43FJU/snwnGijjKdIQNUTP6hoelmhjdXEWCJIOxFi1JgiIRtFW4Cp0Fxsq0pIEY81ZitV5QV0nmZOUfz877o/CBkZlQqbpMmDB0TJh/a4UHbWV2NBBQ/PiFi4uzkU3k7ka2UTSbkehr4GnZC2cjt/q6ui7d2gKIAOB5heHg/tyjR85W6l43JRkYqPpkTlhAUA+RmHZYt1FYJNoS/bEjl86culqi/etJVy53DwsLipg+onO39szVmVMFgCfl9ds0x07kXGh8HxTos3VHPAmkqP4uiC0YZ5ze4VFJZPn/CxaX1EVFrqv669LTYUhPX9HHvwey7NDRe5sSt5kYO3s7H87a3PT2n5m3t6XuNPGRy+tO5+4wtiDdzp5Z79FW8WF4crm2lCHFz2PHzZ43Fllko7AmXLqiXRqbYm5sMqSlqQMG+9EVI1PNyV7bTtmhpg6mTjHNtvE6G8iHkp+6s0mSFnUDj3HV0oE4OeXklAkrWOgPACQxMT9GRyYBSfBry93dmWr0UXZg4/bgYfWAAWpmoQDAT2nHRwerkRnaKGwTBgImTkxebl5/ACCJjd2++FPTmRlzqq1kHroqGDGINlsnEaKWHbBIgtMjt/56KIdTlYLCJ0EDFvBWIZXKSjbqh5iYb13YBdTpYHTIEpatWytsTR0MCjAvZWOu5T/6eOIXrN2JoiJd8HC1Ay4f8Jfg0hUHHxQW8arqHj3za97t2gGdDhZ/utFuYQkShg5SO3EP+KdWv3rFD+x8xTExKcL0cubgKcF7RdVXzl2iKw0J6bciLnLs+BF0DgWFr67k3uDXtOXI5a5zosctip3aybsTnc+1/JJnHBe9eYddHneQblYYGKj6LHby8rjZdDHPnrtfdPc+pzzpaCARK/92gOeMeMa0eOTEKXx8/zUb5v5/4gXrEqfuz7ylSc2gen6dsOt0bgC/1i3AkJX9jZdS0fhmzrwRryrh/ZFq5FVYGafJyEyyddjyCkDezEGBXX9IWyaWvOkcp0UOLC6p/2jCcmqfMSsq8dqtPezybIa3dzsSxFptuUzmAQASUTdQmx5EMkICUA0aH8aQfHo0PhJ8XNKA1F9oiO+axLnGFhHArEj/1/r6jLR9Js46HQkkASJ7LkwaLl3eLHFzNza1lsG1G5qgAIRcCgpfNNTVObmYfdizKOyqVbuoEUNDfJM3LTYx+iidcy9rQoZQn+dkL8sr2ngpzOX5hs7erXfsivf0kqEKmZZ7nh+f5MlQrK5imYAJfBSwadMvKHNt8iY10j9qdhBq4cf55dOXPFrnzfa0hSZCaUQihqPZW1A1xKdy8mwattYAd/J/pzjUJ6d+jmxL6gbhEROo9j27s8zm2Uj4+D6Hs5Jo9MeELi/S8/4F2mJ1OQDPdV8+EryIGjji46Y0rXya4OECfQPfk8ulMqMXAOHqbs/dtlr/wX3pyrooJa5yxImbQ7/k2jTsvUId9ZLFRAczDA6fxX5ANR44dAlYHKaUyw1rEheYdaNSdS9B/u8DtMULbzN3n8xwHoiratB1RocFMdRK3xHDtSHrEhriR3eHNKJe8klqYpqdw2ZlX6Ea0zMudvTp+bxCh6pB3ClATpKcSEODSGLm20zfGc/sgISoyJKeWU9bPPM3cO7DI2wTnCX4SkeiLnm9rK3ckjxszfBhtH1VIyNHqlITTY0FhcUAJIPILAx75dJNVCVxUuJu5rAUJM/Kn7enrNI3R9/VtyvHsAD1d8T7w2lLx34HiomcYzaH80AskSC/DwOIHHDV0xh+8x4XMLOBaVFYpRnRcMBZYmbVz0/VkbnDpkKCFn6mv8f6z4AeKzkFRML5Crq7Ih46eHw8O+PX27LdT9uElbZCzGNsRGVlNSd/EqprGZZglO/BsExLcwIAHhKsrEIMxAWF5WwehwXkZn6BA4YtK31mrUwMBjMLy5EzRrOPRgDxTCN1oyt2bwNTqBN5nljrsJYYSNLhx2ImDAa02cIPxSNsUKDyx+2rDAYOtzRBgCutXvhQlu6pZCiOeW7FtjhLsJUUee2cn5U+bUf/ZLNFc/FgxiETY0rytJCwYVwT4EfmgbOTI5mOS2VlXaca/VRK5gcMC8OGhAZlUPbZgwa+KxKDs4tg9/OTI/2UevolW3WVdU86c44llwKyx9+39yRDrb0U/QFAn76+XFvnzZ9aPVFXx+Dwc9q/UGYzJ3osDDsqtB+1bGvaMeZGCQJqa0jjV4PBaiePKvIiO5T8h7ZYXcx7CZoOPnL+YHwo1Xjg0HVDjR7pX1IOqE0ug6dXGx6t80WckriHruzClTLkNtyCBZNsGrZbF1eUdmSPih4xNBkQoB4xZLHxK2zUInN5sqL6v98rGJag5+cDeFulIWP4SHDZMuQXIx46ZBF1UlJvgAlhiI27zt5SkcSuv0X6NefOiaPnqfbScmJl7DeoGobBIxC9lBXDSsQQirqfI6al6GkmsEtXZFJXXzYkzDebp1mIiiyPE/QHEOdeBDebHCvhMx3xUkA3le9DxGFBWZD/or171/Ts1RlEQBCQe+HhquWbkAtW69cLsF+SkHj4+MmbSRsXNv6QpaYG9u2/vDMNfd+HhviCmNX1sSTsV2smncs5S/GSBI+Mnxs9Jnr+OBc3JwAgCLh6rXhJ7LeoPqN28Eh/NnkyQAJZtT+caef48RmoRD5UNGfgDvM+zeE5I965c/Ho4chDCc5RUd+ZrS6XG3r5q/g1bSHX8x+MGcVqn2rdhoV2CCt1g+nRHx/MOEz13J1xanfGKWMLcsxKSZ5jlQNH6Ll7Ewx7dMYM3M51aOWZulwKSZt5r4wTJ05uNu8lKAlfTXGVWvm5my7sMvVI5GkGNvip2oaEDbE4LyHhf/eMDu6SmraaR8Xs7ATk6SYbw2HOOCNi4NiPgu0Z9nzuxvb0Z63pkMshI5Nd5+TAWNSBDx/cKfvM1gbW/n6qDpevbm6vRB7sYbMMxn+pLCV5RvYZDRvPL+I+XPrlbDuHFQFkZ62eH8vhjxInju9/OldjxX1Rof5Yw9JniPYK0Y1bmm3pazt6M+24v6vq9Fv2+ozMtU4u6N30jh0RCzQmu/hsfOh4UVHZXgF51zWTI8LofAID/3Hu/PdTIkexCWiLsDHzBuVe1syKnsS8MTItYnje5S1rmx9QN8YddRATaTTGzLMgWzjfElb4KXsTBAFlZdVFf2hfvdC5uruVasu9vT1VKh+fLgp7ns9H/io+Pm5c0zYGSUJpafWd2w9q9TXV+jpPhZRNkjYKS0dVFfnwwVNt8dMafTUJkhq9vnt3r3d6erdRuDn4iRCuWLP3FYtBqfRQKpv2PHpZMbgVEYka87RyetYNK5WKevX26tXbyyrRHBn8t0YYgcESxAgMliBGYLAEMQKDJYgRmLdQgno90wE+RwuLaUn/Nc2S4UN8n0a8LzXain1dVeMf2Nsxw2KsuTSNwfDgLRyIMS0LLEGMwGAJYgQGSxAjMFiCGIHBEsQIDJYgRmCwBDECgyWIERgsQYzAYAliBOZ/jys2NWyvP3gAAAAASUVORK5CYIIK\" />";
+		}
+
+		return result;
+	},
+
+	'progressWidth': function() {
+		return this._progressWidth;
+	},
+
+	'updateProgress': function(aProgressComponent, aPercentage) {
+		
+		
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'printAllData': function(anEvent) {
+		var newWindow;
+		var allRecords;
+
+//MochiKit.Logging.logDebug(">>> printAllData");
+		newWindow = window.open("", "");
+		newWindow.document.write(
+"<html>" +
+"<header>" +
+"	<title>Clipperz export data</title>" +
+"<style>" +
+"#exportedData {" +
+"	width: 600px;"	+
+"}" +
+".ext-mb-progress-wrap {" +
+"	border:1px solid #6593cf;" +
+"	margin-bottom: 10px;" +
+"	width: " + this.progressWidth() + "px;" +
+"}" +
+".ext-mb-progress {" +
+"	height:18px;" +
+"	background:transparent url(./images/default/basic-dialog/progress2.gif) repeat-x 1px 1px;" +
+"}" +
+".ext-mb-progress-bar {" +
+"	height:18px;" +
+"	overflow:hidden;" +
+"	width:0;" +
+"	background:#8bb8f3;" +
+"}" +
+"body {" +
+"	font-family: sans-serif;" +
+"}" +
+"div#logo {" +
+"	border-bottom: 1px dotted #aaaaaa;" +
+"	margin-bottom: 15px;" +
+"}" +
+"div.recordBlock h2 {" +
+"	font-size: 14pt;" +
+"	margin: 0px;" +
+"	padding: 0px;" +
+"	border: 0px;" +
+"	color: #666666;" +
+"}" +
+"div.recordBlock div.recordNotes p {" +
+"	margin: 0px;" +
+"	padding: 0px;" +
+"	border: 0px;" +
+"	color: #aaaaaa;" +
+"	font-size: 10pt;" +
+"	line-height: 18pt;" +
+"	border-left: 1px solid #aaaaaa;" +
+"	padding-left: 10px;" +
+"}" +
+"div.recordBlock dl {" +
+"	margin: 0px;" +
+"	padding: 0px;" +
+"	border: 0px;" +
+"	color: #999999;" +
+"	padding-bottom: 10px;" +
+"	border-bottom: 1px dotted #aaaaaa;" +
+"	margin-top: 10px;" +
+"	margin-bottom: 15px;" +
+"}" +
+"div.recordBlock dl dt {" +
+"	display: block;" +
+"	float: left;" +
+"	min-width: 100px;" +
+"	white-space: nowrap;" +
+"	overflow: hidden;" +
+"	margin-right: 10px;" +
+"	font-size: 10pt;" +
+"	line-height: 18pt;" +
+"}" +
+"div.recordBlock dl dd {" +
+"	color: #666666;" +
+"	font-size: 10pt;" +
+"	line-height: 18pt;" +
+"}" +
+"" +
+"</style>" +
+"" +
+"<!--[if IE]>" +
+"<style>" +
+"div.recordBlock dl dt {" +
+"	width: 100px;" +
+"}" +
+"</style>" +
+"<![endif]-->" +
+"" +
+"</header>" +
+"<body>" +
+"	<div id=\"logo\">" + this.logo() +
+"	<div id=\"progressWrapper\"><div class=\"ext-mb-progress-wrap\"><div class=\"ext-mb-progress\"><div id=\"progress\" class=\"ext-mb-progress-bar\">&#160;</div></div></div></div>" +
+"   </div>" +
+"</body>" +
+"</html>"
+		);
+
+		anEvent.preventDefault();
+
+		allRecords = MochiKit.Base.values(this.user().records());
+		allRecords.sort(this.compareRecords);
+		
+/*
+		deferredResult = new MochiKit.Async.Deferred();
+		MochiKit.Iter.forEach(allRecords, MochiKit.Base.partial(function(aDeferredResult, aWindow, aRecord) {
+			var printerRecord;
+			
+			printerRecord = new Clipperz.PM.Components.Printing.Record({record:aRecord});
+			aDeferredResult.addCallback(MochiKit.Base.method(printerRecord, 'deferredDrawToWindow', aWindow));
+		}, deferredResult, newWindow));
+		deferredResult.callback();
+
+		return deferredResult;
+*/		
+
+		MochiKit.DOM.withWindow(newWindow, MochiKit.Base.bind(function(someRecords) {
+			var currentWindow;
+			var	deferredResult;
+			var progressBar;
+			var progressWrapper;
+			var i, c;
+
+			currentWindow = MochiKit.DOM.currentWindow();
+			progressBar = MochiKit.DOM.getElement('progress');
+			progressWrapper = MochiKit.DOM.getElement('progressWrapper');
+			
+			deferredResult = new MochiKit.Async.Deferred();
+			c = someRecords.length;
+			for (i=0; i<c; i++) {
+				deferredResult.addCallback(function(aWindow, aRecord) {
+					var printerRecord;
+			
+					printerRecord = new Clipperz.PM.Components.Printing.Record({record:aRecord});
+					return printerRecord.deferredDrawToWindow(aWindow);
+				}, currentWindow, someRecords[i])
+				deferredResult.addCallback(MochiKit.Base.bind(function(aProgressBar, aProgress) {
+					MochiKit.Style.setElementDimensions(aProgressBar, {w:aProgress * this.progressWidth()});
+				}, this, progressBar, ((i+1)/c)));
+				deferredResult.addCallback(MochiKit.Async.wait, 0.2);
+			}
+
+			deferredResult.addCallback(function(aWindow, aProgressWrapper) {
+				MochiKit.DOM.replaceChildNodes(aProgressWrapper);
+				MochiKit.Style.hideElement(aProgressWrapper);
+				aWindow.stop();
+			}, currentWindow, progressWrapper);
+
+
+			deferredResult.callback();
+		}, this, allRecords));
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'exportAllData': function(anEvent) {
+//		var	deferredResult;
+		var newWindow;
+		var allRecords;
+
+//MochiKit.Logging.logDebug(">>> printAllData");
+		newWindow = window.open("", "");
+		newWindow.document.write(
+"<html>" +
+"<header>" +
+"	<title>Clipperz export data</title>" +
+"<style>" +
+"#exportedData {" +
+"	width: 600px;"	+
+"}" +
+".ext-mb-progress-wrap {" +
+"	margin-top:4px;" +
+"	margin-bottom: 10px;" +
+"	border:1px solid #6593cf;" +
+"	width: " + this.progressWidth() + "px;" +
+"}" +
+".ext-mb-progress {" +
+"	height:18px;" +
+"	background:transparent url(./images/default/basic-dialog/progress2.gif) repeat-x 1px 1px;" +
+"}" +
+".ext-mb-progress-bar {" +
+"	height:18px;" +
+"	overflow:hidden;" +
+"	width:0;" +
+"	background:#8bb8f3;" +
+"}" +
+"</style>" +
+"" +
+"<!--[if IE]>" +
+"<style>" +
+"</style>" +
+"<![endif]-->" +
+"" +
+"</header>" +
+"<body>" +
+"	<div id=\"logo\">" + this.logo() + "</div>" +
+"	<div id=\"progressWrapper\">" +
+"		<div class=\"description\">" + Clipperz.PM.Strings['exportDataInProgressDescription'] + "</div>" +
+"		<div class=\"ext-mb-progress-wrap\"><div class=\"ext-mb-progress\"><div id=\"progress\" class=\"ext-mb-progress-bar\">&#160;</div></div></div>" +
+"	</div>" +
+"	<div id=\"textareaWrapper\">" +
+"		<div class=\"description\">" + Clipperz.PM.Strings['exportDataDescription'] + "</div>" +
+"		<textarea id=\"exportedData\" cols=\"80\" rows=\"20\">[</textarea>" +
+"	</div>" +
+"</body>" +
+"</html>"
+		);
+
+		anEvent.preventDefault();
+
+		allRecords = MochiKit.Base.values(this.user().records());
+		allRecords.sort(this.compareRecords);
+
+		MochiKit.DOM.withWindow(newWindow, MochiKit.Base.bind(function(someRecords) {
+			var currentWindow;
+			var	deferredResult;
+			var textareaWrapper;
+			var	textarea;
+			var progressBar;
+			var progressWrapper;
+			var i, c;
+
+			currentWindow = MochiKit.DOM.currentWindow();
+			textarea = MochiKit.DOM.getElement('exportedData');
+			textareaWrapper = MochiKit.DOM.getElement('textareaWrapper');
+			MochiKit.Style.hideElement(textareaWrapper);
+			progressBar = MochiKit.DOM.getElement('progress');
+			progressWrapper = MochiKit.DOM.getElement('progressWrapper');
+			
+			deferredResult = new MochiKit.Async.Deferred();
+
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("exportAllData - 1: " + res); return res;});
+			c = someRecords.length;
+			for (i=0; i<c; i++) {
+				deferredResult.addCallback(MochiKit.Base.method(someRecords[i], 'deferredData'));
+				deferredResult.addCallback(MochiKit.Base.method(someRecords[i], 'exportedData'));
+				deferredResult.addCallback(MochiKit.Base.bind(function(aTextarea, aProgressBar, aProgress, someRecordExportedData) {
+					aTextarea.value = aTextarea.value + "\n" + someRecordExportedData + ",";
+					MochiKit.Style.setElementDimensions(aProgressBar, {w:aProgress * this.progressWidth()});
+				}, this, textarea, progressBar, ((i+1)/c)));
+				deferredResult.addCallback(MochiKit.Async.wait, 0.2);
+			}
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("exportAllData - 2: " + res); return res;});
+			deferredResult.addCallback(function(aTextareaWrapper, aTextarea, aProgressWrapper) {
+				aTextarea.value = aTextarea.value.slice(0, -1) + "\n]";
+//				MochiKit.DOM.replaceChildNodes(aProgressWrapper);
+				MochiKit.Style.hideElement(aProgressWrapper);
+				MochiKit.Style.showElement(aTextareaWrapper);
+				aTextarea.focus();
+				aTextarea.select();
+			}, textareaWrapper, textarea, progressWrapper);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("exportAllData - 3: " + res); return res;});
+			deferredResult.addBoth(function(aWindow) {
+				aWindow.stop();
+			}, currentWindow);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("exportAllData - 4: " + res); return res;});
+			
+			deferredResult.callback();
+		}, this, allRecords));
+	},
+
+	//-------------------------------------------------------------------------
+
+	__syntaxFix__: "syntax fix"
+	
+});
+	
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/LoginPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/LoginPanel.js
new file mode 100644
index 0000000..84b2475
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/LoginPanel.js
@@ -0,0 +1,1114 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+
+Clipperz.PM.Components.Panels.LoginPanel = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.LoginPanel.superclass.constructor.call(this, anElement, args);
+
+	this._showLoginFormAnimator = null;
+	this._showRegistrationFormAnimator = null;
+	this._shouldShowRegistrationAlert = true;
+	
+	this._visibleForm = null;
+//	this._isPassphraseVisible = true;
+
+	Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'switchLanguageHandler');
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+//MochiKit.Base.update(Clipperz.PM.Components.Panels.LoginPanel.prototype, {
+YAHOO.extendX(Clipperz.PM.Components.Panels.LoginPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.LoginPanel component";
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var result;
+		var	layout;
+		var registerButton;
+		
+		MochiKit.Signal.disconnectAllTo(this);
+		this.element().update("");
+		
+//MochiKit.Logging.logDebug(">>> LoginPanel.initPanel");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', id:this.getId('baseDiv'), cls:'LoginPanel', children:[
+			{tag:'table', children:[
+				{tag:'thead'},
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', valign:'top', children:[
+							{tag:'div', cls:'clipperzServiceDescription', htmlString:Clipperz.PM.Strings['clipperzServiceDescription']}
+						]},
+						{tag:'td', valign:'top', align:'right', children:[
+{tag:'div', id:this.getId('forms'), cls:'clipperzLoginForm', children:[
+	{tag:'div', id:this.getId('loginForm'), cls:'loginForm', children:[
+		{tag:'div', cls:'loginFormHeaderBox', children:[{tag:'h3', htmlString:Clipperz.PM.Strings['loginFormTitle']}]},
+		{tag:'form', id:this.getId('loginForm_form'), autocomplete:'off', children:[
+
+			{tag:'table', cls:'formLayout', children:[
+				{tag:'thead'},
+				{tag:'tbody', children:[
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', width:'90', htmlString:Clipperz.PM.Strings['loginFormUsernameLabel']},
+						{tag:'td', children:[
+							{tag:'input', id:this.getId('login_username'), cls:'loginFormField', type:'text', name:'username'}
+						]}
+					]},
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', htmlString:Clipperz.PM.Strings['loginFormPassphraseLabel']},
+						{tag:'td', children:[
+							{tag:'div', id:this.getId('passphraseDIV'), children:[
+								{tag:'input', id:this.getId('login_passphrase'), cls:'loginFormField', type:'password', name:'passphrase'}
+							]},
+							{tag:'div', cls:'oneTimePassword', id:this.getId('oneTimePasswordDIV'), children:[
+								{tag:'input', type:'text', id:this.getId('oneTimePassword_1'), name:'passphrase'},
+								{tag:'span', html:'-'},
+								{tag:'input', type:'text', id:this.getId('oneTimePassword_2'), name:'passphrase'},
+								{tag:'span', html:'-'},
+								{tag:'input', type:'text', id:this.getId('oneTimePassword_3'), name:'passphrase'},
+								{tag:'span', html:'-'},
+								{tag:'input', type:'text', id:this.getId('oneTimePassword_4'), name:'passphrase'}
+							]}
+						]}
+					]},
+					{tag:'tr', cls:'formFieldTR', id:this.getId('passwordTypeChooserTR'), children:[
+						{tag:'td', valign:'top', align:'right', children:[
+							{tag:'input', type:'checkbox', cls:'passwordTypeCheckbox', id:this.getId('useOneTimePasswordCheckbox')}
+						]},
+						{tag:'td', children:[
+							{tag:'div', cls:'passwordTypeChooser', children:[
+								{tag:'h4', htmlString:Clipperz.PM.Strings['loginFormOneTimePasswordCheckboxLabel']},
+								{tag:'span', htmlString:Clipperz.PM.Strings['loginFormOneTimePasswordCheckboxDescription']}
+							]}
+						]}
+					]},
+					{tag:'tr', children:[
+						{tag:'td'},
+						{tag:'td', children:[
+							{tag:'div', id:this.getId('login_submit')}
+						]}
+					]}
+				]},
+				{tag:'tfoot'}
+			]}
+		]},
+
+		{tag:'div', cls:'loginFormFooterBox', children:[
+			{tag:'ul', children:[
+				{tag:'li', id:this.getId('showRegistrationLI'), children:[
+					{tag:'span', htmlString:Clipperz.PM.Strings['loginFormDontHaveAnAccountLabel']},
+					{tag:'a', href:'.', id:this.getId('showRegistration'), cls:'clipperzActionLink', htmlString:Clipperz.PM.Strings['loginFormCreateOneLabel']}
+				]},
+				{tag:'li', children:[
+					{tag:'span', htmlString:Clipperz.PM.Strings['loginFormForgotYourCredentialsLabel']},
+					{tag:'a', href:Clipperz.PM.Strings['loginFormAarghThatsBadUrl'], target:'Clipperz_Help', htmlString:Clipperz.PM.Strings['loginFormAarghThatsBadLabel']}
+				]},
+				{tag:'li', children:[
+					{tag:'span', htmlString:Clipperz.PM.Strings['loginFormAfraidOfMaliciousScriptsLabel']},
+					{tag:'a', href:Clipperz.PM.Strings['loginFormVerifyTheCodeUrl'], target:'Clipperz_Help', htmlString:Clipperz.PM.Strings['loginFormVerifyTheCodeLabel']}
+				]}
+			]}
+		]}
+	]},
+
+
+
+	{tag:'div', id:this.getId('registrationForm'), cls:'registrationForm', children:[
+		{tag:'div', cls:'loginFormHeaderBox', children:[{tag:'h3', htmlString:Clipperz.PM.Strings['registrationFormTitle']}]},
+		{tag:'form', id:this.getId('registrationForm_form'), children:[
+			{tag:'h5', cls:'errorMessage', id:this.getId('registration_errorMessage')},
+			{tag:'table', cls:'formLayout', children:[
+				{tag:'thead'},
+				{tag:'tbody', children:[
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', width:'90', htmlString:Clipperz.PM.Strings['registrationFormUsernameLabel']},
+						{tag:'td', children:[
+							{tag:'input', id:this.getId('registration_username'), cls:'loginFormField', type:'text', name:'username'}
+						]}
+					]},
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', htmlString:Clipperz.PM.Strings['registrationFormPassphraseLabel']},
+						{tag:'td', children:[
+							{tag:'input', id:this.getId('registration_passphrase'), cls:'loginFormField', type:'password', name:'passphrase'}
+						]}
+					]},
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', htmlString:Clipperz.PM.Strings['registrationFormRetypePassphraseLabel']},
+						{tag:'td', children:[
+							{tag:'input', id:this.getId('registration_repassphrase'), cls:'loginFormField', type:'password', name:'repeat-passphrase'}
+						]}
+					]},
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', align:'right', valign:'top', children:[
+							{tag:'input', id:this.getId('registration_check'), type:'checkbox', name:'safetyCheck'}
+						]},
+						{tag:'td', children:[
+							{tag:'span', htmlString:Clipperz.PM.Strings['registrationFormSafetyCheckLabel']}
+						]}
+					]},
+					{tag:'tr', cls:'formFieldTR', children:[
+						{tag:'td', align:'right', valign:'top', children:[
+							{tag:'input', id:this.getId('registration_termsOfServiceCheck'), type:'checkbox', name:'termsOfServiceCheck'}
+						]},
+						{tag:'td', children:[
+							{tag:'span', htmlString:Clipperz.PM.Strings['registrationFormTermsOfServiceCheckLabel']}
+						]}
+					]},
+//					{tag:'tr', cls:'formFieldTR', children:[
+//						{tag:'td', htmlString:Clipperz.PM.Strings['registrationFormInvitationCodeLabel']},
+//						{tag:'td', children:[
+//							{tag:'input', id:this.getId('registration_invitationCode'), type:'text', size:'30', name:'invitationCode'}
+//						]}
+//					]},
+					{tag:'tr', children:[
+						{tag:'td'},
+						{tag:'td', children:[
+							{tag:'div', id:this.getId('registration_submit')}
+						]}
+					]}
+				]},
+				{tag:'tfoot'}
+			]}
+		]},
+		{tag:'div', cls:'loginFormFooterBox', children:[
+			{tag:'ul', children:[
+				{tag:'li', children:[
+					{tag:'span', htmlString:Clipperz.PM.Strings['registrationFormDoYouAlreadyHaveAnAccountLabel']},
+					{tag:'a', href:'.', id:this.getId('showLogin'), cls:'clipperzActionLink', htmlString:Clipperz.PM.Strings['registrationFormSimplyLoginLabel']}
+				]}
+			]}
+		]}
+	]}
+]},
+							{tag:'div', cls:'loginPanelSwitchLanguageBox', children:[
+								{tag:'div', cls:'loginPanelSwitchLanguageDescription', htmlString:Clipperz.PM.Strings['loginPanelSwithLanguageDescription']},
+								{tag:'div', cls:'loginPanelSwitchLanguageSelect', children:[
+									{tag:'select', id:this.getId('languageSelector'), children:Clipperz.PM.Strings['loginPanelSwitchLanguageSelectOptions']}
+								]}
+							]},
+							{tag:'div', cls:'browserCompatibilityBox', htmlString:Clipperz.PM.Strings['browserCompatibilityDescription']}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		MochiKit.Signal.connect(this.getId('loginForm_form'), 'onsubmit', function(e){e.stop();});
+		MochiKit.Signal.connect(this.getId('registrationForm_form'), 'onsubmit', function(e){e.stop();});
+
+		MochiKit.Signal.connect(this.getId('showRegistration'), 'onclick', this, 'showRegistrationFormEventHandler');
+		MochiKit.Signal.connect(this.getId('showLogin'), 'onclick', this, 'showLoginFormEventHandler');
+
+		new YAHOO.ext.Button(this.getId('login_submit'), {text:Clipperz.PM.Strings['loginFormButtonLabel'], handler:this.doLogin, scope:this, minWidth:0});
+		registerButton = new YAHOO.ext.Button(this.getId('registration_submit'), {text:Clipperz.PM.Strings['registrationFormButtonLabel'], handler:this.doRegister, scope:this, minWidth:0})
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+//			this.getElement('showRegistrationLI').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+			this.getElement('registrationForm_form').addClass('read-only');
+			registerButton.disable();
+			this.getElement('passwordTypeChooserTR').addClass('read-only');
+			this.getDom('useOneTimePasswordCheckbox').disabled = true;
+		}
+		
+		MochiKit.Signal.connect(this.getId('loginForm'), 'onkeydown', this, 'onkeydown');
+		MochiKit.Signal.connect(this.getId('registrationForm'), 'onkeydown', this, 'onkeydown');
+//		MochiKit.Signal.connect(this.getId('useOneTimePasswordCheckbox'), 'onchange', this, 'renderPasswordField');
+		MochiKit.Signal.connect(this.getId('useOneTimePasswordCheckbox'), 'onclick', this, 'renderPasswordField');
+		this.renderPasswordField();
+
+		this.selectSelectedLanguageOption();
+		MochiKit.Signal.connect(this.getId('languageSelector'), 'onchange', this, 'switchLanguage');
+
+		MochiKit.Signal.connect(this.getId('oneTimePassword_1'), 'onkeypress', this, 'handleOneTimePasswordFieldKeyPress');
+		MochiKit.Signal.connect(this.getId('oneTimePassword_2'), 'onkeypress', this, 'handleOneTimePasswordFieldKeyPress');
+		MochiKit.Signal.connect(this.getId('oneTimePassword_3'), 'onkeypress', this, 'handleOneTimePasswordFieldKeyPress');
+		MochiKit.Signal.connect(this.getId('oneTimePassword_4'), 'onkeypress', this, 'handleOneTimePasswordFieldKeyPress');
+
+		MochiKit.Signal.connect(this.getId('oneTimePassword_1'), 'onkeyup', this, 'handleOneTimePasswordFieldKeyUp');
+		MochiKit.Signal.connect(this.getId('oneTimePassword_2'), 'onkeyup', this, 'handleOneTimePasswordFieldKeyUp');
+		MochiKit.Signal.connect(this.getId('oneTimePassword_3'), 'onkeyup', this, 'handleOneTimePasswordFieldKeyUp');
+		MochiKit.Signal.connect(this.getId('oneTimePassword_4'), 'onkeyup', this, 'handleOneTimePasswordFieldKeyUp');
+
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('login_passphrase'));
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('registration_passphrase'));
+//MochiKit.Logging.logDebug("<<< LoginPanel.initPanel");
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderPasswordField': function() {
+		if (this.getDom('useOneTimePasswordCheckbox').checked == false) {
+			this.getElement('oneTimePasswordDIV').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide(false);
+			this.getElement('passphraseDIV').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show(false);
+			this.getElement('login_passphrase').focus();
+		} else {
+			this.getElement('passphraseDIV').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+			this.getElement('oneTimePasswordDIV').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show();
+			this.getElement('oneTimePassword_1').focus();
+		}
+
+	},
+	
+	//.........................................................................
+
+	'handleOneTimePasswordFieldKeyPress': function(anEvent) {
+		if (anEvent.key().string == '-') {
+			switch (anEvent.src().id) {
+				case this.getId('oneTimePassword_1'):
+					this.getElement('oneTimePassword_2').focus();
+					break;
+				case this.getId('oneTimePassword_2'):
+					this.getElement('oneTimePassword_3').focus();
+					break;
+				case this.getId('oneTimePassword_3'):
+					this.getElement('oneTimePassword_4').focus();
+					break;
+			}
+			
+			anEvent.stop();
+		}
+	},
+
+/*
+  var ctrl = document.getElementById("txtTargetText");
+  var saveText = ctrl.value;
+  ctrl.focus();
+
+  var range = document.selection.createRange();
+  var specialchar = String.fromCharCode(1);
+  range.text = specialchar;
+  var pos = ctrl.value.indexOf(specialchar);
+  ctrl.value = saveText;
+  range = ctrl.createTextRange();
+  range.move('character', pos);
+  range.select();
+  range.text = 
+ document.getElementById("txtSourceText").value;
+  document.getElementById("txtTargetText").focus();
+  window.event.returnValue = false;
+*/
+
+	'handleOneTimePasswordFieldKeyUp': function(anEvent) {
+		var	field;
+		var	fieldValue;
+		var key;
+		
+//console.log("keyUp", anEvent);
+		field = anEvent.src();
+		fieldValue = field.value;
+		key = anEvent.key();
+
+//			&&	(key.string != 'KEY_TAB')
+//			&&	(key.string != 'KEY_SHIFT')
+//			&&	(key.string != 'KEY_BACKSPACE')
+//			&&	(key.string != 'KEY_DELETE')
+//			&&	(key.string.indexOf('KEY_ARROW') != 0)
+		
+
+		if ((fieldValue.replace(/\s/g, '').length == 8) && (key.string == 'KEY_SPACEBAR')) {
+//			field.value = Clipperz.Base.trim(fieldValue).replace(/.{4}/g, '$&' + ' ');
+			
+			switch (field.id) {
+				case this.getId('oneTimePassword_1'):
+					this.getElement('oneTimePassword_2').focus();
+					break;
+				case this.getId('oneTimePassword_2'):
+					this.getElement('oneTimePassword_3').focus();
+					break;
+				case this.getId('oneTimePassword_3'):
+					this.getElement('oneTimePassword_4').focus();
+					break;
+			}
+//		} else if (fieldValue.replace(/\s/g, '').length > 8) {
+		}
+		
+//MochiKit.Logging.logDebug("-- fieldValue: " + fieldValue);
+	},
+	
+	//.........................................................................
+	
+	'doLogin': function() {
+//MochiKit.Logging.logDebug(">>> LoginPanel.doLogin");
+		if (this.checkLoginForm()) {
+			if (this.getDom('useOneTimePasswordCheckbox').checked == false) {
+				this.doLoginWithUsernameAndPassphrase(this.getDom('login_username').value, this.getDom('login_passphrase').value);
+			} else {
+				var	oneTimePasswordValue;
+				
+				oneTimePasswordValue = this.getDom('oneTimePassword_1').value + this.getDom('oneTimePassword_2').value + this.getDom('oneTimePassword_3').value + this.getDom('oneTimePassword_4').value;
+				this.doLoginWithUsernameAndOneTimePassword(this.getDom('login_username').value, oneTimePasswordValue);
+			}
+		}
+//MochiKit.Logging.logDebug("<<< LoginPanel.doLogin");
+	},
+
+	//.........................................................................
+
+	'doLoginWithUsernameAndPassphrase': function(anUsername, aPassphrase) {
+		var deferredResult;
+		var user;
+		var loginPanel;
+
+//MochiKit.Logging.logDebug(">>> LoginPanel.doLoginWithUsernameAndPassphrase");
+		user = new Clipperz.PM.DataModel.User({username:anUsername, passphrase:aPassphrase});
+		loginPanel = this;
+
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("0 - LoginPanel.doLogin - 0: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+				title: "",
+				text: "",
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false,
+				fn:MochiKit.Base.method(deferredResult, 'cancel'),
+				scope:this
+			},
+			this.getDom('login_submit')
+		);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("1 - LoginPanel.doLogin - 1: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'login_start');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("2 - LoginPanel.doLogin - 2: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(user, 'connect'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("3 - LoginPanel.doLogin - 3: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'connection_done');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("4 - LoginPanel.doLogin - 4: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'connection_loadingUserData');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("5 - LoginPanel.doLogin - 5: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(user, 'loadPreferences'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("6 - LoginPanel.doLogin - 6: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(user, 'loadRecords'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("7 - LoginPanel.doLogin - 7: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(user, 'loadDirectLogins'));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("8 - LoginPanel.doLogin - 8: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'login_connected');
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("9 - LoginPanel.doLogin - 9: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, user, 'setupDone', null);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("10 - LoginPanel.doLogin - 10: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+
+		deferredResult.addCallback(MochiKit.Async.wait, 0.5);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("11 - LoginPanel.doLogin - 11: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+
+		deferredResult.addCallback(function(res) {
+			Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get('main'));
+			return res;
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("12 - LoginPanel.doLogin - 12: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+
+		deferredResult.addErrback(MochiKit.Base.bind(function() {
+			Clipperz.PM.Components.MessageBox().update({
+				title:Clipperz.PM.Strings['loginMessagePanelFailureTitle'],
+				text:Clipperz.PM.Strings['loginMessagePanelFailureText'],
+				showProgressBar:false,
+				buttons:{'ok':Clipperz.PM.Strings['loginMessagePanelFailureButtonLabel']},
+				fn:MochiKit.Base.bind(function() {
+					this.getElement('login_passphrase').focus();
+					this.getElement('login_passphrase').dom.select();
+				}, this),
+				scope:this
+			});
+		}, this));
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("13 - LoginPanel.doLogin - 13: "/* + res*/); return res;});
+//deferredResult.addErrback(function(res) {MochiKit.Logging.logDebug("ERROR: " + res); return res;});
+		
+		deferredResult.callback("token");
+//MochiKit.Logging.logDebug("<<< LoginPanel.doLoginWithUsernameAndPassphrase");
+		
+		return deferredResult;
+	},
+
+	//.........................................................................
+
+	'doLoginWithUsernameAndOneTimePassword': function(anUsername, aOneTimePassword) {
+		var deferredResult;
+		var loginPanel;
+		var oneTimePassword;
+		
+		oneTimePassword = Clipperz.PM.DataModel.OneTimePassword.normalizedOneTimePassword(aOneTimePassword);
+
+//MochiKit.Logging.logDebug(">>> LoginPanel.doLoginWithUsernameAndPassphrase");
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+				title: "",
+				text: "",
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false,
+				fn:MochiKit.Base.method(deferredResult, 'cancel'),
+				scope:this,
+				steps:7,
+				buttons:{
+				//	'ok':Clipperz.PM.Strings['loginMessagePanelInitialButtonLabel']
+				}
+			},
+			this.getDom('login_submit')
+		);
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'OTP_login_start');
+		deferredResult.addCallback(function(anUsername, aOneTimePassword) {
+			var args;
+			
+			args = {
+				'message': 'oneTimePassword',
+				'version': Clipperz.PM.Crypto.communicationProtocol.currentVersion,
+				'parameters': {
+					'oneTimePasswordKey': Clipperz.PM.DataModel.OneTimePassword.computeKeyWithUsernameAndPassword(anUsername, aOneTimePassword),
+					'oneTimePasswordKeyChecksum': Clipperz.PM.DataModel.OneTimePassword.computeKeyChecksumWithUsernameAndPassword(anUsername, aOneTimePassword)
+				}
+			}
+			
+			return args;
+		}, anUsername, oneTimePassword);
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'OTP_login_loadingOTP');
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Proxy.defaultProxy, 'handshake'));
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, this, 'updatedProgressState', 'OTP_login_extractingPassphrase');
+		deferredResult.addCallback(function(aResult) {
+			return Clipperz.PM.Crypto.deferredDecrypt(oneTimePassword, aResult['data'], aResult['version']);
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.otpLogin - 4: " + res); return res;});
+		deferredResult.addCallback(function(aResult) {
+//MochiKit.Logging.logDebug("aResult")			
+			return (new Clipperz.ByteArray().appendBase64String(aResult['passphrase'])).asString();
+		});
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.otpLogin - 5: " + res); return res;});
+		deferredResult.addCallbacks(
+			MochiKit.Base.method(this, 'doLoginWithUsernameAndPassphrase', anUsername),
+			MochiKit.Base.bind(function(aLoginPanel) {
+				Clipperz.PM.Components.MessageBox().update({
+					title:Clipperz.PM.Strings['loginMessagePanelFailureTitle'],
+					text:Clipperz.PM.Strings['loginMessagePanelFailureText'],
+					showProgressBar:false,
+					buttons:{'ok':Clipperz.PM.Strings['loginMessagePanelFailureButtonLabel']},
+					fn:MochiKit.Base.bind(function() {
+						this.getElement('oneTimePassword_1').focus();
+					}, this),
+					scope:aLoginPanel
+				});
+			}, this)
+		);
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.otpLogin - 6: " + res); return res;});
+		deferredResult.callback("token");
+//MochiKit.Logging.logDebug("<<< LoginPanel.doLoginWithUsernameAndPassphrase");
+		
+		return deferredResult;
+	},
+	
+	//.........................................................................
+
+	'checkLoginForm': function() {
+		var result;
+		var username
+
+		result = true;
+		
+//MochiKit.Logging.logDebug(">>> checkLoginForm");
+		username = Clipperz.Base.trim(this.getDom('login_username').value);
+		if (username == "") {
+			this.getElement('login_username').focus();
+			result = false;
+		} else {
+			if (this.getDom('useOneTimePasswordCheckbox').checked == false) {
+				var	passphrase;
+			
+				passphrase = Clipperz.Base.trim(this.getDom('login_passphrase').value);
+
+				if (passphrase == "") {
+					this.getElement('login_passphrase').focus();
+					result = false;
+				}
+			} else {
+				if (Clipperz.Base.trim(this.getDom('oneTimePassword_1').value) == "") {
+					this.getElement('oneTimePassword_1').focus();
+					result = false;
+				} else  if (Clipperz.Base.trim(this.getDom('oneTimePassword_2').value) == "") {
+					this.getElement('oneTimePassword_2').focus();
+					result = false;
+				} else if (Clipperz.Base.trim(this.getDom('oneTimePassword_3').value) == "") {
+					this.getElement('oneTimePassword_3').focus();
+					result = false;
+				} else if (Clipperz.Base.trim(this.getDom('oneTimePassword_4').value) == "") {
+					this.getElement('oneTimePassword_4').focus();
+					result = false;
+				}
+			}
+		}
+//MochiKit.Logging.logDebug("<<< checkLoginForm - " + result);
+		
+		return result;
+	},
+
+	//.........................................................................
+
+	'doRegister': function(anEvent) {
+		if ((Clipperz.PM.Proxy.defaultProxy.isReadOnly() == false) && (this.checkRegistrationForm())) {
+			this.doRegistrationWithUsernameAndPassphrase(this.getDom('registration_username').value, this.getDom('registration_passphrase').value /*, this.getDom('registration_invitationCode').value*/);
+		}
+	},
+
+	//.........................................................................
+
+	'checkRegistrationForm': function() {
+		var result;
+		var username
+		var	passphrase;
+		var	rePassphrase;
+		var	safetyCheck;
+		var	termsOfServiceCheck;
+//		var	invitationCode;
+		
+		username = this.getDom('registration_username').value;
+		passphrase = this.getDom('registration_passphrase').value;
+		rePassphrase = this.getDom('registration_repassphrase').value;
+		safetyCheck = this.getDom('registration_check').checked;
+		termsOfServiceCheck = this.getDom('registration_termsOfServiceCheck').checked;
+//		invitationCode = this.getDom('registration_invitationCode').value;
+		
+		if ((username != "") && (passphrase != "") && (rePassphrase != "") /*&& (invitationCode != "")*/) {
+			if (passphrase != rePassphrase) {
+				//	show alert that the passphrase and rePassphrase should be equal
+//MochiKit.Logging.logDebug("WARNING: passphrase != rePassphrase");
+				this.showRegistrationFormErrorMessageAnimation(Clipperz.PM.Strings['registrationFormWarningMessageNotMatchingPassphrases']);
+				this.getElement('registration_repassphrase').focus().dom.select();
+//				this.getElement('registration_repassphrase').select();
+				result = false;
+			} else if (safetyCheck != true) {
+				//	show alert that the safetyCheck should be checed
+//MochiKit.Logging.logDebug("WARNING: safetyCheck not checked");
+				this.showRegistrationFormErrorMessageAnimation(Clipperz.PM.Strings['registrationFormWarningMessageSafetyCheckNotSelected']);
+				this.getElement('registration_check').focus();
+				result = false;
+			} else if (termsOfServiceCheck != true) {
+				this.showRegistrationFormErrorMessageAnimation(Clipperz.PM.Strings['registrationFormWarningMessageTermsOfServiceCheckNotSelected']);
+				this.getElement('registration_termsOfServiceCheck').focus();
+			} else {
+				result = true;
+			}
+		} else {
+			if (username == "") {
+				this.getElement('registration_username').focus();
+			} else if (passphrase == "") {
+				this.getElement('registration_passphrase').focus();
+			} else if (rePassphrase == "") {
+				this.getElement('registration_repassphrase').focus();
+//			} else if (invitationCode == "") {
+//				this.showRegistrationFormErrorMessageAnimation(Clipperz.PM.Strings['registrationFormWarningMessageInvitationCodeMissing']);
+//				this.getElement('registration_invitationCode').focus();
+			}
+			
+			result = false;
+		}
+		
+		if (result === true) {
+			this.getActor('registration_errorMessage').hide();
+		}
+		
+		return result;
+	},
+
+	//.........................................................................
+
+	'showRegistrationFormErrorMessageAnimation': function(anErrorMessage, aCallback) {
+		var	errorMessageActor;
+		
+		errorMessageActor = this.getActor('registration_errorMessage');
+		errorMessageActor.update(anErrorMessage);
+		errorMessageActor.show(true);
+		errorMessageActor.play(aCallback);
+	},
+
+	//.........................................................................
+	
+	'doRegistrationWithUsernameAndPassphrase': function(anUsername, aPassphrase /*, anInvitationCode */) {
+		var deferredResult;
+		var user;
+		var loginPanel;
+
+//MochiKit.Logging.logDebug(">>> LoginPanel.doRegistrationWithUsernameAndPassphrase");
+		user = new Clipperz.PM.DataModel.User({username:anUsername, passphrase:aPassphrase});
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 1");
+		loginPanel = this;
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 2");
+
+		deferredResult = new MochiKit.Async.Deferred();
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 3");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 1: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+				title:Clipperz.PM.Strings['registrationMessagePanelInitialTitle'],
+				text: Clipperz.PM.Strings['registrationMessagePanelInitialText'],
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false,
+				fn:MochiKit.Base.method(deferredResult, 'cancel'),
+				scope:this,
+				steps:9,
+				buttons:{
+					'ok':Clipperz.PM.Strings['registrationMessagePanelInitialButtonLabel']
+				}
+			},
+			this.getDom('registration_submit')
+		);
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 4");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 2: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(user, 'register'), /*anInvitationCode*/ "VeryBraveBetaTester");
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 5");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 3: " + res); return res;});
+		deferredResult.addCallback(function(res) {
+			Clipperz.PM.Components.MessageBox().update({
+				title:Clipperz.PM.Strings['registrationMessagePanelRegistrationDoneTitle'],
+				text:Clipperz.PM.Strings['registrationMessagePanelRegistrationDoneText'],
+				step:'next'
+			});
+			return res;
+		});
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 6");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 5: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Async.wait, 1);
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 7");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 6: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(user, 'connect'));
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 8");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 7: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Async.wait, 1);
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 9");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 8: " + res); return res;});
+		deferredResult.addCallback(function(res) {
+			Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get('main'));
+			return res;
+		});
+		deferredResult.addCallback(MochiKit.Base.method(this, 'showRegistrationSplashScreen'), user);
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 10");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 9: " + res); return res;});
+		deferredResult.addErrback(function(anError) {
+			Clipperz.PM.Components.MessageBox().update({
+				title:Clipperz.PM.Strings['registrationMessagePanelFailureTitle'],
+				text:anError.message,
+				showProgressBar:false,
+				buttons:{'ok':Clipperz.PM.Strings['registrationMessagePanelFailureButtonLabel']}});
+			return anError;
+		});
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 11");
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("LoginPanel.doRegistrationWithUsernameAndPassphrase - 10: " + res); return res;});
+		deferredResult.addCallback(Clipperz.NotificationCenter.deferredNotification, user, 'setupDone', null);
+		deferredResult.callback("token");
+//MochiKit.Logging.logDebug("--- LoginPanel.doRegistrationWithUsernameAndPassphrase - 12");
+		
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showRegistrationSplashScreen': function(anUser) {
+		var deferredResult;
+		var alertElement;
+		var	alertDialog;
+		var closeButton;
+		var closeFunction;
+
+		deferredResult = new MochiKit.Async.Deferred();
+
+//MochiKit.Logging.logDebug(">>> Main.showRegistrationSplashScreen");
+		alertElement = Clipperz.YUI.DomHelper.append(document.body, {tag:'div', id:'registrationSplash', children:[
+			{tag:'div', cls:'ydlg-hd', htmlString:Clipperz.PM.Strings['registrationSplashPanelTitle']},
+			{tag:'div', cls:'ydlg-bd', children:[
+				{tag:'div', cls:'alert-message', id:'splashMessage', children:[
+					{tag:'div', htmlString:Clipperz.PM.Strings['registrationSplashPanelDescription']},
+					{tag:'table', border:'0', cellpadding:'5', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'span', cls:'label', htmlString:Clipperz.PM.Strings['registrationSplashPanelUsernameLabel']}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'span', cls:'value', html:Clipperz.Base.escapeHTML(anUser.username())}
+								]}
+							]},
+							{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									{tag:'span', cls:'label', htmlString:Clipperz.PM.Strings['registrationSplashPanelPassphraseLabel']}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'div', id:this.getId('showPassphraseDiv'), children:[
+										{tag:'span', cls:'value', html:Clipperz.Base.escapeHTML(anUser.passphrase())}
+									]},
+									{tag:'div', id:this.getId('hidePassphraseDiv'), cls:'Clipperz_recordFieldData', children:[
+										{tag:'input', id:this.getId('passwordField'), type:'text', cls:'scrambledField', title:Clipperz.PM.Strings['recordDetailPasswordFieldTooltipLabel'], value:"anUser.passphrase()"}
+									]}
+								]}
+							]},
+							{tag:'tr', children:[
+								{tag:'td'},
+								{tag:'td', valign:'top', children:[
+//									{tag:'a', href:"#", id:this.getId('togglePassphraseVisibility'), htmlString:Clipperz.PM.Strings['registrationSplashPanelShowPassphraseButtonLabel']} 
+									{tag:'input', type:'checkbox', id:this.getId('showPassphraseCheckbox')},
+									{tag:'span', cls:'activeText', id:this.getId('showPassphraseText'), htmlString:Clipperz.PM.Strings['registrationSplashPanelShowPassphraseButtonLabel']}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'ydlg-ft'}
+		]}, true);
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 1");
+
+		this.getElement('passwordField').dom.value = anUser.passphrase();
+		this.getElement('passwordField').wrap({tag:'div', cls:'passwordBackground'}).setStyle('background-position', "0px -" + Math.min(128, Clipperz.PM.Crypto.passwordEntropy(anUser.passphrase())) + "px").setStyle('width', '71px');
+		MochiKit.Signal.connect(this.getId('showPassphraseCheckbox'), 'onclick', this, 'togglePassphraseVisibility');
+		MochiKit.Signal.connect(this.getId('showPassphraseText'), 'onclick', this, 'togglePassphraseCheckbox');
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 1.1");
+
+		this.getElement('showPassphraseDiv').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('hidePassphraseDiv').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 1.1.1");
+		this.togglePassphraseVisibility();
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 1.2");
+		
+		alertDialog = new YAHOO.ext.BasicDialog(
+			alertElement, { 
+				closable:false,
+				modal:true,
+				autoTabs:false,
+				resizable:false,
+				fixedcenter:true,
+				constraintoviewport:false,
+				width:450,
+				height:220,
+				shadow:true,
+				minWidth:300,
+				minHeight:300
+			}
+		);
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 2");
+	
+		closeFunction = deferredResult.callback;
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 3");
+		alertDialog.addKeyListener(27, closeFunction);
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 4");
+		closeButton = alertDialog.addButton(Clipperz.PM.Strings['splashAlertCloseButtonLabel'], closeFunction, deferredResult);
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 5");
+		alertDialog.setDefaultButton(closeButton);
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 6");
+		alertDialog.show('main');
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 7");
+
+		deferredResult.addBoth(MochiKit.Base.method(alertDialog, 'hide'));
+		deferredResult.addCallback(MochiKit.Signal.disconnectAllTo, this)
+//MochiKit.Logging.logDebug("--- Main.showRegistrationSplashScreen - 8");
+		deferredResult.addCallback(MochiKit.Async.succeed);
+//MochiKit.Logging.logDebug("<<< Main.showRegistrationSplashScreen");
+		
+		return deferredResult;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'showLoginFormEventHandler': function(anEvent) {
+		anEvent.stop();
+		this.showLoginForm(true);
+	},
+	
+	'showLoginForm': function(shouldAnimate) {
+		if (shouldAnimate) {
+			this.showLoginFormAnimator().play();
+		} else {
+			this.hideRegistrationForm(false);
+			this.getActor('loginForm').show(false);
+			this.getElement('login_username').focus();
+		}
+		this.setVisibleForm('login');
+	},
+
+	'showLoginFormAnimator': function() {
+		if (this._showLoginFormAnimator == null) {
+			var animator;
+			var	loginFormActor;
+			var registrationFormActor;
+			var usernameFieldActor;
+			
+			animator = new YAHOO.ext.Animator();
+			loginFormActor = this.getActor('loginForm', animator);
+			loginFormActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			registrationFormActor = this.getActor('registrationForm', animator);
+			registrationFormActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			usernameFieldActor = this.getActor('login_username', animator);
+			
+			animator.startCapture();
+			registrationFormActor.hide(true);
+			loginFormActor.show(true);
+			usernameFieldActor.focus();
+			animator.stopCapture();
+
+			this._showLoginFormAnimator = animator;
+		}
+		
+		return this._showLoginFormAnimator;
+	},
+
+	
+	'hideLoginForm': function(shouldAnimate) {
+		var loginFormActor;
+
+		loginFormActor = this.getActor('loginForm');
+		loginFormActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		loginFormActor.hide(shouldAnimate);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showRegistrationFormEventHandler': function(anEvent) {
+		anEvent.stop();
+		this.showRegistrationForm(true);
+	},
+	
+	'showRegistrationForm': function(shouldAnimate) {
+		if (shouldAnimate) {
+			this.showRegistrationFormAnimator().play(MochiKit.Base.bind(this.showRegistrationAlert, this));
+		} else {
+			var	errorMessageActor;
+			
+			this.hideLoginForm(shouldAnimate)
+			this.getActor('registrationForm').show(false);
+			this.getElement('registration_username').focus();
+
+			errorMessageActor = this.getActor('registration_errorMessage');
+			errorMessageActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			errorMessageActor.update("---");
+			errorMessageActor.hide();
+			
+			this.showRegistrationAlert();
+		}
+		this.setVisibleForm('registration');
+	},
+
+	'showRegistrationFormAnimator': function() {
+		if (this._showRegistrationFormAnimator == null) {
+			var animator;
+			var	loginFormActor;
+			var registrationFormActor;
+			var usernameFieldActor;
+			var	errorMessageActor;
+			
+			animator = new YAHOO.ext.Animator();
+			loginFormActor = this.getActor('loginForm', animator);
+			loginFormActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			registrationFormActor = this.getActor('registrationForm', animator);
+			registrationFormActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			usernameFieldActor = this.getActor('registration_username', animator);
+			errorMessageActor = this.getActor('registration_errorMessage', animator);
+			errorMessageActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			
+			animator.startCapture();
+			loginFormActor.hide(true);
+			errorMessageActor.update("---");
+			errorMessageActor.hide();
+			registrationFormActor.show(true);
+			usernameFieldActor.focus();
+			animator.stopCapture();
+
+			this._showRegistrationFormAnimator = animator;
+		}
+		
+		return this._showRegistrationFormAnimator;
+	},
+	
+	'hideRegistrationForm': function(shouldAnimate) {
+		var registrationFormActor;
+
+		registrationFormActor = this.getActor('registrationForm');
+		registrationFormActor.setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		registrationFormActor.hide(shouldAnimate);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'shouldShowRegistrationAlert': function() {
+		return this._shouldShowRegistrationAlert;
+	},
+	
+	'showRegistrationAlert': function() {
+		if ((this.shouldShowRegistrationAlert()) && (Clipperz.PM.Proxy.defaultProxy.isReadOnly() == false)) {
+			var alertElement;
+			var	alertDialog;
+			var closeButton;
+			var closeFunction;
+
+			alertElement = Clipperz.YUI.DomHelper.append(document.body, {tag:'div', id:'alert', children:[
+				{tag:'div', cls:'ydlg-hd', htmlString:Clipperz.PM.Strings['splashAlertTitle']},
+				{tag:'div', cls:'ydlg-bd', children:[
+					{tag:'div', cls:'alert-message', id:'splashMessage', htmlString:Clipperz.PM.Strings['splashAlertText']}
+				]},
+				{tag:'div', cls:'ydlg-ft'}
+			]}, true);
+
+			alertDialog = new YAHOO.ext.BasicDialog(
+				alertElement, { 
+					closable:false,
+					modal:true,
+					autoTabs:false,
+					resizable:false,
+					fixedcenter:true,
+					constraintoviewport:false,
+					width:450,
+					height:320,
+					shadow:true,
+					minWidth:300,
+					minHeight:300
+				}
+			);
+		
+			closeFunction = MochiKit.Base.partial(MochiKit.Base.bind(this.closeResigrationAlert, this), alertDialog);
+			alertDialog.addKeyListener(27, closeFunction);
+			closeButton = alertDialog.addButton(Clipperz.PM.Strings['splashAlertCloseButtonLabel'], closeFunction, this);
+			alertDialog.setDefaultButton(closeButton);
+			alertDialog.show('main');
+			
+			this._shouldShowRegistrationAlert = false;
+		}
+	},
+
+	'closeResigrationAlert': function(anAlertDialog) {
+		anAlertDialog.hide(MochiKit.Base.bind(function() {anAlertDialog.destroy(true); this.focusOnVisibleForm();}, this));
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'onkeydown': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> onkeydown - " + anEvent.src().id);
+		if (anEvent.key().code == 13) {
+			if (anEvent.src() == this.getDom('loginForm')) {
+				this.doLogin();
+			} else if (anEvent.src() == this.getDom('registrationForm')) {
+				this.doRegister();
+			} else {
+			}
+			
+			anEvent.stop();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'visibleForm': function() {
+		return this._visibleForm;
+	},
+
+	'setVisibleForm': function(aValue) {
+		this._visibleForm = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'focusOnVisibleForm': function() {
+		if (this.visibleForm() == 'registration') {
+			this.getElement('registration_username').focus();
+		} else {
+			this.getElement('login_username').focus();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'show': function() {
+		if (this.visibleForm() == 'registration') {
+			this.showRegistrationForm(false);
+		} else {
+			this.showLoginForm(false);
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'switchLanguage': function(anEvent) {
+		Clipperz.PM.Strings.Languages.setSelectedLanguage(anEvent.src().value);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectSelectedLanguageOption': function() {
+		Clipperz.DOM.selectOptionMatchingValue(this.getDom('languageSelector'), Clipperz.PM.Strings.selectedLanguage, true);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'switchLanguageHandler': function() {
+		this.render();
+		this.show();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'togglePassphraseCheckbox': function(anEvent) {
+		this.getDom('showPassphraseCheckbox').click();
+	},
+	
+	'togglePassphraseVisibility': function(anEvent) {
+		if (this.getDom('showPassphraseCheckbox').checked == true) {
+			this.getElement('showPassphraseDiv').show();
+			this.getElement('hidePassphraseDiv').hide();
+		} else {
+			this.getElement('showPassphraseDiv').hide();
+			this.getElement('hidePassphraseDiv').show();
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/LogoutPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/LogoutPanel.js
new file mode 100644
index 0000000..d7abfd6
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/LogoutPanel.js
@@ -0,0 +1,73 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.LogoutPanel = function(args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.LogoutPanel.superclass.constructor.call(this, args);
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.LogoutPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.LogoutPanel component";
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'initPanel': function() {
+		var result;
+		var	layout;
+			
+		result = new YAHOO.ext.ContentPanel(this.getId('panel'), {title:'logout', closable:false, autoCreate:true});
+
+		Clipperz.YUI.DomHelper.append(result.getEl().dom,
+			{tag:'div', children:[
+				{tag:'h2', html:'Logout panel'}
+			]}
+		);
+		
+		return result;
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
+	
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/MainPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/MainPanel.js
new file mode 100644
index 0000000..e2036d0
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/MainPanel.js
@@ -0,0 +1,906 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.MainPanel = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.MainPanel.superclass.constructor.call(this, anElement, args);
+
+	this._recordListDataModel = null;
+	this._selectedRecord = null;
+	this._recordDetailComponent = null;
+	this._recordListGrid = null;
+
+	this._directLinkItemTemplate = null;
+	this._recordItemTemplate = null;
+	
+	this._addNewRecordButton = null;
+	this._deleteRecordButton = null;
+
+	this._creationWizard = null;
+
+	Clipperz.NotificationCenter.register(null, 'selectAndEnterEditMode', this, 'selectRecordAndEnterEditModeHandler');
+
+	Clipperz.NotificationCenter.register(null, 'recordAdded', this, 'recordAddedHandler');
+	Clipperz.NotificationCenter.register(null, 'recordUpdated', this, 'recordUpdatedHandler');
+	Clipperz.NotificationCenter.register(null, 'recordRemoved', this, 'recordRemovedHandler');
+
+	Clipperz.NotificationCenter.register(null, 'directLoginAdded', this, 'directLoginAddedHandler');
+	Clipperz.NotificationCenter.register(null, 'directLoginUpdated', this, 'directLoginUpdatedHandler');
+	Clipperz.NotificationCenter.register(null, 'directLoginRemoved', this, 'directLoginRemovedHandler');
+
+	Clipperz.NotificationCenter.register(null, 'accountLocked', this, 'accountLockedHandler');
+
+	MochiKit.Signal.connect(MochiKit.DOM.currentWindow(), 'onresize', this, 'resizeModalMask');
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.MainPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Panels.MainPanel component";
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', id:'mainPanelTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+			{tag:'tbody', children:[
+				{tag:'tr', children:[
+					{tag:'td', width:'15', children:[
+						{tag:'div', cls:'mainPanelMinHeightDiv'}
+					]},
+					{tag:'td', valign:'top', id:'directLoginsTD', width:'200', children:[
+						{tag:'div', id:'directLoginsBlock', children:[
+							{tag:'div', cls:'directLoginsBlockHeaderBox', children:[{tag:'h3', id:'directLoginTitle', htmlString:Clipperz.PM.Strings['mainPanelDirectLoginBlockLabel']}]},
+							{tag:'div', id:'directLoginsDescription', htmlString:Clipperz.PM.Strings['mainPanelDirectLoginBlockDescription']},
+							{tag:'ul', id:'directLogins'}
+						]}
+					]},
+					{tag:'td', width:'15', children:[
+						{tag:'div', cls:'mainPanelMinHeightDiv'}
+					]},
+					{tag:'td', valign:'top', children:[
+						{tag:'div', id:'mainContent', children:[
+							{tag:'div', id:'recordListBlockHeader'},
+							{tag:'div', id:'recordListAndDetailBlock', children:[
+								{tag:'table', id:'recordListAndDetailBlockTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+									{tag:'tbody', children:[
+										{tag:'tr', children:[
+											{tag:'td', valign:'top', width:'250', children:[
+												{tag:'div', id:'recordListBlock', children:[
+													{tag:'div', id:'recordListFilterHeader'},
+													{tag:'ul', id:'records'}
+												]}
+											]},
+											{tag:'td', id:'recordDetailSeparatorTD', rowspan:'2', valign:'top', bgcolor:'#ddddff', html:'&nbsp;'},
+											{tag:'td', valign:'top', children:[
+												{tag:'div', id:'recordDetailMainBlock', children:[
+													{tag:'div', id:'recordTitleTopBlock'},
+													{tag:'div', id:'recordDetailBlock', children:[
+														{tag:'div', id:'recordDetail'}
+													]}
+												]},
+												{tag:'div', id:'recordCreationWizardMainBlock', children:[
+													{tag:'div', id:'recordCreationWizard', html:"WIZARD"}
+												]}
+											]}
+										]},
+										{tag:'tr', children:[
+											{tag:'td', id:'cardBoxLowerLeftTD', html:'&nbsp;'},
+											{tag:'td', id:'cardBoxLowerRightTD', html:'&nbsp;'}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]},
+					{tag:'td', width:'15', html:"&nbsp;"}
+				]}
+			]}
+		]});
+
+		this.renderRecordListBlockHeader();
+//		this.renderRecordListFilterHeader();
+
+		YAHOO.ext.Element.get('directLogins').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+
+		this.recordDetailComponent();
+
+		YAHOO.ext.Element.get('recordDetailMainBlock').setVisibilityMode(YAHOO.ext.Element.DISPLAY).show();
+		YAHOO.ext.Element.get('recordCreationWizardMainBlock').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'addNewRecordButton': function() {
+		return this._addNewRecordButton;
+	},
+	
+	'setAddNewRecordButton': function(aValue) {
+		this._addNewRecordButton = aValue;
+	},
+	
+	'deleteRecordButton': function() {
+		return this._deleteRecordButton;
+	},
+	
+	'setDeleteRecordButton': function(aValue) {
+		this._deleteRecordButton = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'addNewRecord': function(anEvent) {
+		var deferredResult;
+//		var currentNumberOfRecords;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+		
+//		currentNumberOfRecords = MochiKit.Base.keys(this.user().records()).length;
+/*
+//		if ((this.user().preferences().shouldShowDonationPanel()) && (currentNumberOfRecords > 0) && ((currentNumberOfRecords%10) == 0)) {
+//		if (true) {
+		if ((this.user().preferences().shouldShowDonationPanel()) && (currentNumberOfRecords >= 5)) {
+			deferredResult.addCallback(Clipperz.PM.showDonationSplashScreen, this.user(), 'recordListAddRecordButton');
+		}
+*/
+		deferredResult.addCallback(MochiKit.Base.bind(function() {
+			var currentlySelectedRecord;
+			
+			currentlySelecedRecord = this.selectedRecord();
+			this.setSelectedRecord(null);
+		
+			YAHOO.ext.Element.get('recordDetailMainBlock').hide();
+			YAHOO.ext.Element.get('recordCreationWizardMainBlock').show();
+			this.setCreationWizard(new Clipperz.PM.Components.RecordDetail.CreationWizard(YAHOO.ext.Element.get('recordCreationWizardMainBlock'), {previouslySelectedRecord:currentlySelecedRecord, mainComponent:this}));
+		
+			this.enterModalView();
+		}, this));
+
+		deferredResult.callback();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'creationWizard': function() {
+		return this._creationWizard;
+	},
+	
+	'setCreationWizard': function(aValue) {
+		this._creationWizard = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'exitWizard': function(aSelectedRecord, shouldEnterEditMode) {
+//MochiKit.Logging.logDebug(">>> MainPanel.exitWizard - " + aSelectedRecord)
+		YAHOO.ext.Element.get('recordCreationWizardMainBlock').hide();
+		YAHOO.ext.Element.get('recordDetailMainBlock').show();
+
+		if (shouldEnterEditMode == true) {
+			this.selectRecordAndEnterEditMode(aSelectedRecord);
+		} else {
+			this.setSelectedRecord(aSelectedRecord);
+			this.exitModalView();
+		}
+		
+		this.creationWizard().remove();
+		this.setCreationWizard(null);
+//MochiKit.Logging.logDebug("<<< MainPanel.exitWizard");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'selectRecordAndEnterEditMode': function(aRecord) {
+		this.setSelectedRecord(aRecord);
+		this.recordDetailComponent().setEditMode('EDIT');
+	},
+
+	'selectRecordAndEnterEditModeHandler': function(anEvent) {
+		this.selectRecordAndEnterEditMode(anEvent.source());
+	},
+
+	//-------------------------------------------------------------------------
+
+	'resizeModalMask': function() {
+//MochiKit.Logging.logDebug(">>> MainPanel.resizeModalMask");
+		MochiKit.Style.setElementDimensions('recordDetailEditModeHeaderMask', {w:MochiKit.Style.getElementDimensions('mainDiv').w, h:119});
+
+		MochiKit.Style.setElementDimensions('recordDetailEditModeVerticalMask', {w:511, h:MochiKit.Style.getElementDimensions('mainDiv').h - 119});
+//MochiKit.Logging.logDebug("<<< MainPanel.resizeModalMask");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'enterModalView': function() {
+		if (this.user().preferences().useSafeEditMode()) {
+			var headerMaskElement;
+			var verticalMaskElement;
+
+			this.resizeModalMask();
+
+			headerMaskElement = YAHOO.ext.Element.get('recordDetailEditModeHeaderMask');
+			headerMaskElement.show();
+			headerMaskElement.mask();
+
+			verticalMaskElement = YAHOO.ext.Element.get('recordDetailEditModeVerticalMask');
+			verticalMaskElement.show();
+			verticalMaskElement.mask();
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'exitModalView': function() {
+		if (this.user().preferences().useSafeEditMode()) {
+			var headerMaskElement;
+			var verticalMaskElement;
+			
+			headerMaskElement = YAHOO.ext.Element.get('recordDetailEditModeHeaderMask');
+			headerMaskElement.unmask();
+			headerMaskElement.hide();
+
+			verticalMaskElement = YAHOO.ext.Element.get('recordDetailEditModeVerticalMask');
+			verticalMaskElement.unmask();
+			verticalMaskElement.hide();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'removeSelectedRecord': function() {
+		var selectedRecordReferences;
+
+//MochiKit.Logging.logDebug(">>> MainPanel.removeSelectedRecord");
+		if (this.selectedRecord() != null) {
+			selectedRecordReferences = [this.selectedRecord().reference()];
+		} else {
+			selectedRecordReferences = [];
+		}
+
+		if (selectedRecordReferences.length > 0 ) {
+			var	recordReference;
+			var	records;
+			var deferred;
+			
+			records = [];
+			for (recordReference in selectedRecordReferences) {
+				var record;
+		
+//MochiKit.Logging.logDebug("### MainPanel.removeSelectedRecord - recordReference: " + selectedRecordReferences[recordReference]);
+				record = this.user().records()[selectedRecordReferences[recordReference]];
+//MochiKit.Logging.logDebug("### MainPanel.removeSelectedRecord - record: " + record);
+				records.push(record);
+			}
+//MochiKit.Logging.logDebug("### MainPanel.removeSelectedRecord - records.length: " + records.length);
+
+			deferred = new MochiKit.Async.Deferred();
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 1:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 1: " + res); return res;});
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 2:");
+			deferred.addCallback(function() {
+				var deferredResult;
+				
+				deferredResult = new MochiKit.Async.Deferred();
+				Clipperz.PM.Components.MessageBox().deferredShow({
+					title:Clipperz.PM.Strings['mainPanelDeletingRecordPanelConfirmationTitle'],
+					text:Clipperz.PM.Strings['mainPanelDeleteRecordPanelConfirmationText'],
+					width:240,
+					showProgressBar:false,
+					showCloseButton:false,
+					buttons:{
+						'yes':Clipperz.PM.Strings['mainPanelDeleteRecordPanelConfirmButtonLabel'],
+						'no':Clipperz.PM.Strings['mainPanelDeleteRecordPanelDenyButtonLabel']
+ 					},
+					fn:MochiKit.Base.partial(function(aDeferred, aResult) {
+						if (aResult == 'yes') {
+							aDeferred.callback(aResult);
+						} else {
+							aDeferred.errback(aResult);
+						}
+					}, deferredResult)
+				}, 'recordListRemoveRecordButton');
+				
+				return deferredResult;
+			});
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 3:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 2: " + res); return res;});
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 4:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 3: " + res); return res;});
+			deferred.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+				{
+					title:Clipperz.PM.Strings['mainPanelDeletingRecordPanelInitialTitle'],
+					text:Clipperz.PM.Strings['mainPanelDeletingRecordPanelInitialText'],
+					width:240,
+					showProgressBar:true,
+					showCloseButton:false,
+					steps:5
+				}
+			);
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 5:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 4: " + res); return res;});
+			deferred.addCallback(MochiKit.Base.method(this.user(), 'deleteRecordsAction'), records);
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 6:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 5: " + res); return res;});
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 7:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 6: " + res); return res;});
+			deferred.addCallback(function() {
+				Clipperz.PM.Components.MessageBox().update({
+					title:null,
+					text:Clipperz.PM.Strings['mainPanelDeletingRecordPanelCompletedText'],
+					step:'next',
+					buttons:{}
+				});
+			});
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 8:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 7: " + res); return res;});
+			deferred.addCallback(MochiKit.Async.wait, 1);
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 9:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 8: " + res); return res;});
+			deferred.addCallback(function(res) {
+				Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get('main'));
+				return res;
+			});
+//MochiKit.Logging.logDebug("--- MainPanel.removeSelectedRecord - 10:");
+//deferred.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.removeSelectedRecord - 9: " + res); return res;});
+			deferred.callback();
+		} else {
+//MochiKit.Logging.logDebug("+++ MainPanel.removeSelectedRecord - nothing selected");
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'recordDetailComponent': function() {
+//MochiKit.Logging.logDebug(">>> MainPanel.recordDetailComponent");
+		if (this._recordDetailComponent == null) {
+//MochiKit.Logging.logDebug("--- MainPanel.recordDetailComponent - 1");
+//MochiKit.Logging.logDebug("--- MainPanel.recordDetailComponent - 1 - user: " + this.user());
+			this._recordDetailComponent = new Clipperz.PM.Components.RecordDetail.MainComponent(
+				YAHOO.ext.Element.get('recordDetail'),
+				{user:this.user(), mainPanel:this}
+			);
+		}
+
+//MochiKit.Logging.logDebug("<<< MainPanel.recordDetailComponent");
+		
+		return this._recordDetailComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectedRecord': function() {
+		return this._selectedRecord;
+	},
+	
+	'setSelectedRecord': function(aValue) {
+//		this.hideNewRecordPanel();
+//MochiKit.Logging.logDebug(">>> MainPanel.setSelectedRecord");
+		if (aValue != this._selectedRecord) {
+//MochiKit.Logging.logDebug("--- MainPanel.setSelectedRecord - 1");
+			this._selectedRecord = aValue;
+//MochiKit.Logging.logDebug("--- MainPanel.setSelectedRecord - 2");
+			this.redrawRecordItems();
+//MochiKit.Logging.logDebug("--- MainPanel.setSelectedRecord - 3");
+			this.recordDetailComponent().setRecord(aValue);
+//MochiKit.Logging.logDebug("--- MainPanel.setSelectedRecord - 4");
+		}
+		
+		if ((aValue == null) || (Clipperz.PM.Proxy.defaultProxy.isReadOnly())) {
+			this.deleteRecordButton().disable();
+		} else {
+			this.deleteRecordButton().enable();
+		}
+//MochiKit.Logging.logDebug("<<< MainPanel.setSelectedRecord");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'recordAddedHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.recordAddedHandler");
+		this.recordDetailComponent();
+		this.redrawRecordItems();
+//MochiKit.Logging.logDebug("<<< MainPanel.recordAddedHandler");
+	},
+	
+	'recordUpdatedHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.recordUpdatedHandler");
+		this.redrawRecordItems();
+//MochiKit.Logging.logDebug("<<< MainPanel.recordUpdatedHandler");
+	},
+
+	'recordRemovedHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.recordRemovedHandler");
+		this.setSelectedRecord(null);
+//MochiKit.Logging.logDebug("--- MainPanel.recordRemovedHandler - 1");
+		this.redrawRecordItems();
+//MochiKit.Logging.logDebug("<<< MainPanel.recordRemovedHandler");
+	},
+	
+	'compareRecords': function(a, b) {
+//MochiKit.Logging.logDebug("=== compareRecords: " + a.toString() + " - " + b.toString());
+		return MochiKit.Base.compare(a.label().toLowerCase(), b.label().toLowerCase());
+	},
+	
+	'redrawRecordItems': function() {
+		var template;
+		var allRecords;
+
+//MochiKit.Logging.logDebug(">>> MainPanel.redrawRecordItems");
+		MochiKit.Iter.forEach(YAHOO.ext.Element.get('records').getChildrenByTagName('li'), function(aRecordElement) {
+			MochiKit.Signal.disconnectAll(aRecordElement.dom);
+		})
+//MochiKit.Logging.logDebug("--- MainPanel.redrawRecordItems - 1");
+		YAHOO.ext.Element.get('records').update("");
+//MochiKit.Logging.logDebug("--- MainPanel.redrawRecordItems - 2");
+		allRecords = MochiKit.Base.values(this.user().records());
+//MochiKit.Logging.logDebug("--- MainPanel.redrawRecordItems - 3");
+		allRecords.sort(this.compareRecords);
+//MochiKit.Logging.logDebug("--- MainPanel.redrawRecordItems - 4");
+		template = this.recordItemTemplate();
+//MochiKit.Logging.logDebug("--- MainPanel.redrawRecordItems - 5");
+		MochiKit.Iter.forEach(allRecords, MochiKit.Base.bind(function(aRecord) {
+			var	recordElement;
+			recordElement = template.append('records', {
+				recordTitle:aRecord.label(),
+				recordReference:aRecord.reference(),
+				cls:((aRecord == this.selectedRecord()) ? 'selected': '')
+			}, true);
+//MochiKit.Logging.logDebug("--- MainPanel.redrawRecordItems - 6: " + recordElement.dom);
+			recordElement.addClassOnOver('hover');
+			MochiKit.Signal.connect(recordElement.dom, 'onclick', this, 'selectRecord');
+		}, this));
+//MochiKit.Logging.logDebug("<<< MainPanel.redrawRecordItems");
+	},
+
+	'selectRecord': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.selectRecord");
+//MochiKit.Logging.logDebug("--- MainPanel.selectRecord !!! - ", this.user().records()[anEvent.src().id].label());
+		this.setSelectedRecord(this.user().records()[anEvent.src().id]);
+//MochiKit.Logging.logDebug("<<< MainPanel.selectRecord");		
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'directLoginAddedHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.recordRemovedHandler");
+		this.redrawDirectLoginItems();
+//MochiKit.Logging.logDebug("<<< MainPanel.recordRemovedHandler");
+	},
+	
+	'directLoginUpdatedHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.directLoginUpdatedHandler");
+		this.redrawDirectLoginItems();
+//MochiKit.Logging.logDebug("<<< MainPanel.directLoginUpdatedHandler");
+	},
+	
+	'directLoginRemovedHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.directLoginRemovedHandler");
+		this.redrawDirectLoginItems();
+//MochiKit.Logging.logDebug("<<< MainPanel.directLoginRemovedHandler");
+	},
+
+	'compareDirectLogins': function(a, b) {
+		return MochiKit.Base.compare(a.label().toLowerCase(), b.label().toLowerCase());
+	},
+	
+	'redrawDirectLoginItems': function() {
+		var template;
+		var allDirectLogins;
+
+//MochiKit.Logging.logDebug(">>> MainPanel.redrawDirectLoginItems");
+		MochiKit.Iter.forEach(YAHOO.ext.Element.get('directLogins').getChildrenByTagName('li'), function(aDirectLoginElement) {
+			MochiKit.Signal.disconnectAll(aDirectLoginElement.dom);
+//MochiKit.Logging.logDebug("disconnecting IMG " + aDirectLoginElement.getChildrenByTagName('img')[0].dom.src);
+			MochiKit.Signal.disconnectAll(aDirectLoginElement.getChildrenByTagName('img')[0].dom);
+		})
+//MochiKit.Logging.logDebug("--- MainPanel.redrawDirectLoginItems - 1");
+		YAHOO.ext.Element.get('directLogins').update("");
+//MochiKit.Logging.logDebug("--- MainPanel.redrawDirectLoginItems - 2");
+		allDirectLogins = MochiKit.Base.values(this.user().directLoginReferences());
+//MochiKit.Logging.logDebug("--- MainPanel.redrawDirectLoginItems - 3");
+		allDirectLogins.sort(this.compareDirectLogins);
+
+		if (allDirectLogins.length == 0) {
+			YAHOO.ext.Element.get('directLoginsDescription').show();
+			YAHOO.ext.Element.get('directLogins').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		} else {
+			YAHOO.ext.Element.get('directLoginsDescription').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+			YAHOO.ext.Element.get('directLogins').show();
+		}
+//MochiKit.Logging.logDebug("--- MainPanel.redrawDirectLoginItems - 4");
+		template = this.directLoginItemTemplate();
+//MochiKit.Logging.logDebug("--- MainPanel.redrawDirectLoginItems - 5");
+		MochiKit.Iter.forEach(allDirectLogins, MochiKit.Base.bind(function(aDirectLogin) {
+			var	directLoginElement;
+			var	faviconImageElementID;
+			
+			faviconImageElementID = aDirectLogin.reference() + "_faviconIMG";
+			directLoginElement = template.append('directLogins', {
+				elementID:faviconImageElementID,
+				faviconUrl:aDirectLogin.fixedFavicon(), 
+				directLoginTitle:aDirectLogin.label(),
+				directLoginReference:aDirectLogin.reference()
+			}, true);
+//MochiKit.Logging.logDebug("--- MainPanel.redrawDirectLoginItems - 6: " + recordElement.dom);
+			directLoginElement.addClassOnOver("hover");
+			MochiKit.Signal.connect(directLoginElement.dom, 'onclick', this, 'handleDirectLoginClick');
+
+			MochiKit.Signal.connect(faviconImageElementID, 'onload', this, 'handleLoadedFaviconImage');
+			MochiKit.Signal.connect(faviconImageElementID, 'onerror', aDirectLogin, 'handleMissingFaviconImage');
+			MochiKit.Signal.connect(faviconImageElementID, 'onabort', aDirectLogin, 'handleMissingFaviconImage');
+			
+//			YAHOO.ext.Element.get(faviconImageElementID).dom.src = aDirectLogin.fixedFavicon();
+		}, this));
+//MochiKit.Logging.logDebug("<<< MainPanel.redrawDirectLoginItems");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleDirectLoginClick': function(anEvent) {
+		var	directLoginReference;
+//MochiKit.Logging.logDebug(">>> MainPanel.handleDirectLoginClick !!!");
+
+		directLoginReference = this.user().directLoginReferences()[anEvent.src().id];
+		if (anEvent.target().className == 'directLoginItemEditButton') {
+			this.editDirectLogin(directLoginReference);
+		} else {
+			this.openDirectLogin(directLoginReference);
+		}
+//MochiKit.Logging.logDebug("<<< MainPanel.handleDirectLoginClick");		
+	},
+
+	'editDirectLogin': function(aDirectLoginReference) {
+//MochiKit.Logging.logDebug("=== MainPanel.editDirectLogin - " + aDirectLoginReference.label());
+		this.setSelectedRecord(aDirectLoginReference.record());
+	},
+	
+	'openDirectLogin': function(aDirectLoginReference) {
+		var	deferredResult;
+		var	newWindow;
+				
+//MochiKit.Logging.logDebug(">>> MainPanel.openDirectLogin - " + aDirectLoginReference.label());
+		deferredResult = new MochiKit.Async.Deferred();
+//deferredResult.addBoth(function(res) {MochiKit.Logging.logDebug("MainPanel.openDirectLogin - 1: " + res); return res;});
+		deferredResult.addCallback(MochiKit.Base.method(aDirectLoginReference, 'setupJumpPageWindow'));
+		deferredResult.addCallback(MochiKit.Base.method(aDirectLoginReference, 'deferredDirectLogin'));
+		deferredResult.addCallback(function(aDirectLogin) {
+			aDirectLogin.runDirectLogin(newWindow);
+		});
+
+		newWindow = window.open(Clipperz.PM.Strings['directLoginJumpPageUrl'], "");
+//		MochiKit.Signal.connect(newWindow, 'onload', MochiKit.Base.method(deferredResult, 'callback', newWindow))
+//		MochiKit.Signal.connect(newWindow, 'onload', MochiKit.Base.partial(alert, "done"));
+		deferredResult.callback(newWindow);
+//MochiKit.Logging.logDebug("<<< MainPanel.openDirectLogin");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleLoadedFaviconImage': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> MainPanel.handleLoadedFaviconImage");
+		MochiKit.Signal.disconnectAll(anEvent.src())
+//MochiKit.Logging.logDebug("<<< MainPanel.handleLoadedFaviconImage");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'recordItemTemplate': function() {
+		if (this._recordItemTemplate == null) {
+			this._recordItemTemplate = Clipperz.YUI.DomHelper.createTemplate({tag:'li', cls:'{cls}', id:'{recordReference}', children:[
+				{tag:'span', html:'{recordTitle}'}
+			]});
+			this._recordItemTemplate.compile();
+		}
+		
+		return this._recordItemTemplate;
+	},
+	
+	'directLoginItemTemplate': function() {
+		if (this._directLoginItemTemplate == null) {
+			this._directLoginItemTemplate = Clipperz.YUI.DomHelper.createTemplate({tag:'li', id:'{directLoginReference}', children:[
+				{tag:'table', border:'0', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', width:'20', align:'center', valign:'top', children:[
+								{tag:'img', id:'{elementID}', src:'{faviconUrl}'}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'a', cls:'directLoginItemTitle', html:'{directLoginTitle}'}
+							]},
+							{tag:'td', valign:'top', align:'right', children:[
+//								{tag:'span', cls:'directLoginItemEditButton', htmlString:Clipperz.PM.Strings['directLinkReferenceShowButtonLabel']}
+								{tag:'a', cls:'directLoginItemEditButton', htmlString:Clipperz.PM.Strings['directLinkReferenceShowButtonLabel']}
+							]}
+						]}
+					]}
+				]}
+			]});
+			this._directLoginItemTemplate.compile();
+		}
+		
+		return this._directLoginItemTemplate;
+	},
+	
+	//-------------------------------------------------------------------------
+/*
+	'newRecordButton': function() {
+		return this._newRecordButton;
+	},
+
+	'setNewRecordButton': function(aValue) {
+		this._newRecordButton = aValue;
+	},
+	
+	'newRecordCancelButton': function() {
+		return this._newRecordCancelButton;
+	},
+	
+	'setNewRecordCancelButton': function(aValue) {
+		this._newRecordCancelButton = aValue;
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'onkeydown': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> onkeydown - " + anEvent.src().id + ": " + anEvent.key().code);
+		switch (anEvent.src().id) {
+/*
+			case this.getId('newRecordForm'):
+				if (anEvent.key().code == 13) {
+					this.newRecordButton().focus();
+//					this.addNewRecord();
+				} else if (anEvent.key().code == 27) {
+					this.newRecordCancelButton().focus();
+					this.hideNewRecordPanel(true);
+				}
+				break;
+*/
+			case "recordFilterSearchForm":
+				if (anEvent.key().code == 13) {
+//MochiKit.Logging.logDebug("SEARCH");
+					this.filterCardsWithName(YAHOO.ext.Element.get('recordFilterSearchValue').dom.value);
+					anEvent.event().stopPropagation();
+					YAHOO.ext.Element.get('recordFilterSearchValue').focus();
+				} else if (anEvent.key().code == 27) {
+					this.hideRecordFilterSearchPanel(true);
+					this.showRecordFilterAllPanel();
+				}
+				break;
+		}
+
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderRecordListBlockHeader': function(){
+		var recordListBlockHeaderElement;
+		
+		recordListBlockHeaderElement = YAHOO.ext.Element.get('recordListBlockHeader');
+		recordListBlockHeaderElement.update("");
+		Clipperz.YUI.DomHelper.append(recordListBlockHeaderElement.dom, 		
+			{tag:'table', cls:'recordListBlockHeaderTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', /*width:'50%',*/ cls:'recordBlockTitleTD', children:[
+							{tag:'h3', id:'recordBlockTitle', htmlString:Clipperz.PM.Strings['mainPanelRecordsBlockLabel']}
+						]},
+						{tag:'td', align:'right', children:[
+							{tag:'table', id:'recordListButtonsTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+								{tag:'tbody', children:[
+									{tag:'tr', children:[
+										{tag:'td', cls:'recordButtonTD', align:'right', children:[
+											{tag:'div', cls:'recordButton', id:'recordListAddRecordButton'}
+										]},
+										{tag:'td', cls:'recordButtonTD', align:'left', children:[
+											{tag:'div', cls:'recordButton', id:'recordListRemoveRecordButton'}
+										]}
+									]}
+								]}
+							]}
+						]},
+						{tag:'td', width:'15', html:"&nbsp;"}
+					]}
+				]}
+			]}
+		);
+		
+		this.setAddNewRecordButton(new YAHOO.ext.Button('recordListAddRecordButton', {text:Clipperz.PM.Strings['mainPanelAddRecordButtonLabel'], handler:this.addNewRecord, scope:this}));
+//		this.setAddNewRecordButton(new YAHOO.ext.Button('recordListAddRecordButton', {text:Clipperz.PM.Strings['mainPanelAddRecordButtonLabel'], handler:this.showNewRecordPanel, scope:this}));
+		this.setDeleteRecordButton(new YAHOO.ext.Button('recordListRemoveRecordButton', {text:Clipperz.PM.Strings['mainPanelRemoveRecordButtonLabel'], handler:this.removeSelectedRecord, scope:this}));
+
+
+		if ((Clipperz.PM.Proxy.defaultProxy.isReadOnly()) || (this.selectedRecord() == null)) {
+			this.deleteRecordButton().disable();
+		}
+		
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			this.addNewRecordButton().disable();
+		}
+
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderRecordListFilterHeader': function(){
+		var recordListFilterHeaderElement;
+		
+		recordListFilterHeaderElement = YAHOO.ext.Element.get('recordListFilterHeader');
+		recordListFilterHeaderElement.update("");
+		Clipperz.YUI.DomHelper.append(recordListFilterHeaderElement.dom, 		
+			{tag:'div', id:'recordFiltersDIV', children:[
+				{tag:'div', id:'recordFiltersTableWrapper', children:[
+					{tag:'table', id:'recordFiltersTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', id:'recordFilterAllTD', children:[{tag:'div', children:[{tag:'a', id:'recordFilterAll', htmlString:Clipperz.PM.Strings['mainPanelRecordFilterBlockAllLabel']}]}]},
+								{tag:'td', id:'recordFilterTagsTD', children:[{tag:'div', children:[{tag:'a', id:'recordFilterTags', htmlString:Clipperz.PM.Strings['mainPanelRecordFilterBlockTagsLabel']}]}]},
+								{tag:'td', id:'recordFilterSearchTD', children:[{tag:'div', children:[{tag:'a', id:'recordFilterSearch', htmlString:Clipperz.PM.Strings['mainPanelRecordFilterBlockSearchLabel']}]}]}
+							]}
+						]}
+					]}
+				]},
+				{tag:'div', id:'recordFiltersTagsPanel'},
+				{tag:'div', id:'recordFiltersSearchPanel', children:[{tag:'div', id:'recordFiltersSearchInnerPanel', children:[{tag:'div', id:'recordFiltersSearchInnerInnerPanel', children:[
+					{tag:'form', id:'recordFilterSearchForm', children:[
+						{tag:'input', type:'text', name:'search', id:'recordFilterSearchValue'}
+					]}
+				]}]}]}
+			]}
+		);
+		
+///		YAHOO.ext.Element.get('recordFiltersSearchPanel').setVisibilityMode(YAHOO.ext.Element.DISPLAY).hide();
+		this.showRecordFilterAllPanel(false);
+
+		MochiKit.Signal.connect('recordFilterSearchForm', 'onkeydown', this, 'onkeydown');
+		MochiKit.Signal.connect('recordFilterSearchForm', 'onsubmit', this, 'onkeydown');
+		
+		MochiKit.Signal.connect('recordFilterAll', 'onclick', this, 'showRecordFilterAllPanel');
+		MochiKit.Signal.connect('recordFilterTags', 'onclick', this, 'showRecordFilterTagsPanel');
+		MochiKit.Signal.connect('recordFilterSearch', 'onclick', this, 'showRecordFilterSearchPanel');
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showRecordFilterAllPanel': function(shouldSlide) {
+		this.hideRecordFilterTagsPanel(shouldSlide);
+		this.hideRecordFilterSearchPanel(shouldSlide);
+		YAHOO.ext.Element.get('recordFilterAllTD').addClass('selectedTab');
+	},
+	
+	'hideRecordFilterAllPanel': function(shouldSlide) {
+		YAHOO.ext.Element.get('recordFilterAllTD').removeClass('selectedTab');
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'showRecordFilterTagsPanel': function(shouldSlide) {
+		this.hideRecordFilterAllPanel(shouldSlide);
+		this.hideRecordFilterSearchPanel(shouldSlide);
+		YAHOO.ext.Element.get('recordFilterTagsTD').addClass('selectedTab');
+	},
+
+	'hideRecordFilterTagsPanel': function(shouldSlide) {
+		YAHOO.ext.Element.get('recordFilterTagsTD').removeClass('selectedTab');
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showRecordFilterSearchPanel': function(shouldSlide) {
+		var searchPanelActor;
+		
+		this.hideRecordFilterAllPanel(shouldSlide);
+		this.hideRecordFilterTagsPanel(shouldSlide);
+		YAHOO.ext.Element.get('recordFilterSearchTD').addClass('selectedTab');
+		YAHOO.ext.Element.get('recordFilterSearchValue').dom.value = "";
+		
+		searchPanelActor = new YAHOO.ext.Actor('recordFiltersSearchPanel');
+
+		searchPanelActor.startCapture(true);
+		searchPanelActor.slideShow('top', 54);
+		searchPanelActor.play(MochiKit.Base.bind(function() {
+			YAHOO.ext.Element.get('recordFilterSearchValue').focus();
+		}, this));
+	},
+
+	'hideRecordFilterSearchPanel': function(shouldSlide) {
+		var searchPanelActor;
+		var	callback;
+		
+		YAHOO.ext.Element.get('recordFilterSearchTD').removeClass('selectedTab');
+
+		searchPanelActor = new YAHOO.ext.Actor('recordFiltersSearchPanel');
+
+		searchPanelActor.startCapture(true)
+		if (shouldSlide === false) {
+			searchPanelActor.hide();
+			searchPanelActor.slideHide('top');
+			searchPanelActor.show();
+		} else {
+			searchPanelActor.slideHide('top');
+		}
+		
+		callback = MochiKit.Base.bind(function() {
+		}, this);
+		
+		searchPanelActor.play(callback);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'filterCardsWithName': function(aValue) {
+MochiKit.Logging.logDebug(">>> filterCardsWithName: " + aValue);
+		
+MochiKit.Logging.logDebug("<<< filterCardsWithName");
+	},
+
+	'accountLockedHandler': function() {
+		this.setSelectedRecord(null);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'switchLanguageHandler': function() {
+		YAHOO.ext.Element.get('directLoginTitle').update(Clipperz.PM.Strings['mainPanelDirectLoginBlockLabel']);
+		YAHOO.ext.Element.get('directLoginsDescription').update("");
+		MochiKit.Iter.forEach(Clipperz.PM.Strings['mainPanelDirectLoginBlockDescriptionConfig'], function(aConfigItem) {
+			Clipperz.YUI.DomHelper.append(YAHOO.ext.Element.get('directLoginsDescription').dom, aConfigItem);
+		});
+		YAHOO.ext.Element.get('recordBlockTitle').update(Clipperz.PM.Strings['mainPanelRecordsBlockLabel']);
+		this.renderRecordListBlockHeader();
+//		this.renderRecordListFilterHeader();
+
+//		YAHOO.ext.Element.get('newRecordPanelTitleH2').update(Clipperz.PM.Strings['mainPanelNewRecordPanelTitle']);
+//		YAHOO.ext.Element.get('newRecordPanelTitleLabel').update(Clipperz.PM.Strings['mainPanelNewRecordPanelRecordTitleLabel']);
+//		YAHOO.ext.Element.get('newRecordPanelConfigLabel').update("");
+//		MochiKit.Iter.forEach(Clipperz.PM.Strings['mainPanelNewRecordPanelRecordConfigConfig'], function(aConfigItem) {
+//			Clipperz.YUI.DomHelper.append(YAHOO.ext.Element.get('newRecordPanelConfigLabel').dom, aConfigItem);
+//		});
+//		this.newRecordButton().setText(Clipperz.PM.Strings['mainPanelNewRecordPanelCreateButtonLabel']);
+//		this.newRecordCancelButton().setText(Clipperz.PM.Strings['mainPanelNewRecordPanelCancelButtonLabel']);
+		
+		this.recordDetailComponent().render();
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/Panels/ToolsPanel.js b/frontend/beta/js/Clipperz/PM/Components/Panels/ToolsPanel.js
new file mode 100644
index 0000000..abd2621
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Panels/ToolsPanel.js
@@ -0,0 +1,305 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Panels) == 'undefined') { Clipperz.PM.Components.Panels = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.Panels.ToolsPanel = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.Panels.ToolsPanel.superclass.constructor.call(this, anElement, args);
+
+	this._generateButtonElement = null;
+	this._needsRenderingUponTabSwitch = false;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.Panels.ToolsPanel, Clipperz.PM.Components.Panels.BasePanel, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.Panels.ToolsPanel component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var bookmarkletUrl;
+
+//MochiKit.Logging.logDebug(">>> ToolsPanel.render");
+		Clipperz.NotificationCenter.unregister(this);
+		MochiKit.Signal.disconnectAllTo(this);
+		
+		if (Clipperz_IEisBroken == true) {
+			bookmarkletUrl = bookmarklet_ie;
+		} else {
+			bookmarkletUrl = bookmarklet;
+		}
+		
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+			{tag:'tbody', children:[
+				{tag:'tr', children:[
+					{tag:'td', valign:'top', width:'200', children:[
+						{tag:'ul', id:"dataSubMenu", cls:'subMenu', children:[
+							{tag:'li', id:this.getId('passwordGenerator'), htmlString:Clipperz.PM.Strings['passwordGeneratorTabLabel']},
+							{tag:'li', id:this.getId('bookmarklet'), htmlString:Clipperz.PM.Strings['bookmarkletTabLabel']},
+							{tag:'li', id:this.getId('compact'), htmlString:Clipperz.PM.Strings['compactTabLabel']},
+							{tag:'li', id:this.getId('httpAuth'), htmlString:Clipperz.PM.Strings['httpAuthTabLabel']}
+						]}
+					]},
+					{tag:'td', valign:'top', children:[
+						{tag:'ul', cls:'clipperzTabPanels', children:[
+							{tag:'li', id:this.getId('passwordGeneratorPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['passwordGeneratorTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['paswordGeneratorTabDescription']},
+									
+									//---------------------------------------------------
+									{tag:'div', children:[
+										{tag:'form', id:this.getId('passwordGeneratorForm'), cls:'passwordGenerator', children:[
+											{tag:'input', type:'text', cls:'clipperz_passwordGenerator_password', id:this.getId('passwordField')},
+											{tag:'table', children:[
+												{tag:'tbody', children:[
+													{tag:'tr', children:[
+														{tag:'td', width:'20%', children:[
+															{tag:'input', type:'checkbox', name:'lowercase', id:this.getId('lowercase'), checked:true},
+															{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorLowercaseLabel']}
+														]},
+														{tag:'td', width:'20%', children:[
+															{tag:'input', type:'checkbox', name:'uppercase', id:this.getId('uppercase'), checked:true},
+															{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorUppercaseLabel']}
+														]},
+														{tag:'td', width:'20%', children:[
+															{tag:'input', type:'checkbox', name:'numbers', id:this.getId('numbers'), checked:true},
+															{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorNumberLabel']}
+														]},
+														{tag:'td', width:'20%', children:[
+															{tag:'input', type:'checkbox', name:'symbols', id:this.getId('symbols'), checked:true},
+															{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorSymbolLabel']}
+														]},
+														{tag:'td', width:'20%', children:[
+															{tag:'span', cls:'passwordGeneratorLength', children:[
+																{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorLengthLabel']},
+																{tag:'span', id:this.getId('passwordLength'), cls:'passwordGeneratorLengthValue', html:'0'}
+															]}
+														]}
+													]}
+												]}
+											]}
+										]},
+										{tag:'div', id:this.getId('generateRandomPassword')}
+									]}
+									//---------------------------------------------------
+									
+								]}
+							]},
+							{tag:'li', id:this.getId('bookmarkletPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['bookmarkletTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['bookmarkletTabDescription']},
+									{tag:'a', href:bookmarkletUrl, cls:'bookmarkletLink', htmlString:Clipperz.PM.Strings['bookmarkletTabBookmarkletTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['bookmarkletTabInstructions']}
+								]}
+							]},
+							{tag:'li', id:this.getId('compactPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['compactTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['compactTabDescription']}
+								]}
+							]},
+							{tag:'li', id:this.getId('httpAuthPanel'), children:[
+								{tag:'div', cls:'clipperzSubPanel', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['httpAuthTabTitle']},
+									{tag:'div', cls:'panelDescription', htmlString:Clipperz.PM.Strings['httpAuthTabDescription']},
+									{tag:'div', cls:'bookmarkletConfiguration', children:[Clipperz.PM.Strings['httpAuthBookmarkletConfiguration']]}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('passwordField'));
+
+		MochiKit.Signal.connect(this.getId('lowercase'), 'onclick', this, 'updatePasswordValue');
+		MochiKit.Signal.connect(this.getId('uppercase'), 'onclick', this, 'updatePasswordValue');
+		MochiKit.Signal.connect(this.getId('numbers'),   'onclick', this, 'updatePasswordValue');
+		MochiKit.Signal.connect(this.getId('symbols'),   'onclick', this, 'updatePasswordValue');
+
+		MochiKit.Signal.connect(this.getDom('passwordField'), 'onkeyup',  this, 'updatePasswordLengthLabel');
+		MochiKit.Signal.connect(this.getDom('passwordField'), 'onchange', this, 'updatePasswordLengthLabel');
+		MochiKit.Signal.connect(this.getDom('passwordField'), 'onblur',   this, 'updatePasswordLengthLabel');
+
+		this.setGenerateButtonElement(new YAHOO.ext.Button(this.getDom('generateRandomPassword'), {text:Clipperz.PM.Strings['passwordGeneratorTabButtonLabel'], handler:this.updatePasswordValue, scope:this}));
+
+		this.setNeedsRenderingUponTabSwitch(false);
+		this.tabPanelController().setUp();
+		Clipperz.NotificationCenter.register(null, 'tabSelected', this, 'tabSelectedHandler');
+		Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'switchLanguageHandler');
+//MochiKit.Logging.logDebug("<<< ToolsPanel.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'needsRenderingUponTabSwitch': function() {
+		return this._needsRenderingUponTabSwitch;
+	},
+	
+	'setNeedsRenderingUponTabSwitch': function(aValue) {
+		this._needsRenderingUponTabSwitch = aValue;
+	},
+	
+	'tabSelectedHandler': function(anEvent) {
+		if (this.needsRenderingUponTabSwitch()) {
+			this.render();
+		}
+
+		if (anEvent.parameters() == this.getId('httpAuth')) {
+			var textarea;
+
+			textarea = document.getElementById("httpAuthDefaultConfiguration");
+			textarea.focus();
+			textarea.select();
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'tabPanelController': function() {
+		if (this._tabPanelController == null) {
+			var tabPanelControllerConfig;
+			
+			tabPanelControllerConfig = {}
+			tabPanelControllerConfig[this.getId('passwordGenerator')] = this.getId('passwordGeneratorPanel');
+			tabPanelControllerConfig[this.getId('bookmarklet')] = this.getId('bookmarkletPanel');
+			tabPanelControllerConfig[this.getId('compact')] = this.getId('compactPanel');
+			tabPanelControllerConfig[this.getId('httpAuth')] = this.getId('httpAuthPanel');
+			this._tabPanelController = new Clipperz.PM.Components.TabPanel.TabPanelController({ config:tabPanelControllerConfig, selectedTab:this.getId('passwordGenerator') });
+		}
+		
+		return this._tabPanelController;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'generateButtonElement': function() {
+		return this._generateButtonElement;
+	},
+	
+	'setGenerateButtonElement': function(aValue) {
+		this._generateButtonElement = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updatePasswordValue': function(anEvent) {
+		var	randomBytes;
+		var	randomValue;
+		var charset;
+		var charsetBitSize;
+		var stringValue;
+		var	blockIndex;
+
+//MochiKit.Logging.logDebug(">>> updatePasswordValue");
+		randomBytes = Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(50);
+		stringValue = "";
+		blockIndex = 0;
+
+		charset = "";
+		if (this.getDom('lowercase').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorLowercaseCharset'];
+		}
+		if (this.getDom('uppercase').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorUppercaseCharset'];
+		}
+		if (this.getDom('numbers').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorNumberCharset'];
+		}
+		if (this.getDom('symbols').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorSymbolCharset'];
+		}
+
+		charsetBitSize = 0;
+		while (Math.pow(2, charsetBitSize) < charset.length) {
+			charsetBitSize ++;
+		}
+
+		if (charsetBitSize > 0) {
+			while (Clipperz.PM.Crypto.passwordEntropy(stringValue) < 128) {
+				if (((blockIndex + 1)*charsetBitSize) > (randomBytes.length() * 8)) {
+					randomBytes = Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(50);
+					blockIndex = 0;
+				}
+				randomValue = randomBytes.bitBlockAtIndexWithSize(blockIndex*charsetBitSize, charsetBitSize);
+				if (randomValue < charset.length) {
+					stringValue += charset.charAt(randomValue);
+				}
+			
+				blockIndex ++;
+			}
+		} else {
+			stringValue = "";
+		}
+		
+		this.getElement('passwordField').dom.focus()
+		this.getElement('passwordField').dom.value = stringValue;
+
+		
+		if (anEvent.src) {
+			anEvent.src().focus();
+		} else {
+			this.generateButtonElement().el.focus();
+		}
+		
+		this.setNeedsRenderingUponTabSwitch(true);
+		
+		return false;
+//MochiKit.Logging.logDebug("<<< updatePasswordValue");
+	},
+	
+	//-----------------------------------------------------
+
+	'updatePasswordLengthLabel': function() {
+		this.getElement('passwordLength').update(this.getDom('passwordField').value.length);
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+	
+});
+	
diff --git a/frontend/beta/js/Clipperz/PM/Components/PasswordEntropyDisplay.js b/frontend/beta/js/Clipperz/PM/Components/PasswordEntropyDisplay.js
new file mode 100644
index 0000000..530d2cb
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/PasswordEntropyDisplay.js
@@ -0,0 +1,118 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+
+Clipperz.PM.Components.PasswordEntropyDisplay = function(anElement, args) {
+	args = args || {};
+
+//MochiKit.Logging.logDebug(">>> new TextFormField");
+	Clipperz.PM.Components.PasswordEntropyDisplay.superclass.constructor.call(this, anElement, args);
+
+	this._wrapperElement = null;
+	this._entropyElement = null;
+
+	this.render();
+//MochiKit.Logging.logDebug("<<< new TextFormField");
+	
+	return this;
+};
+
+YAHOO.extendX(Clipperz.PM.Components.PasswordEntropyDisplay, Clipperz.PM.Components.BaseComponent, {
+	
+	'toString': function() {
+		return "Clipperz.PM.Components.PasswordEntropyDisplay";
+	},
+
+	//-----------------------------------------------------
+
+	'wrapperElement': function() {
+		return this._wrapperElement;
+	},
+	
+	'setWrapperElement': function(aValue) {
+		this._wrapperElement = aValue;
+	},
+	
+	//-----------------------------------------------------
+
+	'passwordElement': function() {
+		return this.element();
+	},
+	
+	//-----------------------------------------------------
+
+	'entropyElement': function() {
+		return this._entropyElement;
+	},
+	
+	'setEntropyElement': function(aValue) {
+		this._entropyElement = aValue;
+	},
+
+	//-----------------------------------------------------
+
+	'render': function() {
+		MochiKit.Signal.disconnectAllTo(this);
+
+		this.setWrapperElement(this.element().wrap({tag:'div'}));
+		this.setEntropyElement(Clipperz.YUI.DomHelper.append(this.wrapperElement().dom, {tag:'div', cls:'passwordEntropy', html:"&nbsp;"}, true));
+
+//		this.entropyElement().setWidth(this.passwordElement().getWidth());
+		this.updateEntropyElement();
+		
+		MochiKit.Signal.connect(this.element().dom, 'onkeyup', this, 'updateEntropyElement');
+		MochiKit.Signal.connect(this.element().dom, 'onchange', this, 'updateEntropyElement');
+		MochiKit.Signal.connect(this.element().dom, 'onblur', this, 'updateEntropyElement');
+	},
+
+	//-----------------------------------------------------
+
+	'computeEntropyForString': function(aValue) {
+		return Clipperz.PM.Crypto.passwordEntropy(aValue);
+	},
+
+	//-----------------------------------------------------
+
+	'updateEntropyElement': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> PasswordEntropyDisplay.updateEntropyElement");
+		var	maxExtent;
+		var	entropy;
+		
+		entropy = Math.min(128, this.computeEntropyForString(this.passwordElement().dom.value));
+//MochiKit.Logging.logDebug("--- PasswordEntropyDisplay.updateEntropyElement - entropy: " + entropy);
+		this.entropyElement().setStyle('background-position', "0px " + -entropy + "px");
+		this.entropyElement().setWidth(this.passwordElement().getWidth() * (entropy/128));
+//MochiKit.Logging.logDebug("<<< PasswordEntropyDisplay.updateEntropyElement");
+	},
+	
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/PasswordGenerator.js b/frontend/beta/js/Clipperz/PM/Components/PasswordGenerator.js
new file mode 100644
index 0000000..8195f2e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/PasswordGenerator.js
@@ -0,0 +1,285 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+
+Clipperz.PM.Components.PasswordGenerator = function(anElement, aFieldValueComponent, args) {
+	args = args || {};
+
+//MochiKit.Logging.logDebug(">>> new TextFormField");
+	Clipperz.PM.Components.PasswordGenerator.superclass.constructor.call(this, anElement, args);
+
+	this._fieldValueComponent = aFieldValueComponent;
+	this._panelButton = null;
+	this.render();
+//MochiKit.Logging.logDebug("<<< new TextFormField");
+	
+	return this;
+};
+
+YAHOO.extendX(Clipperz.PM.Components.PasswordGenerator, Clipperz.PM.Components.BaseComponent, {
+	
+	'toString': function() {
+		return "Clipperz.PM.Components.PasswordGenerator";
+	},
+
+	//-----------------------------------------------------
+
+	'fieldValueComponent': function() {
+		return this._fieldValueComponent;
+	},
+	
+	//-----------------------------------------------------
+
+	'render': function() {
+		MochiKit.Signal.disconnectAllTo(this);
+		
+//		this._panelButton = new YAHOO.ext.Button(this.element().dom, {text:Clipperz.PM.Strings['passwordGeneratorButtonLabel'], handler:this.openPasswordPanel, scope:this});
+		MochiKit.Signal.connect(this.element().dom, 'onmouseenter', this, 'onMouseEnter');
+		MochiKit.Signal.connect(this.element().dom, 'onmouseleave', this, 'onMouseLeave');
+		MochiKit.Signal.connect(this.element().dom, 'onclick', this, 'openPasswordPanel');
+	},
+
+	//-----------------------------------------------------
+
+	'onMouseEnter': function() {
+		this.element().addClass('hover');
+	},
+	
+	'onMouseLeave': function() {
+		this.element().removeClass('hover');
+	},
+
+	//-----------------------------------------------------
+
+	'panelButton': function() {
+		return this._panelButton;
+	},
+
+	//-----------------------------------------------------
+	
+	'openPasswordPanel': function() {
+		var passwordGeneratorElement;
+		var passwordGeneratorDialog;
+		var cancelButton;
+		var okButton;
+		var cancelFunction;
+		var okFunction;
+		
+//MochiKit.Logging.logDebug(">>> PasswordGenerator.openPasswordPanel");
+		passwordGeneratorElement = Clipperz.YUI.DomHelper.append(document.body, {tag:'div', id:'passwordGenerator', children:[
+			{tag:'div', cls:'ydlg-hd', htmlString:Clipperz.PM.Strings['passwordGeneratorPanelTitle']},
+			{tag:'div', cls:'ydlg-bd', children:[
+				{tag:'form', id:this.getId('passwordGeneratorForm'), cls:'passwordGenerator', children:[
+					{tag:'input', type:'text', cls:'clipperz_passwordGenerator_password', id:this.getId('passwordField')},
+					{tag:'table', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', width:'20%', children:[
+									{tag:'input', type:'checkbox', name:'lowercase', id:this.getId('lowercase'), checked:true},
+									{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorLowercaseLabel']}
+								]},
+								{tag:'td', width:'20%', children:[
+									{tag:'input', type:'checkbox', name:'uppercase', id:this.getId('uppercase'), checked:true},
+									{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorUppercaseLabel']}
+								]},
+								{tag:'td', width:'20%', children:[
+									{tag:'input', type:'checkbox', name:'numbers', id:this.getId('numbers'), checked:true},
+									{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorNumberLabel']}
+								]},
+								{tag:'td', width:'20%', children:[
+									{tag:'input', type:'checkbox', name:'symbols', id:this.getId('symbols'), checked:true},
+									{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorSymbolLabel']}
+								]},
+								{tag:'td', width:'20%', children:[
+									{tag:'span', cls:'passwordGeneratorLength', children:[
+										{tag:'span', htmlString:Clipperz.PM.Strings['passwordGeneratorLengthLabel']},
+										{tag:'span', id:this.getId('passwordLength'), cls:'passwordGeneratorLengthValue', html:'0'}
+									]}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]},
+			{tag:'div', cls:'ydlg-ft'}
+		]}, true);
+
+		new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('passwordField'));
+
+		MochiKit.Signal.connect(this.getId('lowercase'), 'onclick', this, 'updatePasswordValue');
+		MochiKit.Signal.connect(this.getId('uppercase'), 'onclick', this, 'updatePasswordValue');
+		MochiKit.Signal.connect(this.getId('numbers'),   'onclick', this, 'updatePasswordValue');
+		MochiKit.Signal.connect(this.getId('symbols'),   'onclick', this, 'updatePasswordValue');
+
+		MochiKit.Signal.connect(this.getDom('passwordField'), 'onkeyup',  this, 'updatePasswordLengthLabel');
+		MochiKit.Signal.connect(this.getDom('passwordField'), 'onchange', this, 'updatePasswordLengthLabel');
+		MochiKit.Signal.connect(this.getDom('passwordField'), 'onblur',   this, 'updatePasswordLengthLabel');
+
+		this.updatePasswordValue();
+		
+		passwordGeneratorDialog = new YAHOO.ext.BasicDialog(
+			passwordGeneratorElement, { 
+				autoCreate:false,
+				closable:false,
+				modal:true,
+				autoTabs:false,
+				resizable:false,
+				fixedcenter:true,
+				constraintoviewport:false,
+				width:320,
+				height:130,
+				shadow:true,
+				minWidth:200,
+				minHeight:100
+			}
+		);
+
+		cancelFunction = MochiKit.Base.partial(MochiKit.Base.bind(this.cancelPasswordPanel, this), passwordGeneratorDialog);
+		passwordGeneratorDialog.addKeyListener(27, cancelFunction);
+		cancelButton = passwordGeneratorDialog.addButton(Clipperz.PM.Strings['passwordGeneratorPanelCancelLabel'], cancelFunction, this);
+
+		okFunction = MochiKit.Base.partial(MochiKit.Base.bind(this.okPasswordPanel, this), passwordGeneratorDialog);
+		passwordGeneratorDialog.addKeyListener([10, 13], okFunction);
+		okButton = passwordGeneratorDialog.addButton(Clipperz.PM.Strings['passwordGeneratorPanelOkLabel'], okFunction, this);
+
+		MochiKit.Signal.connect(this.getId('passwordGeneratorForm'), 'onsubmit', okFunction);
+
+		passwordGeneratorDialog.setDefaultButton(okButton);
+
+		this.fieldValueComponent().mainComponent().mainPanel().exitModalView();
+		this.fieldValueComponent().mainComponent().scrollToTop();
+
+//		passwordGeneratorDialog.show(this.panelButton().getEl());
+		passwordGeneratorDialog.show(this.element());
+		this.onMouseLeave();
+	},
+	
+	//-----------------------------------------------------
+
+	'cancelPasswordPanel': function(aPasswordGeneratorPanel) {
+		this.fieldValueComponent().mainComponent().mainPanel().enterModalView();
+		aPasswordGeneratorPanel.hide(MochiKit.Base.bind(function() {
+			aPasswordGeneratorPanel.destroy(true);
+			MochiKit.Signal.disconnectAllTo(this);
+		}, this));
+	},
+
+	//-----------------------------------------------------
+
+	'updatePasswordLengthLabel': function() {
+		this.getElement('passwordLength').update(this.getDom('passwordField').value.length);
+	},
+	
+	//-----------------------------------------------------
+
+	'okPasswordPanel': function(aPasswordGeneratorPanel, anEvent) {
+//MochiKit.Logging.logDebug(">>> PasswordGenerator.okPasswordPanel");
+
+		if (anEvent.stop) {
+			anEvent.stop();
+		}
+		
+		this.fieldValueComponent().inputElement().dom.focus();
+		this.fieldValueComponent().inputElement().dom.value = this.getElement('passwordField').dom.value;
+		this.getElement('passwordField').dom.focus();
+		this.cancelPasswordPanel(aPasswordGeneratorPanel);
+		
+		return false;
+	},
+
+	//-----------------------------------------------------
+
+	'updatePasswordValue': function(anEvent) {
+		var	randomBytes;
+		var	randomValue;
+		var charset;
+		var charsetBitSize;
+		var stringValue;
+		var	blockIndex;
+
+//MochiKit.Logging.logDebug(">>> updatePasswordValue");
+		randomBytes = Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(50);
+		stringValue = "";
+		blockIndex = 0;
+
+		charset = "";
+		if (this.getDom('lowercase').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorLowercaseCharset'];
+		}
+		if (this.getDom('uppercase').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorUppercaseCharset'];
+		}
+		if (this.getDom('numbers').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorNumberCharset'];
+		}
+		if (this.getDom('symbols').checked) {
+			charset += Clipperz.PM.Strings['passwordGeneratorSymbolCharset'];
+		}
+
+		charsetBitSize = 0;
+		while (Math.pow(2, charsetBitSize) < charset.length) {
+			charsetBitSize ++;
+		}
+
+		if (charsetBitSize > 0) {
+			while (Clipperz.PM.Crypto.passwordEntropy(stringValue) < 128) {
+				if (((blockIndex + 1)*charsetBitSize) > (randomBytes.length() * 8)) {
+					randomBytes = Clipperz.Crypto.PRNG.defaultRandomGenerator().getRandomBytes(50);
+					blockIndex = 0;
+				}
+				randomValue = randomBytes.bitBlockAtIndexWithSize(blockIndex*charsetBitSize, charsetBitSize);
+				if (randomValue < charset.length) {
+					stringValue += charset.charAt(randomValue);
+				}
+			
+				blockIndex ++;
+			}
+		} else {
+			stringValue = "";
+		}
+		
+		this.getElement('passwordField').dom.focus()
+		this.getElement('passwordField').dom.value = stringValue;
+
+		
+		if (anEvent) {
+			anEvent.src().focus();
+		} else {
+			this.element().focus();
+		}
+		
+		return false;
+//MochiKit.Logging.logDebug("<<< updatePasswordValue");
+	},
+	
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/Printing/Footer.js b/frontend/beta/js/Clipperz/PM/Components/Printing/Footer.js
new file mode 100644
index 0000000..6bede3e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Printing/Footer.js
@@ -0,0 +1,28 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Printing/Header.js b/frontend/beta/js/Clipperz/PM/Components/Printing/Header.js
new file mode 100644
index 0000000..6bede3e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Printing/Header.js
@@ -0,0 +1,28 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/Printing/Record.js b/frontend/beta/js/Clipperz/PM/Components/Printing/Record.js
new file mode 100644
index 0000000..910d4b1
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/Printing/Record.js
@@ -0,0 +1,95 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.Printing) == 'undefined') { Clipperz.PM.Components.Printing = {}; }
+
+Clipperz.PM.Components.Printing.Record = function(args) {
+	args = args || {};
+
+	this._record = args['record'];
+
+	return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.Components.Printing.Record.prototype, {
+
+	'record': function() {
+		return this._record;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'deferredDrawToWindow': function(aWindow) {
+		var	deferredResult;
+		
+		deferredResult = new MochiKit.Async.Deferred();
+		deferredResult.addCallback(MochiKit.Base.method(this.record(), 'deferredData'));
+		deferredResult.addCallback(MochiKit.Base.method(this, 'appendToWindow', aWindow));
+		deferredResult.callback();
+		return deferredResult;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'appendToWindow': function(aWindow) {
+		MochiKit.DOM.withWindow(aWindow, MochiKit.Base.bind(function() {
+			var newBlock;
+			var fields;
+			
+			fields = MochiKit.Base.concat(
+				MochiKit.Base.map(MochiKit.Base.bind(function(aField) {
+					var result;
+					var dt, dd;
+					var label, value;
+					
+					label = aField.label();
+					value = aField.value();
+					dt = MochiKit.DOM.createDOM('DT', null, label);
+					dd = MochiKit.DOM.createDOM('DD', null, value)
+					result = [dt, dd];
+
+					return result
+				}, this), MochiKit.Base.values(this.record().currentVersion().fields()))
+			);
+
+			newBlock = MochiKit.DOM.DIV({'class': 'recordBlock'},
+				MochiKit.DOM.H2(null, this.record().label()),
+				MochiKit.DOM.DIV({'class': 'recordNotes'}, MochiKit.Base.map(MochiKit.Base.partial(MochiKit.DOM.P, null), this.record().notes().split("\n"))),
+				MochiKit.DOM.createDOM('DL', null, fields)
+			);
+			MochiKit.DOM.appendChildNodes(MochiKit.DOM.currentDocument().body, newBlock);
+			
+		}, this));
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractComponent.js
new file mode 100644
index 0000000..840d555
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractComponent.js
@@ -0,0 +1,105 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.AbstractComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.AbstractComponent.superclass.constructor.call(this, args);
+
+	this._element = anElement;
+	this._mainComponent = args.mainComponent;
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.AbstractComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.AbstractComponent";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'record': function() {
+		return this.mainComponent().record();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'editMode': function() {
+		return this.mainComponent().editMode();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+		this.update();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'update': function(anEvent) {
+		if (this.editMode() == 'EDIT') {
+			this.updateEditMode();
+		} else if (this.editMode() == 'VIEW') {
+			this.updateViewMode();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {},
+	'updateEditMode': function() {},
+	'synchronizeComponentValues': function() {},
+	
+	//-------------------------------------------------------------------------
+
+	'destroy': function() {
+		this.element().remove();
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractFieldSubComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractFieldSubComponent.js
new file mode 100644
index 0000000..7596184
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractFieldSubComponent.js
@@ -0,0 +1,77 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent.superclass.constructor.call(this, anElement, args);
+
+	this._fieldComponent = args.fieldComponent || null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'fieldComponent': function() {
+		return this._fieldComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this.fieldComponent().mainComponent();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'recordField': function() {
+		return this.fieldComponent().recordField();
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/CreationWizard.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/CreationWizard.js
new file mode 100644
index 0000000..a92285f
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/CreationWizard.js
@@ -0,0 +1,317 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.CreationWizard = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.CreationWizard.superclass.constructor.call(this, anElement, args);
+
+	this._mainComponent = args.mainComponent;
+	this._previouslySelectedRecord = args.previouslySelectedRecord;
+//MochiKit.Logging.logDebug("--- new CreationWizard - previouslySelectedRecord: " + args.previouslySelectedRecord);
+	this._createButton_header = null;
+	this._createButton_footer = null;
+
+	this._cancelButton_header = null;
+	this._cancelButton_footer = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.CreationWizard, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.CreationWizard component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'previouslySelectedRecord': function() {
+		return this._previouslySelectedRecord;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	templateListElement;
+		var	templates;
+		
+		this.element().update("");
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'recordDataFORM', id:this.getId('form'), children:[
+				{tag:'div', id:'recordDetailDataBox', cls:'recordDetailDataBox', children:[
+					{tag:'div', id:this.getId('wizardBox'), cls:'recordCreationWizard', children:[
+						{tag:'div', id:this.getId('recordCreationWizardTitleBox'), cls:'recordCreationWizardTitleBox', htmlString:Clipperz.PM.Strings['newRecordWizardTitleBox']},
+						{tag:'ul', id:this.getId('templateList'), cls:'radioList'}
+					]}
+				]}
+			]}
+		);
+
+		Clipperz.YUI.DomHelper.append(this.getDom('recordCreationWizardTitleBox'), {tag:'div', cls:'newRecordWizardHeader', children:[
+			{tag:'table', width:'100%', cellpadding:'5', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', width:'49%', align:'right', children:[
+							{tag:'div', id:this.getId('cancelButton_header')}
+						]},
+						{tag:'td', width:'10', html:'&nbsp;'},
+						{tag:'td', width:'49%', align:'left', children:[
+							{tag:'div', id:this.getId('createButton_header')}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		templateListElement = this.getElement('templateList');
+		templates = Clipperz.PM.Strings['recordTemplates'];
+		MochiKit.Iter.forEach(MochiKit.Base.keys(templates), MochiKit.Base.bind(function(aTemplateKey) {
+			Clipperz.YUI.DomHelper.append(templateListElement.dom, {tag:'li', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', valign:'top', children:[
+								{tag:'input', id:this.getId(aTemplateKey+"_radio"), type:'radio', name:'recordTemplate', value:"aTemplateKey"}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'h4', id:this.getId(aTemplateKey+"_title"), html:templates[aTemplateKey]['title']},
+								{tag:'div', cls:'templateDescription', htmlString:templates[aTemplateKey]['description']}
+							]}
+						]}
+					]}
+				]}
+			]});
+			this.getElement(aTemplateKey+"_radio").dom.value = aTemplateKey;
+			MochiKit.Signal.connect(this.getDom(aTemplateKey+"_title"), 'onclick', MochiKit.Base.partial(function(aRadioButton) {aRadioButton.click();}, this.getDom(aTemplateKey+"_radio")));
+		}, this));
+
+		Clipperz.YUI.DomHelper.append(templateListElement.dom, {tag:'li', children:[
+			{tag:'table', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', valign:'top', children:[
+							{tag:'input', type:'radio', name:'recordTemplate', id:this.getId('bookmarkletRadioButton'), value:'BookmarkletConfigurationTemplate'}
+						]},
+						{tag:'td', valign:'top', children:[
+							{tag:'h4', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationTitle']},
+							{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationDescription']},
+							{tag:'div', cls:'bookmarkletConfiguration', children:[
+//								{tag:'span', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationLabel']},
+								{tag:'div', htmlString:Clipperz.PM.Strings['recordDetailNewDirectLoginDescription']},
+								{tag:'textarea', id:this.getId('bookmarkletConfiguration')}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		Clipperz.YUI.DomHelper.append(this.getDom('wizardBox'), {tag:'div', cls:'newRecordWizardFooter', children:[
+			{tag:'table', width:'100%', cellpadding:'5', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', width:'49%', align:'right', children:[
+							{tag:'div', id:this.getId('cancelButton_footer')}
+						]},
+						{tag:'td', width:'10', html:'&nbsp;'},
+						{tag:'td', width:'49%', align:'left', children:[
+							{tag:'div', id:this.getId('createButton_footer')}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.setCreateButton_header(new YAHOO.ext.Button(this.getDom('createButton_header'), {text:Clipperz.PM.Strings['newRecordWizardCreateButtonLabel'], handler:this.createRecord, scope:this}));
+		this.setCreateButton_footer(new YAHOO.ext.Button(this.getDom('createButton_footer'), {text:Clipperz.PM.Strings['newRecordWizardCreateButtonLabel'], handler:this.createRecord, scope:this}));
+
+		this.setCancelButton_header(new YAHOO.ext.Button(this.getDom('cancelButton_header'), {text:Clipperz.PM.Strings['newRecordWizardCancelButtonLabel'], handler:this.exitWizard, scope:this}));
+		this.setCancelButton_footer(new YAHOO.ext.Button(this.getDom('cancelButton_footer'), {text:Clipperz.PM.Strings['newRecordWizardCancelButtonLabel'], handler:this.exitWizard, scope:this}));
+
+		this.createButton_header().disable();
+		this.createButton_footer().disable();
+		
+		MochiKit.Iter.forEach(this.getElement('form').getChildrenByTagName('input'), MochiKit.Base.bind(function(anInput) {
+//			MochiKit.Signal.connect(anInput.dom, 'onchange', this, 'enableCreateButton');
+			MochiKit.Signal.connect(anInput.dom, 'onclick', this, 'enableCreateButton');	//	for Safari
+		},this));
+
+		MochiKit.Signal.connect(this.getDom('bookmarkletConfiguration'), 'onkeyup', this, 'enableCreateButton');
+		MochiKit.Signal.connect(this.getDom('bookmarkletConfiguration'), 'onkeydown', this, 'enableCreateButton');	//	for Safari
+	},
+
+	//-------------------------------------------------------------------------
+
+	'createButton_header': function() {
+		return this._createButton_header;
+	},
+	
+	'setCreateButton_header': function(aValue) {
+		this._createButton_header = aValue;
+	},
+
+	//.........................................................................
+
+	'createButton_footer': function() {
+		return this._createButton_footer;
+	},
+	
+	'setCreateButton_footer': function(aValue) {
+		this._createButton_footer = aValue;
+	},
+
+
+	//-------------------------------------------------------------------------
+
+	'cancelButton_header': function() {
+		return this._cancelButton_header;
+	},
+	
+	'setCancelButton_header': function(aValue) {
+		this._cancelButton_header = aValue;
+	},
+
+	//.........................................................................
+	
+	'cancelButton_footer': function() {
+		return this._cancelButton_footer;
+	},
+	
+	'setCancelButton_footer': function(aValue) {
+		this._cancelButton_footer = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'enableCreateButton': function(anEvent, skipKeyDownCheck) {
+//MochiKit.Logging.logDebug(">>> CreationWizard.enableCreateButton (" + anEvent.type() + ")");
+		if ((anEvent.type() == "keydown") && (skipKeyDownCheck != true)) {
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - handling 'keydown' event with a postponed execution of the check");
+			MochiKit.Async.callLater(0.3, MochiKit.Base.method(this, 'enableCreateButton', anEvent, true));
+		} else {
+			var shouldEnableCreateButton;
+			var isBookmarkletConfigurationEmpty;
+
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - common execution");
+
+			shouldEnableCreateButton = true;
+			
+			isBookmarkletConfigurationEmpty = !/[^ \n]/.test(this.getDom('bookmarkletConfiguration').value);
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - isBookmarkletConfigurationEmpty: " + isBookmarkletConfigurationEmpty);
+
+			if ((anEvent.src() == this.getDom('bookmarkletConfiguration')) && !isBookmarkletConfigurationEmpty) {
+				this.getDom('bookmarkletRadioButton').checked = true;
+			}
+
+			if ((this.getDom('bookmarkletRadioButton').checked) && isBookmarkletConfigurationEmpty) {
+				shouldEnableCreateButton = false;
+			}
+		
+			if (shouldEnableCreateButton) {
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - enabling button");
+				this.createButton_header().enable();
+				this.createButton_footer().enable();
+			} else {
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - disabling button");
+				this.createButton_header().disable();
+				this.createButton_footer().disable();
+			}
+		}
+//MochiKit.Logging.logDebug("<<< CreationWizard.enableCreateButton");
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'createRecord': function() {
+		var	selectedTemplateKey;
+		var	newRecord;
+		
+		selectedTemplateKey = MochiKit.Base.filter(function(aCheckBoxElement) {
+			return aCheckBoxElement.dom.checked;
+		},this.getElement('form').getChildrenByTagName('input'))[0].dom.value;
+
+//MochiKit.Logging.logDebug("--- CreationWizard.createRecord - selectedTemplateKey: " + selectedTemplateKey);
+		if (selectedTemplateKey == 'BookmarkletConfigurationTemplate') {
+			var bookmarkletConfiguration;
+
+			this.mainComponent().exitModalView();
+			bookmarkletConfiguration = Clipperz.PM.BookmarkletProcessor.checkBookmarkletConfiguration(this.getDom('bookmarkletConfiguration').value, this.getDom('createButton'), MochiKit.Base.method(this.mainComponent(), 'enterModalView'));
+			this.mainComponent().enterModalView();
+			newRecord = Clipperz.PM.BookmarkletProcessor.createRecordFromBookmarkletConfiguration(this.mainComponent().user(), bookmarkletConfiguration);
+		} else {
+			var	fieldsConfigurations;
+
+			newRecord = this.mainComponent().user().addNewRecord();
+			newRecord.setLabel(Clipperz.PM.Strings['recordTemplates'][selectedTemplateKey]['title']);
+			
+			fieldsConfigurations = Clipperz.PM.Strings['recordTemplates'][selectedTemplateKey]['fields'];
+		
+			MochiKit.Iter.forEach(fieldsConfigurations, MochiKit.Base.partial(function(aRecord, aFieldConfiguration) {
+				var newField;
+			
+				newField = new Clipperz.PM.DataModel.RecordField({recordVersion:aRecord.currentVersion()});
+				newField.setLabel(aFieldConfiguration['label']);
+				newField.setType(aFieldConfiguration['type']);
+				aRecord.currentVersion().addField(newField);
+			}, newRecord));
+		}
+		
+		this.mainComponent().exitWizard(newRecord, true);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'exitWizard': function() {
+//MochiKit.Logging.logDebug(">>> CreationWizard.exitWizard - " + this.previouslySelectedRecord());
+		this.mainComponent().exitWizard(this.previouslySelectedRecord());
+//MochiKit.Logging.logDebug("<<< CreationWizard.exitWizard");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginBindingComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginBindingComponent.js
new file mode 100644
index 0000000..6171a4e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginBindingComponent.js
@@ -0,0 +1,174 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new DirectLoginBindingComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent.superclass.constructor.call(this, anElement, args);
+
+	this._directLoginBinding = args.directLoginBinding || null;
+	this.render();
+
+	Clipperz.NotificationCenter.register(this.record(), 'addNewRecordField',	this, 'syncAndUpdateEditMode');
+	Clipperz.NotificationCenter.register(this.record(), 'removedField',		this, 'syncAndUpdateEditMode');
+	Clipperz.NotificationCenter.register(this.record(), 'updatedFieldLabel',	this, 'syncAndUpdateEditMode');
+//MochiKit.Logging.logDebug("<<< new DirectLoginBindingComponent");
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'directLoginBinding': function() {
+		return this._directLoginBinding;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', style:'font-weight:bold;', html:this.directLoginBinding().key()})
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', html:this.directLoginBinding().value()})
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.render");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginBindingLabelTD', children:[
+			{tag:'span', html:this.directLoginBinding().key()}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginBindingComponent.render - 1");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginBindingValueTD', children:[
+			{tag:'div', id:this.getId('editModeBox'), children:[
+				{tag:'select', id:this.getId('select'), children:this.recordFieldOptions()}
+			]},
+			{tag:'div', id:this.getId('viewModeBox'), children:[
+				{tag:'span', id:this.getId('viewValue'), html:""}
+			]}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginBindingComponent.render - 2");
+		this.getElement('editModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('viewModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		this.update();
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'recordFieldOptions': function() {
+		var	result;
+		var option;
+		var	recordFieldKey;
+		var	recordFields;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.recordFieldOptions");
+		recordFields = this.directLoginBinding().directLogin().record().currentVersion().fields();
+		result = [];
+		option = {tag:'option', value:null, html:'---'};
+		result.push(option);
+		for (recordFieldKey in recordFields) {
+//	TODO: remove the value: field and replace it with element.dom.value = <some value>
+			option = {tag:'option', value:recordFieldKey, html:recordFields[recordFieldKey].label()}
+			if (recordFieldKey == this.directLoginBinding().fieldKey()) {
+				option['selected'] = true;
+			}
+			result.push(option);
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.recordFieldOptions");
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'syncAndUpdateEditMode': function() {
+		this.synchronizeComponentValues();
+		this.updateEditMode();
+	},
+	
+	'updateEditMode': function() {
+		var	selectElementBox;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.updateEditMode");
+		this.getElement('viewModeBox').hide();
+
+		selectElementBox = this.getElement('editModeBox');
+		selectElementBox.update("");
+
+		Clipperz.YUI.DomHelper.append(selectElementBox.dom, {tag:'select', id:this.getId('select'), children:this.recordFieldOptions()});
+
+/*
+		selectElement = this.getElement('select');
+		
+		selectElement.update("");
+		MochiKit.Iter.forEach(this.recordFieldOptions(), function(anOption) {
+			Clipperz.YUI.DomHelper.append(selectElement.dom, anOption);
+		});
+*/
+
+
+		this.getElement('editModeBox').show();
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.updateEditMode");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.updateViewMode");
+		this.getElement('editModeBox').hide();
+		this.getElement('viewModeBox').show();
+
+		this.getElement('viewValue').update(this.directLoginBinding().field().label());
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.synchronizeComponentValues")
+//MochiKit.Logging.logDebug("--- DirectLoginBindingComponent.synchronizeComponentValues - 1 - " + this.getId('select'));
+		this.directLoginBinding().setFieldKey(this.getDom('select').value);
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.synchronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginComponent.js
new file mode 100644
index 0000000..7638f00
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginComponent.js
@@ -0,0 +1,362 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.DirectLoginComponent.superclass.constructor.call(this, anElement, args);
+
+	this._directLogin = args.directLogin || null;
+//	this._titleElement = null;
+	this._structureElement = null;
+	this._removeButton = null;
+	this._directLoginBindingComponents = null;
+	this._collapser = null;
+	
+	this.mainComponent().addEditComponent(this);
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'directLogin': function() {
+		return this._directLogin;
+	},
+
+	'directLoginBindingComponents': function() {
+		return this._directLoginBindingComponents;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'removeDirectLogin': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.removeDirectLogin");
+		this.mainComponent().synchronizeComponentValues();
+		this.directLogin().remove();
+		this.mainComponent().removeEditComponent(this);
+		this.mainComponent().render();
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.removeDirectLogin");
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'formDataValue': function() {
+		return Clipperz.Base.serializeJSON(this.directLogin().formData());
+	},
+	
+	'setFormDataValue': function(aValue) {
+		
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'removeButton': function() {
+		return this._removeButton;
+	},
+	
+	'setRemoveButton': function(aValue) {
+		this._removeButton = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'titleElement': function() {
+		return this._titleElement;
+	},
+	
+	'setTitleElement': function(aValue) {
+		this._titleElement = aValue;
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'structureElement': function() {
+		return this._structureElement;
+	},
+	
+	'setStructureElement': function(aValue) {
+		this._structureElement = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.render");
+		try {
+			this.element().update("");
+			Clipperz.YUI.DomHelper.append(this.element().dom,
+				{tag:'li', children:[
+					{tag:'table', width:'100%', border:'0', cellpadding:'0', cellspacing:'0', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', rowspan:'2', width:'30', valign:'top', html:'&#160', children:[
+									{tag:'div', id:this.getId('removeDirectLogin'), children:[
+										{tag:'div', id:this.getId('removeDirectLoginButton')}
+									]},
+									{tag:'div', id:this.getId('collapseLink'), cls:'directLoginCollapseLink'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'table', width:'100%', border:'0', cellpadding:'0', cellspacing:'0', children:[
+										{tag:'tbody', children:[
+											{tag:'tr', children:[
+												{tag:'td', width:'20', valign:'top', children:[
+													{tag:'a', href:'#', id:this.getId('directLogin'), children:[
+														{tag:'img', id:this.getId('faviconImage'), width:'16', height:'16', src:this.directLogin().fixedFavicon()}
+													]}
+												]},
+												{tag:'td', valign:'top', children:[
+													{tag:'div', cls:'directLoginDetailTitle', children:[
+														{tag:'div', id:this.getId('titleViewBox'), children:[
+															{tag:'a', href:'#', id:this.getId('titleLink')}
+														]},
+														{tag:'div', id:this.getId('titleEditBox'), children:[
+															{tag:'input', type:'text', id:this.getId('titleInput')}
+														]}
+													]}
+												]}
+											]}
+										]}
+									]}
+								]}
+							]},
+							{tag:'tr', children:[
+								{tag:'td', /*colspan:'2',*/ children:[
+									{tag:'div', id:this.getId('details'), children:[
+										{tag:'table', cls:'directLoginBindings', border:'0', cellpadding:'0', cellspacing:'0', children:[
+											{tag:'tbody', id:this.getId('tbodyBindings'), children:[]}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]}
+				]}
+			);
+
+			MochiKit.Signal.connect(this.getId('faviconImage'), 'onload', this, 'handleLoadedFaviconImage');
+			MochiKit.Signal.connect(this.getId('faviconImage'), 'onerror', this.directLogin(), 'handleMissingFaviconImage');
+			MochiKit.Signal.connect(this.getId('faviconImage'), 'onabort', this.directLogin(), 'handleMissingFaviconImage');
+
+			this.getElement('removeDirectLogin').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 1");
+			this.getElement('collapseLink').addClassOnOver('hover');
+			this._collapser = new Clipperz.YUI.Collapser(this.getElement('collapseLink'), this.getElement('details'), true);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 2");
+			MochiKit.Signal.connect(this.getId('directLogin'), 'onclick', this, 'runDirectLogin');
+//			this.getElement('directLogin').on('click', this.runDirectLogin, this, false);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 3");
+//			this.setTitleElement(new Clipperz.PM.Components.TextFormField(this.getElement('title'), {
+//														editMode:this.editMode(),
+//														value:this.directLogin().label()
+//			}));
+			this.getElement('titleViewBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			this.getElement('titleEditBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+//-			this.getElement('titleLink').on('click', this.runDirectLogin, this, false);
+			MochiKit.Signal.connect(this.getId('titleLink'), 'onclick', this, 'runDirectLogin');
+
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 4");
+//-			this.setStructureElement(new Clipperz.PM.Components.TextFormField(this.getElement('formStructure'), {
+//-														editMode:this.editMode(),
+//-														value:this.formDataValue(), multiline:true
+//-			}));
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 5");
+			{
+				var	bindingKey;
+				var valueName;
+				var inputsRequiringAdditionalValues;
+				var bindingsElement;
+				var i,c;
+			
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 6");
+				this._directLoginBindingComponents = [];
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 7");
+				bindingsElement = this.getElement('tbodyBindings');
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 8");
+				for (bindingKey in this.directLogin().bindings()) {
+					try {
+						var directLoginBindingElement;
+						var directLoginBindingComponent;
+				
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 9");
+						directLoginBindingElement = Clipperz.YUI.DomHelper.append(bindingsElement.dom, {tag:'tr'}, true);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 10");
+						directLoginBindingComponent =	new Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent(directLoginBindingElement, {
+																mainComponent:this,
+																directLoginBinding:this.directLogin().bindings()[bindingKey]
+															});
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 11");
+						this._directLoginBindingComponents.push(directLoginBindingComponent);
+					} catch (e) {
+						MochiKit.Logging.logError("Error while rendering a DirectLoginBindingComponent - " + e);
+					}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 12");
+				}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13");
+
+				inputsRequiringAdditionalValues = this.directLogin().inputsRequiringAdditionalValues();
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.1");
+				for (valueName in inputsRequiringAdditionalValues) {
+//-					Clipperz.YUI.DomHelper.append(bindingsElement.dom, {tag:'tr', children:[
+//-						{tag:'td', html:valueName},
+//-						{tag:'td', children:inputsRequiringAdditionalValues[valueName].inputElementConfiguration()}
+//-					]}, true)
+					var directLoginValueElement;
+					var directLoginValueComponent;
+				
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.2");
+					directLoginValueElement = Clipperz.YUI.DomHelper.append(bindingsElement.dom, {tag:'tr'}, true);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.3");
+					directLoginValueComponent =	new Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent(directLoginValueElement, {
+															mainComponent:this,
+															directLoginInputValue:inputsRequiringAdditionalValues[valueName]
+														});
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.4");
+					this._directLoginBindingComponents.push(directLoginValueComponent);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.5");
+				}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.6");
+			}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 14");
+			this.setRemoveButton(new YAHOO.ext.Button(this.getDom('removeDirectLoginButton'), {text:Clipperz.PM.Strings['recordDetailDeleteDirectLoginButtonLabel'], handler:this.removeDirectLogin, scope:this}));
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 15");
+			this.update();
+		} catch (e) {
+			MochiKit.Logging.logError("Error while rendering a DirectLoginComponent - " + e);
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'collapser': function() {
+		return this._collapser;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'handleLoadedFaviconImage': function(anEvent) {
+		MochiKit.Signal.disconnectAll(anEvent.src())
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'update': function() {
+		var i,c;
+		var bindingComponents;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.update");
+		bindingComponents = this.directLoginBindingComponents();
+		c = bindingComponents.length;
+		for (i=0; i<c; i++) {
+			bindingComponents[i].update();
+		}
+		
+    	Clipperz.PM.Components.RecordDetail.DirectLoginComponent.superclass.update.call(this);
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.update");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateEditMode': function() {
+//		this.element().update("");
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', style:'border:4px solid red; padding:10px;', children:[
+//			{tag:'div', style:'font-weight:bold;', html:this.directLogin().label()},
+//			{tag:'div', style:'border:1px solid #aaaaaa;', html:Clipperz.Base.serializeJSON(this.directLogin().formData())},
+//			{tag:'div', style:'border:1px solid #aaaaaa;', html:Clipperz.Base.serializeJSON(this.directLogin().bindings())}
+//		]});
+		
+		this.getElement('titleEditBox').show();
+		this.getElement('titleViewBox').hide();
+		
+		this.getDom('titleInput').value = this.directLogin().label();
+		
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.updateEditMode");
+		this.collapser().expand();
+		this.getElement('collapseLink').hide();
+		this.getElement('removeDirectLogin').show();
+//		this.removeButton().show();
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.updateEditMode");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.updateViewMode");
+		this.getElement('titleEditBox').hide();
+		this.getElement('titleViewBox').show();
+		this.getElement('titleLink').update(this.directLogin().label());
+
+		this.getElement('collapseLink').show();
+		this.getElement('removeDirectLogin').hide();
+//		this.removeButton().hide();
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.syncronizeComponentValues");
+		this.directLogin().setLabel(this.getDom('titleInput').value);
+//		this.setFormDataValue(this.structureElement().value());
+		
+		MochiKit.Iter.forEach(this.directLoginBindingComponents(), MochiKit.Base.methodcaller('synchronizeComponentValues'));
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.syncronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'runDirectLogin': function(anEvent) {
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 1");
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 1 anEvent: " + anEvent);
+		anEvent.stop();
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 2");
+		this.directLogin().runDirectLogin();
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 3");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginValueComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginValueComponent.js
new file mode 100644
index 0000000..e70229b
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginValueComponent.js
@@ -0,0 +1,257 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new DirectLoginValueComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent.superclass.constructor.call(this, anElement, args);
+
+	this._directLoginInputValue = args.directLoginInputValue || null;
+	this._value = this.directLoginInputValue().directLogin().formValues()[this.directLoginInputValue().name()];
+	
+	this.render();
+//MochiKit.Logging.logDebug("<<< new DirectLoginValueComponent - record: " + this.record());
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent component - " + this.directLoginInputValue().name();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'directLoginInputValue': function() {
+		return this._directLoginInputValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.render");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginDataLabelTD', children:[
+			{tag:'span', html:this.directLoginInputValue().name()}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.render - 1");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginDataValueTD', children:[
+			{tag:'span', id:this.getId('inputElement')}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.render - 2");
+		this.update();
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputElementConfiguration': function() {
+		var result;
+		var currentValue;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.inputElementConfiguration - " + this.directLoginInputValue().name());
+		result = [];
+		currentValue = this.value();
+		
+		switch (this.directLoginInputValue().type()) {
+			case 'checkbox':
+				var checkbox;
+//{"type":"checkbox", "name":"rememberUsernameChk", "value":"checkbox"}
+				checkbox = {tag:'input', id:this.getId('checkbox'), type:'checkbox'}
+				if (currentValue == true) {
+					checkbox.checked = true;
+				}
+				result.push(checkbox);
+				break;
+				
+			case 'select':
+				var input;
+//{"type":"select", "name":"DOMAIN", "options":[{"selected":true, "label":"@tin.it", "value":"tin.it"}, {"selected":false, "label":"@virgilio.it", "value":"virgilio.it"}]}
+				input = {tag:'select', id:this.getId('select'), name:this.directLoginInputValue().name(), children:[]};
+				input.children.push({tag:'option', value:null, html:"---"});
+				MochiKit.Iter.forEach(this.directLoginInputValue().args()['options'], function(anOption) {
+					var option;
+					
+//	TODO: remove the value: field and replace it with element.dom.value = <some value>
+					option = {tag:'option', value:anOption['value'], html:anOption['label']}
+					if (currentValue == anOption['value']) {
+						option.selected = true;
+					}
+					input.children.push(option);
+				})
+				result.push(input);
+				break;
+				
+			case 'radio':
+				var name;
+				var radioBox;
+				
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3");
+				name = this.getId(this.directLoginInputValue().name());
+				radioBox = {tag:'div', id:this.getId('radioBox'), children:[]};
+				result.push(radioBox);
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1 - options.length: " + this.directLoginInputValue().args()['options'].length);
+//{"name":"dominio", "type":"radio", "options":[{"value":"@alice.it", "checked":true}, {"value":"@tin.it", "checked":false}, {"value":"@virgilio.it", "checked":false}, {"value":"@tim.it", "checked":false}]}
+
+				MochiKit.Iter.forEach(this.directLoginInputValue().args()['options'], function(anOption) {
+					var	radio;
+					
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.1");
+//	TODO: remove the value: field and replace it with element.dom.value = <some value>
+					radio = {tag:'input', type:'radio', name:name, value:anOption['value']};
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.2");
+					if (currentValue == anOption['value']) {
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.3");
+						radio.checked = true;
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.4");
+					}
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.5");
+					radioBox.children.push({tag:'div', children:[ radio, {tag:'span', html:anOption['value']} ]})
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.6");
+				})
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.2");
+				break;
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.inputElementConfiguration");
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputValue': function() {
+		var result;
+		
+		switch (this.directLoginInputValue().type()) {
+			case 'checkbox':
+				result = this.getDom('checkbox').checked;
+				break;
+			case 'select':
+				result = this.getDom('select').value;
+				break;
+			case 'radio':
+				var checkedRadioButtons;
+				
+				checkedRadioButtons = MochiKit.Base.filter(	function(aRadioButton) { return aRadioButton.dom.checked },
+															this.getElement('radioBox').getChildrenByTagName('input'));
+				
+				if (checkedRadioButtons.length == 0) {
+					result = null;
+				} else {
+					result = checkedRadioButtons[0].dom.value;
+				}
+				break;
+		}
+		
+		return result;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this._value;
+	},
+	
+	'setValue': function(aValue) {
+		this._value = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.updateEditMode - " + this);
+		this.getElement('inputElement').update("");
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.updateEditMode - 1");
+		Clipperz.YUI.DomHelper.append(this.getDom('inputElement'), {tag:'div', children:this.inputElementConfiguration()});
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.updateEditMode");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.updateViewMode");
+//		this.getElement('inputElement').update(this.directLoginInputValue().value());
+
+		this.getElement('inputElement').update("");
+		
+		switch (this.directLoginInputValue().type()) {
+			case 'checkbox':
+				if (this.value() == true) {
+					this.getElement('inputElement').update(Clipperz.PM.Strings['directLoginConfigurationCheckBoxFieldSelectedValue']);
+				} else {
+					this.getElement('inputElement').update(Clipperz.PM.Strings['directLoginConfigurationCheckBoxFieldNotSelectedValue'])
+				}
+				break;
+			case 'select':
+				var displayedValue;
+				var selectedOptions;
+				var currentValue;
+				
+				currentValue = this.value();
+				selectedOptions = MochiKit.Base.filter(	function(anOption) { return (anOption['value'] == currentValue); },
+														this.directLoginInputValue().args()['options']);
+				if (selectedOptions.length == 0) {
+					displayedValue = "---";
+				} else {
+//MochiKit.Logging.logDebug("+++ " + Clipperz.Base.serializeJSON(selectedOptions));
+//MochiKit.Logging.logDebug("*** " + Clipperz.Base.serializeJSON(selectedOptions[0]));
+					displayedValue = selectedOptions[0]['label'];
+				}
+				this.getElement('inputElement').update(displayedValue);
+				break;
+			case 'radio':
+				this.getElement('inputElement').update(this.value());
+				break;
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.synchronizeComponentValues");
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.synchronizeComponentValues - 1; value: " + this.inputValue());
+		this.setValue(this.inputValue());
+		this.directLoginInputValue().directLogin().formValues()[this.directLoginInputValue().name()] = this.value();
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.synchronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginsComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginsComponent.js
new file mode 100644
index 0000000..3292a95
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginsComponent.js
@@ -0,0 +1,199 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginsComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent");
+	args = args || {};
+
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 0");
+    Clipperz.PM.Components.RecordDetail.DirectLoginsComponent.superclass.constructor.call(this, anElement, args);
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 1");
+
+	this._addDirectLoginButton = null;
+	
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 2");
+	this.mainComponent().addEditComponent(this);
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 3");
+	this.render();
+//MochiKit.Logging.logDebug("<<< new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent");
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginsComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginsComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'addDirectLoginButton': function() {
+		return this._addDirectLoginButton;
+	},
+
+	'setAddDirectLoginButton': function(aValue) {
+		this._addDirectLoginButton = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'div', cls:'directLoginsRecordBox', children:[
+				{tag:'h3', htmlString:Clipperz.PM.Strings['recordDetailDirectLoginBlockTitle']},
+				{tag:'ul', id:this.getId('directLogins')},
+
+				{tag:'div', cls:'addDirectLoginBox', id:this.getId('addDirectLogin'), children:[
+					{tag:'div', cls:'addDirectLoginBoxContent', children:[
+						{tag:'div', cls:'bookmarkletConfiguration', children:[
+//							{tag:'span', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationLabel']},
+							{tag:'div', htmlString:Clipperz.PM.Strings['recordDetailNewDirectLoginDescription']},
+							{tag:'textarea', id:this.getId('addDirectLoginTextarea')}
+						]},
+						{tag:'div', id:this.getId('addDirectLoginButton')}
+					]}
+				]}
+			]}
+		);
+
+		if (MochiKit.Base.keys(this.record().directLogins()).length == 0) {
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 3");
+			Clipperz.YUI.DomHelper.append(this.getElement('directLogins'),
+				{tag:'li', children:[
+//					{tag:'span', htmlString:Clipperz.PM.Strings['recordDetailDirectLoginBlockNoDirectLoginConfiguredLabel']}
+					{tag:'div', cls:'recordDetailNoDirectLoginDescriptionBox', htmlString:Clipperz.PM.Strings['recordDetailDirectLoginBlockNoDirectLoginConfiguredDescription']}
+				]}
+			);
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 4");
+		} else {
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 5");
+			for (directLoginReference in this.record().directLogins()) {
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 6");
+				this.addDirectLogin(this.record().directLogins()[directLoginReference]);
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 7");
+			}
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 8");
+		}
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 9");
+
+		this.setAddDirectLoginButton(new YAHOO.ext.Button(this.getDom('addDirectLoginButton'), {
+						text:Clipperz.PM.Strings['recordDetailAddNewDirectLoginButtonLabel'],
+						handler:this.addNewDirectLogin,
+						scope:this
+		}));
+		MochiKit.Signal.connect(this.getId('addDirectLoginTextarea'), 'onkeydown', this, 'onkeydown');
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 11");
+
+		this.update();
+//MochiKit.Logging.logDebug("<<< DirectLoginsComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'addDirectLogin': function(aDirectLogin) {
+//MochiKit.Logging.logDebug(">>> DirectLoginsComponent.addDirectLogin");
+		new Clipperz.PM.Components.RecordDetail.DirectLoginComponent(
+				Clipperz.YUI.DomHelper.append(this.getDom('directLogins'), {tag:'div'}, true),
+				{
+					mainComponent:this.mainComponent(),
+					directLogin:aDirectLogin
+				}
+		);
+//MochiKit.Logging.logDebug("<<< DirectLoginsComponent.addDirectLogin");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'addNewDirectLogin': function() {
+		var	newDirectLogin;
+		var	configuration;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginsComponent.addNewDirectLogin");
+		if (MochiKit.Base.keys(this.record().directLogins()).length == 0) {
+			this.getElement('directLogins').update("");
+		}
+		
+		this.mainComponent().synchronizeComponentValues();
+		
+		this.mainComponent().exitModalView();
+		configuration = Clipperz.PM.BookmarkletProcessor.checkBookmarkletConfiguration(
+								this.getDom('addDirectLoginTextarea').value,
+								this.getDom('addDirectLoginButton'),
+								MochiKit.Base.method(this.mainComponent(), 'enterModalView')
+		);
+		this.mainComponent().enterModalView();
+		
+		newDirectLogin = new Clipperz.PM.DataModel.DirectLogin({record:this.record(),
+																label:configuration['page']['title'],
+																bookmarkletVersion:'0.2',
+//																bookmarkletVersion:configuration['version'],
+																formData:configuration['form']});
+		this.record().addDirectLogin(newDirectLogin);
+		this.addDirectLogin(newDirectLogin);
+		this.getDom('addDirectLoginTextarea').value = "";
+//MochiKit.Logging.logDebug("<<< DirectLoginsComponent.addNewDirectLogin");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.getElement('addDirectLogin').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('addDirectLogin').hide();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateEditMode': function() {
+		this.getElement('addDirectLogin').show();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'onkeydown': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> onkeydown - " + anEvent.src().id + ": " + anEvent.key().code);
+		if (anEvent.key().code == 13) {
+			this.addNewDirectLogin();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldButtonComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldButtonComponent.js
new file mode 100644
index 0000000..9e1d56a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldButtonComponent.js
@@ -0,0 +1,117 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldButtonComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldButtonComponent.superclass.constructor.call(this, anElement, args);
+
+	this._button = null;
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldButtonComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldButtonComponent";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'buttonText': function() {
+		var	result;
+
+		if (this.recordField() == null) {
+			//	TODO: this is never used. It is just an obsolete legacy chunk of code
+			result = Clipperz.PM.Strings['recordDetailAddFieldButtonLabel'];
+		} else {
+			result = Clipperz.PM.Strings['recordDetailRemoveFieldButtonLabel'];
+		}
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'button': function() {
+		return this._button;
+	},
+	
+	'setButton': function(aValue) {
+		this._button = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', id:this.getId('button')})
+		this.setButton(new YAHOO.ext.Button(this.getDom('button'), {text:this.buttonText(), handler:this.handleButtonClick, scope:this}));
+
+		this.update();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleButtonClick': function() {
+		if (this.recordField() == null) {
+			this.mainComponent().addNewField();
+		} else {
+			this.mainComponent().removeField(this.fieldComponent());
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateEditMode': function() {
+		this.button().show();
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateViewMode': function() {
+		this.button().hide();
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldComponent.js
new file mode 100644
index 0000000..c2d947e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldComponent.js
@@ -0,0 +1,189 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new FieldComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldComponent.superclass.constructor.call(this, anElement, args);
+
+	this._element = anElement;
+	this._recordField = args.recordField || null;
+
+	this._buttonComponent = null;
+	this._labelComponent = null;
+	this._dragHandler = null;
+	this._valueComponent = null;
+	this._typeComponent = null;
+
+	this.mainComponent().addEditComponent(this);
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'recordField': function() {
+		return this._recordField;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'buttonComponent': function() {
+		return this._buttonComponent;
+	},
+	
+	'setButtonComponent': function(aValue) {
+		this._buttonComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'labelComponent': function() {
+		return this._labelComponent;
+	},
+	
+	'setLabelComponent': function(aValue) {
+		this._labelComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'dragHandler': function() {
+		return this._dragHandler;
+	},
+	
+	'setDragHandler': function(aValue) {
+		this._dragHandler = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'valueComponent': function() {
+		return this._valueComponent;
+	},
+	
+	'setValueComponent': function(aValue) {
+		this._valueComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'typeComponent': function() {
+		return this._typeComponent;
+	},
+	
+	'setTypeComponent': function(aValue) {
+		this._typeComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.FieldComponent.render");
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'32',*/ height:'24', cls:'removeFieldButton', align:'left', valign:'top', id:this.getId('button')});
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'25%',*/ valign:'top', id:this.getId('label')});
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'3',*/ valign:'top', id:this.getId('dragHandler')});
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'50%',*/ valign:'top', children:[
+			{tag:'div', cls:'Clipperz_recordFieldData', id:this.getId('value')}
+		]});
+		
+		
+		this.setButtonComponent(new Clipperz.PM.Components.RecordDetail.FieldButtonComponent(this.getElement('button'), {fieldComponent:this}));
+		this.setLabelComponent(new Clipperz.PM.Components.RecordDetail.FieldLabelComponent(this.getElement('label'), {fieldComponent:this}));
+		this.setDragHandler(new Clipperz.PM.Components.RecordDetail.FieldDragHandler(this.getElement('dragHandler'), {fieldComponent:this}));
+		this.setValueComponent(new Clipperz.PM.Components.RecordDetail.FieldValueComponent(this.getElement('value'), {fieldComponent:this}));
+
+		if (this.editMode() == 'EDIT') {
+ 			Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'60',*/ align:'left', cls:'fieldTypeTD', valign:'top', id:this.getId('type')});
+			this.setTypeComponent(new Clipperz.PM.Components.RecordDetail.FieldTypeComponent(this.getElement('type'), {fieldComponent:this}));
+		}
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< RecordDetail.FieldComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleButtonClick': function() {
+		this.mainComponent().record().removeField(this.recordField());
+
+//		if (this.recordField() == null) {
+//			this.mainComponent().record().addNewField();
+//		} else {
+//			this.mainComponent().record().removeField(this.recordField());
+//		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'update': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.FieldComponent.update");
+		this.buttonComponent().update();
+		this.labelComponent().update();
+		this.dragHandler().update();
+		this.valueComponent().update();
+		if (this.editMode() == 'EDIT') {
+			this.typeComponent().update();
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.FieldComponent.update");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> FieldComponent.synchronizeComponentValues");
+		this.labelComponent().synchronizeComponentValues();
+		this.valueComponent().synchronizeComponentValues();
+		if (this.editMode() == 'EDIT') {
+			this.typeComponent().synchronizeComponentValues();
+		}
+//MochiKit.Logging.logDebug("<<< FieldComponent.synchronizeComponentValues");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldDragHandler.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldDragHandler.js
new file mode 100644
index 0000000..13a08fc
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldDragHandler.js
@@ -0,0 +1,59 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldDragHandler = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldDragHandler.superclass.constructor.call(this, anElement, args);
+
+	this._element = anElement;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldDragHandler, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldDragHandler component";
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldLabelComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldLabelComponent.js
new file mode 100644
index 0000000..3bbcd1d
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldLabelComponent.js
@@ -0,0 +1,141 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldLabelComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldLabelComponent.superclass.constructor.call(this, anElement, args);
+
+	this._inputElement = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldLabelComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldLabelComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.recordField().label();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	newTextFormField;
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'Clipperz_recordFieldLabel', id:this.getId('label')});
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', style:'font-size:8pt;', html:this.recordField().key()});
+
+//		this.setInputElement(new Clipperz.PM.Components.TextFormField(this.getElement('label'), {editMode:this.editMode(), value:this.value()}));
+		newTextFormField = new Clipperz.PM.Components.TextFormField(this.getElement('label'), {editMode:this.editMode(), value:this.value()});
+//		newTextFormField.inputElement().setStyle({border:'3px solid cyan;'});
+		newTextFormField.on('change', this.notifyChanges, this, true)
+//		this.inputElement().on('change', function() {alert("CHANGE");});
+//		this.inputElement().getElement('editComponent_input').on('change', function() {alert("CHANGE");})
+//		this.inputElement().on('blur', this.notifyChanges, this, true);
+		
+		this.setInputElement(newTextFormField);
+		this.update();
+	},
+
+	'notifyChanges': function() {
+//MochiKit.Logging.logDebug(">>> FieldLabelComponent.notifyChanges - " + this);
+		this.synchronizeComponentValues();
+		Clipperz.NotificationCenter.notify(this.recordField().recordVersion().record(), 'updatedFieldLabel');
+//MochiKit.Logging.logDebug("<<< FieldLabelComponent.notifyChanges");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'update': function() {
+//MochiKit.Logging.logDebug(">>> FieldLabelComponent.update");
+		this.inputElement().update({editMode:this.editMode(), value:this.value()});
+//MochiKit.Logging.logDebug("<<< FieldLabelComponent.update");
+	},
+	
+	//-------------------------------------------------------------------------
+/*
+	'updateViewMode': function() {
+		var	width;
+		var	element;
+		
+		this.element().update("");
+		width = this.element().getWidth();
+		element = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', html:this.value()}, true);
+		element.setWidth(width-1);
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		var	width;
+
+		this.element().update("");
+		width = this.element().getWidth(true);
+		this.setInputElement(Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', type:'text', value:this.value()}, true));
+		this.inputElement().setWidth(width-1);
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+		if (this.inputElement() != null) {
+			this.recordField().setLabel(this.inputElement().value());
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldTypeComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldTypeComponent.js
new file mode 100644
index 0000000..3bdd093
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldTypeComponent.js
@@ -0,0 +1,157 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldTypeComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldTypeComponent.superclass.constructor.call(this, anElement, args);
+
+	this._inputElement = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldTypeComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldTypeComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.recordField().type();
+	},
+
+	'canChangeType': function() {
+		var value;
+		var result;
+		
+		value = this.value();
+		result = ((value == 'TXT') || (value == 'PWD') || (value == 'URL') || (value == 'DATE') || (value == 'ADDR'));
+		
+		return result
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.element().update("");
+		if (this.canChangeType()) {
+			var	width;
+			var element;
+
+			width = this.element().getWidth(true);
+			element = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', html:this.recordField().typeShortDescription()}, true);
+			element.setWidth(width-1);
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		this.element().update("");
+		
+		if (this.canChangeType()) {
+			var	width;
+
+			width = this.element().getWidth(true);
+			this.setInputElement(Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'select', children:[
+				{tag:'option', value:'TXT', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['TXT']['shortDescription']},
+				{tag:'option', value:'PWD', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['PWD']['shortDescription']},
+				{tag:'option', value:'URL', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['URL']['shortDescription']},
+				{tag:'option', value:'DATE', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['DATE']['shortDescription']},
+				{tag:'option', value:'ADDR', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['ADDR']['shortDescription']}
+			
+//				{tag:'option', value:'CHECK', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['CHECK']['shortDescription']},
+//				{tag:'option', value:'RADIO', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['RADIO']['shortDescription']},
+//				{tag:'option', value:'CHECK', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['SELECT']['shortDescription']}
+//				{tag:'option', value:'NOTE', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['NOTE']['shortDescription']}
+			]}, true));
+			this.inputElement().setWidth(width-1);
+			this.inputElement().addHandler('change', true, this.onChange, this, true);
+//			this.selectCorrectOption();
+			Clipperz.DOM.selectOptionMatchingValue(this.inputElement().dom, this.value());
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'onChange': function() {
+		this.synchronizeComponentValues();
+		this.fieldComponent().valueComponent().handleTypeChange();
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'selectCorrectOption': function() {
+		var	options;
+		var i,c;
+		
+		options = this.inputElement().getChildrenByTagName('option');
+		c = options.length;
+		for (i=0; i<c; i++) {
+			if (options[i].dom.value == this.value()) {
+				options[i].dom.selected = true;
+			}
+		}
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+		if (this.inputElement() != null) {
+			this.recordField().setType(this.inputElement().dom.value);
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldValueComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldValueComponent.js
new file mode 100644
index 0000000..a30992a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldValueComponent.js
@@ -0,0 +1,275 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldValueComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldValueComponent.superclass.constructor.call(this, anElement, args);
+
+	this._inputElement = null;
+	this._scrambledStatus = 'SCRAMBLED'; //	'UNSCRAMBLED'
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldValueComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldValueComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.recordField().value();
+	},
+
+	'setValue': function(aValue) {
+		this.recordField().setValue(aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'scrambledStatus': function() {
+		return this._scrambledStatus;
+	},
+	
+	'setScrambledStatus': function(aValue) {
+		this._scrambledStatus = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'handleTypeChange': function() {
+//MochiKit.Logging.logDebug(">>> handling type change - " + this.recordField().type());
+		this.synchronizeComponentValues();
+		this.update();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'addrUrl': function() {
+		var result;
+		
+		result = "http://maps.google.com/maps?q=" + this.value().split(' ').join('+');
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		var scarmbledStatus;
+		
+		scrambledStatus = this.scrambledStatus() || 'SCRAMBLED';
+
+		this.element().update("");
+		if (this.recordField().hidden() == false) {
+			switch(this.recordField().type()) {
+				case 'TXT':
+				case 'PWD':
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', html:this.value()});
+					break;
+				case 'URL':
+					var	urlLocation;
+					
+					urlLocation = Clipperz.Base.sanitizeString(this.value());
+					if (! (/^(https?|ftp|svn):\/\//.test(urlLocation))) {
+						urlLocation = 'http://' + urlLocation;
+					}
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'a', href:urlLocation, html:this.value(), target:'_blank'});
+					break;
+				case 'DATE':
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', html:this.value()});
+					break;
+				case 'ADDR':
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'a', href:this.addrUrl(), html:this.value(), target:'_blank'});
+					break;
+			}
+		} else {
+			var tableElement;
+			var tdElement;
+			var inputElement;
+			var passwordElementConfiguration;
+
+			if (scrambledStatus == 'SCRAMBLED') {
+				var	scrambledInputElement;
+
+				if ((Clipperz_IEisBroken === true) && (Clipperz.PM.Proxy.defaultProxy.isReadOnly())) {
+					scrambledInputElement = {tag:'input', type:'password', value:"this.value()"};
+				} else {
+					scrambledInputElement = {tag:'input', type:'text', cls:'scrambledField', title:Clipperz.PM.Strings['recordDetailPasswordFieldTooltipLabel'], value:"this.value()"};
+				}
+
+				passwordElementConfiguration = 
+					{tag:'table', border:'0', cellspacing:'2', cellpadding:'0', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									scrambledInputElement,
+									{tag:'a', cls:'scrambleLink', id:this.getId('scrambleLink'), href:'#', htmlString:Clipperz.PM.Strings['recordDetailPasswordFieldUnscrambleLabel']}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'span', cls:'scrambledFieldLabel', htmlString:Clipperz.PM.Strings['recordDetailPasswordFieldHelpLabel']}
+								]}
+							]}
+						]}
+					]};
+			} else {
+				passwordElementConfiguration =
+					{tag:'div', children:[
+						{tag:'input', type:'text', cls:'unscrambledField', value:"this.value()"},
+						{tag:'a', cls:'scrambleLink', id:this.getId('scrambleLink'), href:'#', htmlString:Clipperz.PM.Strings['recordDetailPasswordFieldScrambleLabel']}
+					]};
+			}
+			
+			tableElement = Clipperz.YUI.DomHelper.append(this.element().dom, passwordElementConfiguration, true);
+
+			inputElement = tableElement.getChildrenByTagName('input')[0];
+			inputElement.dom.value = this.value();
+			inputElement.wrap({tag:'div', cls:'passwordBackground'}).setStyle('background-position', "0px -" + Math.min(128, Clipperz.PM.Crypto.passwordEntropy(this.value())) + "px");
+
+			MochiKit.Signal.connect(inputElement.dom, 'onfocus', this, 'selectHiddenFieldOnFocus');
+			MochiKit.Signal.connect(this.getDom('scrambleLink'), 'onclick', this, 'toggleScramble');
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		var inputElement;
+		var scarmbledStatus;
+		
+		scrambledStatus = this.scrambledStatus() || 'SCRAMBLED';
+		
+		this.element().update("");
+		switch(this.recordField().type()) {
+			case 'TXT':
+			case 'URL':
+			case 'ADDR':
+				inputElement = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', type:'text', value:"this.value()"}, true);
+				inputElement.dom.value = this.value();
+				break;
+			case 'PWD':
+				Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', width:'100%', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', valign:'top', children:[
+								{tag:'input', type:((scrambledStatus == 'SCRAMBLED') ? 'password' : 'text'), id:this.getId('passwordInputElement'), value:"this.value()"},
+								{tag:'a', cls:'scrambleLink', id:this.getId('scrambleLink'), href:'#', html:(scrambledStatus == 'SCRAMBLED' ? Clipperz.PM.Strings['recordDetailPasswordFieldUnscrambleLabel'] : Clipperz.PM.Strings['recordDetailPasswordFieldScrambleLabel'])}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'div', id:this.getId('passwordGenerator'), cls:'Clipperz_PasswordGenerator_button', html:'&nbsp;'}
+							]}
+						]}
+					]}
+				]})
+				inputElement = this.getElement('passwordInputElement');
+				inputElement.dom.value = this.value();
+				new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('passwordInputElement'));
+				new Clipperz.PM.Components.PasswordGenerator(this.getElement('passwordGenerator'), this);
+				MochiKit.Signal.connect(this.getDom('scrambleLink'), 'onclick', this, 'toggleScramble');
+				break;
+//			case 'NOTE':
+//				inputElement = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'textarea', rows:'5', html:this.value()}, true);
+//				break
+			case 'DATE':
+				inputElement = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', type:'text', value:"this.value()"}, true);
+				inputElement.dom.value = this.value();
+				break;
+		}
+
+		this.setInputElement(inputElement);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> FieldValueComponent.synchronizeComponentValues");
+		if (this.inputElement() != null) {
+			var value;
+			
+			switch(this.recordField().type()) {
+				case 'TXT':
+				case 'URL':
+				case 'ADDR':
+				case 'PWD':
+				case 'DATE':
+					value = this.inputElement().dom.value;
+					break;
+			}
+			this.setValue(value);
+		}
+//MochiKit.Logging.logDebug("<<< FieldValueComponent.synchronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectHiddenFieldOnFocus': function(anEvent) {
+		anEvent.src().select();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'toggleScramble': function(anEvent) {
+		this.synchronizeComponentValues();
+		
+		if (this.scrambledStatus() == 'SCRAMBLED') {
+			this.setScrambledStatus('UNSCRAMBLED');
+		} else {
+			this.setScrambledStatus('SCRAMBLED');
+		};
+		
+		this.update();
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/HeaderComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/HeaderComponent.js
new file mode 100644
index 0000000..7aaca3e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/HeaderComponent.js
@@ -0,0 +1,165 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.HeaderComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.HeaderComponent.superclass.constructor.call(this, anElement, args);
+	this.mainComponent().addEditComponent(this);
+	
+	this._saveButton = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.HeaderComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.HeaderComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var editButton;
+		
+//MochiKit.Logging.logDebug(">>> RecordDetail.HeaderComponent.appendTo");
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'recordDetailButtonsBox', children:[
+			{tag:'div', id:this.getId('editButtonBox'), children:[
+				{tag:'table', cls:'recordDetailButtonsTABLE', border:'0', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', align:'center', children:[
+								{tag:'div', id:this.getId('editButton')}
+							]}
+						]}
+					]}
+				]}
+			]},
+			{tag:'div', id:this.getId('saveCancelButtonBox'), children:[
+				{tag:'table', cls:'recordDetailButtonsTABLE', border:'0', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', width:'49%', align:'right', children:[
+								{tag:'div', id:this.getId('saveButton')}
+							]},
+							{tag:'td', html:'&nbsp'},
+							{tag:'td', width:'49%', align:'left', children:[
+								{tag:'div', id:this.getId('cancelButton')}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		this.getElement('editButtonBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('saveCancelButtonBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		editButton = new YAHOO.ext.Button(this.getDom('editButton'), {text:Clipperz.PM.Strings['recordDetailEditButtonLabel'], handler:this.editButtonHandler, scope:this});
+		this.setSaveButton(new YAHOO.ext.Button(this.getDom('saveButton'), {text:Clipperz.PM.Strings['recordDetailSaveButtonLabel'], handler:this.saveButtonHandler, scope:this}));
+		new YAHOO.ext.Button(this.getDom('cancelButton'), {text:Clipperz.PM.Strings['recordDetailCancelButtonLabel'], handler:this.cancelButtonHandler, scope:this});
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			editButton.disable();
+		}
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< RecordDetail.HeaderComponent.appendTo");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> HeaderComponent.updateViewMode");
+		this.getElement('editButtonBox').show();
+		this.getElement('saveCancelButtonBox').hide();
+//MochiKit.Logging.logDebug("<<< HeaderComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		this.getElement('editButtonBox').hide();
+		this.getElement('saveCancelButtonBox').show();
+		if (this.mainComponent().enableSaveButton() == true) {
+//MochiKit.Logging.logDebug("--- HeaderComponent.updateViewMode - ENABLE");
+			this.saveButton().enable();
+		} else {
+			this.saveButton().disable();
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'saveButton': function() {
+		return this._saveButton;
+	},
+	
+	'setSaveButton': function(aValue) {
+		this._saveButton = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'editButtonHandler': function(anEvent) {
+		this.mainComponent().setEditMode('EDIT');
+	},
+
+	//-------------------------------------------------------------------------
+
+	'saveButtonHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.HeaderComponent.saveButtonHandler");
+		this.mainComponent().setEditMode('VIEW', this.getElement('saveButton'));
+//MochiKit.Logging.logDebug("<<< RecordDetail.HeaderComponent.saveButtonHandler");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'cancelButtonHandler': function(anEvent) {
+		this.record().cancelChanges();
+//MochiKit.Logging.logDebug("--- HeaderComponent.cancelButtonHandler - " + Clipperz.Base.serializeJSON(this.record().currentDataSnapshot()));
+		this.mainComponent().setEditMode('VIEW', null, true);
+	},
+
+	//-------------------------------------------------------------------------
+
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/MainComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/MainComponent.js
new file mode 100644
index 0000000..53bf9c5
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/MainComponent.js
@@ -0,0 +1,758 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.MainComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.MainComponent.superclass.constructor.call(this, anElement, args);
+
+//	this._element = args.element;
+	this._user = args.user;
+	this._editMode = args.editMode || 'VIEW';	//	[ 'VIEW' | 'EDIT' ]
+	this._mainPanel = args.mainPanel;
+	
+	this._record = null;
+	this._editComponents = [];
+	this._addFieldButton = null;
+
+	this._enableSaveButton = true;
+	this._shouldShowLoginInfo = (Clipperz.PM.Proxy.defaultProxy.isReadOnly() ? false : true);
+	
+//	this._mainLayoutManager = null;
+//	this._layoutRegion = null;
+	
+	Clipperz.NotificationCenter.register(null, 'loadingRecordData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'decryptingRecordData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'loadingRecordVersionData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'decryptingRecordVersionData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'setupDone', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'render');
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.MainComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.MainComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'editMode': function() {
+		return this._editMode;
+	},
+
+	'setEditMode': function(aValue, aButtonElement, shouldSkipComponentSynchronization) {
+//MochiKit.Logging.logDebug(">>> MainComponent.setEditingMode");
+		this.scrollToTop();
+		
+		if (aValue == 'VIEW') {
+			if (shouldSkipComponentSynchronization == true) {
+				this.exitModalView();
+			} else {
+				this.synchronizeComponentValues();
+				if (this.record().hasPendingChanges()) {
+					if (this.record().isBrandNew()) {
+						this.record().removeEmptyFields();
+					}
+					this.saveCurrentRecordChanges(aButtonElement);
+				} else {
+					if (this.record().isBrandNew()) {
+						this.record().user().removeRecord(this.record());
+					}
+					this.exitModalView();
+				}
+			}
+		} else if (aValue == 'EDIT') {
+			this.enterModalView();
+		} else {
+			//	????
+		}
+
+		this._editMode = aValue;
+		this.render();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'mainPanel': function() {
+		return this._mainPanel;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.render");
+		this.setEnableSaveButton(true);
+		this.element().update("");
+
+		if (this.record() == null) {
+			if (MochiKit.Base.keys(this.user().records()).length == 0) {
+				this.renderWithNoRecordAtAll();
+			} else {
+				this.renderWithNoSelectedRecord();
+			}
+		} else {
+			this.renderWithSelectedRecord();
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderWithNoRecordAtAll': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithNoRecordAtAll");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'noRecordAtAllFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', htmlString:Clipperz.PM.Strings['recordDetailNoRecordAtAllTitle']}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox', htmlString:Clipperz.PM.Strings['recordDetailNoRecordAtAllDescription']}
+							]}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithNoRecordAtAll");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'renderWithNoSelectedRecord': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithNoSelectedRecord");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'noRecordSelectedFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', htmlString:Clipperz.PM.Strings['recordDetailNoRecordSelectedTitle']}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox', htmlString:Clipperz.PM.Strings['recordDetailNoRecordSelectedDescription']}
+							]}
+						]},
+						{tag:'tr', colspan:'5', children:[
+							{tag:'td', colspan:'5', children:this.loginInfo()}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithNoSelectedRecord - 1");
+
+		if (MochiKit.DOM.getElement('fullLoginHistoryLink') != null) {
+			MochiKit.Signal.connect('fullLoginHistoryLink', 'onclick', this, 'showLoginHistoryPanel');
+		}
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithNoSelectedRecord - 2");
+		
+		if (MochiKit.DOM.getElement('offlineCopyDownloadWarningLink') != null) {
+			MochiKit.Signal.connect('offlineCopyDownloadWarningLink', 'onclick', this, 'showDownloadOfflineCopyPanel');
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithNoSelectedRecord");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderWithSelectedRecord': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithSelectedRecord");
+		if (this.record().shouldLoadData() === true) {
+//			this.renderWithSelectedRecordLoading();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 1.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailLoadingRecordMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 1.2");
+		} else if (this.record().shouldDecryptData() === true) {
+//			this.renderWithSelectedRecordDecrypting();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 2.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailDecryptingRecordMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 2.2");
+		} else if (this.record().currentVersion().shouldLoadData() === true) {
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 3.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailLoadingRecordVersionMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 3.2");
+		} else if (this.record().currentVersion().shouldDecryptData() === true) {
+//			this.renderWithSelectedRecordCurrentVersionDecrypting();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 4.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailDecryptingRecordVersionMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 4.2");
+		} else {
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 5.1");
+			this.renderWithSelectedRecordData();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 5.2");
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithSelectedRecord");
+	},
+
+	//.........................................................................
+
+	'renderWhileProcessingWithMessage': function(aMessage) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWhileProcessingWithMessage");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'processingRecordFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', html:this.record().label()}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', cls:'recordTR', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox', children:[
+									{tag:'h5', cls:'recordLoadingMessage', html:aMessage}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWhileProcessingWithMessage");
+	},
+
+	//.........................................................................
+/*
+	'renderWithSelectedRecordLoading': function() {
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'', style:'border:1px solid red; padding: 20px;', children:[
+			{tag:'div', cls:'Clipprez_RecordDetailTitle', children:[
+				{tag:'h3', html:this.record().label()},
+				{tag:'h3', html:"loading"}
+			]}
+		]});
+	},
+
+	//.........................................................................
+
+	'renderWithSelectedRecordDecrypting': function() {
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'', style:'border:1px solid red; padding: 20px;', children:[
+			{tag:'div', cls:'Clipprez_RecordDetailTitle', children:[
+				{tag:'h3', html:this.record().label()},
+				{tag:'h3', html:"decrypting ... "}
+			]}
+		]});
+	},
+
+	//.........................................................................
+
+	'renderWithSelectedRecordCurrentVersionDecrypting': function() {
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'', style:'border:1px solid red; padding: 20px;', children:[
+			{tag:'div', cls:'Clipprez_RecordDetailTitle', children:[
+				{tag:'h3', html:this.record().label()},
+				{tag:'h3', html:"decrypting version ... "}
+			]}
+		]});
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'renderWithErrorMessage': function(anErrorMessage) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithErrorMessage");
+		this.element().update("");
+		
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithErrorMessage - 1");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'errorMessageFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', html:this.record().label()}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', cls:'recordTR', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox loadingError', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['recordDetailLoadingErrorMessageTitle']},
+									{tag:'p', html:anErrorMessage.message}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithErrorMessage");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderWithSelectedRecordData': function() {
+		var	columns;
+		
+		this.resetEditComponents();
+
+		columns = [
+			{tag:'td', width:'25', html:'&#160'},
+			{tag:'td', width:'25%', htmlString:Clipperz.PM.Strings['recordDetailLabelFieldColumnLabel']},
+			{tag:'td', width:'3', html:'&#160'},
+			{tag:'td', /*width:'80%',*/ htmlString:Clipperz.PM.Strings['recordDetailDataFieldColumnLabel']}
+		];
+
+		if (this.editMode() == 'EDIT') {
+			columns.push({tag:'td', /*width:'55',*/ htmlString:Clipperz.PM.Strings['recordDetailTypeFieldColumnLabel']})
+		}
+		
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithSelectedRecordData");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'recordDataFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', id:this.getId('title')},
+				{tag:'div', id:'recordDetailDataBox', cls:'recordDetailDataBox', children:[
+
+{tag:'table', width:'100%', border:'0', cellspacing:'0', cellpadding:'0', children:[
+	{tag:'tbody', children:[
+		{tag:'tr', children:[
+			{tag:'td', width:'5', html:"&nbsp;"},
+			{tag:'td', children:[
+
+					{tag:'table', cls:'recordDetailDataBoxTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+						{tag:'tbody', id:this.getId('tbody'), children:[
+							{tag:'tr', /*cls:'recordNoteTR',*/ children:[
+								{tag:'td', colspan:'5', id:this.getId('notes')}
+							]},
+							{tag:'tr', cls:'recordFieldsTR', children:columns /*	[
+								{tag:'td', width:'25', html:'&#160'},
+								{tag:'td', width:'25%', htmlString:Clipperz.PM.Strings['recordDetailLabelFieldColumnLabel']},
+								{tag:'td', width:'3', html:'&#160'},
+								{tag:'td', / *width:'80%',* / htmlString:Clipperz.PM.Strings['recordDetailDataFieldColumnLabel']},
+								{tag:'td', / *width:'55',* / htmlString:Clipperz.PM.Strings['recordDetailTypeFieldColumnLabel']}
+							] */	}
+						]}
+					]},
+					{tag:'div', cls:'addFieldButton', id:this.getId('addField'), children:[
+						{tag:'div', id:this.getId('addFieldButton')}
+					]},
+					{tag:'div', id:this.getId('directLogins')},
+					{tag:'div', id:this.getId('footer')}
+				
+			]}
+		]}
+	]}
+]}
+
+				]}
+			]}
+		);
+		
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 1");
+
+		new Clipperz.PM.Components.RecordDetail.TitleComponent(this.getElement('title'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 2");
+		new Clipperz.PM.Components.RecordDetail.NotesComponent(this.getElement('notes'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 3");
+		new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent(this.getElement('directLogins'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 4");
+		new Clipperz.PM.Components.RecordDetail.HeaderComponent(this.getElement('footer'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 5");
+		MochiKit.Iter.forEach(MochiKit.Base.values(this.record().currentVersion().fields()), this.appendFieldComponent, this);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 6");
+		this.setAddFieldButton(new YAHOO.ext.Button(this.getDom('addFieldButton'), {text:Clipperz.PM.Strings['recordDetailAddFieldButtonLabel'], handler:this.addNewRecordField, scope:this}));
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 7");
+
+		this.update();
+
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithSelectedRecordData");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'editComponents': function() {
+		return this._editComponents;
+	},
+	
+	'resetEditComponents': function() {
+		this._editComponents = [];
+	},
+	
+	'addEditComponent': function(aValue) {
+		this.editComponents().push(aValue);
+	},
+	
+	'removeEditComponent': function(aValue) {
+		Clipperz.Base.removeFromArray(this.editComponents(), aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'record': function() {
+		return this._record;
+	},
+	
+	'setRecord': function(aValue) {
+		var	result;
+		
+//MochiKit.Logging.logDebug(">>> MainComponent.setRecord")
+		if (this._record != aValue) {
+			var	deferredResult;
+			
+			deferredResult = new MochiKit.Async.Deferred();
+			
+			if ((this._record != null) && (this.editMode() == 'EDIT')) {
+				this.synchronizeComponentValues();
+				deferredResult.addCallback(MochiKit.Base.method(this._record, 'saveChanges'));
+			}
+			
+			this._record = aValue;
+			
+			if (aValue != null) {
+				this.setShouldShowLoginInfo(false);
+				deferredResult.addCallback(MochiKit.Base.method(this._record, 'deferredData'));
+			}
+			deferredResult.addCallbacks(
+				MochiKit.Base.method(this, 'render'),
+				MochiKit.Base.method(this, 'renderWithErrorMessage')
+			);
+			deferredResult.callback();
+			this.scrollToTop();
+			
+			result = deferredResult;
+		} else {
+			result = MochiKit.Async.success();
+		}
+//MochiKit.Logging.logDebug("<<< MainComponent.setRecord")
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'saveCurrentRecordChanges': function(aButtonElement) {
+		var deferred;
+		var currentNumberOfRecords;
+		
+		deferred = new MochiKit.Async.Deferred();
+		deferred.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+				title:Clipperz.PM.Strings['recordDetailSavingChangesMessagePanelInitialTitle'],
+				text:Clipperz.PM.Strings['recordDetailSavingChangesMessagePanelInitialText'],
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false,
+				steps:6
+			},
+			aButtonElement.dom
+		);
+		deferred.addCallback(MochiKit.Base.method(this, 'exitModalView'));
+		deferred.addCallback(MochiKit.Base.method(this.record(), 'saveChanges'));
+		deferred.addCallback(Clipperz.NotificationCenter.deferredNotification, this.record(), 'recordUpdated');
+		deferred.addCallback(function(res) {
+			Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get('main'));
+			return res;
+		});
+
+		currentNumberOfRecords = MochiKit.Base.keys(this.user().records()).length;
+		if ((this.record().isBrandNew()) && (this.user().preferences().shouldShowDonationPanel()) && (currentNumberOfRecords >= 5)) {
+			deferred.addCallback(Clipperz.PM.showDonationSplashScreen, this.user(), 'recordListAddRecordButton');
+		}
+
+		deferred.callback();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'update': function(anEvent) {
+		if (this.editMode() == 'EDIT') {
+			this.updateEditMode();
+		} else if (this.editMode() == 'VIEW') {
+			this.updateViewMode();
+		}
+
+		MochiKit.Iter.forEach(this.editComponents(), MochiKit.Base.methodcaller('update'));
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.addFieldButton().hide();
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		this.addFieldButton().show();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'appendFieldComponent': function(aRecordField) {
+//MochiKit.Logging.logDebug(">>> MainComponent.appendFieldComponent");
+		new Clipperz.PM.Components.RecordDetail.FieldComponent(
+			Clipperz.YUI.DomHelper.append(this.getDom('tbody'), {tag:'tr'}, true),
+			{recordField:aRecordField, mainComponent:this}
+		);
+//MochiKit.Logging.logDebug("<<< MainComponent.appendFieldComponent");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'removeField': function(aFieldComponent) {
+		var	recordField;
+		
+//MochiKit.Logging.logDebug(">>> MainComponent.removeField")		
+		recordField = aFieldComponent.recordField();
+		this.removeEditComponent(aFieldComponent);
+		aFieldComponent.destroy();
+		this.record().removeField(recordField);
+
+		Clipperz.NotificationCenter.notify(this.record(), 'removedField');
+//MochiKit.Logging.logDebug("<<< MainComponent.removeField")		
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'synchronizeComponentValues': function() {
+		MochiKit.Iter.forEach(this.editComponents(), MochiKit.Base.methodcaller('synchronizeComponentValues'));
+	},
+
+	//=========================================================================
+
+	'addFieldButton': function() {
+		return this._addFieldButton;
+	},
+	
+	'setAddFieldButton': function(aValue) {
+		this._addFieldButton = aValue;
+	},
+	
+	'addNewRecordField': function() {
+		var	newField;
+		
+		newField = this.record().addNewField();
+		this.appendFieldComponent(newField);
+
+		Clipperz.NotificationCenter.notify(this.record(), 'addNewRecordField');
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'enterModalView': function() {
+/*
+		if (this.user().preferences().useSafeEditMode()) {
+			var headerMaskElement;
+			var verticalMaskElement;
+
+			headerMaskElement = YAHOO.ext.Element.get('recordDetailEditModeHeaderMask');
+			headerMaskElement.show().mask();
+
+			verticalMaskElement = YAHOO.ext.Element.get('recordDetailEditModeVerticalMask');
+			verticalMaskElement.show().mask();
+		}
+*/
+		this.mainPanel().enterModalView();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'exitModalView': function() {
+/*
+		if (this.user().preferences().useSafeEditMode()) {
+			var headerMaskElement;
+			var verticalMaskElement;
+			
+			headerMaskElement = YAHOO.ext.Element.get('recordDetailEditModeHeaderMask');
+			headerMaskElement.unmask();
+			headerMaskElement.hide();
+
+			verticalMaskElement = YAHOO.ext.Element.get('recordDetailEditModeVerticalMask');
+			verticalMaskElement.unmask();
+			verticalMaskElement.hide();
+		}
+*/
+		this.mainPanel().exitModalView();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'enableSaveButton': function() {
+		return this._enableSaveButton;
+	},
+	
+	'setEnableSaveButton': function(aValue) {
+		this._enableSaveButton = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'scrollToTop': function() {
+		YAHOO.ext.Element.get('recordTitleTopBlock').scrollIntoView(document.body);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'loginInfo': function() {
+		var	result;
+
+		if (this.shouldShowLoginInfo() == true) {
+//			 && (typeof(this.user().loginInfo()['latest']) != 'undefined')) {
+			var	imageExtension;
+			var currentConnectionText;
+			var currentIP;
+			var contentChildren;
+			
+			result = [];
+			contentChildren = [];
+			
+			imageExtension = (Clipperz_IEisBroken == true) ? 'gif': 'png';
+
+			contentChildren.push({tag:'h4', valign:'top', htmlString:Clipperz.PM.Strings['WELCOME_BACK']});
+
+			currentIP = (this.user().loginInfo()['current']['ip'].match(/^\d{1,3}(.\d{1,3}){3}$/)) ? this.user().loginInfo()['current']['ip'] : Clipperz.PM.Strings['unknown_ip'];
+			currentConnectionText = Clipperz.PM.Strings['currentConnectionText'];
+			currentConnectionText = currentConnectionText.replace(/__ip__/, "<b>" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['ip']) + "</b>");
+			currentConnectionText = currentConnectionText.replace(/__country__/, "<b>" + Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['country'])] + "</b>");
+			currentConnectionText = currentConnectionText.replace(/__browser__/, "<b>" + Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['browser'])] + "</b>");
+			currentConnectionText = currentConnectionText.replace(/__operatingSystem__/, "<b>" + Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['operatingSystem'])] + "</b>");
+
+			contentChildren.push(
+				{tag:'div', cls:'loginInfo_now', children:[
+					{tag:'div', cls:'text', htmlString:currentConnectionText},
+					{tag:'div', cls:'icons', children:[
+						{tag:'img', title:Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['country'])], cls:'flag', src:Clipperz.PM.Strings['icons_baseUrl'] + "/flags/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['country']).toLowerCase() + "." +  imageExtension, width:'32', height:'32'},
+						{tag:'img', title:Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['browser'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/browsers/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['browser']).toLowerCase() + "." + imageExtension, width:'32', height:'32'},
+						{tag:'img', title:Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['operatingSystem'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/operatingSystems/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['operatingSystem']).toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+					]}
+				]}
+			);
+			
+			if (typeof(this.user().loginInfo()['latest']) != 'undefined') {
+				var latestLoginDate;
+				var elapsedTimeDescription;
+				var latestIP;
+				var latestConnectionText;
+
+				latestLoginDate = Clipperz.PM.Date.parseDateWithUTCFormat(Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['date']));
+			
+				elapsedTimeDescription = Clipperz.PM.Date.getElapsedTimeDescription(latestLoginDate);
+				latestIP =  (this.user().loginInfo()['latest']['ip'].match(/^\d{1,3}(.\d{1,3}){3}$/)) ? this.user().loginInfo()['latest']['ip'] : Clipperz.PM.Strings['unknown_ip'];
+
+				latestConnectionText = Clipperz.PM.Strings['latestConnectionText'];
+				latestConnectionText = latestConnectionText.replace(/__elapsedTimeDescription__/, "<b>" + elapsedTimeDescription + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__time__/, Clipperz.PM.Date.formatDateWithTemplate(latestLoginDate, Clipperz.PM.Strings['fullDate_format']));
+				latestConnectionText = latestConnectionText.replace(/__ip__/, "<b>" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['ip']) + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__country__/, "<b>" + Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['country'])] + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__browser__/, "<b>" + Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['browser'])] + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__operatingSystem__/, "<b>" + Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['operatingSystem'])] + "</b>");
+
+
+				contentChildren.push(
+					{tag:'div', cls:'loginInfo_latest', children:[
+						{tag:'div', cls:'inner_header', html:'&nbsp;'},
+						{tag:'div', cls:'content', children:[
+							{tag:'div', cls:'text', htmlString:latestConnectionText},
+							{tag:'div', cls:'icons', children:[
+								{tag:'img', title:Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['country'])], cls:'flag', src:Clipperz.PM.Strings['icons_baseUrl'] + "/flags/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['country']).toLowerCase() + "." +  imageExtension, width:'32', height:'32'},
+								{tag:'img', title:Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['browser'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/browsers/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['browser']).toLowerCase() + "." + imageExtension, width:'32', height:'32'},
+								{tag:'img', title:Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['operatingSystem'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/operatingSystems/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['operatingSystem']).toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+							]}
+						]},
+						{tag:'div', children:[
+							{tag:'a', href:'#', id:'fullLoginHistoryLink', htmlString:Clipperz.PM.Strings['fullLoginHistoryLinkLabel']}
+						]},
+						{tag:'div', cls:'inner_footer', html:'&nbsp;'}
+					]}
+				);
+			}
+			
+			contentChildren.push(
+				{tag:'table', id:'shouldDownloadOfflineCopyWarningBox', children:[
+					{tag:'tbody', width:'100%', children:[
+						{tag:'tr', children:[
+							{tag:'td', cls:'offlineCopyDownloadWarningIconTD', valign:'top', align:'center', width:'50', children:(this.user().shouldDownloadOfflineCopy() ? [{tag:'img', src:Clipperz.PM.Strings['icons_baseUrl'] + "/misc/offlineCopyWarning.png" , width:'32', height:'32'}]: [])},
+							{tag:'td', children:[
+								{tag:'div', cls:'offlineCopyDownloadWarning', htmlString:(this.user().shouldDownloadOfflineCopy() ? Clipperz.PM.Strings['offlineCopyDownloadWarning']: Clipperz.PM.Strings['offlineCopyDownloadOk'])}
+							]}
+						]}
+					]}
+				]}
+			);
+
+
+			result = [{tag:'div', id:'loginInfoWrapper', children:[{tag:'div', id:'loginInfo', children:[
+				{tag:'div', cls:'header', html:'&nbsp;'},
+				{tag:'div', cls:'content', children:contentChildren},
+				{tag:'div', cls:'footer', html:'&nbsp;'}
+			]}]}];
+
+//			this.setShouldShowLoginInfo(false);
+		} else {
+			resut = [];
+		}
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'shouldShowLoginInfo': function() {
+		return this._shouldShowLoginInfo;
+	},
+	
+	'setShouldShowLoginInfo': function(aValue) {
+		this._shouldShowLoginInfo = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showLoginHistoryPanel': function(anEvent) {
+		anEvent.stop();
+		
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'mainTabPanel.accountTab', true);
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'accountTabPanel.loginHistoryTab', true);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'showDownloadOfflineCopyPanel': function(anEvent) {
+		anEvent.stop();
+		
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'mainTabPanel.dataTab', true);
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'dataTabPanel.offlineCopyTab', true);
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/NotesComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/NotesComponent.js
new file mode 100644
index 0000000..6f454fc
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/NotesComponent.js
@@ -0,0 +1,240 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+
+
+Clipperz.PM.Components.RecordDetail.NotesComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new NotesComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.NotesComponent.superclass.constructor.call(this, anElement, args);
+
+	this.mainComponent().addEditComponent(this);
+
+	this._staticOffset = null;
+	this._componentHeight = 50;
+	this._mouseMoveIdentifier = null;
+	this._mouseUpIdentifier = null;
+	
+	this.element().setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+	
+	this.render();
+//MochiKit.Logging.logDebug("<<< new NotesComponent");
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.NotesComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.NotesComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.record().notes();
+	},
+
+	'setValue': function(aValue) {
+		this.record().setNotes(aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.render");
+/*
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', colspan:'5', children:[
+			{tag:'span', cls:'noteFieldLabel', htmlString:Clipperz.PM.Strings['recordDetailNotesLabel']},
+			{tag:'div', cls:'noteFieldContent', id:this.getId('notes')}
+		]});
+*/		
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', cls:'noteFieldLabel', htmlString:Clipperz.PM.Strings['recordDetailNotesLabel']});
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'noteFieldContent', id:this.getId('notes'), children:[
+			{tag:'div', id:this.getId('resizableDiv'), cls:'resizable-textarea', children:[
+				{tag:'div', id:this.getId('contentView'), cls:'viewMode', html:""},
+				{tag:'div', id:this.getId('contentEdit'), children:[
+					{tag:'span', children:[
+						{tag:'textarea', id:this.getId('textarea'), html:""}
+					]}
+				]},
+				{tag:'div', id:this.getId('grippie'), cls:'grippie'}
+			]}
+		]});
+
+		this.getElement('contentView').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('contentEdit').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		MochiKit.Signal.connect(this.getId('grippie'), 'onmousedown', this, 'startResize');
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< NotesComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.updateViewMode");
+//		this.getElement('notes').update(this.value().replace(/\n/g, '<br>'));
+
+		this.getElement('contentView').update(Clipperz.Base.sanitizeString(this.value()).replace(/\n/g, '<br>'));
+
+		if (this.isNoteEmpty()) {
+			this.element().hide();
+		} else {
+			this.getElement('contentView').show();
+			this.getElement('contentView').setHeight(this.componentHeight());
+		}
+		this.getElement('contentEdit').hide();
+
+//MochiKit.Logging.logDebug("<<< NotesComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.updateEditMode");
+		this.getDom('textarea').value = this.value().replace(/\n/g, Clipperz_normalizedNewLine);
+
+		this.getElement('contentView').hide();
+		this.getElement('contentEdit').show();
+		
+		this.getElement('textarea').setHeight(this.componentHeight());
+//MochiKit.Logging.logDebug("<<< NotesComponent.updateEditMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.synchronizeComponentValues");
+		if (this.getElement('textarea') != null) {
+			this.setValue(this.getDom('textarea').value.replace(/(\x0a\x0d|\x0d\x0a)/g,'\n'));
+		}
+//MochiKit.Logging.logDebug("<<< NotesComponent.synchronizeComponentValues");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'componentHeight': function() {
+		return this._componentHeight;
+	},
+	
+	'setComponentHeight': function(aValue) {
+		this._componentHeight = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'isNoteEmpty': function() {
+		return !/[^ \n]/.test(this.value());
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'staticOffset': function() {
+		return this._staticOffset;
+	},
+	
+	'setStaticOffset': function(aValue) {
+		this._staticOffset = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'startResize': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> startResize");
+		if (this.editMode() == 'VIEW') {
+			this.setStaticOffset(this.getElement('contentView').getHeight() - anEvent.mouse().page['y'])
+		} else {
+			this.setStaticOffset(this.getElement('textarea').getHeight() - anEvent.mouse().page['y'])
+//			this.getElement('textarea').setStyle('opacity', 0.25);
+		}
+		this.setMouseMoveIdentifier(MochiKit.Signal.connect(MochiKit.DOM.currentDocument(), 'onmousemove', this, 'whileResizing'));
+		this.setMouseUpIdentifier(MochiKit.Signal.connect(MochiKit.DOM.currentDocument(), 'onmouseup', this, 'endResize'));
+		anEvent.stop();
+//MochiKit.Logging.logDebug("<<< startResize");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'whileResizing': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> whileResizing");
+		this.getElement('textarea').setHeight(Math.max(32, this.staticOffset() + anEvent.mouse().page['y']) + 'px');
+		this.getElement('contentView').setHeight(Math.max(32, this.staticOffset() + anEvent.mouse().page['y']) + 'px');
+		anEvent.stop();
+//MochiKit.Logging.logDebug("<<< whileResizing");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'endResize': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> endResize");
+		MochiKit.Signal.disconnect(this.mouseMoveIdentifier());
+		this.setMouseMoveIdentifier(null);
+		MochiKit.Signal.disconnect(this.mouseUpIdentifier());
+		this.setMouseUpIdentifier(null);
+//		this.getElement('textarea').setStyle('opacity', 1);
+
+		this.setComponentHeight(this.getElement('textarea').getHeight());
+//MochiKit.Logging.logDebug("<<< endResize");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'mouseMoveIdentifier': function() {
+		return this._mouseMoveIdentifier;
+	},
+	
+	'setMouseMoveIdentifier': function(aValue) {
+		this._mouseMoveIdentifier = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'mouseUpIdentifier': function() {
+		return this._mouseUpIdentifier;
+	},
+	
+	'setMouseUpIdentifier': function(aValue) {
+		this._mouseUpIdentifier = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/TitleComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/TitleComponent.js
new file mode 100644
index 0000000..52e718c
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/TitleComponent.js
@@ -0,0 +1,137 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.TitleComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.TitleComponent.superclass.constructor.call(this, anElement, args);
+
+//	this._inputElement = null;
+
+	this.mainComponent().addEditComponent(this);
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.TitleComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.TitleComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.record().label();
+	},
+
+	'setValue': function(aValue) {
+		this.record().setLabel(aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+/*
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', html:'&#160'});
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', colspan:"3", html:'&#160', children:[
+//			{tag:'div', /*style:'border: 1px solid green;',*/ id:this.getId('title')}
+//		]});
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', html:'&#160'});
+//		
+//		this.setInputElement(new Clipperz.PM.Components.TextFormField(this.getElement('title'), {editMode:this.editMode(), value:this.value()}));
+		
+		this.update();
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'update': function() {
+		this.inputElement().update({value:this.value(), editMode:this.editMode()});
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'h2', html:this.value()});
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> TitleComponent.updateEditMode");
+//		this.getElement('title').update("");
+//		Clipperz.YUI.DomHelper.append(this.getDom('title'), {tag:'div', id:this.getId('title_input')});
+//		this.setInputElement(Clipperz.YUI.DomHelper.append(this.getDom('title_input'), {tag:'input', type:'text', value:this.value()}, true));
+		
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', id:this.getId('titleField'), type:'text', value:"this.value()"});
+		this.getElement('titleField').dom.value = this.value();
+		
+//MochiKit.Logging.logDebug("<<< TitleComponent.updateEditMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+		var inputElement;
+		
+//MochiKit.Logging.logDebug(">>> TitleComponent.synchronizeComponentValues");
+		inputElement = this.element().getChildrenByTagName('input')[0];
+		
+		if (inputElement != null) {
+			this.setValue(inputElement.dom.value);
+		}
+//MochiKit.Logging.logDebug("<<< TitleComponent.synchronizeComponentValues");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/TabPanel/TabPanelController.js b/frontend/beta/js/Clipperz/PM/Components/TabPanel/TabPanelController.js
new file mode 100644
index 0000000..c872462
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/TabPanel/TabPanelController.js
@@ -0,0 +1,158 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.TabPanel) == 'undefined') { Clipperz.PM.Components.TabPanel = {}; }
+
+Clipperz.PM.Components.TabPanel.TabPanelController = function(args) {
+	args = args || {};
+
+    Clipperz.PM.Components.TabPanel.TabPanelController.superclass.constructor.call(this);
+
+	this._name = args.name || 'undefined';
+	this._config = args.config;
+	this._selectedTab = args.selectedTab || ((MochiKit.Base.keys(args.config).length > 0) ? MochiKit.Base.keys(args.config)[0] : null);
+	
+	this._tabs = {};
+	this._panels = {};
+
+	Clipperz.NotificationCenter.register(null, 'selectTab', this, 'handleSelectTabNotification');
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.TabPanel.TabPanelController, YAHOO.ext.util.Observable, {
+
+	//-------------------------------------------------------------------------
+
+	'name': function() {
+		return this._name;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'tabs': function() {
+		return this._tabs;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'panels': function() {
+		return this._panels;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'config': function() {
+		return this._config;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectedTab': function() {
+		return this._selectedTab;
+	},
+	
+	'setSelectedTab': function(aValue) {
+		this._selectedTab = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'setUp': function() {
+		var	tabId;
+		
+//MochiKit.Logging.logDebug(">>> TabPanelController.setUp - config: " + Clipperz.Base.serializeJSON(this.config()));
+		for (tabId in this.config()) {
+			var	tabElement;
+			var	panelElement;
+
+//MochiKit.Logging.logDebug("--- TabPanelController.setUp - tabId: " + tabId);
+//MochiKit.Logging.logDebug("--- TabPanelController.setUp - panelId: " + this.config()[tabId]);
+			tabElement = YAHOO.ext.Element.get(tabId);
+			tabElement.addClassOnOver("hover");
+			MochiKit.Signal.connect(tabId, 'onclick', this, 'selectTabHandler');
+
+			panelElement = YAHOO.ext.Element.get(this.config()[tabId]);
+			
+			this._tabs[tabId] = tabElement;
+			this._panels[tabId] = panelElement;
+			
+			if (tabId == this.selectedTab()) {
+				tabElement.addClass('selectedTab');
+				panelElement.addClass('selectedPanel');
+			} else {
+				panelElement.addClass('hiddenPanel');
+			}
+		}
+//MochiKit.Logging.logDebug("<<< TabPanelController.setUp");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectTab': function(aTab) {
+		if (aTab != this.selectedTab()) {
+			this.tabs()[this.selectedTab()].removeClass('selectedTab');
+			this.panels()[this.selectedTab()].removeClass('selectedPanel').addClass('hiddenPanel');
+		
+			this.tabs()[aTab].addClass('selectedTab');
+			this.panels()[aTab].addClass('selectedPanel').removeClass('hiddenPanel');
+			
+			this.setSelectedTab(aTab);
+			
+			Clipperz.NotificationCenter.notify(this, 'tabSelected', aTab);
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectTabHandler': function(anEvent) {
+		this.selectTab(anEvent.src().id);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleSelectTabNotification': function(aNotificationEvent) {
+		var parameters;
+		var splittedParamters;
+		var	targetTabPanel;
+
+		parameters = aNotificationEvent.parameters();
+		splittedParamters = parameters.split('.');
+		targetTabPanel = splittedParamters[0];
+		if (targetTabPanel == this.name()) {
+			this.selectTab(splittedParamters[1])
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
diff --git a/frontend/beta/js/Clipperz/PM/Components/TextFormField.js b/frontend/beta/js/Clipperz/PM/Components/TextFormField.js
new file mode 100644
index 0000000..cb4f06a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/TextFormField.js
@@ -0,0 +1,310 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+
+Clipperz.PM.Components.TextFormField = function(anElement, args) {
+	args = args || {};
+
+//MochiKit.Logging.logDebug(">>> new TextFormField");
+	Clipperz.PM.Components.TextFormField.superclass.constructor.call(this, args);
+	
+	this._element = anElement;
+	this._editMode = args.editMode || 'VIEW';
+	this._value = args.value || "";
+	this._inputElement = null;
+	this._wrapper = null;
+	this._multiline = args.multiline || false;
+	
+//	this.multiline = args.multiline || true;
+//	this.editing = true;
+//	this.completeOnBlur = true;
+//	this.autoSizeTask = new YAHOO.ext.util.DelayedTask(this.autoSize, this);
+//	this.textSizeEl = Clipperz.YUI.DomHelper.append(document.body, {
+//		tag: 'div',
+//		cls: 'yinline-editor-sizer ' + (this.cls || '')
+//	});
+	
+	this.render();
+//MochiKit.Logging.logDebug("<<< new TextFormField");
+	
+	return this;
+};
+
+YAHOO.extendX(Clipperz.PM.Components.TextFormField, Clipperz.PM.Components.BaseComponent, {
+	
+	'toString': function() {
+		return "Clipperz.PM.Components.TextFormField";
+	},
+	
+	//-----------------------------------------------------
+
+	'value': function() {
+		if (this.inputElement() != null) {
+			this._value = this.inputElement().dom.value;
+		}
+		
+		return this._value;
+//		return this.inlineEditor().getValue();
+	},
+	
+	'setValue': function(aValue) {
+		this._value = aValue;
+//		this.getElement('viewComponent_Content').update(aValue);
+//		this.inlineEditor().setValue(aValue);
+	},
+
+	//-----------------------------------------------------
+
+	'multiline': function() {
+		return this._multiline;
+	},
+	
+	//-----------------------------------------------------
+
+	'editMode': function() {
+		return this._editMode;
+	},
+	
+	'setEditMode': function(aValue) {
+		this._editMode = aValue;
+	},
+
+	//-----------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+
+	//-----------------------------------------------------
+
+	'on': function(anEventName, anHandler, aScope, shouldOverride) {
+//MochiKit.Logging.logDebug(">>> TextFormField.on - inputElement: " + this.inputElement());
+		return this.inputElement().on(anEventName, anHandler, aScope, shouldOverride);
+//MochiKit.Logging.logDebug("<<< TextFormField.on - inputElement: " + this.inputElement());
+	},
+
+	//-----------------------------------------------------
+	
+	'wrapper': function() {
+		return this._wrapper;
+	},
+	
+	//-----------------------------------------------------
+
+	'render': function() {
+		var editModeConfiguration;
+		var viewModeConfiguration;
+
+		editModeConfiguration = {tag:'div', id:this.getId('editComponent'), children:[]};
+		if (this.multiline() == false) {
+			editModeConfiguration.children.push({tag:'input', type:'text', id:this.getId('editComponent_input'), value:"this.value(1)"});
+		} else {
+			editModeConfiguration.children.push({tag:'textarea', id:this.getId('editComponent_input'), html:"this.value(2)"});
+		}
+
+		viewModeConfiguration = {tag:'div', id:this.getId('viewComponent'), /*style:'border: 1px solid blue;',*/ children:[
+			{tag:'span', id:this.getId('viewComponent_Content'), html:this.value()}
+		]}
+
+//MochiKit.Logging.logDebug(">>> TextFormField.render");
+		this._wrapper = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', id:this.getId('wrapper'), children:[
+			{tag:'div', id:this.getId('editModeBox'), children:[editModeConfiguration]},
+			{tag:'div', id:this.getId('viewModeBox'), children:[viewModeConfiguration]}
+		]}, true);
+		
+		this.getElement('editModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('viewModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		this.getElement('editComponent_input').dom.value = this.value();
+		this.setInputElement(this.getElement('editComponent_input'));
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< TextFormField.render");
+	},
+
+	//-----------------------------------------------------
+
+	'update': function(args) {
+		args = args || {};
+		
+//MochiKit.Logging.logDebug(">>> TextFormField.update");
+		if (typeof(args.value) != 'undefined') {
+			this.setValue(args.value);
+		}
+		if (typeof(args.editMode) != 'undefined') {
+			this.setEditMode(args.editMode)
+		}
+		
+		if (this.editMode() == 'VIEW') {
+			this.updateViewMode();
+		} else if (this.editMode() == 'EDIT') {
+			this.updateEditMode();
+		} else {
+			//	?????
+		}
+//MochiKit.Logging.logDebug("<<< TextFormField.update");
+	},
+
+	//-----------------------------------------------------
+
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> TextFormField.updateEditMode");
+		this.getElement('viewModeBox').hide();
+		this.getElement('editModeBox').show();
+
+		if (this.multiline() == false) {
+			this.getElement('editComponent_input').dom.value = this.value();
+		} else {
+			this.getElement('editComponent_input').update(Clipperz.Base.sanitizeString(this.value()));
+		}
+//MochiKit.Logging.logDebug("<<< TextFormField.updateEditMode");
+	},
+
+	//-----------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> TextFormField.updateViewMode");
+		this.getElement('editModeBox').hide();
+		this.getElement('viewModeBox').show();
+
+		this.getElement('viewComponent_Content').update(Clipperz.Base.sanitizeString(this.value()));
+//MochiKit.Logging.logDebug("<<< TextFormField.updateViewMode");
+	},
+    
+	//#####################################################
+	//#####################################################
+	//#####################################################
+	//#####################################################
+/*	
+	'onEnter': function(k, e) {
+MochiKit.Logging.logDebug(">>> TextFormField.onEnter");
+		if (this.multiline && (e.ctrlKey || e.shiftKey)) {
+			return;
+		} else {
+			this.completeEdit();
+			e.stopEvent();
+		}
+MochiKit.Logging.logDebug("<<< TextFormField.onEnter");
+	},
+
+	//-----------------------------------------------------
+
+	'onEsc': function() {
+MochiKit.Logging.logDebug(">>> TextFormField.onEsc");
+//		if (this.ignoreNoChange) {
+//			this.revert(true);
+//		} else {
+			this.revert(false);
+			this.completeEdit();
+//		}
+MochiKit.Logging.logDebug("<<< TextFormField.onEsc");
+	},
+
+	//-----------------------------------------------------
+
+	onBlur : function(){
+MochiKit.Logging.logDebug(">>> TextFormField.onBlur");
+		if (this.editing && this.completeOnBlur !== false) {
+			this.completeEdit();
+		}
+MochiKit.Logging.logDebug("<<< TextFormField.onBlur");
+	},
+
+	//-----------------------------------------------------
+
+	'onKeyUp': function(e) {
+		var k = e.getKey();
+		if (this.editing && (k < 33 || k > 40) && k != 27) {
+			this.autoSizeTask.delay(50);
+		}
+	},
+
+	//-----------------------------------------------------
+
+	'autoSize': function() {
+		var el = this.inputElement();
+		var wrap = this.getElement('editComponent');
+		var v = el.dom.value;
+		var ts = this.textSizeEl;
+
+		if (v.length < 1) {
+			ts.innerHTML = "&#160;&#160;";
+		} else {
+			v = v.replace(/[<> ]/g, '&#160;');
+			if (this.multiline) {
+				v = v.replace(/\n/g, '<br />&#160;');
+			}
+			ts.innerHTML = v;
+		}
+		
+		var ww = wrap.dom.offsetWidth;
+		var wh = wrap.dom.offsetHeight;
+		var w = ts.offsetWidth;
+		var h = ts.offsetHeight;
+		// lots of magic numbers in this block - wtf?
+		// the logic is to prevent the scrollbars from flashing
+		// in firefox. Updates the right element first
+		// so there's never overflow.
+		if (ww > w+4) {
+			el.setWidth(w+4);
+			wrap.setWidth(w+8);
+		} else {
+			wrap.setWidth(w+8);
+			el.setWidth(w+4);
+		}
+		if (wh > h+4) {
+			el.setHeight(h);
+			wrap.setHeight(h+4);
+		} else {
+			wrap.setHeight(h+4);
+			el.setHeight(h);
+		}
+	},
+
+	//-----------------------------------------------------
+
+	'completeEdit': function() {
+MochiKit.Logging.logDebug(">>> TextFormField.completeEdit");
+		
+	},
+
+	'revert': function() {
+MochiKit.Logging.logDebug(">>> TextFormField.revert");
+		
+	},
+*/	
+	//-----------------------------------------------------
+	__syntaxFix__: '__syntaxFix__'
+});