First version of the newly restructured repository

17 files changed, 3729 insertions, 0 deletions

diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractComponent.js
new file mode 100644
index 0000000..840d555
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractComponent.js
@@ -0,0 +1,105 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.AbstractComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.AbstractComponent.superclass.constructor.call(this, args);
+
+	this._element = anElement;
+	this._mainComponent = args.mainComponent;
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.AbstractComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.AbstractComponent";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'record': function() {
+		return this.mainComponent().record();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'editMode': function() {
+		return this.mainComponent().editMode();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+		this.update();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'update': function(anEvent) {
+		if (this.editMode() == 'EDIT') {
+			this.updateEditMode();
+		} else if (this.editMode() == 'VIEW') {
+			this.updateViewMode();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {},
+	'updateEditMode': function() {},
+	'synchronizeComponentValues': function() {},
+	
+	//-------------------------------------------------------------------------
+
+	'destroy': function() {
+		this.element().remove();
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractFieldSubComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractFieldSubComponent.js
new file mode 100644
index 0000000..7596184
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/AbstractFieldSubComponent.js
@@ -0,0 +1,77 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent.superclass.constructor.call(this, anElement, args);
+
+	this._fieldComponent = args.fieldComponent || null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'fieldComponent': function() {
+		return this._fieldComponent;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'mainComponent': function() {
+		return this.fieldComponent().mainComponent();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'recordField': function() {
+		return this.fieldComponent().recordField();
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/CreationWizard.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/CreationWizard.js
new file mode 100644
index 0000000..a92285f
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/CreationWizard.js
@@ -0,0 +1,317 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.CreationWizard = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.CreationWizard.superclass.constructor.call(this, anElement, args);
+
+	this._mainComponent = args.mainComponent;
+	this._previouslySelectedRecord = args.previouslySelectedRecord;
+//MochiKit.Logging.logDebug("--- new CreationWizard - previouslySelectedRecord: " + args.previouslySelectedRecord);
+	this._createButton_header = null;
+	this._createButton_footer = null;
+
+	this._cancelButton_header = null;
+	this._cancelButton_footer = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.CreationWizard, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.CreationWizard component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'previouslySelectedRecord': function() {
+		return this._previouslySelectedRecord;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	templateListElement;
+		var	templates;
+		
+		this.element().update("");
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'recordDataFORM', id:this.getId('form'), children:[
+				{tag:'div', id:'recordDetailDataBox', cls:'recordDetailDataBox', children:[
+					{tag:'div', id:this.getId('wizardBox'), cls:'recordCreationWizard', children:[
+						{tag:'div', id:this.getId('recordCreationWizardTitleBox'), cls:'recordCreationWizardTitleBox', htmlString:Clipperz.PM.Strings['newRecordWizardTitleBox']},
+						{tag:'ul', id:this.getId('templateList'), cls:'radioList'}
+					]}
+				]}
+			]}
+		);
+
+		Clipperz.YUI.DomHelper.append(this.getDom('recordCreationWizardTitleBox'), {tag:'div', cls:'newRecordWizardHeader', children:[
+			{tag:'table', width:'100%', cellpadding:'5', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', width:'49%', align:'right', children:[
+							{tag:'div', id:this.getId('cancelButton_header')}
+						]},
+						{tag:'td', width:'10', html:'&nbsp;'},
+						{tag:'td', width:'49%', align:'left', children:[
+							{tag:'div', id:this.getId('createButton_header')}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		templateListElement = this.getElement('templateList');
+		templates = Clipperz.PM.Strings['recordTemplates'];
+		MochiKit.Iter.forEach(MochiKit.Base.keys(templates), MochiKit.Base.bind(function(aTemplateKey) {
+			Clipperz.YUI.DomHelper.append(templateListElement.dom, {tag:'li', children:[
+				{tag:'table', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', valign:'top', children:[
+								{tag:'input', id:this.getId(aTemplateKey+"_radio"), type:'radio', name:'recordTemplate', value:"aTemplateKey"}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'h4', id:this.getId(aTemplateKey+"_title"), html:templates[aTemplateKey]['title']},
+								{tag:'div', cls:'templateDescription', htmlString:templates[aTemplateKey]['description']}
+							]}
+						]}
+					]}
+				]}
+			]});
+			this.getElement(aTemplateKey+"_radio").dom.value = aTemplateKey;
+			MochiKit.Signal.connect(this.getDom(aTemplateKey+"_title"), 'onclick', MochiKit.Base.partial(function(aRadioButton) {aRadioButton.click();}, this.getDom(aTemplateKey+"_radio")));
+		}, this));
+
+		Clipperz.YUI.DomHelper.append(templateListElement.dom, {tag:'li', children:[
+			{tag:'table', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', valign:'top', children:[
+							{tag:'input', type:'radio', name:'recordTemplate', id:this.getId('bookmarkletRadioButton'), value:'BookmarkletConfigurationTemplate'}
+						]},
+						{tag:'td', valign:'top', children:[
+							{tag:'h4', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationTitle']},
+							{tag:'div', cls:'templateDescription', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationDescription']},
+							{tag:'div', cls:'bookmarkletConfiguration', children:[
+//								{tag:'span', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationLabel']},
+								{tag:'div', htmlString:Clipperz.PM.Strings['recordDetailNewDirectLoginDescription']},
+								{tag:'textarea', id:this.getId('bookmarkletConfiguration')}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		Clipperz.YUI.DomHelper.append(this.getDom('wizardBox'), {tag:'div', cls:'newRecordWizardFooter', children:[
+			{tag:'table', width:'100%', cellpadding:'5', children:[
+				{tag:'tbody', children:[
+					{tag:'tr', children:[
+						{tag:'td', width:'49%', align:'right', children:[
+							{tag:'div', id:this.getId('cancelButton_footer')}
+						]},
+						{tag:'td', width:'10', html:'&nbsp;'},
+						{tag:'td', width:'49%', align:'left', children:[
+							{tag:'div', id:this.getId('createButton_footer')}
+						]}
+					]}
+				]}
+			]}
+		]});
+		
+		this.setCreateButton_header(new YAHOO.ext.Button(this.getDom('createButton_header'), {text:Clipperz.PM.Strings['newRecordWizardCreateButtonLabel'], handler:this.createRecord, scope:this}));
+		this.setCreateButton_footer(new YAHOO.ext.Button(this.getDom('createButton_footer'), {text:Clipperz.PM.Strings['newRecordWizardCreateButtonLabel'], handler:this.createRecord, scope:this}));
+
+		this.setCancelButton_header(new YAHOO.ext.Button(this.getDom('cancelButton_header'), {text:Clipperz.PM.Strings['newRecordWizardCancelButtonLabel'], handler:this.exitWizard, scope:this}));
+		this.setCancelButton_footer(new YAHOO.ext.Button(this.getDom('cancelButton_footer'), {text:Clipperz.PM.Strings['newRecordWizardCancelButtonLabel'], handler:this.exitWizard, scope:this}));
+
+		this.createButton_header().disable();
+		this.createButton_footer().disable();
+		
+		MochiKit.Iter.forEach(this.getElement('form').getChildrenByTagName('input'), MochiKit.Base.bind(function(anInput) {
+//			MochiKit.Signal.connect(anInput.dom, 'onchange', this, 'enableCreateButton');
+			MochiKit.Signal.connect(anInput.dom, 'onclick', this, 'enableCreateButton');	//	for Safari
+		},this));
+
+		MochiKit.Signal.connect(this.getDom('bookmarkletConfiguration'), 'onkeyup', this, 'enableCreateButton');
+		MochiKit.Signal.connect(this.getDom('bookmarkletConfiguration'), 'onkeydown', this, 'enableCreateButton');	//	for Safari
+	},
+
+	//-------------------------------------------------------------------------
+
+	'createButton_header': function() {
+		return this._createButton_header;
+	},
+	
+	'setCreateButton_header': function(aValue) {
+		this._createButton_header = aValue;
+	},
+
+	//.........................................................................
+
+	'createButton_footer': function() {
+		return this._createButton_footer;
+	},
+	
+	'setCreateButton_footer': function(aValue) {
+		this._createButton_footer = aValue;
+	},
+
+
+	//-------------------------------------------------------------------------
+
+	'cancelButton_header': function() {
+		return this._cancelButton_header;
+	},
+	
+	'setCancelButton_header': function(aValue) {
+		this._cancelButton_header = aValue;
+	},
+
+	//.........................................................................
+	
+	'cancelButton_footer': function() {
+		return this._cancelButton_footer;
+	},
+	
+	'setCancelButton_footer': function(aValue) {
+		this._cancelButton_footer = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'enableCreateButton': function(anEvent, skipKeyDownCheck) {
+//MochiKit.Logging.logDebug(">>> CreationWizard.enableCreateButton (" + anEvent.type() + ")");
+		if ((anEvent.type() == "keydown") && (skipKeyDownCheck != true)) {
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - handling 'keydown' event with a postponed execution of the check");
+			MochiKit.Async.callLater(0.3, MochiKit.Base.method(this, 'enableCreateButton', anEvent, true));
+		} else {
+			var shouldEnableCreateButton;
+			var isBookmarkletConfigurationEmpty;
+
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - common execution");
+
+			shouldEnableCreateButton = true;
+			
+			isBookmarkletConfigurationEmpty = !/[^ \n]/.test(this.getDom('bookmarkletConfiguration').value);
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - isBookmarkletConfigurationEmpty: " + isBookmarkletConfigurationEmpty);
+
+			if ((anEvent.src() == this.getDom('bookmarkletConfiguration')) && !isBookmarkletConfigurationEmpty) {
+				this.getDom('bookmarkletRadioButton').checked = true;
+			}
+
+			if ((this.getDom('bookmarkletRadioButton').checked) && isBookmarkletConfigurationEmpty) {
+				shouldEnableCreateButton = false;
+			}
+		
+			if (shouldEnableCreateButton) {
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - enabling button");
+				this.createButton_header().enable();
+				this.createButton_footer().enable();
+			} else {
+//MochiKit.Logging.logDebug("--- CreationWizard.enableCreateButton - disabling button");
+				this.createButton_header().disable();
+				this.createButton_footer().disable();
+			}
+		}
+//MochiKit.Logging.logDebug("<<< CreationWizard.enableCreateButton");
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'createRecord': function() {
+		var	selectedTemplateKey;
+		var	newRecord;
+		
+		selectedTemplateKey = MochiKit.Base.filter(function(aCheckBoxElement) {
+			return aCheckBoxElement.dom.checked;
+		},this.getElement('form').getChildrenByTagName('input'))[0].dom.value;
+
+//MochiKit.Logging.logDebug("--- CreationWizard.createRecord - selectedTemplateKey: " + selectedTemplateKey);
+		if (selectedTemplateKey == 'BookmarkletConfigurationTemplate') {
+			var bookmarkletConfiguration;
+
+			this.mainComponent().exitModalView();
+			bookmarkletConfiguration = Clipperz.PM.BookmarkletProcessor.checkBookmarkletConfiguration(this.getDom('bookmarkletConfiguration').value, this.getDom('createButton'), MochiKit.Base.method(this.mainComponent(), 'enterModalView'));
+			this.mainComponent().enterModalView();
+			newRecord = Clipperz.PM.BookmarkletProcessor.createRecordFromBookmarkletConfiguration(this.mainComponent().user(), bookmarkletConfiguration);
+		} else {
+			var	fieldsConfigurations;
+
+			newRecord = this.mainComponent().user().addNewRecord();
+			newRecord.setLabel(Clipperz.PM.Strings['recordTemplates'][selectedTemplateKey]['title']);
+			
+			fieldsConfigurations = Clipperz.PM.Strings['recordTemplates'][selectedTemplateKey]['fields'];
+		
+			MochiKit.Iter.forEach(fieldsConfigurations, MochiKit.Base.partial(function(aRecord, aFieldConfiguration) {
+				var newField;
+			
+				newField = new Clipperz.PM.DataModel.RecordField({recordVersion:aRecord.currentVersion()});
+				newField.setLabel(aFieldConfiguration['label']);
+				newField.setType(aFieldConfiguration['type']);
+				aRecord.currentVersion().addField(newField);
+			}, newRecord));
+		}
+		
+		this.mainComponent().exitWizard(newRecord, true);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'exitWizard': function() {
+//MochiKit.Logging.logDebug(">>> CreationWizard.exitWizard - " + this.previouslySelectedRecord());
+		this.mainComponent().exitWizard(this.previouslySelectedRecord());
+//MochiKit.Logging.logDebug("<<< CreationWizard.exitWizard");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'mainComponent': function() {
+		return this._mainComponent;
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginBindingComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginBindingComponent.js
new file mode 100644
index 0000000..6171a4e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginBindingComponent.js
@@ -0,0 +1,174 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new DirectLoginBindingComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent.superclass.constructor.call(this, anElement, args);
+
+	this._directLoginBinding = args.directLoginBinding || null;
+	this.render();
+
+	Clipperz.NotificationCenter.register(this.record(), 'addNewRecordField',	this, 'syncAndUpdateEditMode');
+	Clipperz.NotificationCenter.register(this.record(), 'removedField',		this, 'syncAndUpdateEditMode');
+	Clipperz.NotificationCenter.register(this.record(), 'updatedFieldLabel',	this, 'syncAndUpdateEditMode');
+//MochiKit.Logging.logDebug("<<< new DirectLoginBindingComponent");
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'directLoginBinding': function() {
+		return this._directLoginBinding;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', style:'font-weight:bold;', html:this.directLoginBinding().key()})
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', html:this.directLoginBinding().value()})
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.render");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginBindingLabelTD', children:[
+			{tag:'span', html:this.directLoginBinding().key()}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginBindingComponent.render - 1");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginBindingValueTD', children:[
+			{tag:'div', id:this.getId('editModeBox'), children:[
+				{tag:'select', id:this.getId('select'), children:this.recordFieldOptions()}
+			]},
+			{tag:'div', id:this.getId('viewModeBox'), children:[
+				{tag:'span', id:this.getId('viewValue'), html:""}
+			]}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginBindingComponent.render - 2");
+		this.getElement('editModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('viewModeBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		this.update();
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'recordFieldOptions': function() {
+		var	result;
+		var option;
+		var	recordFieldKey;
+		var	recordFields;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.recordFieldOptions");
+		recordFields = this.directLoginBinding().directLogin().record().currentVersion().fields();
+		result = [];
+		option = {tag:'option', value:null, html:'---'};
+		result.push(option);
+		for (recordFieldKey in recordFields) {
+//	TODO: remove the value: field and replace it with element.dom.value = <some value>
+			option = {tag:'option', value:recordFieldKey, html:recordFields[recordFieldKey].label()}
+			if (recordFieldKey == this.directLoginBinding().fieldKey()) {
+				option['selected'] = true;
+			}
+			result.push(option);
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.recordFieldOptions");
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'syncAndUpdateEditMode': function() {
+		this.synchronizeComponentValues();
+		this.updateEditMode();
+	},
+	
+	'updateEditMode': function() {
+		var	selectElementBox;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.updateEditMode");
+		this.getElement('viewModeBox').hide();
+
+		selectElementBox = this.getElement('editModeBox');
+		selectElementBox.update("");
+
+		Clipperz.YUI.DomHelper.append(selectElementBox.dom, {tag:'select', id:this.getId('select'), children:this.recordFieldOptions()});
+
+/*
+		selectElement = this.getElement('select');
+		
+		selectElement.update("");
+		MochiKit.Iter.forEach(this.recordFieldOptions(), function(anOption) {
+			Clipperz.YUI.DomHelper.append(selectElement.dom, anOption);
+		});
+*/
+
+
+		this.getElement('editModeBox').show();
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.updateEditMode");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.updateViewMode");
+		this.getElement('editModeBox').hide();
+		this.getElement('viewModeBox').show();
+
+		this.getElement('viewValue').update(this.directLoginBinding().field().label());
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginBindingComponent.synchronizeComponentValues")
+//MochiKit.Logging.logDebug("--- DirectLoginBindingComponent.synchronizeComponentValues - 1 - " + this.getId('select'));
+		this.directLoginBinding().setFieldKey(this.getDom('select').value);
+//MochiKit.Logging.logDebug("<<< DirectLoginBindingComponent.synchronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginComponent.js
new file mode 100644
index 0000000..7638f00
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginComponent.js
@@ -0,0 +1,362 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.DirectLoginComponent.superclass.constructor.call(this, anElement, args);
+
+	this._directLogin = args.directLogin || null;
+//	this._titleElement = null;
+	this._structureElement = null;
+	this._removeButton = null;
+	this._directLoginBindingComponents = null;
+	this._collapser = null;
+	
+	this.mainComponent().addEditComponent(this);
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'directLogin': function() {
+		return this._directLogin;
+	},
+
+	'directLoginBindingComponents': function() {
+		return this._directLoginBindingComponents;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'removeDirectLogin': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.removeDirectLogin");
+		this.mainComponent().synchronizeComponentValues();
+		this.directLogin().remove();
+		this.mainComponent().removeEditComponent(this);
+		this.mainComponent().render();
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.removeDirectLogin");
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'formDataValue': function() {
+		return Clipperz.Base.serializeJSON(this.directLogin().formData());
+	},
+	
+	'setFormDataValue': function(aValue) {
+		
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'removeButton': function() {
+		return this._removeButton;
+	},
+	
+	'setRemoveButton': function(aValue) {
+		this._removeButton = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'titleElement': function() {
+		return this._titleElement;
+	},
+	
+	'setTitleElement': function(aValue) {
+		this._titleElement = aValue;
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'structureElement': function() {
+		return this._structureElement;
+	},
+	
+	'setStructureElement': function(aValue) {
+		this._structureElement = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.render");
+		try {
+			this.element().update("");
+			Clipperz.YUI.DomHelper.append(this.element().dom,
+				{tag:'li', children:[
+					{tag:'table', width:'100%', border:'0', cellpadding:'0', cellspacing:'0', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', rowspan:'2', width:'30', valign:'top', html:'&#160', children:[
+									{tag:'div', id:this.getId('removeDirectLogin'), children:[
+										{tag:'div', id:this.getId('removeDirectLoginButton')}
+									]},
+									{tag:'div', id:this.getId('collapseLink'), cls:'directLoginCollapseLink'}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'table', width:'100%', border:'0', cellpadding:'0', cellspacing:'0', children:[
+										{tag:'tbody', children:[
+											{tag:'tr', children:[
+												{tag:'td', width:'20', valign:'top', children:[
+													{tag:'a', href:'#', id:this.getId('directLogin'), children:[
+														{tag:'img', id:this.getId('faviconImage'), width:'16', height:'16', src:this.directLogin().fixedFavicon()}
+													]}
+												]},
+												{tag:'td', valign:'top', children:[
+													{tag:'div', cls:'directLoginDetailTitle', children:[
+														{tag:'div', id:this.getId('titleViewBox'), children:[
+															{tag:'a', href:'#', id:this.getId('titleLink')}
+														]},
+														{tag:'div', id:this.getId('titleEditBox'), children:[
+															{tag:'input', type:'text', id:this.getId('titleInput')}
+														]}
+													]}
+												]}
+											]}
+										]}
+									]}
+								]}
+							]},
+							{tag:'tr', children:[
+								{tag:'td', /*colspan:'2',*/ children:[
+									{tag:'div', id:this.getId('details'), children:[
+										{tag:'table', cls:'directLoginBindings', border:'0', cellpadding:'0', cellspacing:'0', children:[
+											{tag:'tbody', id:this.getId('tbodyBindings'), children:[]}
+										]}
+									]}
+								]}
+							]}
+						]}
+					]}
+				]}
+			);
+
+			MochiKit.Signal.connect(this.getId('faviconImage'), 'onload', this, 'handleLoadedFaviconImage');
+			MochiKit.Signal.connect(this.getId('faviconImage'), 'onerror', this.directLogin(), 'handleMissingFaviconImage');
+			MochiKit.Signal.connect(this.getId('faviconImage'), 'onabort', this.directLogin(), 'handleMissingFaviconImage');
+
+			this.getElement('removeDirectLogin').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 1");
+			this.getElement('collapseLink').addClassOnOver('hover');
+			this._collapser = new Clipperz.YUI.Collapser(this.getElement('collapseLink'), this.getElement('details'), true);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 2");
+			MochiKit.Signal.connect(this.getId('directLogin'), 'onclick', this, 'runDirectLogin');
+//			this.getElement('directLogin').on('click', this.runDirectLogin, this, false);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 3");
+//			this.setTitleElement(new Clipperz.PM.Components.TextFormField(this.getElement('title'), {
+//														editMode:this.editMode(),
+//														value:this.directLogin().label()
+//			}));
+			this.getElement('titleViewBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+			this.getElement('titleEditBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+//-			this.getElement('titleLink').on('click', this.runDirectLogin, this, false);
+			MochiKit.Signal.connect(this.getId('titleLink'), 'onclick', this, 'runDirectLogin');
+
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 4");
+//-			this.setStructureElement(new Clipperz.PM.Components.TextFormField(this.getElement('formStructure'), {
+//-														editMode:this.editMode(),
+//-														value:this.formDataValue(), multiline:true
+//-			}));
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 5");
+			{
+				var	bindingKey;
+				var valueName;
+				var inputsRequiringAdditionalValues;
+				var bindingsElement;
+				var i,c;
+			
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 6");
+				this._directLoginBindingComponents = [];
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 7");
+				bindingsElement = this.getElement('tbodyBindings');
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 8");
+				for (bindingKey in this.directLogin().bindings()) {
+					try {
+						var directLoginBindingElement;
+						var directLoginBindingComponent;
+				
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 9");
+						directLoginBindingElement = Clipperz.YUI.DomHelper.append(bindingsElement.dom, {tag:'tr'}, true);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 10");
+						directLoginBindingComponent =	new Clipperz.PM.Components.RecordDetail.DirectLoginBindingComponent(directLoginBindingElement, {
+																mainComponent:this,
+																directLoginBinding:this.directLogin().bindings()[bindingKey]
+															});
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 11");
+						this._directLoginBindingComponents.push(directLoginBindingComponent);
+					} catch (e) {
+						MochiKit.Logging.logError("Error while rendering a DirectLoginBindingComponent - " + e);
+					}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 12");
+				}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13");
+
+				inputsRequiringAdditionalValues = this.directLogin().inputsRequiringAdditionalValues();
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.1");
+				for (valueName in inputsRequiringAdditionalValues) {
+//-					Clipperz.YUI.DomHelper.append(bindingsElement.dom, {tag:'tr', children:[
+//-						{tag:'td', html:valueName},
+//-						{tag:'td', children:inputsRequiringAdditionalValues[valueName].inputElementConfiguration()}
+//-					]}, true)
+					var directLoginValueElement;
+					var directLoginValueComponent;
+				
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.2");
+					directLoginValueElement = Clipperz.YUI.DomHelper.append(bindingsElement.dom, {tag:'tr'}, true);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.3");
+					directLoginValueComponent =	new Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent(directLoginValueElement, {
+															mainComponent:this,
+															directLoginInputValue:inputsRequiringAdditionalValues[valueName]
+														});
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.4");
+					this._directLoginBindingComponents.push(directLoginValueComponent);
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.5");
+				}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 13.6");
+			}
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 14");
+			this.setRemoveButton(new YAHOO.ext.Button(this.getDom('removeDirectLoginButton'), {text:Clipperz.PM.Strings['recordDetailDeleteDirectLoginButtonLabel'], handler:this.removeDirectLogin, scope:this}));
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.render - 15");
+			this.update();
+		} catch (e) {
+			MochiKit.Logging.logError("Error while rendering a DirectLoginComponent - " + e);
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'collapser': function() {
+		return this._collapser;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'handleLoadedFaviconImage': function(anEvent) {
+		MochiKit.Signal.disconnectAll(anEvent.src())
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'update': function() {
+		var i,c;
+		var bindingComponents;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.update");
+		bindingComponents = this.directLoginBindingComponents();
+		c = bindingComponents.length;
+		for (i=0; i<c; i++) {
+			bindingComponents[i].update();
+		}
+		
+    	Clipperz.PM.Components.RecordDetail.DirectLoginComponent.superclass.update.call(this);
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.update");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateEditMode': function() {
+//		this.element().update("");
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', style:'border:4px solid red; padding:10px;', children:[
+//			{tag:'div', style:'font-weight:bold;', html:this.directLogin().label()},
+//			{tag:'div', style:'border:1px solid #aaaaaa;', html:Clipperz.Base.serializeJSON(this.directLogin().formData())},
+//			{tag:'div', style:'border:1px solid #aaaaaa;', html:Clipperz.Base.serializeJSON(this.directLogin().bindings())}
+//		]});
+		
+		this.getElement('titleEditBox').show();
+		this.getElement('titleViewBox').hide();
+		
+		this.getDom('titleInput').value = this.directLogin().label();
+		
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.updateEditMode");
+		this.collapser().expand();
+		this.getElement('collapseLink').hide();
+		this.getElement('removeDirectLogin').show();
+//		this.removeButton().show();
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.updateEditMode");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.updateViewMode");
+		this.getElement('titleEditBox').hide();
+		this.getElement('titleViewBox').show();
+		this.getElement('titleLink').update(this.directLogin().label());
+
+		this.getElement('collapseLink').show();
+		this.getElement('removeDirectLogin').hide();
+//		this.removeButton().hide();
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginComponent.syncronizeComponentValues");
+		this.directLogin().setLabel(this.getDom('titleInput').value);
+//		this.setFormDataValue(this.structureElement().value());
+		
+		MochiKit.Iter.forEach(this.directLoginBindingComponents(), MochiKit.Base.methodcaller('synchronizeComponentValues'));
+//MochiKit.Logging.logDebug("<<< DirectLoginComponent.syncronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'runDirectLogin': function(anEvent) {
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 1");
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 1 anEvent: " + anEvent);
+		anEvent.stop();
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 2");
+		this.directLogin().runDirectLogin();
+//MochiKit.Logging.logDebug("--- DirectLoginComponent.runDirectLogin - 3");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginValueComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginValueComponent.js
new file mode 100644
index 0000000..e70229b
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginValueComponent.js
@@ -0,0 +1,257 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new DirectLoginValueComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent.superclass.constructor.call(this, anElement, args);
+
+	this._directLoginInputValue = args.directLoginInputValue || null;
+	this._value = this.directLoginInputValue().directLogin().formValues()[this.directLoginInputValue().name()];
+	
+	this.render();
+//MochiKit.Logging.logDebug("<<< new DirectLoginValueComponent - record: " + this.record());
+
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginValueComponent component - " + this.directLoginInputValue().name();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'directLoginInputValue': function() {
+		return this._directLoginInputValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.render");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginDataLabelTD', children:[
+			{tag:'span', html:this.directLoginInputValue().name()}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.render - 1");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', cls:'directLoginDataValueTD', children:[
+			{tag:'span', id:this.getId('inputElement')}
+		]});
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.render - 2");
+		this.update();
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputElementConfiguration': function() {
+		var result;
+		var currentValue;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.inputElementConfiguration - " + this.directLoginInputValue().name());
+		result = [];
+		currentValue = this.value();
+		
+		switch (this.directLoginInputValue().type()) {
+			case 'checkbox':
+				var checkbox;
+//{"type":"checkbox", "name":"rememberUsernameChk", "value":"checkbox"}
+				checkbox = {tag:'input', id:this.getId('checkbox'), type:'checkbox'}
+				if (currentValue == true) {
+					checkbox.checked = true;
+				}
+				result.push(checkbox);
+				break;
+				
+			case 'select':
+				var input;
+//{"type":"select", "name":"DOMAIN", "options":[{"selected":true, "label":"@tin.it", "value":"tin.it"}, {"selected":false, "label":"@virgilio.it", "value":"virgilio.it"}]}
+				input = {tag:'select', id:this.getId('select'), name:this.directLoginInputValue().name(), children:[]};
+				input.children.push({tag:'option', value:null, html:"---"});
+				MochiKit.Iter.forEach(this.directLoginInputValue().args()['options'], function(anOption) {
+					var option;
+					
+//	TODO: remove the value: field and replace it with element.dom.value = <some value>
+					option = {tag:'option', value:anOption['value'], html:anOption['label']}
+					if (currentValue == anOption['value']) {
+						option.selected = true;
+					}
+					input.children.push(option);
+				})
+				result.push(input);
+				break;
+				
+			case 'radio':
+				var name;
+				var radioBox;
+				
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3");
+				name = this.getId(this.directLoginInputValue().name());
+				radioBox = {tag:'div', id:this.getId('radioBox'), children:[]};
+				result.push(radioBox);
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1 - options.length: " + this.directLoginInputValue().args()['options'].length);
+//{"name":"dominio", "type":"radio", "options":[{"value":"@alice.it", "checked":true}, {"value":"@tin.it", "checked":false}, {"value":"@virgilio.it", "checked":false}, {"value":"@tim.it", "checked":false}]}
+
+				MochiKit.Iter.forEach(this.directLoginInputValue().args()['options'], function(anOption) {
+					var	radio;
+					
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.1");
+//	TODO: remove the value: field and replace it with element.dom.value = <some value>
+					radio = {tag:'input', type:'radio', name:name, value:anOption['value']};
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.2");
+					if (currentValue == anOption['value']) {
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.3");
+						radio.checked = true;
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.4");
+					}
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.5");
+					radioBox.children.push({tag:'div', children:[ radio, {tag:'span', html:anOption['value']} ]})
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.1.6");
+				})
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.inputElementConfiguration - 3.2");
+				break;
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.inputElementConfiguration");
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputValue': function() {
+		var result;
+		
+		switch (this.directLoginInputValue().type()) {
+			case 'checkbox':
+				result = this.getDom('checkbox').checked;
+				break;
+			case 'select':
+				result = this.getDom('select').value;
+				break;
+			case 'radio':
+				var checkedRadioButtons;
+				
+				checkedRadioButtons = MochiKit.Base.filter(	function(aRadioButton) { return aRadioButton.dom.checked },
+															this.getElement('radioBox').getChildrenByTagName('input'));
+				
+				if (checkedRadioButtons.length == 0) {
+					result = null;
+				} else {
+					result = checkedRadioButtons[0].dom.value;
+				}
+				break;
+		}
+		
+		return result;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this._value;
+	},
+	
+	'setValue': function(aValue) {
+		this._value = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.updateEditMode - " + this);
+		this.getElement('inputElement').update("");
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.updateEditMode - 1");
+		Clipperz.YUI.DomHelper.append(this.getDom('inputElement'), {tag:'div', children:this.inputElementConfiguration()});
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.updateEditMode");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.updateViewMode");
+//		this.getElement('inputElement').update(this.directLoginInputValue().value());
+
+		this.getElement('inputElement').update("");
+		
+		switch (this.directLoginInputValue().type()) {
+			case 'checkbox':
+				if (this.value() == true) {
+					this.getElement('inputElement').update(Clipperz.PM.Strings['directLoginConfigurationCheckBoxFieldSelectedValue']);
+				} else {
+					this.getElement('inputElement').update(Clipperz.PM.Strings['directLoginConfigurationCheckBoxFieldNotSelectedValue'])
+				}
+				break;
+			case 'select':
+				var displayedValue;
+				var selectedOptions;
+				var currentValue;
+				
+				currentValue = this.value();
+				selectedOptions = MochiKit.Base.filter(	function(anOption) { return (anOption['value'] == currentValue); },
+														this.directLoginInputValue().args()['options']);
+				if (selectedOptions.length == 0) {
+					displayedValue = "---";
+				} else {
+//MochiKit.Logging.logDebug("+++ " + Clipperz.Base.serializeJSON(selectedOptions));
+//MochiKit.Logging.logDebug("*** " + Clipperz.Base.serializeJSON(selectedOptions[0]));
+					displayedValue = selectedOptions[0]['label'];
+				}
+				this.getElement('inputElement').update(displayedValue);
+				break;
+			case 'radio':
+				this.getElement('inputElement').update(this.value());
+				break;
+		}
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> DirectLoginValueComponent.synchronizeComponentValues");
+//MochiKit.Logging.logDebug("--- DirectLoginValueComponent.synchronizeComponentValues - 1; value: " + this.inputValue());
+		this.setValue(this.inputValue());
+		this.directLoginInputValue().directLogin().formValues()[this.directLoginInputValue().name()] = this.value();
+//MochiKit.Logging.logDebug("<<< DirectLoginValueComponent.synchronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginsComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginsComponent.js
new file mode 100644
index 0000000..3292a95
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/DirectLoginsComponent.js
@@ -0,0 +1,199 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.DirectLoginsComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent");
+	args = args || {};
+
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 0");
+    Clipperz.PM.Components.RecordDetail.DirectLoginsComponent.superclass.constructor.call(this, anElement, args);
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 1");
+
+	this._addDirectLoginButton = null;
+	
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 2");
+	this.mainComponent().addEditComponent(this);
+//MochiKit.Logging.logDebug("--- new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent - 3");
+	this.render();
+//MochiKit.Logging.logDebug("<<< new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent");
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.DirectLoginsComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.DirectLoginsComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'addDirectLoginButton': function() {
+		return this._addDirectLoginButton;
+	},
+
+	'setAddDirectLoginButton': function(aValue) {
+		this._addDirectLoginButton = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'div', cls:'directLoginsRecordBox', children:[
+				{tag:'h3', htmlString:Clipperz.PM.Strings['recordDetailDirectLoginBlockTitle']},
+				{tag:'ul', id:this.getId('directLogins')},
+
+				{tag:'div', cls:'addDirectLoginBox', id:this.getId('addDirectLogin'), children:[
+					{tag:'div', cls:'addDirectLoginBoxContent', children:[
+						{tag:'div', cls:'bookmarkletConfiguration', children:[
+//							{tag:'span', htmlString:Clipperz.PM.Strings['newRecordWizardBookmarkletConfigurationLabel']},
+							{tag:'div', htmlString:Clipperz.PM.Strings['recordDetailNewDirectLoginDescription']},
+							{tag:'textarea', id:this.getId('addDirectLoginTextarea')}
+						]},
+						{tag:'div', id:this.getId('addDirectLoginButton')}
+					]}
+				]}
+			]}
+		);
+
+		if (MochiKit.Base.keys(this.record().directLogins()).length == 0) {
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 3");
+			Clipperz.YUI.DomHelper.append(this.getElement('directLogins'),
+				{tag:'li', children:[
+//					{tag:'span', htmlString:Clipperz.PM.Strings['recordDetailDirectLoginBlockNoDirectLoginConfiguredLabel']}
+					{tag:'div', cls:'recordDetailNoDirectLoginDescriptionBox', htmlString:Clipperz.PM.Strings['recordDetailDirectLoginBlockNoDirectLoginConfiguredDescription']}
+				]}
+			);
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 4");
+		} else {
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 5");
+			for (directLoginReference in this.record().directLogins()) {
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 6");
+				this.addDirectLogin(this.record().directLogins()[directLoginReference]);
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 7");
+			}
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 8");
+		}
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 9");
+
+		this.setAddDirectLoginButton(new YAHOO.ext.Button(this.getDom('addDirectLoginButton'), {
+						text:Clipperz.PM.Strings['recordDetailAddNewDirectLoginButtonLabel'],
+						handler:this.addNewDirectLogin,
+						scope:this
+		}));
+		MochiKit.Signal.connect(this.getId('addDirectLoginTextarea'), 'onkeydown', this, 'onkeydown');
+//MochiKit.Logging.logDebug("--- DirectLoginsComponent.render - 11");
+
+		this.update();
+//MochiKit.Logging.logDebug("<<< DirectLoginsComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'addDirectLogin': function(aDirectLogin) {
+//MochiKit.Logging.logDebug(">>> DirectLoginsComponent.addDirectLogin");
+		new Clipperz.PM.Components.RecordDetail.DirectLoginComponent(
+				Clipperz.YUI.DomHelper.append(this.getDom('directLogins'), {tag:'div'}, true),
+				{
+					mainComponent:this.mainComponent(),
+					directLogin:aDirectLogin
+				}
+		);
+//MochiKit.Logging.logDebug("<<< DirectLoginsComponent.addDirectLogin");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'addNewDirectLogin': function() {
+		var	newDirectLogin;
+		var	configuration;
+
+//MochiKit.Logging.logDebug(">>> DirectLoginsComponent.addNewDirectLogin");
+		if (MochiKit.Base.keys(this.record().directLogins()).length == 0) {
+			this.getElement('directLogins').update("");
+		}
+		
+		this.mainComponent().synchronizeComponentValues();
+		
+		this.mainComponent().exitModalView();
+		configuration = Clipperz.PM.BookmarkletProcessor.checkBookmarkletConfiguration(
+								this.getDom('addDirectLoginTextarea').value,
+								this.getDom('addDirectLoginButton'),
+								MochiKit.Base.method(this.mainComponent(), 'enterModalView')
+		);
+		this.mainComponent().enterModalView();
+		
+		newDirectLogin = new Clipperz.PM.DataModel.DirectLogin({record:this.record(),
+																label:configuration['page']['title'],
+																bookmarkletVersion:'0.2',
+//																bookmarkletVersion:configuration['version'],
+																formData:configuration['form']});
+		this.record().addDirectLogin(newDirectLogin);
+		this.addDirectLogin(newDirectLogin);
+		this.getDom('addDirectLoginTextarea').value = "";
+//MochiKit.Logging.logDebug("<<< DirectLoginsComponent.addNewDirectLogin");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.getElement('addDirectLogin').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('addDirectLogin').hide();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateEditMode': function() {
+		this.getElement('addDirectLogin').show();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'onkeydown': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> onkeydown - " + anEvent.src().id + ": " + anEvent.key().code);
+		if (anEvent.key().code == 13) {
+			this.addNewDirectLogin();
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldButtonComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldButtonComponent.js
new file mode 100644
index 0000000..9e1d56a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldButtonComponent.js
@@ -0,0 +1,117 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldButtonComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldButtonComponent.superclass.constructor.call(this, anElement, args);
+
+	this._button = null;
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldButtonComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldButtonComponent";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'buttonText': function() {
+		var	result;
+
+		if (this.recordField() == null) {
+			//	TODO: this is never used. It is just an obsolete legacy chunk of code
+			result = Clipperz.PM.Strings['recordDetailAddFieldButtonLabel'];
+		} else {
+			result = Clipperz.PM.Strings['recordDetailRemoveFieldButtonLabel'];
+		}
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'button': function() {
+		return this._button;
+	},
+	
+	'setButton': function(aValue) {
+		this._button = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		this.element().update("");
+		
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', id:this.getId('button')})
+		this.setButton(new YAHOO.ext.Button(this.getDom('button'), {text:this.buttonText(), handler:this.handleButtonClick, scope:this}));
+
+		this.update();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleButtonClick': function() {
+		if (this.recordField() == null) {
+			this.mainComponent().addNewField();
+		} else {
+			this.mainComponent().removeField(this.fieldComponent());
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateEditMode': function() {
+		this.button().show();
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateViewMode': function() {
+		this.button().hide();
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldComponent.js
new file mode 100644
index 0000000..c2d947e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldComponent.js
@@ -0,0 +1,189 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new FieldComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldComponent.superclass.constructor.call(this, anElement, args);
+
+	this._element = anElement;
+	this._recordField = args.recordField || null;
+
+	this._buttonComponent = null;
+	this._labelComponent = null;
+	this._dragHandler = null;
+	this._valueComponent = null;
+	this._typeComponent = null;
+
+	this.mainComponent().addEditComponent(this);
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'recordField': function() {
+		return this._recordField;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'buttonComponent': function() {
+		return this._buttonComponent;
+	},
+	
+	'setButtonComponent': function(aValue) {
+		this._buttonComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'labelComponent': function() {
+		return this._labelComponent;
+	},
+	
+	'setLabelComponent': function(aValue) {
+		this._labelComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'dragHandler': function() {
+		return this._dragHandler;
+	},
+	
+	'setDragHandler': function(aValue) {
+		this._dragHandler = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'valueComponent': function() {
+		return this._valueComponent;
+	},
+	
+	'setValueComponent': function(aValue) {
+		this._valueComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'typeComponent': function() {
+		return this._typeComponent;
+	},
+	
+	'setTypeComponent': function(aValue) {
+		this._typeComponent = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.FieldComponent.render");
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'32',*/ height:'24', cls:'removeFieldButton', align:'left', valign:'top', id:this.getId('button')});
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'25%',*/ valign:'top', id:this.getId('label')});
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'3',*/ valign:'top', id:this.getId('dragHandler')});
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'50%',*/ valign:'top', children:[
+			{tag:'div', cls:'Clipperz_recordFieldData', id:this.getId('value')}
+		]});
+		
+		
+		this.setButtonComponent(new Clipperz.PM.Components.RecordDetail.FieldButtonComponent(this.getElement('button'), {fieldComponent:this}));
+		this.setLabelComponent(new Clipperz.PM.Components.RecordDetail.FieldLabelComponent(this.getElement('label'), {fieldComponent:this}));
+		this.setDragHandler(new Clipperz.PM.Components.RecordDetail.FieldDragHandler(this.getElement('dragHandler'), {fieldComponent:this}));
+		this.setValueComponent(new Clipperz.PM.Components.RecordDetail.FieldValueComponent(this.getElement('value'), {fieldComponent:this}));
+
+		if (this.editMode() == 'EDIT') {
+ 			Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td',/* width:'60',*/ align:'left', cls:'fieldTypeTD', valign:'top', id:this.getId('type')});
+			this.setTypeComponent(new Clipperz.PM.Components.RecordDetail.FieldTypeComponent(this.getElement('type'), {fieldComponent:this}));
+		}
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< RecordDetail.FieldComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'handleButtonClick': function() {
+		this.mainComponent().record().removeField(this.recordField());
+
+//		if (this.recordField() == null) {
+//			this.mainComponent().record().addNewField();
+//		} else {
+//			this.mainComponent().record().removeField(this.recordField());
+//		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'update': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.FieldComponent.update");
+		this.buttonComponent().update();
+		this.labelComponent().update();
+		this.dragHandler().update();
+		this.valueComponent().update();
+		if (this.editMode() == 'EDIT') {
+			this.typeComponent().update();
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.FieldComponent.update");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> FieldComponent.synchronizeComponentValues");
+		this.labelComponent().synchronizeComponentValues();
+		this.valueComponent().synchronizeComponentValues();
+		if (this.editMode() == 'EDIT') {
+			this.typeComponent().synchronizeComponentValues();
+		}
+//MochiKit.Logging.logDebug("<<< FieldComponent.synchronizeComponentValues");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldDragHandler.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldDragHandler.js
new file mode 100644
index 0000000..13a08fc
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldDragHandler.js
@@ -0,0 +1,59 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldDragHandler = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldDragHandler.superclass.constructor.call(this, anElement, args);
+
+	this._element = anElement;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldDragHandler, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldDragHandler component";
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldLabelComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldLabelComponent.js
new file mode 100644
index 0000000..3bbcd1d
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldLabelComponent.js
@@ -0,0 +1,141 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldLabelComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldLabelComponent.superclass.constructor.call(this, anElement, args);
+
+	this._inputElement = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldLabelComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldLabelComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.recordField().label();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var	newTextFormField;
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'Clipperz_recordFieldLabel', id:this.getId('label')});
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', style:'font-size:8pt;', html:this.recordField().key()});
+
+//		this.setInputElement(new Clipperz.PM.Components.TextFormField(this.getElement('label'), {editMode:this.editMode(), value:this.value()}));
+		newTextFormField = new Clipperz.PM.Components.TextFormField(this.getElement('label'), {editMode:this.editMode(), value:this.value()});
+//		newTextFormField.inputElement().setStyle({border:'3px solid cyan;'});
+		newTextFormField.on('change', this.notifyChanges, this, true)
+//		this.inputElement().on('change', function() {alert("CHANGE");});
+//		this.inputElement().getElement('editComponent_input').on('change', function() {alert("CHANGE");})
+//		this.inputElement().on('blur', this.notifyChanges, this, true);
+		
+		this.setInputElement(newTextFormField);
+		this.update();
+	},
+
+	'notifyChanges': function() {
+//MochiKit.Logging.logDebug(">>> FieldLabelComponent.notifyChanges - " + this);
+		this.synchronizeComponentValues();
+		Clipperz.NotificationCenter.notify(this.recordField().recordVersion().record(), 'updatedFieldLabel');
+//MochiKit.Logging.logDebug("<<< FieldLabelComponent.notifyChanges");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'update': function() {
+//MochiKit.Logging.logDebug(">>> FieldLabelComponent.update");
+		this.inputElement().update({editMode:this.editMode(), value:this.value()});
+//MochiKit.Logging.logDebug("<<< FieldLabelComponent.update");
+	},
+	
+	//-------------------------------------------------------------------------
+/*
+	'updateViewMode': function() {
+		var	width;
+		var	element;
+		
+		this.element().update("");
+		width = this.element().getWidth();
+		element = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', html:this.value()}, true);
+		element.setWidth(width-1);
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		var	width;
+
+		this.element().update("");
+		width = this.element().getWidth(true);
+		this.setInputElement(Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', type:'text', value:this.value()}, true));
+		this.inputElement().setWidth(width-1);
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+		if (this.inputElement() != null) {
+			this.recordField().setLabel(this.inputElement().value());
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldTypeComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldTypeComponent.js
new file mode 100644
index 0000000..3bdd093
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldTypeComponent.js
@@ -0,0 +1,157 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldTypeComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldTypeComponent.superclass.constructor.call(this, anElement, args);
+
+	this._inputElement = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldTypeComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldTypeComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.recordField().type();
+	},
+
+	'canChangeType': function() {
+		var value;
+		var result;
+		
+		value = this.value();
+		result = ((value == 'TXT') || (value == 'PWD') || (value == 'URL') || (value == 'DATE') || (value == 'ADDR'));
+		
+		return result
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.element().update("");
+		if (this.canChangeType()) {
+			var	width;
+			var element;
+
+			width = this.element().getWidth(true);
+			element = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', html:this.recordField().typeShortDescription()}, true);
+			element.setWidth(width-1);
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		this.element().update("");
+		
+		if (this.canChangeType()) {
+			var	width;
+
+			width = this.element().getWidth(true);
+			this.setInputElement(Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'select', children:[
+				{tag:'option', value:'TXT', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['TXT']['shortDescription']},
+				{tag:'option', value:'PWD', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['PWD']['shortDescription']},
+				{tag:'option', value:'URL', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['URL']['shortDescription']},
+				{tag:'option', value:'DATE', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['DATE']['shortDescription']},
+				{tag:'option', value:'ADDR', htmlString:Clipperz.PM.Strings['recordFieldTypologies']['ADDR']['shortDescription']}
+			
+//				{tag:'option', value:'CHECK', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['CHECK']['shortDescription']},
+//				{tag:'option', value:'RADIO', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['RADIO']['shortDescription']},
+//				{tag:'option', value:'CHECK', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['SELECT']['shortDescription']}
+//				{tag:'option', value:'NOTE', html:Clipperz.PM.DataModel.RecordField.TypeDescriptions['NOTE']['shortDescription']}
+			]}, true));
+			this.inputElement().setWidth(width-1);
+			this.inputElement().addHandler('change', true, this.onChange, this, true);
+//			this.selectCorrectOption();
+			Clipperz.DOM.selectOptionMatchingValue(this.inputElement().dom, this.value());
+		}
+	},
+
+	//-------------------------------------------------------------------------
+
+	'onChange': function() {
+		this.synchronizeComponentValues();
+		this.fieldComponent().valueComponent().handleTypeChange();
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'selectCorrectOption': function() {
+		var	options;
+		var i,c;
+		
+		options = this.inputElement().getChildrenByTagName('option');
+		c = options.length;
+		for (i=0; i<c; i++) {
+			if (options[i].dom.value == this.value()) {
+				options[i].dom.selected = true;
+			}
+		}
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+		if (this.inputElement() != null) {
+			this.recordField().setType(this.inputElement().dom.value);
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldValueComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldValueComponent.js
new file mode 100644
index 0000000..a30992a
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/FieldValueComponent.js
@@ -0,0 +1,275 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.FieldValueComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.FieldValueComponent.superclass.constructor.call(this, anElement, args);
+
+	this._inputElement = null;
+	this._scrambledStatus = 'SCRAMBLED'; //	'UNSCRAMBLED'
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.FieldValueComponent, Clipperz.PM.Components.RecordDetail.AbstractFieldSubComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.FieldValueComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.recordField().value();
+	},
+
+	'setValue': function(aValue) {
+		this.recordField().setValue(aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'scrambledStatus': function() {
+		return this._scrambledStatus;
+	},
+	
+	'setScrambledStatus': function(aValue) {
+		this._scrambledStatus = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'handleTypeChange': function() {
+//MochiKit.Logging.logDebug(">>> handling type change - " + this.recordField().type());
+		this.synchronizeComponentValues();
+		this.update();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'addrUrl': function() {
+		var result;
+		
+		result = "http://maps.google.com/maps?q=" + this.value().split(' ').join('+');
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		var scarmbledStatus;
+		
+		scrambledStatus = this.scrambledStatus() || 'SCRAMBLED';
+
+		this.element().update("");
+		if (this.recordField().hidden() == false) {
+			switch(this.recordField().type()) {
+				case 'TXT':
+				case 'PWD':
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', html:this.value()});
+					break;
+				case 'URL':
+					var	urlLocation;
+					
+					urlLocation = Clipperz.Base.sanitizeString(this.value());
+					if (! (/^(https?|ftp|svn):\/\//.test(urlLocation))) {
+						urlLocation = 'http://' + urlLocation;
+					}
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'a', href:urlLocation, html:this.value(), target:'_blank'});
+					break;
+				case 'DATE':
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', html:this.value()});
+					break;
+				case 'ADDR':
+					Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'a', href:this.addrUrl(), html:this.value(), target:'_blank'});
+					break;
+			}
+		} else {
+			var tableElement;
+			var tdElement;
+			var inputElement;
+			var passwordElementConfiguration;
+
+			if (scrambledStatus == 'SCRAMBLED') {
+				var	scrambledInputElement;
+
+				if ((Clipperz_IEisBroken === true) && (Clipperz.PM.Proxy.defaultProxy.isReadOnly())) {
+					scrambledInputElement = {tag:'input', type:'password', value:"this.value()"};
+				} else {
+					scrambledInputElement = {tag:'input', type:'text', cls:'scrambledField', title:Clipperz.PM.Strings['recordDetailPasswordFieldTooltipLabel'], value:"this.value()"};
+				}
+
+				passwordElementConfiguration = 
+					{tag:'table', border:'0', cellspacing:'2', cellpadding:'0', children:[
+						{tag:'tbody', children:[
+							{tag:'tr', children:[
+								{tag:'td', valign:'top', children:[
+									scrambledInputElement,
+									{tag:'a', cls:'scrambleLink', id:this.getId('scrambleLink'), href:'#', htmlString:Clipperz.PM.Strings['recordDetailPasswordFieldUnscrambleLabel']}
+								]},
+								{tag:'td', valign:'top', children:[
+									{tag:'span', cls:'scrambledFieldLabel', htmlString:Clipperz.PM.Strings['recordDetailPasswordFieldHelpLabel']}
+								]}
+							]}
+						]}
+					]};
+			} else {
+				passwordElementConfiguration =
+					{tag:'div', children:[
+						{tag:'input', type:'text', cls:'unscrambledField', value:"this.value()"},
+						{tag:'a', cls:'scrambleLink', id:this.getId('scrambleLink'), href:'#', htmlString:Clipperz.PM.Strings['recordDetailPasswordFieldScrambleLabel']}
+					]};
+			}
+			
+			tableElement = Clipperz.YUI.DomHelper.append(this.element().dom, passwordElementConfiguration, true);
+
+			inputElement = tableElement.getChildrenByTagName('input')[0];
+			inputElement.dom.value = this.value();
+			inputElement.wrap({tag:'div', cls:'passwordBackground'}).setStyle('background-position', "0px -" + Math.min(128, Clipperz.PM.Crypto.passwordEntropy(this.value())) + "px");
+
+			MochiKit.Signal.connect(inputElement.dom, 'onfocus', this, 'selectHiddenFieldOnFocus');
+			MochiKit.Signal.connect(this.getDom('scrambleLink'), 'onclick', this, 'toggleScramble');
+		}
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		var inputElement;
+		var scarmbledStatus;
+		
+		scrambledStatus = this.scrambledStatus() || 'SCRAMBLED';
+		
+		this.element().update("");
+		switch(this.recordField().type()) {
+			case 'TXT':
+			case 'URL':
+			case 'ADDR':
+				inputElement = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', type:'text', value:"this.value()"}, true);
+				inputElement.dom.value = this.value();
+				break;
+			case 'PWD':
+				Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'table', width:'100%', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', valign:'top', children:[
+								{tag:'input', type:((scrambledStatus == 'SCRAMBLED') ? 'password' : 'text'), id:this.getId('passwordInputElement'), value:"this.value()"},
+								{tag:'a', cls:'scrambleLink', id:this.getId('scrambleLink'), href:'#', html:(scrambledStatus == 'SCRAMBLED' ? Clipperz.PM.Strings['recordDetailPasswordFieldUnscrambleLabel'] : Clipperz.PM.Strings['recordDetailPasswordFieldScrambleLabel'])}
+							]},
+							{tag:'td', valign:'top', children:[
+								{tag:'div', id:this.getId('passwordGenerator'), cls:'Clipperz_PasswordGenerator_button', html:'&nbsp;'}
+							]}
+						]}
+					]}
+				]})
+				inputElement = this.getElement('passwordInputElement');
+				inputElement.dom.value = this.value();
+				new Clipperz.PM.Components.PasswordEntropyDisplay(this.getElement('passwordInputElement'));
+				new Clipperz.PM.Components.PasswordGenerator(this.getElement('passwordGenerator'), this);
+				MochiKit.Signal.connect(this.getDom('scrambleLink'), 'onclick', this, 'toggleScramble');
+				break;
+//			case 'NOTE':
+//				inputElement = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'textarea', rows:'5', html:this.value()}, true);
+//				break
+			case 'DATE':
+				inputElement = Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', type:'text', value:"this.value()"}, true);
+				inputElement.dom.value = this.value();
+				break;
+		}
+
+		this.setInputElement(inputElement);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> FieldValueComponent.synchronizeComponentValues");
+		if (this.inputElement() != null) {
+			var value;
+			
+			switch(this.recordField().type()) {
+				case 'TXT':
+				case 'URL':
+				case 'ADDR':
+				case 'PWD':
+				case 'DATE':
+					value = this.inputElement().dom.value;
+					break;
+			}
+			this.setValue(value);
+		}
+//MochiKit.Logging.logDebug("<<< FieldValueComponent.synchronizeComponentValues");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'selectHiddenFieldOnFocus': function(anEvent) {
+		anEvent.src().select();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'toggleScramble': function(anEvent) {
+		this.synchronizeComponentValues();
+		
+		if (this.scrambledStatus() == 'SCRAMBLED') {
+			this.setScrambledStatus('UNSCRAMBLED');
+		} else {
+			this.setScrambledStatus('SCRAMBLED');
+		};
+		
+		this.update();
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/HeaderComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/HeaderComponent.js
new file mode 100644
index 0000000..7aaca3e
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/HeaderComponent.js
@@ -0,0 +1,165 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.HeaderComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.HeaderComponent.superclass.constructor.call(this, anElement, args);
+	this.mainComponent().addEditComponent(this);
+	
+	this._saveButton = null;
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.HeaderComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.HeaderComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+		var editButton;
+		
+//MochiKit.Logging.logDebug(">>> RecordDetail.HeaderComponent.appendTo");
+ 		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'recordDetailButtonsBox', children:[
+			{tag:'div', id:this.getId('editButtonBox'), children:[
+				{tag:'table', cls:'recordDetailButtonsTABLE', border:'0', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', align:'center', children:[
+								{tag:'div', id:this.getId('editButton')}
+							]}
+						]}
+					]}
+				]}
+			]},
+			{tag:'div', id:this.getId('saveCancelButtonBox'), children:[
+				{tag:'table', cls:'recordDetailButtonsTABLE', border:'0', cellpadding:'0', cellspacing:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', width:'49%', align:'right', children:[
+								{tag:'div', id:this.getId('saveButton')}
+							]},
+							{tag:'td', html:'&nbsp'},
+							{tag:'td', width:'49%', align:'left', children:[
+								{tag:'div', id:this.getId('cancelButton')}
+							]}
+						]}
+					]}
+				]}
+			]}
+		]});
+
+		this.getElement('editButtonBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('saveCancelButtonBox').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		editButton = new YAHOO.ext.Button(this.getDom('editButton'), {text:Clipperz.PM.Strings['recordDetailEditButtonLabel'], handler:this.editButtonHandler, scope:this});
+		this.setSaveButton(new YAHOO.ext.Button(this.getDom('saveButton'), {text:Clipperz.PM.Strings['recordDetailSaveButtonLabel'], handler:this.saveButtonHandler, scope:this}));
+		new YAHOO.ext.Button(this.getDom('cancelButton'), {text:Clipperz.PM.Strings['recordDetailCancelButtonLabel'], handler:this.cancelButtonHandler, scope:this});
+
+		if (Clipperz.PM.Proxy.defaultProxy.isReadOnly()) {
+			editButton.disable();
+		}
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< RecordDetail.HeaderComponent.appendTo");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> HeaderComponent.updateViewMode");
+		this.getElement('editButtonBox').show();
+		this.getElement('saveCancelButtonBox').hide();
+//MochiKit.Logging.logDebug("<<< HeaderComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		this.getElement('editButtonBox').hide();
+		this.getElement('saveCancelButtonBox').show();
+		if (this.mainComponent().enableSaveButton() == true) {
+//MochiKit.Logging.logDebug("--- HeaderComponent.updateViewMode - ENABLE");
+			this.saveButton().enable();
+		} else {
+			this.saveButton().disable();
+		}
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'saveButton': function() {
+		return this._saveButton;
+	},
+	
+	'setSaveButton': function(aValue) {
+		this._saveButton = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'editButtonHandler': function(anEvent) {
+		this.mainComponent().setEditMode('EDIT');
+	},
+
+	//-------------------------------------------------------------------------
+
+	'saveButtonHandler': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.HeaderComponent.saveButtonHandler");
+		this.mainComponent().setEditMode('VIEW', this.getElement('saveButton'));
+//MochiKit.Logging.logDebug("<<< RecordDetail.HeaderComponent.saveButtonHandler");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'cancelButtonHandler': function(anEvent) {
+		this.record().cancelChanges();
+//MochiKit.Logging.logDebug("--- HeaderComponent.cancelButtonHandler - " + Clipperz.Base.serializeJSON(this.record().currentDataSnapshot()));
+		this.mainComponent().setEditMode('VIEW', null, true);
+	},
+
+	//-------------------------------------------------------------------------
+
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/MainComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/MainComponent.js
new file mode 100644
index 0000000..53bf9c5
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/MainComponent.js
@@ -0,0 +1,758 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.MainComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.MainComponent.superclass.constructor.call(this, anElement, args);
+
+//	this._element = args.element;
+	this._user = args.user;
+	this._editMode = args.editMode || 'VIEW';	//	[ 'VIEW' | 'EDIT' ]
+	this._mainPanel = args.mainPanel;
+	
+	this._record = null;
+	this._editComponents = [];
+	this._addFieldButton = null;
+
+	this._enableSaveButton = true;
+	this._shouldShowLoginInfo = (Clipperz.PM.Proxy.defaultProxy.isReadOnly() ? false : true);
+	
+//	this._mainLayoutManager = null;
+//	this._layoutRegion = null;
+	
+	Clipperz.NotificationCenter.register(null, 'loadingRecordData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'decryptingRecordData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'loadingRecordVersionData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'decryptingRecordVersionData', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'setupDone', this, 'render');
+	Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'render');
+	
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.MainComponent, Clipperz.PM.Components.BaseComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.MainComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'editMode': function() {
+		return this._editMode;
+	},
+
+	'setEditMode': function(aValue, aButtonElement, shouldSkipComponentSynchronization) {
+//MochiKit.Logging.logDebug(">>> MainComponent.setEditingMode");
+		this.scrollToTop();
+		
+		if (aValue == 'VIEW') {
+			if (shouldSkipComponentSynchronization == true) {
+				this.exitModalView();
+			} else {
+				this.synchronizeComponentValues();
+				if (this.record().hasPendingChanges()) {
+					if (this.record().isBrandNew()) {
+						this.record().removeEmptyFields();
+					}
+					this.saveCurrentRecordChanges(aButtonElement);
+				} else {
+					if (this.record().isBrandNew()) {
+						this.record().user().removeRecord(this.record());
+					}
+					this.exitModalView();
+				}
+			}
+		} else if (aValue == 'EDIT') {
+			this.enterModalView();
+		} else {
+			//	????
+		}
+
+		this._editMode = aValue;
+		this.render();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'user': function() {
+		return this._user;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'mainPanel': function() {
+		return this._mainPanel;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.render");
+		this.setEnableSaveButton(true);
+		this.element().update("");
+
+		if (this.record() == null) {
+			if (MochiKit.Base.keys(this.user().records()).length == 0) {
+				this.renderWithNoRecordAtAll();
+			} else {
+				this.renderWithNoSelectedRecord();
+			}
+		} else {
+			this.renderWithSelectedRecord();
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderWithNoRecordAtAll': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithNoRecordAtAll");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'noRecordAtAllFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', htmlString:Clipperz.PM.Strings['recordDetailNoRecordAtAllTitle']}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox', htmlString:Clipperz.PM.Strings['recordDetailNoRecordAtAllDescription']}
+							]}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithNoRecordAtAll");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'renderWithNoSelectedRecord': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithNoSelectedRecord");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'noRecordSelectedFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', htmlString:Clipperz.PM.Strings['recordDetailNoRecordSelectedTitle']}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox', htmlString:Clipperz.PM.Strings['recordDetailNoRecordSelectedDescription']}
+							]}
+						]},
+						{tag:'tr', colspan:'5', children:[
+							{tag:'td', colspan:'5', children:this.loginInfo()}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithNoSelectedRecord - 1");
+
+		if (MochiKit.DOM.getElement('fullLoginHistoryLink') != null) {
+			MochiKit.Signal.connect('fullLoginHistoryLink', 'onclick', this, 'showLoginHistoryPanel');
+		}
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithNoSelectedRecord - 2");
+		
+		if (MochiKit.DOM.getElement('offlineCopyDownloadWarningLink') != null) {
+			MochiKit.Signal.connect('offlineCopyDownloadWarningLink', 'onclick', this, 'showDownloadOfflineCopyPanel');
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithNoSelectedRecord");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderWithSelectedRecord': function() {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithSelectedRecord");
+		if (this.record().shouldLoadData() === true) {
+//			this.renderWithSelectedRecordLoading();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 1.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailLoadingRecordMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 1.2");
+		} else if (this.record().shouldDecryptData() === true) {
+//			this.renderWithSelectedRecordDecrypting();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 2.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailDecryptingRecordMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 2.2");
+		} else if (this.record().currentVersion().shouldLoadData() === true) {
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 3.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailLoadingRecordVersionMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 3.2");
+		} else if (this.record().currentVersion().shouldDecryptData() === true) {
+//			this.renderWithSelectedRecordCurrentVersionDecrypting();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 4.1");
+			this.renderWhileProcessingWithMessage(Clipperz.PM.Strings['recordDetailDecryptingRecordVersionMessage']);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 4.2");
+		} else {
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 5.1");
+			this.renderWithSelectedRecordData();
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecord - 5.2");
+		}
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithSelectedRecord");
+	},
+
+	//.........................................................................
+
+	'renderWhileProcessingWithMessage': function(aMessage) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWhileProcessingWithMessage");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'processingRecordFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', html:this.record().label()}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', cls:'recordTR', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox', children:[
+									{tag:'h5', cls:'recordLoadingMessage', html:aMessage}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWhileProcessingWithMessage");
+	},
+
+	//.........................................................................
+/*
+	'renderWithSelectedRecordLoading': function() {
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'', style:'border:1px solid red; padding: 20px;', children:[
+			{tag:'div', cls:'Clipprez_RecordDetailTitle', children:[
+				{tag:'h3', html:this.record().label()},
+				{tag:'h3', html:"loading"}
+			]}
+		]});
+	},
+
+	//.........................................................................
+
+	'renderWithSelectedRecordDecrypting': function() {
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'', style:'border:1px solid red; padding: 20px;', children:[
+			{tag:'div', cls:'Clipprez_RecordDetailTitle', children:[
+				{tag:'h3', html:this.record().label()},
+				{tag:'h3', html:"decrypting ... "}
+			]}
+		]});
+	},
+
+	//.........................................................................
+
+	'renderWithSelectedRecordCurrentVersionDecrypting': function() {
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'', style:'border:1px solid red; padding: 20px;', children:[
+			{tag:'div', cls:'Clipprez_RecordDetailTitle', children:[
+				{tag:'h3', html:this.record().label()},
+				{tag:'h3', html:"decrypting version ... "}
+			]}
+		]});
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'renderWithErrorMessage': function(anErrorMessage) {
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithErrorMessage");
+		this.element().update("");
+		
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithErrorMessage - 1");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'errorMessageFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', children:[
+					{tag:'h2', id:'recordTitle', html:this.record().label()}
+				]},
+				{tag:'table', border:'0', cellspacing:'0', cellpadding:'0', children:[
+					{tag:'tbody', children:[
+						{tag:'tr', cls:'recordTR', children:[
+							{tag:'td', colspan:'5', children:[
+								{tag:'div', cls:'recordDetailDescriptionBox loadingError', children:[
+									{tag:'h5', htmlString:Clipperz.PM.Strings['recordDetailLoadingErrorMessageTitle']},
+									{tag:'p', html:anErrorMessage.message}
+								]}
+							]}
+						]}
+					]}
+				]}
+			]}
+		);
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithErrorMessage");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderWithSelectedRecordData': function() {
+		var	columns;
+		
+		this.resetEditComponents();
+
+		columns = [
+			{tag:'td', width:'25', html:'&#160'},
+			{tag:'td', width:'25%', htmlString:Clipperz.PM.Strings['recordDetailLabelFieldColumnLabel']},
+			{tag:'td', width:'3', html:'&#160'},
+			{tag:'td', /*width:'80%',*/ htmlString:Clipperz.PM.Strings['recordDetailDataFieldColumnLabel']}
+		];
+
+		if (this.editMode() == 'EDIT') {
+			columns.push({tag:'td', /*width:'55',*/ htmlString:Clipperz.PM.Strings['recordDetailTypeFieldColumnLabel']})
+		}
+		
+//MochiKit.Logging.logDebug(">>> RecordDetail.MainComponent.renderWithSelectedRecordData");
+		Clipperz.YUI.DomHelper.append(this.element().dom,
+			{tag:'form', cls:'recordDataFORM', children:[
+				{tag:'div', cls:'recordTitleBlock', id:this.getId('title')},
+				{tag:'div', id:'recordDetailDataBox', cls:'recordDetailDataBox', children:[
+
+{tag:'table', width:'100%', border:'0', cellspacing:'0', cellpadding:'0', children:[
+	{tag:'tbody', children:[
+		{tag:'tr', children:[
+			{tag:'td', width:'5', html:"&nbsp;"},
+			{tag:'td', children:[
+
+					{tag:'table', cls:'recordDetailDataBoxTABLE', border:'0', cellspacing:'0', cellpadding:'0', children:[
+						{tag:'tbody', id:this.getId('tbody'), children:[
+							{tag:'tr', /*cls:'recordNoteTR',*/ children:[
+								{tag:'td', colspan:'5', id:this.getId('notes')}
+							]},
+							{tag:'tr', cls:'recordFieldsTR', children:columns /*	[
+								{tag:'td', width:'25', html:'&#160'},
+								{tag:'td', width:'25%', htmlString:Clipperz.PM.Strings['recordDetailLabelFieldColumnLabel']},
+								{tag:'td', width:'3', html:'&#160'},
+								{tag:'td', / *width:'80%',* / htmlString:Clipperz.PM.Strings['recordDetailDataFieldColumnLabel']},
+								{tag:'td', / *width:'55',* / htmlString:Clipperz.PM.Strings['recordDetailTypeFieldColumnLabel']}
+							] */	}
+						]}
+					]},
+					{tag:'div', cls:'addFieldButton', id:this.getId('addField'), children:[
+						{tag:'div', id:this.getId('addFieldButton')}
+					]},
+					{tag:'div', id:this.getId('directLogins')},
+					{tag:'div', id:this.getId('footer')}
+				
+			]}
+		]}
+	]}
+]}
+
+				]}
+			]}
+		);
+		
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 1");
+
+		new Clipperz.PM.Components.RecordDetail.TitleComponent(this.getElement('title'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 2");
+		new Clipperz.PM.Components.RecordDetail.NotesComponent(this.getElement('notes'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 3");
+		new Clipperz.PM.Components.RecordDetail.DirectLoginsComponent(this.getElement('directLogins'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 4");
+		new Clipperz.PM.Components.RecordDetail.HeaderComponent(this.getElement('footer'), {mainComponent:this});
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 5");
+		MochiKit.Iter.forEach(MochiKit.Base.values(this.record().currentVersion().fields()), this.appendFieldComponent, this);
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 6");
+		this.setAddFieldButton(new YAHOO.ext.Button(this.getDom('addFieldButton'), {text:Clipperz.PM.Strings['recordDetailAddFieldButtonLabel'], handler:this.addNewRecordField, scope:this}));
+//MochiKit.Logging.logDebug("--- RecordDetail.MainComponent.renderWithSelectedRecordData - 7");
+
+		this.update();
+
+//MochiKit.Logging.logDebug("<<< RecordDetail.MainComponent.renderWithSelectedRecordData");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'editComponents': function() {
+		return this._editComponents;
+	},
+	
+	'resetEditComponents': function() {
+		this._editComponents = [];
+	},
+	
+	'addEditComponent': function(aValue) {
+		this.editComponents().push(aValue);
+	},
+	
+	'removeEditComponent': function(aValue) {
+		Clipperz.Base.removeFromArray(this.editComponents(), aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'record': function() {
+		return this._record;
+	},
+	
+	'setRecord': function(aValue) {
+		var	result;
+		
+//MochiKit.Logging.logDebug(">>> MainComponent.setRecord")
+		if (this._record != aValue) {
+			var	deferredResult;
+			
+			deferredResult = new MochiKit.Async.Deferred();
+			
+			if ((this._record != null) && (this.editMode() == 'EDIT')) {
+				this.synchronizeComponentValues();
+				deferredResult.addCallback(MochiKit.Base.method(this._record, 'saveChanges'));
+			}
+			
+			this._record = aValue;
+			
+			if (aValue != null) {
+				this.setShouldShowLoginInfo(false);
+				deferredResult.addCallback(MochiKit.Base.method(this._record, 'deferredData'));
+			}
+			deferredResult.addCallbacks(
+				MochiKit.Base.method(this, 'render'),
+				MochiKit.Base.method(this, 'renderWithErrorMessage')
+			);
+			deferredResult.callback();
+			this.scrollToTop();
+			
+			result = deferredResult;
+		} else {
+			result = MochiKit.Async.success();
+		}
+//MochiKit.Logging.logDebug("<<< MainComponent.setRecord")
+		
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'saveCurrentRecordChanges': function(aButtonElement) {
+		var deferred;
+		var currentNumberOfRecords;
+		
+		deferred = new MochiKit.Async.Deferred();
+		deferred.addCallback(MochiKit.Base.method(Clipperz.PM.Components.MessageBox(), 'deferredShow'),
+			{
+				title:Clipperz.PM.Strings['recordDetailSavingChangesMessagePanelInitialTitle'],
+				text:Clipperz.PM.Strings['recordDetailSavingChangesMessagePanelInitialText'],
+				width:240,
+				showProgressBar:true,
+				showCloseButton:false,
+				steps:6
+			},
+			aButtonElement.dom
+		);
+		deferred.addCallback(MochiKit.Base.method(this, 'exitModalView'));
+		deferred.addCallback(MochiKit.Base.method(this.record(), 'saveChanges'));
+		deferred.addCallback(Clipperz.NotificationCenter.deferredNotification, this.record(), 'recordUpdated');
+		deferred.addCallback(function(res) {
+			Clipperz.PM.Components.MessageBox().hide(YAHOO.ext.Element.get('main'));
+			return res;
+		});
+
+		currentNumberOfRecords = MochiKit.Base.keys(this.user().records()).length;
+		if ((this.record().isBrandNew()) && (this.user().preferences().shouldShowDonationPanel()) && (currentNumberOfRecords >= 5)) {
+			deferred.addCallback(Clipperz.PM.showDonationSplashScreen, this.user(), 'recordListAddRecordButton');
+		}
+
+		deferred.callback();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'update': function(anEvent) {
+		if (this.editMode() == 'EDIT') {
+			this.updateEditMode();
+		} else if (this.editMode() == 'VIEW') {
+			this.updateViewMode();
+		}
+
+		MochiKit.Iter.forEach(this.editComponents(), MochiKit.Base.methodcaller('update'));
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.addFieldButton().hide();
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+		this.addFieldButton().show();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'appendFieldComponent': function(aRecordField) {
+//MochiKit.Logging.logDebug(">>> MainComponent.appendFieldComponent");
+		new Clipperz.PM.Components.RecordDetail.FieldComponent(
+			Clipperz.YUI.DomHelper.append(this.getDom('tbody'), {tag:'tr'}, true),
+			{recordField:aRecordField, mainComponent:this}
+		);
+//MochiKit.Logging.logDebug("<<< MainComponent.appendFieldComponent");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'removeField': function(aFieldComponent) {
+		var	recordField;
+		
+//MochiKit.Logging.logDebug(">>> MainComponent.removeField")		
+		recordField = aFieldComponent.recordField();
+		this.removeEditComponent(aFieldComponent);
+		aFieldComponent.destroy();
+		this.record().removeField(recordField);
+
+		Clipperz.NotificationCenter.notify(this.record(), 'removedField');
+//MochiKit.Logging.logDebug("<<< MainComponent.removeField")		
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'synchronizeComponentValues': function() {
+		MochiKit.Iter.forEach(this.editComponents(), MochiKit.Base.methodcaller('synchronizeComponentValues'));
+	},
+
+	//=========================================================================
+
+	'addFieldButton': function() {
+		return this._addFieldButton;
+	},
+	
+	'setAddFieldButton': function(aValue) {
+		this._addFieldButton = aValue;
+	},
+	
+	'addNewRecordField': function() {
+		var	newField;
+		
+		newField = this.record().addNewField();
+		this.appendFieldComponent(newField);
+
+		Clipperz.NotificationCenter.notify(this.record(), 'addNewRecordField');
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'enterModalView': function() {
+/*
+		if (this.user().preferences().useSafeEditMode()) {
+			var headerMaskElement;
+			var verticalMaskElement;
+
+			headerMaskElement = YAHOO.ext.Element.get('recordDetailEditModeHeaderMask');
+			headerMaskElement.show().mask();
+
+			verticalMaskElement = YAHOO.ext.Element.get('recordDetailEditModeVerticalMask');
+			verticalMaskElement.show().mask();
+		}
+*/
+		this.mainPanel().enterModalView();
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'exitModalView': function() {
+/*
+		if (this.user().preferences().useSafeEditMode()) {
+			var headerMaskElement;
+			var verticalMaskElement;
+			
+			headerMaskElement = YAHOO.ext.Element.get('recordDetailEditModeHeaderMask');
+			headerMaskElement.unmask();
+			headerMaskElement.hide();
+
+			verticalMaskElement = YAHOO.ext.Element.get('recordDetailEditModeVerticalMask');
+			verticalMaskElement.unmask();
+			verticalMaskElement.hide();
+		}
+*/
+		this.mainPanel().exitModalView();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'enableSaveButton': function() {
+		return this._enableSaveButton;
+	},
+	
+	'setEnableSaveButton': function(aValue) {
+		this._enableSaveButton = aValue;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'scrollToTop': function() {
+		YAHOO.ext.Element.get('recordTitleTopBlock').scrollIntoView(document.body);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'loginInfo': function() {
+		var	result;
+
+		if (this.shouldShowLoginInfo() == true) {
+//			 && (typeof(this.user().loginInfo()['latest']) != 'undefined')) {
+			var	imageExtension;
+			var currentConnectionText;
+			var currentIP;
+			var contentChildren;
+			
+			result = [];
+			contentChildren = [];
+			
+			imageExtension = (Clipperz_IEisBroken == true) ? 'gif': 'png';
+
+			contentChildren.push({tag:'h4', valign:'top', htmlString:Clipperz.PM.Strings['WELCOME_BACK']});
+
+			currentIP = (this.user().loginInfo()['current']['ip'].match(/^\d{1,3}(.\d{1,3}){3}$/)) ? this.user().loginInfo()['current']['ip'] : Clipperz.PM.Strings['unknown_ip'];
+			currentConnectionText = Clipperz.PM.Strings['currentConnectionText'];
+			currentConnectionText = currentConnectionText.replace(/__ip__/, "<b>" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['ip']) + "</b>");
+			currentConnectionText = currentConnectionText.replace(/__country__/, "<b>" + Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['country'])] + "</b>");
+			currentConnectionText = currentConnectionText.replace(/__browser__/, "<b>" + Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['browser'])] + "</b>");
+			currentConnectionText = currentConnectionText.replace(/__operatingSystem__/, "<b>" + Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['operatingSystem'])] + "</b>");
+
+			contentChildren.push(
+				{tag:'div', cls:'loginInfo_now', children:[
+					{tag:'div', cls:'text', htmlString:currentConnectionText},
+					{tag:'div', cls:'icons', children:[
+						{tag:'img', title:Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['country'])], cls:'flag', src:Clipperz.PM.Strings['icons_baseUrl'] + "/flags/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['country']).toLowerCase() + "." +  imageExtension, width:'32', height:'32'},
+						{tag:'img', title:Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['browser'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/browsers/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['browser']).toLowerCase() + "." + imageExtension, width:'32', height:'32'},
+						{tag:'img', title:Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['operatingSystem'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/operatingSystems/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['current']['operatingSystem']).toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+					]}
+				]}
+			);
+			
+			if (typeof(this.user().loginInfo()['latest']) != 'undefined') {
+				var latestLoginDate;
+				var elapsedTimeDescription;
+				var latestIP;
+				var latestConnectionText;
+
+				latestLoginDate = Clipperz.PM.Date.parseDateWithUTCFormat(Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['date']));
+			
+				elapsedTimeDescription = Clipperz.PM.Date.getElapsedTimeDescription(latestLoginDate);
+				latestIP =  (this.user().loginInfo()['latest']['ip'].match(/^\d{1,3}(.\d{1,3}){3}$/)) ? this.user().loginInfo()['latest']['ip'] : Clipperz.PM.Strings['unknown_ip'];
+
+				latestConnectionText = Clipperz.PM.Strings['latestConnectionText'];
+				latestConnectionText = latestConnectionText.replace(/__elapsedTimeDescription__/, "<b>" + elapsedTimeDescription + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__time__/, Clipperz.PM.Date.formatDateWithTemplate(latestLoginDate, Clipperz.PM.Strings['fullDate_format']));
+				latestConnectionText = latestConnectionText.replace(/__ip__/, "<b>" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['ip']) + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__country__/, "<b>" + Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['country'])] + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__browser__/, "<b>" + Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['browser'])] + "</b>");
+				latestConnectionText = latestConnectionText.replace(/__operatingSystem__/, "<b>" + Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['operatingSystem'])] + "</b>");
+
+
+				contentChildren.push(
+					{tag:'div', cls:'loginInfo_latest', children:[
+						{tag:'div', cls:'inner_header', html:'&nbsp;'},
+						{tag:'div', cls:'content', children:[
+							{tag:'div', cls:'text', htmlString:latestConnectionText},
+							{tag:'div', cls:'icons', children:[
+								{tag:'img', title:Clipperz.PM.Strings['countries'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['country'])], cls:'flag', src:Clipperz.PM.Strings['icons_baseUrl'] + "/flags/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['country']).toLowerCase() + "." +  imageExtension, width:'32', height:'32'},
+								{tag:'img', title:Clipperz.PM.Strings['browsers'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['browser'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/browsers/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['browser']).toLowerCase() + "." + imageExtension, width:'32', height:'32'},
+								{tag:'img', title:Clipperz.PM.Strings['operatingSystems'][Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['operatingSystem'])], src:Clipperz.PM.Strings['icons_baseUrl'] + "/operatingSystems/" + Clipperz.Base.sanitizeString(this.user().loginInfo()['latest']['operatingSystem']).toLowerCase() + "." + imageExtension, width:'32', height:'32'}
+							]}
+						]},
+						{tag:'div', children:[
+							{tag:'a', href:'#', id:'fullLoginHistoryLink', htmlString:Clipperz.PM.Strings['fullLoginHistoryLinkLabel']}
+						]},
+						{tag:'div', cls:'inner_footer', html:'&nbsp;'}
+					]}
+				);
+			}
+			
+			contentChildren.push(
+				{tag:'table', id:'shouldDownloadOfflineCopyWarningBox', children:[
+					{tag:'tbody', width:'100%', children:[
+						{tag:'tr', children:[
+							{tag:'td', cls:'offlineCopyDownloadWarningIconTD', valign:'top', align:'center', width:'50', children:(this.user().shouldDownloadOfflineCopy() ? [{tag:'img', src:Clipperz.PM.Strings['icons_baseUrl'] + "/misc/offlineCopyWarning.png" , width:'32', height:'32'}]: [])},
+							{tag:'td', children:[
+								{tag:'div', cls:'offlineCopyDownloadWarning', htmlString:(this.user().shouldDownloadOfflineCopy() ? Clipperz.PM.Strings['offlineCopyDownloadWarning']: Clipperz.PM.Strings['offlineCopyDownloadOk'])}
+							]}
+						]}
+					]}
+				]}
+			);
+
+
+			result = [{tag:'div', id:'loginInfoWrapper', children:[{tag:'div', id:'loginInfo', children:[
+				{tag:'div', cls:'header', html:'&nbsp;'},
+				{tag:'div', cls:'content', children:contentChildren},
+				{tag:'div', cls:'footer', html:'&nbsp;'}
+			]}]}];
+
+//			this.setShouldShowLoginInfo(false);
+		} else {
+			resut = [];
+		}
+
+		return result;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'shouldShowLoginInfo': function() {
+		return this._shouldShowLoginInfo;
+	},
+	
+	'setShouldShowLoginInfo': function(aValue) {
+		this._shouldShowLoginInfo = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'showLoginHistoryPanel': function(anEvent) {
+		anEvent.stop();
+		
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'mainTabPanel.accountTab', true);
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'accountTabPanel.loginHistoryTab', true);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'showDownloadOfflineCopyPanel': function(anEvent) {
+		anEvent.stop();
+		
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'mainTabPanel.dataTab', true);
+		Clipperz.NotificationCenter.notify(this, 'selectTab', 'dataTabPanel.offlineCopyTab', true);
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/NotesComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/NotesComponent.js
new file mode 100644
index 0000000..6f454fc
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/NotesComponent.js
@@ -0,0 +1,240 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+
+
+Clipperz.PM.Components.RecordDetail.NotesComponent = function(anElement, args) {
+//MochiKit.Logging.logDebug(">>> new NotesComponent");
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.NotesComponent.superclass.constructor.call(this, anElement, args);
+
+	this.mainComponent().addEditComponent(this);
+
+	this._staticOffset = null;
+	this._componentHeight = 50;
+	this._mouseMoveIdentifier = null;
+	this._mouseUpIdentifier = null;
+	
+	this.element().setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+	
+	this.render();
+//MochiKit.Logging.logDebug("<<< new NotesComponent");
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.NotesComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.NotesComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.record().notes();
+	},
+
+	'setValue': function(aValue) {
+		this.record().setNotes(aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.render");
+/*
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', colspan:'5', children:[
+			{tag:'span', cls:'noteFieldLabel', htmlString:Clipperz.PM.Strings['recordDetailNotesLabel']},
+			{tag:'div', cls:'noteFieldContent', id:this.getId('notes')}
+		]});
+*/		
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'span', cls:'noteFieldLabel', htmlString:Clipperz.PM.Strings['recordDetailNotesLabel']});
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'div', cls:'noteFieldContent', id:this.getId('notes'), children:[
+			{tag:'div', id:this.getId('resizableDiv'), cls:'resizable-textarea', children:[
+				{tag:'div', id:this.getId('contentView'), cls:'viewMode', html:""},
+				{tag:'div', id:this.getId('contentEdit'), children:[
+					{tag:'span', children:[
+						{tag:'textarea', id:this.getId('textarea'), html:""}
+					]}
+				]},
+				{tag:'div', id:this.getId('grippie'), cls:'grippie'}
+			]}
+		]});
+
+		this.getElement('contentView').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+		this.getElement('contentEdit').setVisibilityMode(YAHOO.ext.Element.DISPLAY);
+
+		MochiKit.Signal.connect(this.getId('grippie'), 'onmousedown', this, 'startResize');
+		
+		this.update();
+//MochiKit.Logging.logDebug("<<< NotesComponent.render");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.updateViewMode");
+//		this.getElement('notes').update(this.value().replace(/\n/g, '<br>'));
+
+		this.getElement('contentView').update(Clipperz.Base.sanitizeString(this.value()).replace(/\n/g, '<br>'));
+
+		if (this.isNoteEmpty()) {
+			this.element().hide();
+		} else {
+			this.getElement('contentView').show();
+			this.getElement('contentView').setHeight(this.componentHeight());
+		}
+		this.getElement('contentEdit').hide();
+
+//MochiKit.Logging.logDebug("<<< NotesComponent.updateViewMode");
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.updateEditMode");
+		this.getDom('textarea').value = this.value().replace(/\n/g, Clipperz_normalizedNewLine);
+
+		this.getElement('contentView').hide();
+		this.getElement('contentEdit').show();
+		
+		this.getElement('textarea').setHeight(this.componentHeight());
+//MochiKit.Logging.logDebug("<<< NotesComponent.updateEditMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+//MochiKit.Logging.logDebug(">>> NotesComponent.synchronizeComponentValues");
+		if (this.getElement('textarea') != null) {
+			this.setValue(this.getDom('textarea').value.replace(/(\x0a\x0d|\x0d\x0a)/g,'\n'));
+		}
+//MochiKit.Logging.logDebug("<<< NotesComponent.synchronizeComponentValues");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'componentHeight': function() {
+		return this._componentHeight;
+	},
+	
+	'setComponentHeight': function(aValue) {
+		this._componentHeight = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'isNoteEmpty': function() {
+		return !/[^ \n]/.test(this.value());
+	},
+	
+	//-------------------------------------------------------------------------
+	
+	'staticOffset': function() {
+		return this._staticOffset;
+	},
+	
+	'setStaticOffset': function(aValue) {
+		this._staticOffset = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+
+	'startResize': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> startResize");
+		if (this.editMode() == 'VIEW') {
+			this.setStaticOffset(this.getElement('contentView').getHeight() - anEvent.mouse().page['y'])
+		} else {
+			this.setStaticOffset(this.getElement('textarea').getHeight() - anEvent.mouse().page['y'])
+//			this.getElement('textarea').setStyle('opacity', 0.25);
+		}
+		this.setMouseMoveIdentifier(MochiKit.Signal.connect(MochiKit.DOM.currentDocument(), 'onmousemove', this, 'whileResizing'));
+		this.setMouseUpIdentifier(MochiKit.Signal.connect(MochiKit.DOM.currentDocument(), 'onmouseup', this, 'endResize'));
+		anEvent.stop();
+//MochiKit.Logging.logDebug("<<< startResize");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'whileResizing': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> whileResizing");
+		this.getElement('textarea').setHeight(Math.max(32, this.staticOffset() + anEvent.mouse().page['y']) + 'px');
+		this.getElement('contentView').setHeight(Math.max(32, this.staticOffset() + anEvent.mouse().page['y']) + 'px');
+		anEvent.stop();
+//MochiKit.Logging.logDebug("<<< whileResizing");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'endResize': function(anEvent) {
+//MochiKit.Logging.logDebug(">>> endResize");
+		MochiKit.Signal.disconnect(this.mouseMoveIdentifier());
+		this.setMouseMoveIdentifier(null);
+		MochiKit.Signal.disconnect(this.mouseUpIdentifier());
+		this.setMouseUpIdentifier(null);
+//		this.getElement('textarea').setStyle('opacity', 1);
+
+		this.setComponentHeight(this.getElement('textarea').getHeight());
+//MochiKit.Logging.logDebug("<<< endResize");
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'mouseMoveIdentifier': function() {
+		return this._mouseMoveIdentifier;
+	},
+	
+	'setMouseMoveIdentifier': function(aValue) {
+		this._mouseMoveIdentifier = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'mouseUpIdentifier': function() {
+		return this._mouseUpIdentifier;
+	},
+	
+	'setMouseUpIdentifier': function(aValue) {
+		this._mouseUpIdentifier = aValue;
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+
diff --git a/frontend/beta/js/Clipperz/PM/Components/RecordDetail/TitleComponent.js b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/TitleComponent.js
new file mode 100644
index 0000000..52e718c
--- a/dev/null
+++ b/frontend/beta/js/Clipperz/PM/Components/RecordDetail/TitleComponent.js
@@ -0,0 +1,137 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
+if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
+if (typeof(Clipperz.PM.Components) == 'undefined') { Clipperz.PM.Components = {}; }
+if (typeof(Clipperz.PM.Components.RecordDetail) == 'undefined') { Clipperz.PM.Components.RecordDetail = {}; }
+
+//#############################################################################
+
+Clipperz.PM.Components.RecordDetail.TitleComponent = function(anElement, args) {
+	args = args || {};
+
+    Clipperz.PM.Components.RecordDetail.TitleComponent.superclass.constructor.call(this, anElement, args);
+
+//	this._inputElement = null;
+
+	this.mainComponent().addEditComponent(this);
+
+	this.render();
+	
+	return this;
+}
+
+//=============================================================================
+
+YAHOO.extendX(Clipperz.PM.Components.RecordDetail.TitleComponent, Clipperz.PM.Components.RecordDetail.AbstractComponent, {
+
+	'toString': function() {
+		return "Clipperz.PM.Components.RecordDetail.TitleComponent component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'value': function() {
+		return this.record().label();
+	},
+
+	'setValue': function(aValue) {
+		this.record().setLabel(aValue);
+	},
+	
+	//-------------------------------------------------------------------------
+/*
+	'inputElement': function() {
+		return this._inputElement;
+	},
+	
+	'setInputElement': function(aValue) {
+		this._inputElement = aValue;
+	},
+*/
+	//-------------------------------------------------------------------------
+
+	'render': function() {
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', html:'&#160'});
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', colspan:"3", html:'&#160', children:[
+//			{tag:'div', /*style:'border: 1px solid green;',*/ id:this.getId('title')}
+//		]});
+//		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'td', html:'&#160'});
+//		
+//		this.setInputElement(new Clipperz.PM.Components.TextFormField(this.getElement('title'), {editMode:this.editMode(), value:this.value()}));
+		
+		this.update();
+	},
+
+	//-------------------------------------------------------------------------
+/*
+	'update': function() {
+		this.inputElement().update({value:this.value(), editMode:this.editMode()});
+	},
+*/	
+	//-------------------------------------------------------------------------
+
+	'updateViewMode': function() {
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'h2', html:this.value()});
+	},
+
+	//-------------------------------------------------------------------------
+	
+	'updateEditMode': function() {
+//MochiKit.Logging.logDebug(">>> TitleComponent.updateEditMode");
+//		this.getElement('title').update("");
+//		Clipperz.YUI.DomHelper.append(this.getDom('title'), {tag:'div', id:this.getId('title_input')});
+//		this.setInputElement(Clipperz.YUI.DomHelper.append(this.getDom('title_input'), {tag:'input', type:'text', value:this.value()}, true));
+		
+		this.element().update("");
+		Clipperz.YUI.DomHelper.append(this.element().dom, {tag:'input', id:this.getId('titleField'), type:'text', value:"this.value()"});
+		this.getElement('titleField').dom.value = this.value();
+		
+//MochiKit.Logging.logDebug("<<< TitleComponent.updateEditMode");
+	},
+
+	//-------------------------------------------------------------------------
+
+	'synchronizeComponentValues': function() {
+		var inputElement;
+		
+//MochiKit.Logging.logDebug(">>> TitleComponent.synchronizeComponentValues");
+		inputElement = this.element().getChildrenByTagName('input')[0];
+		
+		if (inputElement != null) {
+			this.setValue(inputElement.dom.value);
+		}
+//MochiKit.Logging.logDebug("<<< TitleComponent.synchronizeComponentValues");
+	},
+	
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});
+