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) {
+                        varresult;
+                
+                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;
+                        varlayout;
+                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) {
+                                vardirectLoginElement;
+                                varfaviconImageElementID;
+                        
+                        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) {
+                        vardirectLoginReference;
+//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) {
+                        vardeferredResult;
+                        varnewWindow;
+                                
+//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() {
+                        varshouldAutoLock;
+                
+                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;
+                        varlayout;
+                
+                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
+                        varpassphrase;
+
+//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() {
+                        varfieldsHeaderCells;
+                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() {
+                        varnotesSelectorCheckboxCells;
+                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() {
+                        vartitleSelectorCheckboxCells;
+                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;
+
+/*
+        0Is Template
+        1Title
+        2Category
+
+        3Field 1 Label
+        4Field 1 Value
+        5Field 1 Hidden
+
+        6Field 2 Label
+        7Field 2 Value
+        8Field 2 Hidden
+
+        9Field 3 Label
+        10Field 3 Value
+        11Field 3 Hidden
+
+        12Field 4 Label
+        13Field 4 Value
+        14Field 4 Hidden
+
+        15Field 5 Label
+        16Field 5 Value
+        17Field 5 Hidden
+
+        18Field 6 Label
+        19Field 6 Value
+        20Field 6 Hidden
+
+        21Field 7 Label
+        22Field 7 Value
+        23Field 7 Hidden
+
+        24Field 8 Label
+        25Field 8 Value
+        26Field 8 Hidden
+
+        27Field 9 Label
+        28Field 9 Value
+        29Field 9 Hidden
+
+        30Field 10 Label
+        31Field 10 Value
+        32Field 10 Hidden
+
+        33Note
+*/
+        },
+
+
+        //-------------------------------------------------------------------------
+        __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) {
+                        varmessageBoxConfiguration;
+                
+                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) {
+                                        vartbodyElement;
+                                        varoneTimePasswordReferenceKeys;
+                                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;
+                        varresult;
+
+                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;
+                        varchangePasswordButton;
+                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) {
+                                varusername;
+                                varoldPassphrase;
+                        var newPassphrase;
+                        var renewPassphrase;
+                        var safetyCheck;
+                                varareThereAnyErrors;
+                        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) {
+                                varusername;
+                                varpassphrase;
+                        var safetyCheck;
+                                varareThereAnyErrors;
+                        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() {
+                        varuserSelectedLanguage;
+
+                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 {
+                                vardeferredResult;
+                        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;
+                                vardeferredResult;
+                        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) {
+        //              vardeferredResult;
+                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;
+                                vardeferredResult;
+                        var textareaWrapper;
+                                vartextarea;
+                        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;
+                        varlayout;
+                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) {
+                        varfield;
+                        varfieldValue;
+                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 {
+                                        varoneTimePasswordValue;
+                                
+                                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) {
+                                        varpassphrase;
+                        
+                                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
+                        varpassphrase;
+                        varrePassphrase;
+                        varsafetyCheck;
+                        vartermsOfServiceCheck;
+        //              varinvitationCode;
+                
+                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) {
+                        varerrorMessageActor;
+                
+                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;
+                        varalertDialog;
+                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;
+                                varloginFormActor;
+                        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 {
+                                varerrorMessageActor;
+                        
+                        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;
+                                varloginFormActor;
+                        var registrationFormActor;
+                        var usernameFieldActor;
+                                varerrorMessageActor;
+                        
+                        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;
+                                varalertDialog;
+                        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;
+                        varlayout;
+                        
+                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 ) {
+                                varrecordReference;
+                                varrecords;
+                        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) {
+                                varrecordElement;
+                        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) {
+                                vardirectLoginElement;
+                                varfaviconImageElementID;
+                        
+                        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) {
+                        vardirectLoginReference;
+//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) {
+                        vardeferredResult;
+                        varnewWindow;
+                                
+//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;
+                        varcallback;
+                
+                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) {
+                        varrandomBytes;
+                        varrandomValue;
+                var charset;
+                var charsetBitSize;
+                var stringValue;
+                        varblockIndex;
+
+//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");
+                        varmaxExtent;
+                        varentropy;
+                
+                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) {
+                        varrandomBytes;
+                        varrandomValue;
+                var charset;
+                var charsetBitSize;
+                var stringValue;
+                        varblockIndex;
+
+//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) {
+                        vardeferredResult;
+                
+                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() {
+                        vartemplateListElement;
+                        vartemplates;
+                
+                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() {
+                        varselectedTemplateKey;
+                        varnewRecord;
+                
+                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 {
+                                varfieldsConfigurations;
+
+                        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() {
+                        varresult;
+                var option;
+                        varrecordFieldKey;
+                        varrecordFields;
+
+//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() {
+                        varselectElementBox;
+
+//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");
+                        {
+                                        varbindingKey;
+                                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) {
+                                                varradio;
+                                        
+//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() {
+                        varnewDirectLogin;
+                        varconfiguration;
+
+//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() {
+                        varresult;
+
+                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() {
+                        varnewTextFormField;
+                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() {
+                        varwidth;
+                        varelement;
+                
+                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() {
+                        varwidth;
+
+                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()) {
+                                varwidth;
+                        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()) {
+                                varwidth;
+
+                        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() {
+                        varoptions;
+                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':
+                                                varurlLocation;
+                                        
+                                        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') {
+                                        varscrambledInputElement;
+
+                                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() {
+                        varcolumns;
+                
+                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) {
+                        varresult;
+                
+//MochiKit.Logging.logDebug(">>> MainComponent.setRecord")
+                if (this._record != aValue) {
+                                vardeferredResult;
+                        
+                        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) {
+                        varrecordField;
+                
+        //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() {
+                        varnewField;
+                
+                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() {
+                        varresult;
+
+                if (this.shouldShowLoginInfo() == true) {
+        //               && (typeof(this.user().loginInfo()['latest']) != 'undefined')) {
+                                varimageExtension;
+                        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() {
+                        vartabId;
+                
+//MochiKit.Logging.logDebug(">>> TabPanelController.setUp - config: " + Clipperz.Base.serializeJSON(this.config()));
+                for (tabId in this.config()) {
+                                vartabElement;
+                                varpanelElement;
+
+//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;
+                        vartargetTabPanel;
+
+                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__'
+});