First version of the newly restructured repository

79 files changed, 18453 insertions, 0 deletions

diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/CoverActions/download.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/CoverActions/download.js
new file mode 100644
index 0000000..169946a
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/CoverActions/download.js
@@ -0,0 +1,120 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //download.js
+        //Download
+//
+        //Created by Giulio Cesare Solaroli on 3/15/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_CoverActions_downloadWidth = 46.0;
+var kClipperz_PM_UI_Canvas_CoverActions_downloadHeight = 46.0;
+
+function Clipperz_PM_UI_Canvas_CoverActions_download(canvas, aColor, aFillColor, aThickness)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var stroke;
+        var path;
+        var pointX;
+        var pointY;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_CoverActions_downloadWidth + canvas.height / kClipperz_PM_UI_Canvas_CoverActions_downloadHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_CoverActions_downloadWidth, canvas.height / kClipperz_PM_UI_Canvas_CoverActions_downloadHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_CoverActions_downloadWidth, kClipperz_PM_UI_Canvas_CoverActions_downloadHeight);
+        
+        // arrow
+        
+        stroke = aThickness;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 16.5;
+        pointY = 22.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 19.5;
+        pointY = 8.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 30.038;
+        pointY = 10.605;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.354;
+        pointY = 24.354;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 33.28;
+        pointY = 25.293;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 19.81;
+        pointY = 36.828;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 10.07;
+        pointY = 21.617;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 16.5;
+        pointY = 22.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aFillColor;
+        context.fill();
+        context.strokeStyle = aColor;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.stroke();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/CoverActions/look.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/CoverActions/look.js
new file mode 100644
index 0000000..b8e535b
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/CoverActions/look.js
@@ -0,0 +1,208 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //look.js
+        //Look
+//
+        //Created by Giulio Cesare Solaroli on 3/15/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_CoverActions_lookWidth = 46.0;
+var kClipperz_PM_UI_Canvas_CoverActions_lookHeight = 46.0;
+
+function Clipperz_PM_UI_Canvas_CoverActions_look(canvas, aColor, aFillColor, aThickness)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var stroke;
+        var path;
+        var pointX;
+        var pointY;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_CoverActions_lookWidth + canvas.height / kClipperz_PM_UI_Canvas_CoverActions_lookHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_CoverActions_lookWidth, canvas.height / kClipperz_PM_UI_Canvas_CoverActions_lookHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_CoverActions_lookWidth, kClipperz_PM_UI_Canvas_CoverActions_lookHeight);
+        
+        // Layer 6
+        
+        stroke = aThickness;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.save();
+        context.translate(17.5, 23.0);
+        context.rotate(-0.503);
+        context.translate(-17.5, -23.0);
+        context.beginPath();
+        pointX = 28.5;
+        pointY = 31.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 28.5;
+        pointY = 14.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 6.5;
+        pointY = 14.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 6.5;
+        pointY = 31.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 28.5;
+        pointY = 31.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aFillColor;
+        context.fill();
+        context.strokeStyle = aColor;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.stroke();
+        context.restore();
+        
+        // Layer 3
+        
+        stroke = aThickness;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.save();
+        context.translate(22.5, 20.0);
+        context.rotate(-0.071);
+        context.translate(-22.5, -20.0);
+        context.beginPath();
+        pointX = 33.5;
+        pointY = 28.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 33.5;
+        pointY = 11.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 11.5;
+        pointY = 11.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 11.5;
+        pointY = 28.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 33.5;
+        pointY = 28.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aFillColor;
+        context.fill();
+        context.strokeStyle = aColor;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.stroke();
+        context.restore();
+        
+        // Layer 4
+        
+        stroke = aThickness;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.save();
+        context.translate(27.5, 18.0);
+        context.rotate(0.232);
+        context.translate(-27.5, -18.0);
+        context.beginPath();
+        pointX = 38.5;
+        pointY = 26.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 38.5;
+        pointY = 9.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 16.5;
+        pointY = 9.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 16.5;
+        pointY = 26.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 38.5;
+        pointY = 26.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aFillColor;
+        context.fill();
+        context.strokeStyle = aColor;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.stroke();
+        context.restore();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/directLogin.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/directLogin.js
new file mode 100644
index 0000000..9c4e5ba
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/directLogin.js
@@ -0,0 +1,209 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //directLogin.js
+        //directLogin
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Features_directLoginWidth = 76.0;
+var kClipperz_PM_UI_Canvas_Features_directLoginHeight = 76.0;
+
+function Clipperz_PM_UI_Canvas_Features_directLogin(canvas, aColor, aBannerColor, aBannerBackgroundColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var stroke;
+        var path;
+        var pointX;
+        var pointY;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Features_directLoginWidth + canvas.height / kClipperz_PM_UI_Canvas_Features_directLoginHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Features_directLoginWidth, canvas.height / kClipperz_PM_UI_Canvas_Features_directLoginHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Features_directLoginWidth, kClipperz_PM_UI_Canvas_Features_directLoginHeight);
+        
+        // Layer 2
+        
+        stroke = 6.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 30.0;
+        pointY = 41.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 45.579;
+        pointY = 25.451;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.stroke();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 34.207;
+        pointY = 45.697;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 24.101;
+        pointY = 37.52;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 24.122;
+        pointY = 47.828;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 34.207;
+        pointY = 45.697;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        stroke = 6.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 24.631;
+        pointY = 28.971;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 46.497;
+        pointY = 26.451;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 25.014;
+        pointY = 35.265;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 22.166;
+        pointY = 22.58;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 15.784;
+        pointY = 30.675;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 25.014;
+        pointY = 35.265;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        stroke = 6.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 42.282;
+        pointY = 47.03;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 47.771;
+        pointY = 25.714;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 48.294;
+        pointY = 48.929;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 35.432;
+        pointY = 47.039;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 40.7;
+        pointY = 55.899;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 48.294;
+        pointY = 48.929;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/protect.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/protect.js
new file mode 100644
index 0000000..501b69b
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/protect.js
@@ -0,0 +1,237 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //protect.js
+        //protect
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Features_protectWidth = 76.0;
+var kClipperz_PM_UI_Canvas_Features_protectHeight = 76.0;
+
+function Clipperz_PM_UI_Canvas_Features_protect(canvas, aColor, aBannerColor, aBannerBackgroundColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var controlPoint1X;
+        var controlPoint1Y;
+        var controlPoint2X;
+        var controlPoint2Y;
+        var stroke;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Features_protectWidth + canvas.height / kClipperz_PM_UI_Canvas_Features_protectHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Features_protectWidth, canvas.height / kClipperz_PM_UI_Canvas_Features_protectHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Features_protectWidth, kClipperz_PM_UI_Canvas_Features_protectHeight);
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 38.5;
+        pointY = 36.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 37.068;
+        pointY = 38.816;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 37.41;
+        controlPoint1Y = 36.234;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 37.175;
+        controlPoint2Y = 37.907;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 37.031;
+        pointY = 40.802;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 36.991;
+        controlPoint1Y = 39.474;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 36.98;
+        controlPoint2Y = 40.141;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 37.258;
+        pointY = 42.23;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 37.068;
+        controlPoint1Y = 41.283;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 37.139;
+        controlPoint2Y = 41.762;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 38.348;
+        pointY = 43.979;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 37.402;
+        controlPoint1Y = 42.799;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 37.682;
+        controlPoint2Y = 43.798;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 38.5;
+        pointY = 36.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 40.249;
+        controlPoint1Y = 44.497;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 40.723;
+        controlPoint2Y = 36.303;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 38.5;
+        pointY = 36.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 50.0;
+        pointY = 52.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 26.0;
+        pointY = 52.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 26.0;
+        pointY = 33.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 50.0;
+        pointY = 33.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 50.0;
+        pointY = 52.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 47.0;
+        pointY = 32.463;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 38.0;
+        pointY = 52.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 47.0;
+        controlPoint1Y = 52.925;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 38.0;
+        controlPoint2Y = 52.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 29.0;
+        pointY = 32.463;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 38.0;
+        controlPoint1Y = 52.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 29.0;
+        controlPoint2Y = 52.925;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 47.0;
+        pointY = 32.463;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 29.0;
+        controlPoint1Y = 12.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 47.0;
+        controlPoint2Y = 12.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.strokeStyle = aColor;
+        stroke = 4.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        stroke *= 2.0;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.save();
+        context.clip();
+        context.stroke();
+        context.restore();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/share.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/share.js
new file mode 100644
index 0000000..825a17e
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/share.js
@@ -0,0 +1,1719 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //share.js
+        //share
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Features_shareWidth = 76.0;
+var kClipperz_PM_UI_Canvas_Features_shareHeight = 76.0;
+
+function Clipperz_PM_UI_Canvas_Features_share(canvas, aColor, aBannerColor, aBannerBackgroundColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var controlPoint1X;
+        var controlPoint1Y;
+        var controlPoint2X;
+        var controlPoint2Y;
+        var stroke;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Features_shareWidth + canvas.height / kClipperz_PM_UI_Canvas_Features_shareHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Features_shareWidth, canvas.height / kClipperz_PM_UI_Canvas_Features_shareHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Features_shareWidth, kClipperz_PM_UI_Canvas_Features_shareHeight);
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 43.179;
+        pointY = 18.621;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 37.163;
+        pointY = 12.605;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 43.179;
+        controlPoint1Y = 15.32;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 40.463;
+        controlPoint2Y = 12.605;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 31.147;
+        pointY = 18.621;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 33.863;
+        controlPoint1Y = 12.605;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 31.147;
+        controlPoint2Y = 15.32;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 37.163;
+        pointY = 24.637;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 31.147;
+        controlPoint1Y = 21.921;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 33.863;
+        controlPoint2Y = 24.637;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 43.179;
+        pointY = 18.621;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 40.463;
+        controlPoint1Y = 24.637;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 43.179;
+        controlPoint2Y = 21.921;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 56.548;
+        pointY = 53.379;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 51.2;
+        pointY = 48.032;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 56.548;
+        controlPoint1Y = 50.446;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 54.134;
+        controlPoint2Y = 48.032;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 45.853;
+        pointY = 53.379;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 48.267;
+        controlPoint1Y = 48.032;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 45.853;
+        controlPoint2Y = 50.446;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 51.2;
+        pointY = 58.727;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 45.853;
+        controlPoint1Y = 56.313;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 48.267;
+        controlPoint2Y = 58.727;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 56.548;
+        pointY = 53.379;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 54.134;
+        controlPoint1Y = 58.727;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 56.548;
+        controlPoint2Y = 56.313;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 31.147;
+        pointY = 38.674;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 25.8;
+        pointY = 33.326;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 31.147;
+        controlPoint1Y = 35.74;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 28.733;
+        controlPoint2Y = 33.326;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.452;
+        pointY = 38.674;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 22.866;
+        controlPoint1Y = 33.326;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.452;
+        controlPoint2Y = 35.74;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.8;
+        pointY = 44.021;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.452;
+        controlPoint1Y = 41.607;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 22.866;
+        controlPoint2Y = 44.021;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 31.147;
+        pointY = 38.674;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 28.733;
+        controlPoint1Y = 44.021;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 31.147;
+        controlPoint2Y = 41.607;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 39.168;
+        pointY = 48.032;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 33.821;
+        pointY = 42.684;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 39.168;
+        controlPoint1Y = 45.098;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 36.754;
+        controlPoint2Y = 42.684;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 28.473;
+        pointY = 48.032;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 30.887;
+        controlPoint1Y = 42.684;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 28.473;
+        controlPoint2Y = 45.098;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 33.821;
+        pointY = 53.379;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 28.473;
+        controlPoint1Y = 50.965;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 30.887;
+        controlPoint2Y = 53.379;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 39.168;
+        pointY = 48.032;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 36.754;
+        controlPoint1Y = 53.379;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 39.168;
+        controlPoint2Y = 50.965;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 56.548;
+        pointY = 29.984;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 53.206;
+        pointY = 26.642;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 56.548;
+        controlPoint1Y = 28.151;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 55.039;
+        controlPoint2Y = 26.642;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 49.863;
+        pointY = 29.984;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 51.372;
+        controlPoint1Y = 26.642;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 49.863;
+        controlPoint2Y = 28.151;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 53.206;
+        pointY = 33.326;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 49.863;
+        controlPoint1Y = 31.817;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 51.372;
+        controlPoint2Y = 33.326;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 56.548;
+        pointY = 29.984;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 55.039;
+        controlPoint1Y = 33.326;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 56.548;
+        controlPoint2Y = 31.817;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 49.863;
+        pointY = 39.342;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 46.521;
+        pointY = 36.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 49.863;
+        controlPoint1Y = 37.509;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 48.355;
+        controlPoint2Y = 36.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 43.179;
+        pointY = 39.342;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 44.688;
+        controlPoint1Y = 36.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 43.179;
+        controlPoint2Y = 37.509;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 46.521;
+        pointY = 42.684;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 43.179;
+        controlPoint1Y = 41.176;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 44.688;
+        controlPoint2Y = 42.684;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 49.863;
+        pointY = 39.342;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 48.355;
+        controlPoint1Y = 42.684;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 49.863;
+        controlPoint2Y = 41.176;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 37.163;
+        pointY = 19.289;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 53.206;
+        pointY = 29.984;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.lineWidth = stroke;
+        context.lineCap = "square";
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 50.532;
+        pointY = 54.048;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 37.163;
+        pointY = 48.7;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 27.805;
+        pointY = 33.995;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 33.153;
+        pointY = 24.637;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 38.5;
+        pointY = 24.637;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 45.184;
+        pointY = 36.668;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 37.163;
+        pointY = 19.289;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 34.155;
+        pointY = 44.857;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 26.468;
+        pointY = 36.668;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 52.871;
+        pointY = 30.151;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 53.206;
+        pointY = 31.321;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 51.535;
+        pointY = 52.878;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 26.468;
+        pointY = 38.005;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 46.856;
+        pointY = 39.175;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 26.468;
+        pointY = 38.005;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 34.489;
+        pointY = 48.7;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        stroke = 1.0;
+        stroke *= resolution;
+        if (stroke < 1.0)
+                stroke = Math.ceil(stroke);
+        else
+                stroke = Math.round(stroke);
+        stroke /= resolution;
+        alignStroke = (0.5 * stroke * resolution) % 1.0;
+        context.beginPath();
+        pointX = 34.489;
+        pointY = 48.7;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 46.521;
+        pointY = 39.342;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.strokeStyle = aColor;
+        context.stroke();
+        
+        // Layer 2
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 38.974;
+        pointY = 0.013;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 53.593;
+        pointY = 3.386;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 44.035;
+        controlPoint1Y = 0.11;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 48.977;
+        controlPoint2Y = 1.35;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 3.386;
+        pointY = 53.593;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.011;
+        pointY = 37.17;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 1.013;
+        controlPoint1Y = 48.448;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = -0.062;
+        controlPoint2Y = 42.82;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 37.17;
+        pointY = 0.011;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 38.974;
+        pointY = 0.013;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 38.325;
+        controlPoint1Y = -0.004;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 37.723;
+        controlPoint2Y = -0.004;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 38.974;
+        pointY = 0.013;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aBannerBackgroundColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 6.58;
+        pointY = 36.628;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 7.533;
+        pointY = 34.418;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 6.575;
+        controlPoint1Y = 35.794;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 6.893;
+        controlPoint2Y = 35.058;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 10.253;
+        pointY = 33.382;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 8.389;
+        controlPoint1Y = 33.562;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 9.296;
+        controlPoint2Y = 33.216;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 11.555;
+        pointY = 33.979;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 10.787;
+        controlPoint1Y = 33.479;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 11.221;
+        controlPoint2Y = 33.678;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 10.492;
+        pointY = 35.043;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 9.673;
+        pointY = 34.756;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 10.179;
+        controlPoint1Y = 34.868;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 9.906;
+        controlPoint2Y = 34.772;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 8.482;
+        pointY = 35.285;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 9.259;
+        controlPoint1Y = 34.729;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 8.862;
+        controlPoint2Y = 34.905;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 8.035;
+        pointY = 36.667;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 8.095;
+        controlPoint1Y = 35.671;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 7.946;
+        controlPoint2Y = 36.132;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 9.024;
+        pointY = 38.326;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 8.124;
+        controlPoint1Y = 37.203;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 8.453;
+        controlPoint2Y = 37.756;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 10.661;
+        pointY = 39.255;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 9.595;
+        controlPoint1Y = 38.897;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 10.141;
+        controlPoint2Y = 39.207;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 11.987;
+        pointY = 38.782;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 11.181;
+        controlPoint1Y = 39.304;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 11.623;
+        controlPoint2Y = 39.146;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 12.473;
+        pointY = 37.563;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 12.359;
+        controlPoint1Y = 38.409;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 12.522;
+        controlPoint2Y = 38.003;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 12.152;
+        pointY = 36.704;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 12.45;
+        controlPoint1Y = 37.324;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 12.343;
+        controlPoint2Y = 37.037;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 13.205;
+        pointY = 35.651;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 13.853;
+        pointY = 37.71;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 13.668;
+        controlPoint1Y = 36.297;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 13.884;
+        controlPoint2Y = 36.984;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 12.919;
+        pointY = 39.687;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 13.822;
+        controlPoint1Y = 38.436;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 13.51;
+        controlPoint2Y = 39.095;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 10.488;
+        pointY = 40.709;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 12.187;
+        controlPoint1Y = 40.419;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 11.377;
+        controlPoint2Y = 40.759;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 7.919;
+        pointY = 39.397;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 9.597;
+        controlPoint1Y = 40.656;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 8.741;
+        controlPoint2Y = 40.218;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 6.58;
+        pointY = 36.628;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 7.031;
+        controlPoint1Y = 38.508;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 6.584;
+        controlPoint2Y = 37.585;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 6.58;
+        pointY = 36.628;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 17.778;
+        pointY = 32.093;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 16.824;
+        pointY = 30.396;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 17.715;
+        controlPoint1Y = 31.534;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 17.397;
+        controlPoint2Y = 30.969;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 15.129;
+        pointY = 29.443;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 16.253;
+        controlPoint1Y = 29.825;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 15.688;
+        controlPoint2Y = 29.507;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 13.658;
+        pointY = 29.978;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 14.569;
+        controlPoint1Y = 29.378;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 14.079;
+        controlPoint2Y = 29.557;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 13.116;
+        pointY = 31.452;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 13.236;
+        controlPoint1Y = 30.399;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 13.056;
+        controlPoint2Y = 30.891;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 14.065;
+        pointY = 33.154;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 13.175;
+        controlPoint1Y = 32.014;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 13.492;
+        controlPoint2Y = 32.581;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 15.767;
+        pointY = 34.104;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 14.638;
+        controlPoint1Y = 33.727;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 15.206;
+        controlPoint2Y = 34.044;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 17.242;
+        pointY = 33.562;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 16.329;
+        controlPoint1Y = 34.164;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 16.82;
+        controlPoint2Y = 33.983;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 17.778;
+        pointY = 32.093;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 17.663;
+        controlPoint1Y = 33.14;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 17.842;
+        controlPoint2Y = 32.651;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 17.778;
+        pointY = 32.093;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 19.216;
+        pointY = 32.201;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 18.143;
+        pointY = 34.463;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 19.228;
+        controlPoint1Y = 32.982;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.87;
+        controlPoint2Y = 33.736;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 15.881;
+        pointY = 35.537;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 17.415;
+        controlPoint1Y = 35.19;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 16.661;
+        controlPoint2Y = 35.548;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 13.009;
+        pointY = 34.211;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 14.88;
+        controlPoint1Y = 35.567;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 13.922;
+        controlPoint2Y = 35.125;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 11.683;
+        pointY = 31.338;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 12.076;
+        controlPoint1Y = 33.279;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 11.634;
+        controlPoint2Y = 32.321;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 12.757;
+        pointY = 29.077;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 11.671;
+        controlPoint1Y = 30.558;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 12.029;
+        controlPoint2Y = 29.804;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 15.018;
+        pointY = 28.003;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 13.484;
+        controlPoint1Y = 28.349;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 14.238;
+        controlPoint2Y = 27.991;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 17.887;
+        pointY = 29.332;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 15.999;
+        controlPoint1Y = 27.957;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 16.955;
+        controlPoint2Y = 28.4;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.216;
+        pointY = 32.201;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.801;
+        controlPoint1Y = 30.246;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.244;
+        controlPoint2Y = 31.202;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.216;
+        pointY = 32.201;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 19.534;
+        pointY = 22.61;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 21.064;
+        pointY = 21.08;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 26.153;
+        pointY = 26.17;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 25.162;
+        pointY = 27.16;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 21.72;
+        pointY = 23.718;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 21.307;
+        pointY = 23.299;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.621;
+        controlPoint1Y = 23.619;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.483;
+        controlPoint2Y = 23.479;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.898;
+        pointY = 22.883;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.131;
+        controlPoint1Y = 23.118;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.995;
+        controlPoint2Y = 22.979;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.206;
+        pointY = 28.117;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 23.173;
+        pointY = 29.149;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 17.946;
+        pointY = 25.835;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 18.362;
+        pointY = 26.244;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.043;
+        controlPoint1Y = 25.931;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.181;
+        controlPoint2Y = 26.068;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 18.781;
+        pointY = 26.656;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.543;
+        controlPoint1Y = 26.42;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.682;
+        controlPoint2Y = 26.557;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 22.224;
+        pointY = 30.099;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 21.233;
+        pointY = 31.09;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 16.144;
+        pointY = 26;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 17.69;
+        pointY = 24.454;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.617;
+        pointY = 27.53;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 19.534;
+        pointY = 22.61;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 28.114;
+        pointY = 24.208;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 27.057;
+        pointY = 25.265;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 21.968;
+        pointY = 20.176;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 23.025;
+        pointY = 19.119;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 28.114;
+        pointY = 24.208;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 23.998;
+        pointY = 18.146;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 25.114;
+        pointY = 17.03;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 30.693;
+        pointY = 18.556;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.14;
+        pointY = 15.004;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 28.131;
+        pointY = 14.013;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 33.22;
+        pointY = 19.102;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 32.157;
+        pointY = 20.165;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 26.464;
+        pointY = 18.629;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 30.079;
+        pointY = 22.244;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.088;
+        pointY = 23.235;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 23.998;
+        pointY = 18.146;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 34.132;
+        pointY = 11.188;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 32.813;
+        pointY = 11.05;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 33.704;
+        controlPoint1Y = 10.921;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 33.264;
+        controlPoint2Y = 10.875;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 32.116;
+        pointY = 11.52;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 32.562;
+        controlPoint1Y = 11.149;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 32.33;
+        controlPoint2Y = 11.306;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 31.57;
+        pointY = 12.994;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 31.706;
+        controlPoint1Y = 11.93;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 31.524;
+        controlPoint2Y = 12.421;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 32.571;
+        pointY = 14.786;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 31.616;
+        controlPoint1Y = 13.567;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 31.95;
+        controlPoint2Y = 14.165;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 34.329;
+        pointY = 15.687;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 33.197;
+        controlPoint1Y = 15.412;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 33.783;
+        controlPoint2Y = 15.713;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 35.693;
+        pointY = 15.104;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 34.874;
+        controlPoint1Y = 15.662;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 35.329;
+        controlPoint2Y = 15.467;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 36.261;
+        pointY = 13.918;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 36.049;
+        controlPoint1Y = 14.747;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 36.239;
+        controlPoint2Y = 14.352;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 35.872;
+        pointY = 12.687;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 36.282;
+        controlPoint1Y = 13.484;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 36.153;
+        controlPoint2Y = 13.074;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 34.695;
+        pointY = 13.864;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 33.845;
+        pointY = 13.015;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 35.965;
+        pointY = 10.895;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 38.696;
+        pointY = 13.626;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 37.992;
+        pointY = 14.33;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 37.25;
+        pointY = 13.802;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 37.208;
+        pointY = 14.866;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 37.287;
+        controlPoint1Y = 14.249;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 37.273;
+        controlPoint2Y = 14.603;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 36.431;
+        pointY = 16.16;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 37.1;
+        controlPoint1Y = 15.319;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 36.841;
+        controlPoint2Y = 15.751;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 34.073;
+        pointY = 17.117;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 35.757;
+        controlPoint1Y = 16.835;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 34.971;
+        controlPoint2Y = 17.153;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 31.473;
+        pointY = 15.863;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 33.155;
+        controlPoint1Y = 17.096;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 32.288;
+        controlPoint2Y = 16.678;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 30.172;
+        pointY = 13.201;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 30.649;
+        controlPoint1Y = 15.039;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 30.216;
+        controlPoint2Y = 14.152;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 31.225;
+        pointY = 10.657;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 30.128;
+        controlPoint1Y = 12.251;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 30.479;
+        controlPoint2Y = 11.402;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 33.276;
+        pointY = 9.59;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 31.872;
+        controlPoint1Y = 10.01;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 32.555;
+        controlPoint2Y = 9.654;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 35.178;
+        pointY = 10.142;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 33.996;
+        controlPoint1Y = 9.525;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 34.63;
+        controlPoint2Y = 9.71;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 34.132;
+        pointY = 11.188;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 34.878;
+        pointY = 7.301;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 35.958;
+        pointY = 6.22;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 37.25;
+        pointY = 7.511;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 39.346;
+        pointY = 10.166;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 38.831;
+        pointY = 10.681;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 36.169;
+        pointY = 8.592;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 34.878;
+        pointY = 7.301;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 38.976;
+        pointY = 11.351;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 40.005;
+        pointY = 10.322;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 41.003;
+        pointY = 11.32;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 39.974;
+        pointY = 12.349;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 38.976;
+        pointY = 11.351;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 41.528;
+        pointY = 10.795;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        context.fillStyle = aBannerColor;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/store.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/store.js
new file mode 100644
index 0000000..eaeb7f1
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Features/store.js
@@ -0,0 +1,310 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+//
+        //store.js
+        //store
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Features_storeWidth = 76.0;
+var kClipperz_PM_UI_Canvas_Features_storeHeight = 76.0;
+
+function Clipperz_PM_UI_Canvas_Features_store(canvas, aColor, aBannerColor, aBannerBackgroundColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Features_storeWidth + canvas.height / kClipperz_PM_UI_Canvas_Features_storeHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Features_storeWidth, canvas.height / kClipperz_PM_UI_Canvas_Features_storeHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Features_storeWidth, kClipperz_PM_UI_Canvas_Features_storeHeight);
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 27.0;
+        pointY = 29.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 24.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 24.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 29.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 29.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 54.0;
+        pointY = 29.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 54.0;
+        pointY = 24.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 24.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 29.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 54.0;
+        pointY = 29.5;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 43.0;
+        pointY = 37.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 43.0;
+        pointY = 32.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 32.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 37.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 43.0;
+        pointY = 37.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 27.0;
+        pointY = 37.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 32.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 32.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 37.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 37.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 27.0;
+        pointY = 44.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 44.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 44.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 46.0;
+        pointY = 44.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 46.0;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 44.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 46.0;
+        pointY = 44.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 40.0;
+        pointY = 51.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 40.0;
+        pointY = 46.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 46.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.0;
+        pointY = 51.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 40.0;
+        pointY = 51.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 27.0;
+        pointY = 51.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 46.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 46.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.0;
+        pointY = 51.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 51.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/GraphicFunctions.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/GraphicFunctions.js
new file mode 100644
index 0000000..5de2e96
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/GraphicFunctions.js
@@ -0,0 +1,68 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Canvas');
+
+MochiKit.Base.update(Clipperz.PM.UI.Canvas , {
+        'marks': {
+                        '!':Clipperz_PM_UI_Canvas_Marks_exclamationMark,
+                        '?':Clipperz_PM_UI_Canvas_Marks_questionMark,
+                        'i':Clipperz_PM_UI_Canvas_Marks_info
+        },
+
+        'features': {
+                        'store':        Clipperz_PM_UI_Canvas_Features_store,
+                        'protect':      Clipperz_PM_UI_Canvas_Features_protect,
+                        'directLogin':Clipperz_PM_UI_Canvas_Features_directLogin,
+                        'share':        Clipperz_PM_UI_Canvas_Features_share
+        },
+        
+        'tips': {
+                        'open':                 Clipperz_PM_UI_Canvas_Tips_open,
+                        'close':        Clipperz_PM_UI_Canvas_Tips_close
+        },
+
+        'star': {
+                        'normal':       Clipperz_PM_UI_Canvas_Star_normal
+        },
+
+        'coverActions': {
+                        'look':                 Clipperz_PM_UI_Canvas_CoverActions_look,
+                        'download':     Clipperz_PM_UI_Canvas_CoverActions_download
+        },
+
+        'registerButton': {
+                        'normal':       Clipperz_PM_UI_Canvas_RegisterButton_normal
+        },
+
+        'logo': {
+                        'normal':       Clipperz_PM_UI_Canvas_Logo_normal
+        },
+        
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Logo/normal.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Logo/normal.js
new file mode 100644
index 0000000..e0bea36
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Logo/normal.js
@@ -0,0 +1,65 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //normal.js
+        //normal
+//
+        //Created by Giulio Cesare Solaroli on 3/25/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Logo_normalWidth = 150.0;
+var kClipperz_PM_UI_Canvas_Logo_normalHeight = 39.0;
+
+function Clipperz_PM_UI_Canvas_Logo_normal(canvas, aMainColor, aSecondaryColor)
+{
+        var context = canvas.getContext("2d");
+        var string;
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Logo_normalWidth, canvas.height / kClipperz_PM_UI_Canvas_Logo_normalHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Logo_normalWidth, kClipperz_PM_UI_Canvas_Logo_normalHeight);
+        
+        // clipper…
+        
+        string = "clipper";
+        context.font = "38.0pt Helvetica-Bold";
+        context.fillStyle = aMainColor;
+        context.fillText(string, -9.0, -9.0);
+        
+        // …z
+        
+        string = "z";
+        context.font = "38.0pt Helvetica-Bold";
+        context.fillStyle = aSecondaryColor;
+        context.fillText(string, 125.0, -9.0);
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/exclamationMark.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/exclamationMark.js
new file mode 100644
index 0000000..f3ae04d
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/exclamationMark.js
@@ -0,0 +1,280 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //exclamationMark.js
+        //!
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Marks_exclamationMarkWidth = 50.0;
+var kClipperz_PM_UI_Canvas_Marks_exclamationMarkHeight = 50.0;
+
+function Clipperz_PM_UI_Canvas_Marks_exclamationMark(canvas, aColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var controlPoint1X;
+        var controlPoint1Y;
+        var controlPoint2X;
+        var controlPoint2Y;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Marks_exclamationMarkWidth + canvas.height / kClipperz_PM_UI_Canvas_Marks_exclamationMarkHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Marks_exclamationMarkWidth, canvas.height / kClipperz_PM_UI_Canvas_Marks_exclamationMarkHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Marks_exclamationMarkWidth, kClipperz_PM_UI_Canvas_Marks_exclamationMarkHeight);
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 26.499;
+        pointY = 10.848;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 20.887;
+        pointY = 11.584;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.395;
+        controlPoint1Y = 10.802;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 22.175;
+        controlPoint2Y = 11.078;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.013;
+        pointY = 13.194;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.335;
+        controlPoint1Y = 11.814;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.921;
+        controlPoint2Y = 12.826;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 23.049;
+        pointY = 28.788;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.243;
+        controlPoint1Y = 15.448;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 22.589;
+        controlPoint2Y = 26.35;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.027;
+        pointY = 29.156;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 23.279;
+        controlPoint1Y = 29.018;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 24.705;
+        controlPoint2Y = 29.202;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.971;
+        pointY = 11.354;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.809;
+        controlPoint1Y = 25.384;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.971;
+        controlPoint2Y = 12.826;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 26.499;
+        pointY = 10.848;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.557;
+        controlPoint1Y = 11.032;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 26.913;
+        controlPoint2Y = 10.848;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 26.499;
+        pointY = 10.848;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 24.337;
+        pointY = 31.962;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 21.899;
+        pointY = 32.882;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 23.463;
+        controlPoint1Y = 31.962;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 22.589;
+        controlPoint2Y = 32.284;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.703;
+        pointY = 35.458;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.163;
+        controlPoint1Y = 33.572;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.703;
+        controlPoint2Y = 34.538;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.669;
+        pointY = 38.08;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.703;
+        controlPoint1Y = 36.47;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.979;
+        controlPoint2Y = 37.344;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.015;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 22.405;
+        controlPoint1Y = 38.77;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 23.325;
+        controlPoint2Y = 39.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 26.821;
+        pointY = 38.034;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.073;
+        controlPoint1Y = 39.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 26.131;
+        controlPoint2Y = 38.724;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.833;
+        pointY = 35.55;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.465;
+        controlPoint1Y = 37.344;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.833;
+        controlPoint2Y = 36.194;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 26.683;
+        pointY = 32.744;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.833;
+        controlPoint1Y = 34.676;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.557;
+        controlPoint2Y = 33.572;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.337;
+        pointY = 31.962;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 26.085;
+        controlPoint1Y = 32.238;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 25.211;
+        controlPoint2Y = 31.962;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.337;
+        pointY = 31.962;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 30.639;
+        pointY = 38.402;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        context.fillStyle = aColor;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/info.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/info.js
new file mode 100644
index 0000000..adab74f
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/info.js
@@ -0,0 +1,391 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //info.js
+        //i
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Marks_infoWidth = 50.0;
+var kClipperz_PM_UI_Canvas_Marks_infoHeight = 50.0;
+
+function Clipperz_PM_UI_Canvas_Marks_info(canvas, aColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var controlPoint1X;
+        var controlPoint1Y;
+        var controlPoint2X;
+        var controlPoint2Y;
+        var color;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Marks_infoWidth + canvas.height / kClipperz_PM_UI_Canvas_Marks_infoHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Marks_infoWidth, canvas.height / kClipperz_PM_UI_Canvas_Marks_infoHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Marks_infoWidth, kClipperz_PM_UI_Canvas_Marks_infoHeight);
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 30.253;
+        pointY = 37.436;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 28.505;
+        pointY = 37.022;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.677;
+        pointY = 35.09;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.953;
+        controlPoint1Y = 36.792;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.677;
+        controlPoint2Y = 36.47;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.631;
+        pointY = 27.546;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.631;
+        controlPoint1Y = 32.974;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.631;
+        controlPoint2Y = 29.892;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.677;
+        pointY = 19.726;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.631;
+        controlPoint1Y = 24.97;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.677;
+        controlPoint2Y = 21.612;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.535;
+        pointY = 21.336;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.331;
+        controlPoint1Y = 20.692;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.593;
+        controlPoint2Y = 21.336;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.443;
+        pointY = 22.762;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 19.397;
+        controlPoint1Y = 21.52;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.305;
+        controlPoint2Y = 22.532;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.283;
+        pointY = 23.82;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.639;
+        controlPoint1Y = 23.222;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.961;
+        controlPoint2Y = 23.452;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.605;
+        pointY = 24.97;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.513;
+        controlPoint1Y = 24.05;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.605;
+        controlPoint2Y = 24.602;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.651;
+        pointY = 29.156;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.651;
+        controlPoint1Y = 25.752;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.651;
+        controlPoint2Y = 27.592;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.605;
+        pointY = 35.228;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.651;
+        controlPoint1Y = 31.364;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.651;
+        controlPoint2Y = 34.216;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.823;
+        pointY = 37.022;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.559;
+        controlPoint1Y = 36.332;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.467;
+        controlPoint2Y = 36.838;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.121;
+        pointY = 37.436;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.363;
+        controlPoint1Y = 37.206;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.857;
+        controlPoint2Y = 37.298;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.121;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.937;
+        controlPoint1Y = 37.62;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.983;
+        controlPoint2Y = 38.77;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.503;
+        pointY = 38.862;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.271;
+        controlPoint1Y = 39.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.927;
+        controlPoint2Y = 38.862;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 30.023;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.401;
+        controlPoint1Y = 38.862;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 29.149;
+        controlPoint2Y = 39.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 30.253;
+        pointY = 37.436;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 30.299;
+        controlPoint1Y = 38.77;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 30.391;
+        controlPoint2Y = 37.62;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 30.253;
+        pointY = 37.436;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 27.493;
+        pointY = 13.976;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 27.125;
+        pointY = 12.228;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.493;
+        controlPoint1Y = 13.608;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.401;
+        controlPoint2Y = 12.688;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.963;
+        pointY = 11.63;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 26.849;
+        controlPoint1Y = 11.998;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 26.113;
+        controlPoint2Y = 11.63;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.513;
+        pointY = 12.688;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 23.767;
+        controlPoint1Y = 11.63;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 22.203;
+        controlPoint2Y = 12.09;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.283;
+        pointY = 14.942;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.145;
+        controlPoint1Y = 13.148;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.145;
+        controlPoint2Y = 14.436;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 22.801;
+        pointY = 17.012;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.513;
+        controlPoint1Y = 15.908;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.973;
+        controlPoint2Y = 16.69;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 26.205;
+        pointY = 16.69;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 23.399;
+        controlPoint1Y = 17.288;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 25.791;
+        controlPoint2Y = 17.058;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.493;
+        pointY = 13.976;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 26.941;
+        controlPoint1Y = 16.046;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.493;
+        controlPoint2Y = 14.896;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.493;
+        pointY = 13.976;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 30.851;
+        pointY = 38.862;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        color = "#FFFFFF";
+        context.fillStyle = color;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/questionMark.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/questionMark.js
new file mode 100644
index 0000000..003c4c2
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Marks/questionMark.js
@@ -0,0 +1,438 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //questionMark.js
+        //?
+//
+        //Created by Giulio Cesare Solaroli on 3/7/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Marks_questionMarkWidth = 50.0;
+var kClipperz_PM_UI_Canvas_Marks_questionMarkHeight = 50.0;
+
+function Clipperz_PM_UI_Canvas_Marks_questionMark(canvas, aColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var controlPoint1X;
+        var controlPoint1Y;
+        var controlPoint2X;
+        var controlPoint2Y;
+        var color;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Marks_questionMarkWidth + canvas.height / kClipperz_PM_UI_Canvas_Marks_questionMarkHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Marks_questionMarkWidth, canvas.height / kClipperz_PM_UI_Canvas_Marks_questionMarkHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Marks_questionMarkWidth, kClipperz_PM_UI_Canvas_Marks_questionMarkHeight);
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 24.118;
+        pointY = 24.464;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 24.854;
+        pointY = 23.406;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 24.118;
+        controlPoint1Y = 24.05;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 24.44;
+        controlPoint2Y = 23.636;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 29.454;
+        pointY = 20.6;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 26.418;
+        controlPoint1Y = 22.532;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 28.534;
+        controlPoint2Y = 21.566;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 30.282;
+        pointY = 17.794;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 29.868;
+        controlPoint1Y = 20.232;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 30.282;
+        controlPoint2Y = 19.082;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.2;
+        pointY = 12.688;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 30.282;
+        controlPoint1Y = 16.322;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 29.454;
+        controlPoint2Y = 14.344;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 21.312;
+        pointY = 10.664;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.636;
+        controlPoint1Y = 11.492;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 23.382;
+        controlPoint2Y = 10.664;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.886;
+        pointY = 11.124;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 20.898;
+        controlPoint1Y = 10.664;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 20.162;
+        controlPoint2Y = 10.894;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 18.0;
+        pointY = 14.666;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 19.104;
+        controlPoint1Y = 11.676;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.0;
+        controlPoint2Y = 14.068;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 18.598;
+        pointY = 15.586;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.0;
+        controlPoint1Y = 14.896;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.138;
+        controlPoint2Y = 15.494;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.794;
+        pointY = 15.908;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 19.012;
+        controlPoint1Y = 15.678;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.426;
+        controlPoint2Y = 15.77;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.36;
+        pointY = 20.002;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 22.508;
+        controlPoint1Y = 16.644;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 25.36;
+        controlPoint2Y = 17.886;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.21;
+        pointY = 21.704;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.36;
+        controlPoint1Y = 20.738;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 25.084;
+        controlPoint2Y = 21.198;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.058;
+        pointY = 24.326;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 23.106;
+        controlPoint1Y = 22.348;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.886;
+        controlPoint2Y = 23.774;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 18.506;
+        pointY = 25.936;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.736;
+        controlPoint1Y = 24.556;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 18.506;
+        controlPoint2Y = 25.338;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.898;
+        pointY = 29.064;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.506;
+        controlPoint1Y = 26.948;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.334;
+        controlPoint2Y = 28.42;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 22.048;
+        pointY = 29.156;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.22;
+        controlPoint1Y = 29.156;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.726;
+        controlPoint2Y = 29.202;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.268;
+        pointY = 27.592;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 22.508;
+        controlPoint1Y = 29.064;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 24.9;
+        controlPoint2Y = 27.96;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.406;
+        pointY = 26.856;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 25.406;
+        controlPoint1Y = 27.454;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 25.544;
+        controlPoint2Y = 26.994;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.118;
+        pointY = 24.464;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 24.578;
+        controlPoint1Y = 25.936;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 24.118;
+        controlPoint2Y = 24.786;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 24.118;
+        pointY = 24.464;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 23.06;
+        pointY = 31.962;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 20.53;
+        pointY = 32.928;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 22.186;
+        controlPoint1Y = 31.962;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.22;
+        controlPoint2Y = 32.33;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 19.426;
+        pointY = 35.458;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 19.794;
+        controlPoint1Y = 33.618;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.426;
+        controlPoint2Y = 34.538;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 20.392;
+        pointY = 38.08;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 19.426;
+        controlPoint1Y = 36.47;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 19.702;
+        controlPoint2Y = 37.344;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 22.738;
+        pointY = 39.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 21.128;
+        controlPoint1Y = 38.77;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 22.048;
+        controlPoint2Y = 39.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.544;
+        pointY = 38.034;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 23.796;
+        controlPoint1Y = 39.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 24.854;
+        controlPoint2Y = 38.724;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 26.556;
+        pointY = 35.55;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 26.188;
+        controlPoint1Y = 37.344;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 26.556;
+        controlPoint2Y = 36.194;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 25.452;
+        pointY = 32.744;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 26.556;
+        controlPoint1Y = 34.676;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 26.326;
+        controlPoint2Y = 33.618;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 23.06;
+        pointY = 31.962;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 24.854;
+        controlPoint1Y = 32.284;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 23.934;
+        controlPoint2Y = 31.962;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 23.06;
+        pointY = 31.962;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 32.214;
+        pointY = 38.402;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        color = "#FFFFFF";
+        context.fillStyle = color;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/RegisterButton/normal.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/RegisterButton/normal.js
new file mode 100644
index 0000000..288e0be
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/RegisterButton/normal.js
@@ -0,0 +1,403 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //normal.js
+        //normal
+//
+        //Created by Giulio Cesare Solaroli on 3/24/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_RegisterButton_normalWidth = 282.0;
+var kClipperz_PM_UI_Canvas_RegisterButton_normalHeight = 93.0;
+
+function Clipperz_PM_UI_Canvas_RegisterButton_normal(canvas, aBackgroundColor, aDarkBackgroundColor, aLightColor, aDarkColor, aStarColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var controlPoint1X;
+        var controlPoint1Y;
+        var controlPoint2X;
+        var controlPoint2Y;
+        var gradient;
+        var color;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_RegisterButton_normalWidth + canvas.height / kClipperz_PM_UI_Canvas_RegisterButton_normalHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_RegisterButton_normalWidth, canvas.height / kClipperz_PM_UI_Canvas_RegisterButton_normalHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_RegisterButton_normalWidth, kClipperz_PM_UI_Canvas_RegisterButton_normalHeight);
+        
+        // background
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 241.0;
+        pointY = 80.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 274.0;
+        pointY = 47.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 259.103;
+        controlPoint1Y = 80.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 274.0;
+        controlPoint2Y = 65.103;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 274.0;
+        pointY = 45.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 241.0;
+        pointY = 12.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 274.0;
+        controlPoint1Y = 26.897;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 259.103;
+        controlPoint2Y = 12.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 60.0;
+        pointY = 12.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 27.0;
+        pointY = 45.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 41.897;
+        controlPoint1Y = 12.0;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 27.0;
+        controlPoint2Y = 26.897;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 27.0;
+        pointY = 47.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 60.0;
+        pointY = 80.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 27.0;
+        controlPoint1Y = 65.103;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 41.897;
+        controlPoint2Y = 80.0;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 241.0;
+        pointY = 80.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        gradient = context.createLinearGradient(150.5, 12.0, 150.5, 80.0);
+        gradient.addColorStop(0.0, aBackgroundColor);
+        gradient.addColorStop(1.0, aDarkBackgroundColor);
+        context.fillStyle = gradient;
+        context.fill();
+        
+        // round
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 44.103;
+        pointY = 4.014;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 65.629;
+        pointY = 10.515;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 51.706;
+        controlPoint1Y = 4.217;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 59.185;
+        controlPoint2Y = 6.475;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 78.65;
+        pointY = 70.918;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 43.0;
+        pointY = 90.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 70.676;
+        controlPoint1Y = 82.788;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 57.23;
+        controlPoint2Y = 89.817;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 0.056;
+        pointY = 44.801;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 18.834;
+        controlPoint1Y = 90.07;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = -1.18;
+        controlPoint2Y = 68.879;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 44.103;
+        pointY = 4.014;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 1.242;
+        controlPoint1Y = 21.708;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 21.202;
+        controlPoint2Y = 3.72;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 44.103;
+        pointY = 4.014;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        gradient = context.createLinearGradient(39.326, 90, 39.326, 4.011);
+        gradient.addColorStop(0.0, aDarkColor);
+        gradient.addColorStop(1.0, aLightColor);
+        context.fillStyle = gradient;
+        context.fill();
+        
+        // *
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 23.983;
+        pointY = 35.944;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 37.25;
+        pointY = 40.261;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 37.25;
+        pointY = 24.963;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 48.231;
+        pointY = 24.963;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 48.231;
+        pointY = 40.261;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 61.498;
+        pointY = 35.944;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 64.481;
+        pointY = 45.402;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 50.961;
+        pointY = 49.592;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 59.784;
+        pointY = 62.224;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 51.659;
+        pointY = 68.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 42.836;
+        pointY = 56.066;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 33.759;
+        pointY = 68.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 25.634;
+        pointY = 62.224;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 34.521;
+        pointY = 49.592;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 21.0;
+        pointY = 45.402;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 23.983;
+        pointY = 35.944;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 68.607;
+        pointY = 119.099;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        context.fillStyle = aStarColor;
+        context.fill();
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 212.0;
+        pointY = 125.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 213.0;
+        pointY = 125.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 212.5;
+        pointY = 124.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 212.0;
+        pointY = 125.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        gradient = context.createLinearGradient(212.5, 125.0, 212.5, 124.0);
+        color = "#FFFFFF";
+        gradient.addColorStop(0.0, color);
+        color = "#A9A9A9";
+        gradient.addColorStop(1.0, color);
+        context.fillStyle = gradient;
+        context.fill();
+        
+        // flip
+        
+        // Setup for Shadow Effect
+        color = "rgba(0.0%, 0.0%, 0.0%, 0.5)";
+        context.save();
+        context.shadowColor = color;
+        context.shadowBlur = 0.0;
+        context.shadowOffsetX = 2.0 * Math.cos(8.377) * resolution;
+        context.shadowOffsetY = 2.0 * Math.sin(8.377) * resolution;
+        
+        // round
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 78.506;
+        pointY = 70.251;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 66.155;
+        pointY = 12.954;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        controlPoint1X = 59.899;
+        controlPoint1Y = 57.427;
+        controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+        controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+        controlPoint2X = 54.678;
+        controlPoint2Y = 32.277;
+        controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+        controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+        context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+        pointX = 78.506;
+        pointY = 70.251;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        gradient = context.createLinearGradient(69.301, 70.251, 69.301, 12.954);
+        gradient.addColorStop(0.0, aDarkColor);
+        gradient.addColorStop(1.0, aLightColor);
+        context.fillStyle = gradient;
+        context.fill();
+        
+        // Shadow Effect
+        context.restore();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Star/normal.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Star/normal.js
new file mode 100644
index 0000000..e70e3b5
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Star/normal.js
@@ -0,0 +1,153 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //normal.js
+        //normal
+//
+        //Created by Giulio Cesare Solaroli on 3/15/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Star_normalWidth = 46.0;
+var kClipperz_PM_UI_Canvas_Star_normalHeight = 46.0;
+
+function Clipperz_PM_UI_Canvas_Star_normal(canvas, aColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Star_normalWidth + canvas.height / kClipperz_PM_UI_Canvas_Star_normalHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Star_normalWidth, canvas.height / kClipperz_PM_UI_Canvas_Star_normalHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Star_normalWidth, kClipperz_PM_UI_Canvas_Star_normalHeight);
+        
+        // *
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 8.613;
+        pointY = 15.583;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 18.563;
+        pointY = 18.821;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 18.563;
+        pointY = 7.347;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 26.799;
+        pointY = 7.347;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 26.799;
+        pointY = 18.821;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 36.749;
+        pointY = 15.583;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 38.986;
+        pointY = 22.677;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 28.846;
+        pointY = 25.819;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 35.463;
+        pointY = 35.293;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 29.369;
+        pointY = 39.625;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 22.752;
+        pointY = 30.675;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 15.944;
+        pointY = 39.625;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 9.85;
+        pointY = 35.293;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 16.515;
+        pointY = 25.819;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 6.375;
+        pointY = 22.677;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 8.613;
+        pointY = 15.583;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        pointX = 42.081;
+        pointY = 77.949;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        context.fillStyle = aColor;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Tips/close.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Tips/close.js
new file mode 100644
index 0000000..216fd24
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Tips/close.js
@@ -0,0 +1,156 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //close.js
+        //close
+//
+        //Created by Giulio Cesare Solaroli on 3/14/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Tips_closeWidth = 310.0;
+var kClipperz_PM_UI_Canvas_Tips_closeHeight = 6.0;
+
+function Clipperz_PM_UI_Canvas_Tips_close(canvas, aColor, aBackgroundColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Tips_closeWidth + canvas.height / kClipperz_PM_UI_Canvas_Tips_closeHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Tips_closeWidth, canvas.height / kClipperz_PM_UI_Canvas_Tips_closeHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Tips_closeWidth, kClipperz_PM_UI_Canvas_Tips_closeHeight);
+        
+        // background
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aBackgroundColor;
+        context.fill();
+        
+        // grid
+        
+        // background
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aBackgroundColor;
+        context.fill();
+        
+        // toggle
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 149.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 161.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 155.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 149.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aColor;
+        context.fill();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Canvas/Tips/open.js b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Tips/open.js
new file mode 100644
index 0000000..f1bdaa9
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Canvas/Tips/open.js
@@ -0,0 +1,163 @@
+/*
+
+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/>.
+
+*/
+
+//
+        //open.js
+        //open
+//
+        //Created by Giulio Cesare Solaroli on 3/14/10
+        //Copyright 2010 Clipperz
+        //This code was generated by Opacity. You may use or modify it in any way.
+//
+
+var kClipperz_PM_UI_Canvas_Tips_openWidth = 310.0;
+var kClipperz_PM_UI_Canvas_Tips_openHeight = 6.0;
+
+function Clipperz_PM_UI_Canvas_Tips_open(canvas, aColor, aBackgroundColor)
+{
+        var context = canvas.getContext("2d");
+        var alignStroke;
+        var resolution;
+        var path;
+        var pointX;
+        var pointY;
+        var color;
+        if (window.devicePixelRatio)
+                resolution = window.devicePixelRatio;
+        else
+                resolution = 1.0;
+        resolution *= 0.5 * (canvas.width / kClipperz_PM_UI_Canvas_Tips_openWidth + canvas.height / kClipperz_PM_UI_Canvas_Tips_openHeight);
+        
+        context.save();
+        context.scale(canvas.width / kClipperz_PM_UI_Canvas_Tips_openWidth, canvas.height / kClipperz_PM_UI_Canvas_Tips_openHeight);
+        context.clearRect(0.0, 0.0, kClipperz_PM_UI_Canvas_Tips_openWidth, kClipperz_PM_UI_Canvas_Tips_openHeight);
+        
+        // background
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aBackgroundColor;
+        context.fill();
+        
+        // grid
+        
+        // background
+        
+        alignStroke = 0.0;
+        context.beginPath();
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 0.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 310.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        context.fillStyle = aBackgroundColor;
+        context.fill();
+        
+        // Layer 1
+        
+        alignStroke = 0.0;
+        context.save();
+        context.translate(155.0, 3.0);
+        context.rotate(-3.142);
+        context.translate(-155.0, -3.0);
+        context.beginPath();
+        pointX = 149.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.moveTo(pointX, pointY);
+        pointX = 161.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 155.0;
+        pointY = 0.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        pointX = 149.0;
+        pointY = 6.0;
+        pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+        pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+        context.lineTo(pointX, pointY);
+        context.closePath();
+        color = "#FFFFFF";
+        context.fillStyle = color;
+        context.fill();
+        context.restore();
+        
+        context.restore();
+}
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js
new file mode 100644
index 0000000..26f2fc4
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/BaseComponent.js
@@ -0,0 +1,611 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+//#############################################################################
+
+var _Clipperz_PM_Components_base_id_ = 0;
+
+//#############################################################################
+
+Clipperz.PM.UI.Common.Components.BaseComponent = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Common.Components.BaseComponent.superclass.constructor.call(this, args);
+
+        this._element = args.element || null;
+        this._ids = {};
+
+        this._slots = {};
+        this._slotComponents = {};
+
+        this._components = {};
+
+        this._cachedSlots = {};
+
+        this._isModal = false;
+        
+        this._isActive = false;
+        this._elementUsedToEnterModalState;
+
+        this._isFullyRendered = false;
+        this._renderingWaitingQueue = [];
+
+        //this._slots = {
+        //              'header':'header',
+        //              'body':         'body',
+        //              'footer':'footer'
+        //};
+
+        return this;
+}
+
+//=============================================================================
+
+//TODO get back to MochiKit.Base.update as we are not extending anything
+//MochiKit.Base.update(Clipperz.PM.UI.Common.Components.BaseComponent.prototype, {
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.BaseComponent, /*Ext.Component*/ Object, {
+
+        'isClipperzPMComponent': true,
+        
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.BaseComponent component";
+        },
+
+        'componentId': function () {
+                return this.getId('_id_');
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'slots': function() {
+                return this._slots;
+        },
+*/
+        'slotComponents': function() {
+                return this._slotComponents;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'components': function () {
+                return this._components;
+        },
+
+        'addComponent': function (aComponent) {
+                this.components()[aComponent.componentId()] = aComponent;
+        },
+        
+        'removeComponent': function (aComponent) {
+                var componentId;
+                
+                componentId = aComponent.componentId();
+                this.components()[componentId].remove();
+                delete this.components()[componentId];
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'domHelper': function() {
+                return Clipperz.YUI.DomHelper;
+        },
+        */
+        //-------------------------------------------------------------------------
+/*
+        'domHelperAppend': function(aValue) {
+                Clipperz.YUI.DomHelper.append(this.element().dom, aValue);
+        },
+        */
+        //-------------------------------------------------------------------------
+
+        'element': function() {
+//MochiKit.Logging.logDebug(">>> BaseComponent.element");
+                return MochiKit.DOM.getElement(this._element);
+        },
+        
+        'setElement': function(aNode) {
+                this._element = aNode;
+        },
+
+        //-----------------------------------------------------
+
+        'displayElement': function() {
+                return this.element();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderInNode': function(aDomNode) {
+                this.setElement(aDomNode);
+                this.render();
+        },
+
+        'render': function() {
+                this.clear();
+                this.renderSelf();
+                this.renderComponents();
+                if (this.shouldShowTranslationHints()) {
+                        this.renderTranslationHints();
+                }
+                if (this.shouldShowElementWhileRendering()) {
+                        MochiKit.Style.showElement(this.displayElement());
+                };
+
+                this._isFullyRendered = true;
+        
+                MochiKit.Iter.forEach(this.renderingWaitingQueue(), MochiKit.Base.methodcaller('callback'));
+                this.resetRenderingWaitingQueue();
+        },
+
+        'renderSelf': function() {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+
+        'renderComponents': function() {
+                        varslotName;
+                
+                for (slotName in this.slotComponents()) {
+                        this.slotComponents()[slotName].renderInNode(this.elementForSlotNamed(slotName));
+                }
+        },
+
+        //.........................................................................
+
+        'isFullyRendered': function () {
+                return this._isFullyRendered;
+        },
+
+        //.........................................................................
+
+        'renderingWaitingQueue': function () {
+                return this._renderingWaitingQueue;
+        },
+        
+        'resetRenderingWaitingQueue': function () {
+                this._renderingWaitingQueue = [];
+        },
+
+        //.........................................................................
+
+        'waitUntilFullyRendered': function () {
+                var deferredResult;
+
+                if (this.isFullyRendered() == true) {
+                        deferredResult = MochiKit.Async.succeed
+                } else {
+                        deferredResult = new Clipperz.Async.Deferred("BaseComponent.waitUntilFullyRendered", {trace:false});
+                        this.renderingWaitingQueue().push(deferredResult);
+                }
+
+                return deferredResult;
+        },
+
+        //-----------------------------------------------------
+
+        'renderTranslationHints': function () {
+                        vartranslatableItems;
+                
+                translatableItems = MochiKit.Selector.findChildElements(this.displayElement(), ['[stringID]']);
+                MochiKit.Iter.forEach(translatableItems, MochiKit.Base.method(this, 'enhanceTranslatableElement'))
+        },
+
+        'enhanceTranslatableElement': function (anElement) {
+//Clipperz.log(">>> enhanceTranslatableElement", anElement);
+        //      new Clipperz.PM.UI.Common.Components.TranslatorWidget({
+        //                      'element':anElement
+        //      });
+
+                MochiKit.Signal.connect(anElement, 'onmouseenter', MochiKit.Base.partial(Clipperz.PM.UI.Common.Components.TranslatorWidget.show, anElement, MochiKit.DOM.getNodeAttribute(anElement, 'stringID')));
+                MochiKit.Signal.connect(anElement, 'onmouseleave', Clipperz.PM.UI.Common.Components.TranslatorWidget.hide);
+//Clipperz.log("<<< enhanceTranslatableElement");
+        },
+
+        //-----------------------------------------------------
+
+        'update': function(args) {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+        
+        'updateSelf': function(args) {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+        
+        'updateComponents': function(args) {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+
+        //-----------------------------------------------------
+
+        'refresh': function() {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+
+        'refreshSelf': function() {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+
+        'refreshComponents': function(args) {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+
+        //-----------------------------------------------------
+
+        'checkSlotNamed': function(aSlotName) {
+                if (typeof(this._slots[aSlotName]) == 'undefined') {
+                        throw new Error("undefined slot");
+                };
+        },
+
+        //-----------------------------------------------------
+
+        'cachedSlots': function() {
+                return this._cachedSlots;
+        },
+        
+        'slotNamed': function(aSlotName) {
+                var result;
+
+                this.checkSlotNamed(aSlotName);
+                if (typeof(this.cachedSlots()[aSlotName]) == 'undefined') {
+                        this.cachedSlots()[aSlotName] = new Clipperz.PM.UI.Common.Components.ComponentSlot(this,aSlotName);
+                }
+                
+                result = this.cachedSlots()[aSlotName];
+                
+                return result;
+        },
+
+        //-----------------------------------------------------
+
+        'elementForSlotNamed': function(aSlotName) {
+                return MochiKit.DOM.getElement(this._slots[aSlotName]);
+        },
+
+        //-----------------------------------------------------
+
+        'componentForSlotNamed': function(aSlotName) {
+                return this.slotComponents()[aSlotName];
+        },
+
+        'setComponentForSlotNamed': function(aComponent, aSlotName) {
+                var domNode;
+
+                this.checkSlotNamed(aSlotName);
+
+                if (this.slotComponents()[aSlotName] != null) {
+                        this.slotComponents()[aSlotName].remove();
+                }
+
+                this.slotComponents()[aSlotName] = aComponent;
+
+        //      domNode = MochiKit.DOM.getElement(this.slotNamed(aSlotName));
+                domNode = this.elementForSlotNamed(aSlotName);
+
+                if (domNode != null) {
+                        aComponent.renderInNode(domNode);
+                }
+        },
+
+        //-----------------------------------------------------
+/*
+        'purgeListeners': function() {
+//MochiKit.Logging.logDebug(">>> Clipperz.PM.UI.Common.Components.BaseComponent.purgeListeners [" + this + "]");
+//MochiKit.Logging.logDebug("--- " + this + ".purgeListeners");
+                Clipperz.NotificationCenter.unregister(this);
+                MochiKit.Signal.disconnectAllTo(this);
+//MochiKit.Logging.logDebug("<<< Clipperz.PM.UI.Common.Components.BaseComponent.purgeListeners");
+        },
+        */
+        //-----------------------------------------------------
+
+        'clear': function() {
+                        varslotName;
+                var componentId;
+
+                MochiKit.Signal.disconnectAllTo(this);
+
+                for (slotName in this.slotComponents()) {
+                        this.slotComponents()[slotName].clear();
+                }
+
+                for (componentId in this.components()) {
+                        this.components()[componentId].clear();
+                }
+
+        //      if (this.element() != null) {
+        //              this.element().innerHTML = "";
+        //      }
+
+                if (this.displayElement() != null) {
+                        if (this.element() != this.displayElement()) {
+                                MochiKit.DOM.removeElement(this.displayElement());
+                        } else {
+                                this.displayElement().innerHTML = "";
+                        }
+                }
+                
+                if (this.isModal()) {
+                                //TODO: cleanup when the closed element was shown modally.
+                }
+        },
+
+
+        'remove': function() {
+                        varslotName;
+                var componentId;
+
+                for (slotName in this.slotComponents()) {
+                        this.slotComponents()[slotName].remove();
+                        delete this.slotComponents()[slotName];
+                }
+
+                for (componentId in this.components()) {
+                        this.components()[componentId].remove();
+                        delete this.components()[componentId];
+                }
+
+                this.clear();
+                MochiKit.Signal.disconnectAll(this);
+        },
+
+        'append': function(aNode, aValue) {
+                        return Clipperz.DOM.Helper.append(aNode, aValue);       
+        },
+        
+        'insertBefore': function (aNode, aValue) {
+                return Clipperz.DOM.Helper.insertBefore(aNode, aValue);
+        },
+
+        'insertAfter': function (aNode, aValue) {
+                return Clipperz.DOM.Helper.insertAfter(aNode, aValue);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'getId': function(aValue) {
+                        varresult;
+
+                if (typeof(aValue) != 'undefined') {
+                        result = this._ids[aValue];
+
+                        if (typeof(result) == 'undefined') {
+                                _Clipperz_PM_Components_base_id_ ++;
+
+                                result = "Clipperz_PM_Components_" + aValue + "_" + _Clipperz_PM_Components_base_id_;
+                                this._ids[aValue] = result;
+                        }
+                } else {
+        //              result = Clipperz.PM.UI.Common.Components.BaseComponent.superclass.getId.call(this);
+                        throw "call to BaseComponent.getId with an undefined value";
+                }
+        
+                return result;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'getElement': function(aValue) {
+                return Clipperz.DOM.get(this.getId(aValue));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'hideElement': function(anElementName) {
+                MochiKit.Style.hideElement(this.getElement(anElementName));
+        },
+
+        'showElement': function(anElementName) {
+                MochiKit.Style.showElement(this.getElement(anElementName));
+        },
+
+        //-------------------------------------------------------------------------
+        
+        'activate': function () {
+                this._isActive = true;
+        },
+        
+        'deactivate': function () {
+                this._isActive = false;
+        },
+        
+        'isActive': function () {
+                return this._isActive;
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'hideSlot': function(aSlotName) {
+                if (this.componentForSlotNamed(aSlotName)) {
+                        this.componentForSlotNamed(aSlotName).deactivate();
+                }
+                MochiKit.Style.hideElement(this.elementForSlotNamed(aSlotName));
+        },
+
+        'showSlot': function(aSlotName) {
+                if (this.componentForSlotNamed(aSlotName)) {
+                        this.componentForSlotNamed(aSlotName).activate();
+                }
+                MochiKit.Style.showElement(this.elementForSlotNamed(aSlotName));
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'shouldShowTranslationHints': function () {
+                return false;
+        },
+        
+        'shouldShowElementWhileRendering': function() {
+                return true;
+        },
+
+        //'shouldRemoveElementWhenClearningUp': function () {
+        //      return true;
+        //},
+
+        //-------------------------------------------------------------------------
+
+        'isModal': function() {
+                return this._isModal;
+        },
+
+        'setIsModal': function(aValue) {
+                this._isModal = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'elementUsedToEnterModalState': function () {
+                return this._elementUsedToEnterModalState;
+        },
+
+        'setElementUsedToEnterModalState': function (aValue) {
+                this._elementUsedToEnterModalState = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'modalDialogMask': function () {
+                return 'modalDialogMask';
+        },
+        
+        'modalDialog': function () {
+                return 'modalDialog';
+        },
+        
+        'modalDialogFrame': function() {
+                return 'modalDialogFrame'
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredShowModal': function(args) {
+                var deferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("BaseComponent.deferredShowModal", {trace:false});
+
+                deferredResult.addMethod(this, 'setIsModal', true);
+                deferredResult.addCallback(MochiKit.Style.showElement, this.modalDialogMask());
+                deferredResult.addCallback(MochiKit.Base.bind(function(someArgs) {
+                        var result;
+                        var duration;
+                        var from;
+                        var to;
+
+                        duration = someArgs.duration || 0.4;
+
+                        this.setElementUsedToEnterModalState(someArgs.openFromElement);
+                        from = Clipperz.Style.getSizeAndPosition(someArgs.openFromElement);
+                        this.renderInNode(this.modalDialog());
+                        MochiKit.DOM.addElementClass(this.modalDialog(), 'fixed');
+                        to = Clipperz.Style.getSizeAndPosition(this.displayElement());
+                        Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition = Clipperz.Base.deepClone(to);
+
+                        MochiKit.Style.hideElement(this.displayElement());
+                        MochiKit.Style.showElement(this.modalDialogFrame());
+                        
+                        result = {from:from, to:to, duration:duration};
+                        return result;
+                }, this, args));
+                deferredResult.addCallback(Clipperz.Visual.deferredResize, this.modalDialogFrame());
+                deferredResult.addCallback(MochiKit.Base.bind(function(someArgs) {
+                        MochiKit.Style.hideElement(this.modalDialogFrame());
+                        MochiKit.Style.showElement(this.displayElement());
+                }, this));
+                deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]);
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredHideModal': function(args) {
+                var deferredResult;
+
+                args = args || {};
+
+                deferredResult = new Clipperz.Async.Deferred("BaseComponent.deferredHideModal", {trace:false});
+                deferredResult.addCallback(MochiKit.Base.bind(function(someArgs) {
+                        var result;
+                        var from;
+                        var toElement;
+                        var to;
+                        var duration;
+
+                        toElement = args.closeToElement || this.elementUsedToEnterModalState();
+                        duration = someArgs.duration || 0.4;
+                        from = Clipperz.Style.getSizeAndPosition(this.displayElement());
+                        to = Clipperz.Style.getSizeAndPosition(toElement);
+
+                        MochiKit.Style.hideElement(this.displayElement());
+                        MochiKit.Style.showElement(this.modalDialogFrame());
+
+                        result = {from:from, to:to, duration:duration};
+                        return result;
+                }, this, args));
+                deferredResult.addCallback(Clipperz.Visual.deferredResize, this.modalDialogFrame());
+                deferredResult.addCallback(MochiKit.Base.bind(function() {
+                        MochiKit.Style.hideElement(this.modalDialogFrame());
+                        MochiKit.Style.hideElement(this.modalDialogMask());
+                }, this));
+                deferredResult.addMethod(this, 'setIsModal', false);
+                        deferredResult.addMethod(this, 'clear');        //##############
+                deferredResult.addCallback(MochiKit.Async.succeed, arguments[arguments.length - 1]);
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+        
+});
+
+Clipperz.PM.UI.Common.Components.BaseComponent_modalDialog = function() {
+        Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body,
+                {tag:'div', id:'modalDialogWrapper', cls:'modalDialogWrapper', children:[
+                        {tag:'div', id:'modalDialogMask', cls:'modalDialogMask'},
+                        {tag:'div', id:'modalDialogFrame', cls:'modalDialogFrame' /*, html:"modal dialog frame"*/},
+                        {tag:'div', id:'modalDialog', cls:'modalDialog'}
+        //              {tag:'div', id:'modalDialog', cls:'modalDialog', children:[{tag:'div'}]}
+                ]}
+        );
+        
+        //MochiKit.Style.hideElement('modalDialogWrapper');
+        MochiKit.Style.hideElement('modalDialogMask');
+        MochiKit.Style.hideElement('modalDialogFrame');
+        //MochiKit.Style.hideElement('modalDialog');
+
+};
+
+//Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition = {'x':'X', 'y':'Y'};
+
+MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.BaseComponent_modalDialog);
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js
new file mode 100644
index 0000000..b2761ea
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Button.js
@@ -0,0 +1,108 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.Button = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.Button.superclass.constructor.apply(this, arguments);
+
+                this._element   = args.element  || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._text              = args.text             || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._isDefault         = args.isDefault|| false;
+
+        this.render();
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Button, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.Button component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'text': function () {
+                return this._text;
+        },
+
+        'isDefault': function () {
+                return this._isDefault;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function () {
+                this.append(this.element(), {tag:'div', id:this.getId('wrapper'), cls:'button_wrapper', children:[
+                        {tag:'div', id:this.getId('bodyWrapper'), cls:'button_bodyWrapper', children:[
+                                {tag:'div', id:this.getId('body'), cls:'button_body', children:[
+                                        {tag:'span', html:this.text()}
+                                ]},
+                                {tag:'div', id:this.getId('footer'), cls:'button_footer'}
+                        ]}
+                ]});
+
+                if (this.isDefault()) {
+                        MochiKit.DOM.addElementClass(this.getId('wrapper'), 'default');
+                }
+
+                        MochiKit.Signal.connect(this.getId('wrapper'), 'onmouseenter',this, 'handleOnMouseEnter');
+                        MochiKit.Signal.connect(this.getId('wrapper'), 'onmouseleave',this, 'handleOnMouseLeave');
+                        MochiKit.Signal.connect(this.getId('wrapper'), 'onmousedown',this, 'handleOnMouseDown');
+                        MochiKit.Signal.connect(this.getId('wrapper'), 'onclick',       this, 'handleOnClick');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleOnMouseEnter': function (anEvent) {
+                MochiKit.DOM.addElementClass(this.getId('wrapper'), 'hover');
+        },
+        
+        'handleOnMouseLeave': function (anEvent) {
+                MochiKit.DOM.removeElementClass(this.getId('wrapper'), 'hover');
+                MochiKit.DOM.removeElementClass(this.getId('wrapper'), 'clicked');
+        },
+
+        'handleOnMouseDown': function (anEvent) {
+                MochiKit.DOM.addElementClass(this.getId('wrapper'), 'clicked');
+        },
+        
+        'handleOnClick': function (anEvent) {
+                MochiKit.Signal.signal(this, 'onclick', anEvent);
+        },
+        
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/ComponentSlot.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/ComponentSlot.js
new file mode 100644
index 0000000..0c6e221
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/ComponentSlot.js
@@ -0,0 +1,64 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+//#############################################################################
+
+
+Clipperz.PM.UI.Common.Components.ComponentSlot = function(aComponent, aSlotName) {
+        this._component = aComponent;
+        this._slotName = aSlotName;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.ComponentSlot, Object, {
+
+        //-------------------------------------------------------------------------
+
+        'slotName': function() {
+                return this._slotName;
+        },
+
+        'component': function() {
+                return this._component;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setContent': function(aComponent) {
+                this.component().setComponentForSlotNamed(aComponent, this.slotName());
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+        
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/FaviconComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/FaviconComponent.js
new file mode 100644
index 0000000..4735f5c
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/FaviconComponent.js
@@ -0,0 +1,91 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.FaviconComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.FaviconComponent.superclass.constructor.apply(this, arguments);
+
+        this.render();
+        this.setSrc(args.src);
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.FaviconComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.FaviconComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'src': function () {
+                return this.element().src;
+        },
+        
+        'setSrc': function (aValue) {
+                this.element().src = (aValue || Clipperz.PM.Strings.getValue('defaultFaviconUrl'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'clear': function () {},
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function () {
+                        MochiKit.Signal.connect(this.element(), 'onerror',this, 'setDefaultFavicon');
+                        MochiKit.Signal.connect(this.element(), 'onabort',this, 'setDefaultFavicon');
+                        MochiKit.Signal.connect(this.element(), 'onload',this, 'handleOnLoad');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setDefaultFavicon': function (anEvent) {
+                MochiKit.Signal.disconnectAll(anEvent.src());
+                this.setSrc(null);
+        },
+
+        'handleOnLoad': function (anEvent) {
+                MochiKit.Signal.disconnectAll(anEvent.src());
+//console.log("HANDLE ON LOAD", anEvent, anEvent.src().src);
+                if (anEvent.src().complete == false) {
+                        this.setSrc(null);
+                }
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/MessagePanelWithProgressBar.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/MessagePanelWithProgressBar.js
new file mode 100644
index 0000000..275bbed
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/MessagePanelWithProgressBar.js
@@ -0,0 +1,164 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.MessagePanelWithProgressBar = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.MessagePanelWithProgressBar.superclass.constructor.apply(this, arguments);
+
+        //      this._openFromElement                   = args.openFromElement          || null;
+                this._onOkCloseToElement                = args.onOkCloseToElement       || null;
+                this._onCancelCloseToElement    = args.onCancelCloseToElement|| null;
+
+                this._canCancelWhileProcessing= ((typeof(args.canCancelWhileProcessing) == 'undefined') ? true : args.canCancelWhileProcessing);
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.MessagePanelWithProgressBar, Clipperz.PM.UI.Common.Components.SimpleMessagePanel, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.MessagePanelWithProgressBar component";
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'openFromElement': function () {
+                return this._openFromElement;
+        },
+*/
+        //-------------------------------------------------------------------------
+
+        'onOkCloseToElement': function () {
+                return this._onOkCloseToElement;
+        },
+
+        'setOnOkCloseToElement': function (anElement) {
+                this._onOkCloseToElement = anElement;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'onCancelCloseToElement': function () {
+                return this._onCancelCloseToElement;
+        },
+
+        'setOnCancelCloseToElement': function (anElement) {
+                this._onCancelCloseToElement = anElement;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'canCancelWhileProcessing': function () {
+                return this._canCancelWhileProcessing;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredShowModal': function (someArgs, aResult) {
+                if (someArgs['onOkCloseToElement'] != null) {
+                        this.setOnOkCloseToElement(someArgs['onOkCloseToElement']);
+                }
+
+                if (someArgs['onCancelCloseToElement'] != null) {
+                        this.setOnCancelCloseToElement(someArgs['onCancelCloseToElement']);
+                }
+
+                Clipperz.PM.UI.Common.Components.MessagePanelWithProgressBar.superclass.deferredShowModal.apply(this, arguments);
+                return this.deferred();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showProgressBar': function () {
+                        varprogressBarElement;
+                
+                this.getElement('container').innerHTML = '';
+
+                progressBarElement = this.append(this.getElement('container'), {tag:'div', cls:'progressBarWrapper'});
+                this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':progressBarElement}));
+
+                if (this.canCancelWhileProcessing() == true) {
+                        this.setButtons([{text:"Cancel", result:'CANCEL'}]);
+                } else {
+                        this.setButtons([]);
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showFailure': function (someParameters) {
+        //      this.setType('ALERT');
+                this.setType(someParameters['type']);
+        //      this.setTitle("Login failed");
+                this.setTitle(someParameters['title']);
+        //      this.setText("Wrong passphrase; the unlock has failed.");
+                this.setText(someParameters['text']);
+        //      this.getElement('container').innerHTML = '';
+                this.getElement('container').innerHTML = '';
+        //      this.setButtons([{text:"Close", result:'CANCEL', isDefault:true}]);
+                this.setButtons(someParameters['buttons']);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'closeOk': function () {
+//console.log("=== closeOk");
+                this.showProgressBar();
+                MochiKit.Async.callLater(0.5, MochiKit.Base.method(this.deferred(), 'callback'));
+                this._deferred = null;
+        },
+        
+        'closeCancel': function () {
+//console.log("=== closeCancel");
+                this.deferredHideModal({closeToElement:this.onCancelCloseToElement()});
+                this.deferred().cancel();
+                this._deferred = null;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredDone': function () {
+//console.log("=== deferredDone");
+                return this.deferredHideModal({closeToElement:this.onOkCloseToElement()});
+        },
+        
+        'deferredError': function (someParameters) {
+//console.log("=== deferredError");
+                this.showFailure(someParameters);
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/PasswordEntropyDisplay.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/PasswordEntropyDisplay.js
new file mode 100644
index 0000000..c1b4f13
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/PasswordEntropyDisplay.js
@@ -0,0 +1,140 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.PasswordEntropyDisplay = function(anElement, args) {
+        args = args || {};
+
+//MochiKit.Logging.logDebug(">>> new TextFormField");
+        Clipperz.PM.UI.Common.Components.PasswordEntropyDisplay.superclass.constructor.call(this, anElement, args);
+
+        this._wrapperElement = null;
+        this._entropyElement = null;
+
+        this.render();
+//MochiKit.Logging.logDebug("<<< new TextFormField");
+        
+        return this;
+};
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.PasswordEntropyDisplay, Clipperz.PM.UI.Common.Components.BaseComponent, {
+        
+        'toString': function() {
+                return "Clipperz.PM.UI.Common.Components.PasswordEntropyDisplay";
+        },
+
+        //-----------------------------------------------------
+
+        'wrapperElement': function() {
+                return this._wrapperElement;
+        },
+        
+        'setWrapperElement': function(aValue) {
+                this._wrapperElement = aValue;
+        },
+        
+        //-----------------------------------------------------
+
+        'passwordElement': function() {
+                return this.element();
+        },
+        
+        //-----------------------------------------------------
+
+        'entropyElement': function() {
+                return this._entropyElement;
+        },
+        
+        'setEntropyElement': function(aValue) {
+                this._entropyElement = aValue;
+        },
+
+        //-----------------------------------------------------
+
+        'render': function() {
+/*
+                MochiKit.Signal.disconnectAllTo(this);
+
+                this.setWrapperElement(this.element().wrap({tag:'div'}));
+                this.setEntropyElement(Clipperz.DOM.Helper.append(this.wrapperElement().dom, {tag:'div', cls:'passwordEntropy', html:"&nbsp;"}, true));
+        //      this.setEntropyElement(Clipperz.DOM.Helper.insertBefore(this.element(), {tag:'div', cls:'passwordEntropy', html:"&nbsp;"}, true));
+                this.entropyElement().wrap({tag:'div', cls:'passwordEntropyWrapper'});
+
+                this.updateEntropyElement();
+                
+                this.connect('onkeyup', 'updateEntropyElement');
+                this.connect('onchange', 'updateEntropyElement');
+                this.connect('onblur', 'updateEntropyElement');
+*/
+                MochiKit.Signal.disconnectAllTo(this);
+
+                this.setEntropyElement(this.element());
+                this.entropyElement().addClass("entropyLevelIndicator");
+
+                this.updateEntropyElement();
+
+                this.connect('onkeyup', 'updateEntropyElement');
+                this.connect('onchange', 'updateEntropyElement');
+                this.connect('onblur', 'updateEntropyElement');
+        },
+
+        //-----------------------------------------------------
+
+        'computeEntropyForString': function(aValue) {
+                return Clipperz.PM.Crypto.passwordEntropy(aValue);
+        },
+
+        //-----------------------------------------------------
+
+        'updateEntropyElement': function(anEvent) {
+/*
+//MochiKit.Logging.logDebug(">>> PasswordEntropyDisplay.updateEntropyElement");
+                        varmaxExtent;
+                        varentropy;
+                
+                entropy = Math.min(128, this.computeEntropyForString(this.passwordElement().dom.value));
+//MochiKit.Logging.logDebug("--- PasswordEntropyDisplay.updateEntropyElement - entropy: " + entropy);
+                this.entropyElement().setStyle('background-position', "0px " + -entropy + "px");
+                this.entropyElement().setWidth(this.passwordElement().getWidth() * (entropy/128));
+//MochiKit.Logging.logDebug("<<< PasswordEntropyDisplay.updateEntropyElement");
+*/
+                        varentropy;
+                
+                entropy = Math.min(128, this.computeEntropyForString(this.passwordElement().dom.value));
+
+                if (entropy == 0) {
+                        this.entropyElement().setStyle('background-position', "0px 26px");
+                } else {
+                        this.entropyElement().setStyle('background-position', "0px -" + (128-entropy)*26 + "px");
+                }
+        },
+        
+        //-----------------------------------------------------
+        __syntaxFix__: '__syntaxFix__'
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/ProgressBar.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/ProgressBar.js
new file mode 100644
index 0000000..7e7f8fe
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/ProgressBar.js
@@ -0,0 +1,73 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.ProgressBar = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.ProgressBar.superclass.constructor.apply(this, arguments);
+
+                this._element   = args.element|| Clipperz.Base.exception.raise('MandatoryParameter');
+
+        this.renderSelf();
+
+        MochiKit.Signal.connect(Clipperz.PM.UI.Common.Controllers.ProgressBarController.defaultController, 'updateProgress', this, 'updateProgressHandler')
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.ProgressBar, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.ProgressBar component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(this.element(), {tag:'div', cls:'loadingBar', children:[
+                        {tag:'div', cls:'loadingBarProgressBox', children:[
+                                {tag:'div', id:this.getId('loadingBarProgress'), cls:'loadingBarProgress'}
+                        ]}
+                ]});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'updateProgressHandler': function (anEvent) {
+                MochiKit.Style.setElementDimensions(this.getId('loadingBarProgress'), {w:anEvent}, '%');
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js
new file mode 100644
index 0000000..b9bb850
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/SimpleMessagePanel.js
@@ -0,0 +1,282 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Common.Components.SimpleMessagePanel = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.SimpleMessagePanel.superclass.constructor.apply(this, arguments);
+
+                this._title             = args.title    || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._text              = args.text             || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._type              = args.type                     || Clipperz.Base.exception.raise('MandatoryParameter');         //ALERT, INFO, ERROR
+                this._buttons   = args.buttons  || Clipperz.Base.exception.raise('MandatoryParameter');
+
+        this._buttonComponents = [];
+        this._deferred = null;
+
+        this.renderModalMask();
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.SimpleMessagePanel, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.SimpleMessagePanel component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferred': function() {
+                if (this._deferred == null) {
+                        this._deferred = new Clipperz.Async.Deferred("SimpleMessagePanel.deferred", {trace:false});
+                }
+
+                return this._deferred;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'title': function () {
+                return this._title;
+        },
+        
+        'setTitle': function (aValue) {
+                this._title = aValue;
+
+                if (this.getElement('title') != null) {
+                        this.getElement('title').innerHTML = aValue;
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'text': function () {
+                return this._text;
+        },
+        
+        'setText': function (aValue) {
+                this._text = aValue;
+
+                if (this.getElement('text') != null) {
+                        this.getElement('text').innerHTML = aValue;
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'type': function () {
+                return this._type;
+        },
+        
+        'setType': function (aValue) {
+                if (this.getElement('icon') != null) {
+                        MochiKit.DOM.removeElementClass(this.getId('icon'), this._type);
+                        MochiKit.DOM.addElementClass(this.getId('icon'), aValue);
+                }
+
+                this._type = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'buttons': function () {
+                return this._buttons;
+        },
+        
+        'setButtons': function (someValues) {
+                MochiKit.Iter.forEach(this.buttonComponents(), MochiKit.Base.methodcaller('clear'));
+                
+                this._buttons = someValues;
+
+                if (this.getElement('buttonArea') != null) {
+                        this.renderButtons();
+                }
+        },
+
+        //.........................................................................
+
+        'buttonComponents': function () {
+                return this._buttonComponents;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(this.element(), {tag:'div', cls:'SimpleMessagePanel', id:this.getId('panel'), children: [
+                        {tag:'div', cls:'header', children:[]},
+                        {tag:'div', cls:'body', children:[
+                                        {tag:'div',     id:this.getId('icon'),cls:'img ' + this.type(), children:[{tag:'div'}]},
+                                        {tag:'h3',      id:this.getId('title'),html:this.title()},
+                                        {tag:'p',       id:this.getId('text'),html:this.text()},
+                                {tag:'div', id:this.getId('container')},
+                                {tag:'div', id:this.getId('buttonArea'), cls:'buttonArea', children:[]}
+                        ]},
+                        {tag:'div', cls:'footer', children:[]}
+                ]});
+
+                MochiKit.Signal.connect(this.getId('panel'), 'onkeydown', this, 'keyDownHandler');
+
+                this.renderButtons();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderButtons': function () {
+                this.getElement('buttonArea').innerHTML = '';
+
+                MochiKit.Base.map(MochiKit.Base.bind(function (aButton) {
+                        var buttonElement;
+                        var buttonComponent;
+                        
+        //              element = this.append(this.getElement('buttonArea'), {tag:'div', cls:'button' + (aButton['isDefault'] === true ? ' default' : ''), children:[
+        //                      {tag:'a', href:'#'/*, id:this.getId('buttonLink')*/, html:aButton['text']}
+        //              ]});
+
+                        buttonElement = this.append(this.getElement('buttonArea'), {tag:'div'});
+                        buttonComponent = new Clipperz.PM.UI.Common.Components.Button({'element':buttonElement, 'text':aButton['text'], 'isDefault':aButton['isDefault']});
+                        this.buttonComponents().push(buttonComponent);
+
+                        MochiKit.Signal.connect(buttonComponent, 'onclick', MochiKit.Base.method(this, 'buttonEventHandler', aButton));
+                }, this), MochiKit.Iter.reversed(this.buttons()));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'displayElement': function() {
+                return this.getElement('panel');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'closeOk': function () {
+                this.deferred().callback();
+                this._deferred = null;
+        },
+        
+        'closeCancel': function () {
+                this.deferred().cancel();
+                this._deferred = null;
+        },
+
+        'closeError': function () {
+                this.deferred().errback();
+                this._deferred = null;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'buttonEventHandler': function(aButton, anEvent) {
+                anEvent.preventDefault();
+                
+        //      MochiKit.Signal.signal(this, 'cancelEvent');
+                switch (aButton['result']) {
+                        case 'OK':
+//console.log("==> OK");
+                                this.closeOk();
+                                break;
+                        case 'CANCEL':
+//console.log("==> CANCEL");
+                                this.closeCancel();
+                                break;
+                        default:
+//console.log("==> ????");
+                                this.closeError();
+                                break;
+                }
+//console.log("<==");
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredShow': function (someArgs, aResult) {
+                this.deferredShowModal(someArgs);
+
+                this.deferred().addMethod(this, 'deferredHideModal', {closeToElement:someArgs.onOkCloseToElement });
+                this.deferred().addErrback (MochiKit.Base.method(this, 'deferredHideModal', {closeToElement:someArgs.onCancelCloseToElement }));
+                this.deferred().addCallback(MochiKit.Async.succeed, aResult);
+
+                return this.deferred();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'modalDialogMask': function () {
+                return this.getId('modalDialogMask');
+        },
+        
+        'modalDialog': function () {
+                return this.getId('modalDialog');
+        },
+        
+        'modalDialogFrame': function() {
+                return this.getId('modalDialogFrame');
+        },
+
+        //-------------------------------------------------------------------------
+        
+        'renderModalMask': function () {
+                Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body,
+                        {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper simpleMessagePanelMask', children:[
+                                {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask simpleMessagePanelMask'},
+                                {tag:'div', id:this.getId('modalDialogFrame'), cls:'modalDialogFrame simpleMessagePanelMask'},
+                                {tag:'div', id:this.getId('modalDialog'), cls:'modalDialog simpleMessagePanelMask'}
+                        ]}
+                );
+        
+                MochiKit.Style.hideElement(this.getId('modalDialogMask'));
+                MochiKit.Style.hideElement(this.getId('modalDialogFrame'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'keyDownHandler': function (anEvent) {
+                if (anEvent.key().string == 'KEY_ENTER') {
+                        anEvent.preventDefault();
+//console.log("13 - RETURN ?", this);
+                        this.closeOk();
+//console.log('<<< 13')
+                }
+
+                if (anEvent.key().string == 'KEY_ESCAPE') {
+                        anEvent.preventDefault();
+//console.log("27 - ESC ?", this);
+                        this.closeCancel();
+//console.log("<<< 27");
+                }
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/TabPanelComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/TabPanelComponent.js
new file mode 100644
index 0000000..afb3bf9
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/TabPanelComponent.js
@@ -0,0 +1,69 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.TabPanelComponent = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Common.Components.TabPanelComponent.superclass.constructor.call(this, args);
+
+        this._tabPanelController = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.TabPanelComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.TabPanelComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'tabPanelControllerConfiguration': function() {
+                return this._tabPanelControllerConfiguration;
+        },
+
+        'tabPanelController': function() {
+                if (this._tabPanelController == null) {
+                        this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({component:this, configuration:this.tabPanelControllerConfiguration()});
+                }
+                
+                return this._tabPanelController;
+        },
+
+        'initiallySelectedTab': function() {
+                return this._initiallySelectedTab;
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+        
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js
new file mode 100644
index 0000000..7507b86
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js
@@ -0,0 +1,216 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.Tooltip = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.Tooltip.superclass.constructor.apply(this, arguments);
+
+                this._element   = args.element|| Clipperz.Base.exception.raise('MandatoryParameter');
+                this._text              = args.text     || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._position  = args.position         || 'BELOW';             //'BELOW', 'ABOVE', 'LEFT', 'RIGHT'
+
+        this._boxDimensions = null;
+        this._enabled = (typeof(args.enabled) == 'undefined' ? true : args.enabled);
+        this._isVisible = false;
+
+        this.renderSelf();
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.Tooltip component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'text': function () {
+                return this._text;
+        },
+        
+        'setText': function (aValue) {
+                this._text = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'position': function () {
+                return this._position;
+        },
+        
+        'setPosition': function (aValue) {
+                this._position = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'enabled': function () {
+                return this._enabled;
+        },
+        
+        'setIsEnabled': function (aValue) {
+                this._enabled = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'isVisible': function () {
+                return this._isVisible;
+        },
+        
+        'setIsVisible': function (aValue) {
+                this._isVisible = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+        //      this.append(this.element(), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
+        //      this.append(MochiKit.DOM.currentDocument().body, {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
+                this.append(MochiKit.DOM.getElement('Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
+                        {tag:'div', id:this.getId('body'), cls:'tooltip_body', children:[
+                                {tag:'div', cls:'tooltip_text', children:[
+                                        {tag:'span', html:this.text()}
+                                ]},
+                                {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'}
+                        ]},
+                        {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'}
+                ]});
+
+                this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body'));
+        //      this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h;
+
+                MochiKit.Style.hideElement(this.displayElement());
+                MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show');
+                MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide');
+        },
+
+        //-----------------------------------------------------
+
+        'displayElement': function() {
+                return this.getElement('tooltip');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'boxDimensions': function () {
+                return this._boxDimensions;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'show': function () {
+                var elementSizeAndPosition;
+                var arrowPosition;
+                var bodyPosition;
+
+                if (this.isVisible() == false) {
+                        arrowPosition = {};
+                        bodyPosition = {};
+
+                        this.setIsVisible(true);
+                        elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element());
+//console.log("ELEMENT SIZE AND POSITION", Clipperz.Base.serializeJSON(elementSizeAndPosition));
+//console.log("BOX DIMENSIONS", Clipperz.Base.serializeJSON(this.boxDimensions()));
+                        switch (this.position()) {
+                                case 'ABOVE':
+//console.log("ABOVE");
+                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+                                        bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
+                                        bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13;
+                                
+                                        arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+                                        arrowPosition.y = elementSizeAndPosition.position.y - 13;
+                                        break;
+                                case 'BELOW':
+//console.log("BELOW");
+                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+                                        bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
+                                        bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13;
+                                
+                                        arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+                                        arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h;
+                                        break;
+                                case 'LEFT':
+//console.log("LEFT");
+                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
+                                        bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13;
+                                        bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2);
+
+                                        arrowPosition.x = elementSizeAndPosition.position.x -13;
+                                        arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
+                                        break;
+                                case 'RIGHT':
+//console.log("RIGHT");
+                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
+                                        bodyPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w + 13;
+                                        bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2);
+
+                                        arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w;
+                                        arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
+                                        break;
+                        }
+//console.log("X: " + bodyPosition.x + ", Y: " + bodyPosition.y);
+
+                        MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition);
+                        MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition);
+                        MochiKit.Visual.appear(this.displayElement(), {duration:0.4});
+                }
+        },
+
+        'hide': function () {
+                if (this.isVisible() == true) {
+                        MochiKit.Visual.fade(this.displayElement(), {duration:0.4});
+                        this.setIsVisible(false);
+                }
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'shouldRemoveElementWhenClearningUp': function () {
+                return false;
+        },
+*/
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
+
+Clipperz.PM.UI.Common.Components.Tooltip.initTooltips = function () {
+        Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'});
+}
+
+MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.Tooltip.initTooltips);
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/TranslatorWidget.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/TranslatorWidget.js
new file mode 100644
index 0000000..c31969e
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/TranslatorWidget.js
@@ -0,0 +1,170 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Common.Components.TranslatorWidget = function(args) {
+Clipperz.log(">>> TranslatorWidget.new");
+        args = args || {};
+
+        Clipperz.PM.UI.Common.Components.TranslatorWidget.superclass.constructor.apply(this, arguments);
+
+        //      this._element   = args.element|| Clipperz.Base.exception.raise('MandatoryParameter');
+        //      this._stringID  = args.stringID         || MochiKit.DOM.getNodeAttribute(this.element(), 'stringID')|| Clipperz.Base.exception.raise('MandatoryParameter');
+
+        //MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show');
+        //MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide');
+
+Clipperz.log("<<< TranslatorWidget.new");
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.TranslatorWidget, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Common.Components.TranslatorWidget component";
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'renderSelf': function() {
+                this.append(this.element(), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
+                        {tag:'div', id:this.getId('body'), cls:'tooltip_body', children:[
+                                {tag:'div', cls:'tooltip_text', children:[
+                                        {tag:'span', html:this.text()}
+                                ]},
+                                {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'}
+                        ]},
+                        {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'}
+                ]});
+
+                this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body'));
+        //      this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h;
+
+                MochiKit.Style.hideElement(this.displayElement());
+                MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show');
+                MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide');
+        },
+*/
+        //-----------------------------------------------------
+/*
+        'displayElement': function() {
+                return this.getElement('tooltip');
+        },
+*/
+        //-------------------------------------------------------------------------
+/*
+        'boxDimensions': function () {
+                return this._boxDimensions;
+        },
+*/
+        //-------------------------------------------------------------------------
+
+        'show': function (anElement, aStringID) {
+                Clipperz.log(">>> Clipperz.PM.UI.Common.Components.TranslatorWidget.show: " + aStringID);
+/*
+                var elementSizeAndPosition;
+                var arrowPosition;
+                var bodyPosition;
+
+                arrowPosition = {};
+                bodyPosition = {};
+
+                elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element());
+                switch (this.position()) {
+                        case 'ABOVE':
+                                MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+                                bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
+                                bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13;
+                                
+                                arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+                                arrowPosition.y = elementSizeAndPosition.position.y - 13;
+                                break;
+                        case 'BELOW':
+                                MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+                                bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
+                                bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13;
+                                
+                                arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+                                arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h;
+                                break;
+                        case 'LEFT':
+                                MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
+                                bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13;
+                                bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2);
+                                
+                                arrowPosition.x = elementSizeAndPosition.position.x -13;
+                                arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
+                                break;
+                        case 'RIGHT':
+                                MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
+                                break;
+                }
+
+        //      MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition);
+                MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition);
+                MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition);
+                MochiKit.Visual.appear(this.displayElement(), {duration:0.4});
+*/
+        },
+
+        //-------------------------------------------------------------------------
+
+        'hide': function () {
+                Clipperz.log("<<< Clipperz.PM.UI.Common.Components.TranslatorWidget.hide");
+        //      MochiKit.Visual.fade(this.displayElement(), {duration:0.4});
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
+
+//#############################################################################
+
+Clipperz.PM.UI.Common.Components.TranslatorWidget._widget = null;
+
+Clipperz.PM.UI.Common.Components.TranslatorWidget.widget = function () {
+        if (Clipperz.PM.UI.Common.Components.TranslatorWidget._widget == null) {
+                Clipperz.PM.UI.Common.Components.TranslatorWidget._widget = new Clipperz.PM.UI.Common.Components.TranslatorWidget();
+        }
+        
+        return Clipperz.PM.UI.Common.Components.TranslatorWidget._widget;
+}
+Clipperz.PM.UI.Common.Components.TranslatorWidget.show = function (anElement, aStringID) {
+        Clipperz.PM.UI.Common.Components.TranslatorWidget.widget().show(anElement, aStringID);
+}
+
+Clipperz.PM.UI.Common.Components.TranslatorWidget.hide = function () {
+        Clipperz.PM.UI.Common.Components.TranslatorWidget.widget().hide();
+}
+
+//#############################################################################
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/DirectLoginRunner.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/DirectLoginRunner.js
new file mode 100644
index 0000000..e534435
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/DirectLoginRunner.js
@@ -0,0 +1,267 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Controllers');
+
+Clipperz.PM.UI.Common.Controllers.DirectLoginRunner = function(args) {
+                this._directLogin       = args['directLogin']   || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._target    = Clipperz.PM.Crypto.randomKey();
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Common.Controllers.DirectLoginRunner.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Common.Controllers.DirectLoginRunner";
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'directLogin': function () {
+                return this._directLogin;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'target': function () {
+                return this._target;
+        },
+
+        //=============================================================================
+
+        'setWindowTitle': function (aWindow, aTitle) {
+                aWindow.document.title = aTitle;
+        },
+        
+        'setWindowBody': function (aWindow, anHTML) {
+                aWindow.document.body.innerHTML = anHTML;
+        },
+
+        //=============================================================================
+
+        'initialWindowSetup': function (aWindow) {
+                this.setWindowTitle(aWindow, "Loading Clipperz Direct Login");
+                this.setWindowBody (aWindow, MochiKit.DOM.toHTML(MochiKit.DOM.H3("Loading Clipperz Direct Login ...")));
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'updateWindowWithDirectLoginLabel': function (aWindow, aLabel) {
+                var titleText;
+                var bodyText;
+                
+                titleText = "Loading '__label__' Direct Login".replace(/__label__/, aLabel)
+                bodyText  = "Loading '__label__' Direct Login... ".replace(/__label__/, aLabel)
+
+                this.setWindowTitle(aWindow, titleText);
+                this.setWindowBody (aWindow, MochiKit.DOM.toHTML(MochiKit.DOM.H3(bodyText)));
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'updateWindowWithHTMLContent': function (aWindow, anHtml) {
+                this.setWindowBody(aWindow, anHtml);
+        },
+
+        //=============================================================================
+
+        'submitLoginForm': function(aWindow, aSubmitFunction) {
+                MochiKit.DOM.withWindow(aWindow, MochiKit.Base.bind(function () {
+                        var formElement;
+                        var submitButtons;
+
+                        formElement = MochiKit.DOM.getElement('directLoginForm');
+
+                        submitButtons = MochiKit.Base.filter(function(anInputElement) {
+                                return ((anInputElement.tagName.toLowerCase() == 'input') && (anInputElement.getAttribute('type').toLowerCase() == 'submit'));
+                        }, formElement.elements);
+
+                        if (submitButtons.length == 0) {
+                                if (typeof(formElement.submit) == 'function') {
+                                        formElement.submit();
+                                } else {
+                                        aSubmitFunction.apply(formElement);
+                                }
+/*
+                                        varformSubmitFunction;
+
+                                formSubmitFunction = MochiKit.Base.method(formElement, 'submit');
+                                if (Clipperz_IEisBroken == true) {
+                                        formElement.submit();
+                                } else {
+                                        formSubmitFunction();
+                                }
+*/
+                        } else {
+                                submitButtons[0].click();
+                        }
+                }, this));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'runSubmitFormDirectLogin': function (aWindow, someAttributes) {
+                var html;
+                var formElement;
+                var submitFunction;
+
+                formElement = MochiKit.DOM.FORM({
+                        'id':'directLoginForm',
+                        'method':someAttributes['formAttributes']['method'],
+                        'action':someAttributes['formAttributes']['action']
+                });
+
+                submitFunction = formElement.submit;
+                
+                MochiKit.DOM.appendChildNodes(formElement, MochiKit.Base.map(function (anInputAttributes) {
+                        return MochiKit.DOM.INPUT({'type':'hidden', 'name':anInputAttributes[0], 'value':anInputAttributes[1]});
+                }, MochiKit.Base.items(someAttributes['inputValues'])));
+
+                        html ='';
+                html += '<h3>Loading ' + someAttributes['label'] + ' ...</h3>';
+                        html +=MochiKit.DOM.appendChildNodes(MochiKit.DOM.DIV(), MochiKit.DOM.appendChildNodes(MochiKit.DOM.DIV({style:'display:none; visibility:hidden;'}), formElement)).innerHTML; 
+
+                this.updateWindowWithHTMLContent(aWindow, html);
+                this.submitLoginForm(aWindow, submitFunction);
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'runHttpAuthDirectLogin': function(aWindow, someAttributes) {
+                var completeUrl;
+                var url;
+
+//console.log("runHttpAuthDirectLogin", someAttributes);
+                url = someAttributes['inputValues']['url'];
+
+                if (/^https?\:\/\//.test(url) == false) {
+                        url = 'http://' + url;
+                }
+                
+                if (Clipperz_IEisBroken === true) {
+                        completeUrl = url;
+                } else {
+                        var username;
+                        var password;
+                        
+                        username = someAttributes['inputValues']['username'];
+                        password = someAttributes['inputValues']['password'];
+                        /(^https?\:\/\/)?(.*)/.test(url);
+
+                        completeUrl = RegExp.$1 + username + ':' + password + '@' + RegExp.$2;
+                }
+                
+                window.open(completeUrl, this.target());
+        },
+
+        //=============================================================================
+
+        'runDirectLogin': function (aWindow) {
+                var deferredResult;
+
+//console.log(">>> runDirectLogin");
+                deferredResult = new Clipperz.Async.Deferred("DirectLoginRunner.openDirectLogin", {trace:false});
+                deferredResult.addMethod(this, 'initialWindowSetup', aWindow);
+                deferredResult.addMethod(this.directLogin(), 'label');
+                deferredResult.addMethod(this, 'updateWindowWithDirectLoginLabel', aWindow);
+                deferredResult.collectResults({
+                                'type':                         MochiKit.Base.method(this.directLogin(), 'type'),
+                                'label':                MochiKit.Base.method(this.directLogin(), 'label'),
+                                'formAttributes':MochiKit.Base.method(this.directLogin(), 'formAttributes'),
+                                'inputValues':  MochiKit.Base.method(this.directLogin(), 'inputValues')
+                });
+//deferredResult.addCallback(function (aValue) { console.log("SOME ATTRIBUTES", aValue); return aValue; });
+                deferredResult.addCallback(MochiKit.Base.bind(function (someAttributes) {
+//console.log("SOME ATTRIBUTES", someAttributes);
+                        switch (someAttributes['type']) {
+                                case 'http_auth':
+                                        this.runHttpAuthDirectLogin(aWindow, someAttributes);
+                                        break;
+                                case 'simple_url':
+                                        this.runSimpleUrlDirectLogin(aWindow, someAttributes);
+                                        break;
+                                default:
+                                        this.runSubmitFormDirectLogin(aWindow, someAttributes);
+                                        break;
+                        }
+                }, this));
+                deferredResult.callback();
+//console.log("<<< runDirectLogin");
+
+                return deferredResult;
+        },
+
+        //=============================================================================
+
+        'run': function () {
+                var newWindow;
+
+                newWindow = window.open(Clipperz.PM.Strings.getValue('directLoginJumpPageUrl'), this.target());
+
+                return this.runDirectLogin(newWindow);
+        },
+        
+        //=============================================================================
+
+        'test': function () {
+                var iFrame;
+                var newWindow;
+
+                iFrame = MochiKit.DOM.createDOM('iframe');
+                MochiKit.DOM.appendChildNodes(MochiKit.DOM.currentDocument().body, iFrame);
+
+                newWindow = iFrame.contentWindow;
+
+                return this.runDirectLogin(newWindow);
+        },
+        
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
+
+//-----------------------------------------------------------------------------
+
+Clipperz.PM.UI.Common.Controllers.DirectLoginRunner.openDirectLogin = function (aDirectLogin) {
+                varrunner;
+        
+        runner = new Clipperz.PM.UI.Common.Controllers.DirectLoginRunner({directLogin:aDirectLogin});
+        return runner.run();
+};
+
+//-----------------------------------------------------------------------------
+
+Clipperz.PM.UI.Common.Controllers.DirectLoginRunner.testDirectLogin = function (aDirectLogin) {
+                varrunner;
+
+//console.log(">>>>>> TESTING DIRECT LOGIN");
+        runner = new Clipperz.PM.UI.Common.Controllers.DirectLoginRunner({directLogin:aDirectLogin});
+        return runner.test();
+};
+
+//-----------------------------------------------------------------------------
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/ProgressBarController.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/ProgressBarController.js
new file mode 100644
index 0000000..a4fa400
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/ProgressBarController.js
@@ -0,0 +1,143 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Controllers');
+
+Clipperz.PM.UI.Common.Controllers.ProgressBarController = function(args) {
+        args = args || {};
+
+                this._numberOfSteps= 0;
+                this._currentStep= 0;
+
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'initProgress',     this, 'initProgressHandle');
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'updateProgress',this, 'updateProgressHandle');
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'advanceProgress',this, 'advanceProgressHandle');
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'progressDone',     this, 'progressDoneHandle');
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Common.Controllers.ProgressBarController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Common.Controllers.ProgressBarController";
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'numberOfSteps': function() {
+                return this._numberOfSteps;
+        },
+        
+        'setNumberOfSteps': function (aValue) {
+                this._numberOfSteps = aValue;
+        },
+
+        'updateNumberOfSteps': function (aValue) {
+                this._numberOfSteps += aValue;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'currentStep': function() {
+                return this._currentStep;
+        },
+
+        'advanceCurrentStep': function () {
+                this._currentStep ++;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'completedPercentage': function () {
+                var result;
+//Clipperz.log(">>> completedPercentage" + this.currentStep() + "/" + this.numberOfSteps(), this.currentStep() / this.numberOfSteps());
+                if (this.numberOfSteps() == 0) {
+                        result = 0;
+                } else {
+                        result = (Math.min(100, 100 * (this.currentStep() / this.numberOfSteps())));
+                }
+//Clipperz.log("<<< completedPercentage", result);
+                return result;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'resetStatus': function () {
+                        this._numberOfSteps= 0;
+                        this._currentStep= 0;
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'updateProgress': function () {
+//Clipperz.log(">>> updateProgress: " + this.completedPercentage() + "%");
+                MochiKit.Signal.signal(this, 'updateProgress', this.completedPercentage());
+        },
+
+        //=============================================================================
+
+        'initProgressHandle': function (anEvent) {
+//Clipperz.log(">>> initProgressHandle - steps: " + (anEvent != null ? anEvent['steps'] : 0));
+                this.resetStatus();
+                if (anEvent != null) {
+                        this.setNumberOfSteps(anEvent['steps']);
+                }
+                MochiKit.Signal.signal(this, 'initProgress');
+                this.updateProgress();
+        },
+
+        //.............................................................................
+
+        'updateProgressHandle': function (anEvent) {
+                this.updateNumberOfSteps(anEvent['extraSteps']);
+//Clipperz.log("=== updateProgressHandle - steps: " + this.numberOfSteps() + " (extra " + anEvent['extraSteps'] + ")");
+                this.updateProgress();
+        },
+
+        //.............................................................................
+
+        'advanceProgressHandle': function (anEvent) {
+                this.advanceCurrentStep();
+//Clipperz.log("--- advanceProgressHandle: " + this.currentStep() + "/" + this.numberOfSteps());
+                this.updateProgress();
+        },
+
+        //.............................................................................
+
+        'progressDoneHandle': function (anEvent) {
+//Clipperz.log("<<< progressDoneHandle: " + this.currentStep() + "/" + this.numberOfSteps());
+                this.resetStatus();
+                MochiKit.Signal.signal(this, 'progressDone');
+        },
+
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
+
+Clipperz.PM.UI.Common.Controllers.ProgressBarController.defaultController = new Clipperz.PM.UI.Common.Controllers.ProgressBarController();
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/TabPanelController.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/TabPanelController.js
new file mode 100644
index 0000000..fbc5929
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/TabPanelController.js
@@ -0,0 +1,188 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Controllers');
+
+Clipperz.PM.UI.Common.Controllers.TabPanelController = function(args) {
+        args = args || {};
+
+                this._component                 = args.component;
+                this._configuration = args.configuration;
+                this._isEnabled                 = args.enabled || true;
+
+        this._selectedTab = null;
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Common.Controllers.TabPanelController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Common.Controllers.TabPanelController";
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'component': function() {
+                return this._component;
+        },
+        
+        'configuration': function() {
+                return this._configuration;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'getElement': function(anElementID) {
+                return this.component().getElement(anElementID);
+        },
+
+        'tabForTabElement': function(anElement) {
+                        varresult;
+                
+                for (result in this.configuration()) {
+                        if (this.getElement(this.configuration()[result]['tab']) == anElement) {
+                                break;
+                        }
+                }
+                
+                return result;
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'setupTab': function(aConfiguration) {
+                        vartabElement;
+                
+                tabElement = this.getElement(aConfiguration['tab']);
+                
+                MochiKit.DOM.removeElementClass(tabElement, 'selected');
+                MochiKit.Signal.connect(tabElement, 'onclick', this, 'handleTabClick')
+        },
+
+        'setupPanel': function(aConfiguration) {
+                this.hidePanel(aConfiguration['panel']);
+        },
+
+        'setup': function(args) {
+                args = args || {};
+                
+                        MochiKit.Base.map(MochiKit.Base.method(this, 'setupTab'),MochiKit.Base.values(this.configuration()));
+                        MochiKit.Base.map(MochiKit.Base.method(this, 'setupPanel'),MochiKit.Base.values(this.configuration()));
+                this.selectTab(args.selected);
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'hidePanel': function(aPanel) {
+                        MochiKit.DOM.removeElementClass(this.getElement(aPanel), 'selected');
+        },
+        
+        'selectTab': function(aTab) {
+                if ((aTab != this.selectedTab()) && (this.isEnabled())) {
+                        if (this.selectedTab() != null) {
+                                        MochiKit.DOM.removeElementClass(this.getElement(this.configuration()[this.selectedTab()]['tab']),'selected');
+                                        MochiKit.DOM.removeElementClass(this.getElement(this.configuration()[this.selectedTab()]['panel']),'selected');
+                        }
+
+                        if (aTab != null) {
+                                        MochiKit.DOM.addElementClass(this.getElement(this.configuration()[aTab]['tab']),'selected');
+                                        MochiKit.DOM.addElementClass(this.getElement(this.configuration()[aTab]['panel']),'selected');
+                        }
+
+                        this.setSelectedTab(aTab);
+                        MochiKit.Signal.signal(this, 'tabSelected', aTab);
+                }
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'selectedTab': function() {
+                return this._selectedTab;
+        },
+
+        'setSelectedTab': function(aTab) {
+                this._selectedTab = aTab;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'selectedTabElement': function() {
+                var result;
+
+                if (this.selectedTab() != null) {
+                        result = this.getElement(this.configuration()[this.selectedTab()]['tab']);
+                } else {
+                        result = null;
+                }
+                
+                return null;
+        },
+
+        'selectedTabPanelElement': function() {
+                var result;
+                
+                if (this.selectedTab() != null) {
+                        result = this.getElement(this.configuration()[this.selectedTab()]['panel']);
+                } else {
+                        result = null;
+                }
+                
+                return result;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleTabClick': function(anEvent) {
+                this.selectTab(this.tabForTabElement(anEvent.src()));
+                anEvent.preventDefault();
+        },
+
+        //=============================================================================
+
+        'isEnabled': function () {
+                return this._isEnabled;
+        },
+
+        'enable': function () {
+                this._isEnabled = true;
+                MochiKit.Base.map(MochiKit.Base.bind(function (aTabComponentID) {
+                        MochiKit.DOM.removeElementClass(this.getElement(this.configuration()[aTabComponentID]['tab']), 'disabled');
+                }, this), MochiKit.Base.keys(this.configuration()));
+        },
+        
+        'disable': function () {
+                this._isEnabled = false;
+                MochiKit.Base.map(MochiKit.Base.bind(function (aTabComponentID) {
+                        MochiKit.DOM.addElementClass(this.getElement(this.configuration()[aTabComponentID]['tab']), 'disabled');
+                }, this), MochiKit.Base.keys(this.configuration()));
+        },
+        
+        //=============================================================================
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/WizardController.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/WizardController.js
new file mode 100644
index 0000000..868cea6
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Controllers/WizardController.js
@@ -0,0 +1,31 @@
+/*
+
+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/>.
+
+*/
+
+        //Still empty, but here it should be reasonable to factor in code duplicated between
+        //- DirectLoginWizardController
+        //- NewUserWizardController
\ No newline at end of file
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Compact/MainController.js b/frontend/gamma/js/Clipperz/PM/UI/Compact/MainController.js
new file mode 100644
index 0000000..22258f6
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Compact/MainController.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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Compact');
+
+Clipperz.PM.UI.Compact.MainController = function() {
+        //this._loginPanel = null;
+        //this._user = null;
+//
+        //this._isRunningCompact = false;
+        //
+        //Clipperz.NotificationCenter.register(null, 'userConnected', this, 'userConnectedCallback');
+        //Clipperz.NotificationCenter.register(null, 'switchLanguage', this, 'switchLanguageHandler');
+//
+        //Clipperz.NotificationCenter.register(null, 'EXCEPTION', this, 'reportException');
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Compact.MainController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Compact.MainController";
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'run': function(shouldShowRegistrationForm) {
+MochiKit.Logging.logDebug("running " + this.toString());
+        },
+        
+        //-----------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
\ No newline at end of file
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/AccountPanel.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/AccountPanel.js
new file mode 100644
index 0000000..4378b19
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/AccountPanel.js
@@ -0,0 +1,148 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.AccountPanel = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.AccountPanel.superclass.constructor.apply(this, arguments);
+
+        //this._initiallySelectedTab = args.selected || 'ACCOUNT';
+        this._initiallySelectedTab = args.selected || 'PASSPHRASE';
+        this._tabPanelControllerConfiguration = {
+        //      'ACCOUNT': {
+        //                      tab:'accountTab',
+        //                      panel:'accountPanel'
+        //      },
+                'PASSPHRASE': {
+                                tab:'passphraseTab',
+                                panel:'passphrasePanel'
+                },
+                'PREFERENCES': {
+                                tab:'preferencesTab',
+                                panel:'preferencesPanel'
+                },
+                'LOGIN_HISTORY': {
+                                tab:'loginHistoryTab',
+                                panel:'loginHistoryPanel'
+                }
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.AccountPanel, Clipperz.PM.UI.Common.Components.TabPanelComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.AccountPanel component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+//Clipperz.log("AccountPanel.renderSelf element", this.element());
+                this.append(this.element(), [
+                        {tag:'div', cls:'header', children:[
+                                {tag:'div', cls:'subPanelTabs', children:[
+                                        {tag:'ul', children:[
+        //                                              {tag:'li', id:this.getId('accountTab'),                 children:[{tag:'a', href:'#', html:'Account'}], cls:'first'},
+                                                        {tag:'li', id:this.getId('passphraseTab'),      children:[{tag:'a', href:'#', html:'Passphrase'}], cls:'first'},
+                                                        {tag:'li', id:this.getId('preferencesTab'),     children:[{tag:'a', href:'#', html:'Preferences'}]},
+                                                        {tag:'li', id:this.getId('loginHistoryTab'),children:[{tag:'a', href:'#', html:'Login history'}]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'div', cls:'accountPanel', children:[
+                                        {tag:'div', cls:'subPanelContent', children:[
+                                                {tag:'ul', children:[
+        //                                                      {tag:'li', id:this.getId('accountPanel'),children:[
+        //                                                      {tag:'h3', html:"-- Account --"}
+        //                                              ]},
+                                                                {tag:'li', id:this.getId('passphrasePanel'),children:[
+                                                                {tag:'h3', cls:'changePassphrase', html:"Change passphrase"},
+                                                                {tag:'form', id:this.getId('changePassphrase'), cls:'changePassphrase', children:[
+                                                                        {tag:'div', cls:'currentCredentials', children:[
+                                                                                {tag:'div', cls:'field username', children:[
+                                                                                        {tag:'label', html:"username", 'for':this.getId('currentUsername')},
+                                                                                        {tag:'input', id:this.getId('currentUsername')}
+                                                                                ]},
+                                                                                {tag:'div', cls:'field passphrase', children:[
+                                                                                        {tag:'label', html:"passphrase", 'for':this.getId('currentPassphrase')},
+                                                                                        {tag:'input', id:this.getId('currentPassphrase')}
+                                                                                ]}
+                                                                        ]},
+                                                                        {tag:'div', cls:'newPassphrase', children:[
+                                                                                {tag:'div', cls:'field', children:[
+                                                                                        {tag:'label', html:"new passphrase", 'for':this.getId('newPassphrase')},
+                                                                                        {tag:'input', id:this.getId('newPassphrase')}
+                                                                                ]},
+                                                                                {tag:'div', cls:'field', children:[
+                                                                                        {tag:'label', html:"re-new passphrase", 'for':this.getId('reNewPassphrase')},
+                                                                                        {tag:'input', id:this.getId('reNewPassphrase')}
+                                                                                ]}
+                                                                        ]},
+                                                                        {tag:'div', cls:'confirm', children:[
+                                                                                {tag:'input', type:'checkbox', id:this.getId('confirm')},
+                                                                                {tag:'label', html:"I understand that Clipperz will not be able to recover a lost passphrase", 'for':this.getId('confirm')}
+                                                                        ]}
+                                                                ]},
+                                                                {tag:'div', cls:'clear'},
+                                                                {tag:'div', cls:'confirmButton', id:this.getId('confirmationButton'), children:[
+                                                                        {tag:'span', html:"change passphrase"}
+                                                                ]},
+
+                                                                {tag:'h3', cls:'manageOTP', html:"Manage One-Time Passphrases"},
+                                                                {}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('preferencesPanel'),   children:[
+                                                                {tag:'h3', html:"-- Preferences --"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('loginHistoryPanel'),  children:[
+                                                                {tag:'h3', html:"-- Login History --"}
+                                                        ]}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]);
+                
+                this.tabPanelController().setup({selected:this.initiallySelectedTab()});
+        },
+        
+        //-------------------------------------------------------------------------
+
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/AppPage.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/AppPage.js
new file mode 100644
index 0000000..67247df
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/AppPage.js
@@ -0,0 +1,78 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.AppPage = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.AppPage.superclass.constructor.call(this, args);
+
+        this._element = args.element || null;
+
+        this._slots = {
+                'cardGrid' : this.getId('cardGrid'),
+        //      'directLoginGrid' : this.getId('directLoginGrid'),
+                'accountPanel': this.getId('accountPanel'),
+                'dataPanel': this.getId('dataPanel'),
+                'toolsPanel': this.getId('toolsPanel'),
+                'userInfoBox': this.getId('userInfoBox'),
+                'tabSidePanel': this.getId('tabSidePanel')
+        };
+                
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.AppPage, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.AppPage component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                        this.append(this.element(),                     {tag:'div', id:this.getId('userInfoBox'), cls:'userInfoBox'});
+                        this.append(this.element(),                     {tag:'div', id:this.getId('sidePanels'), cls:'sidePanels'});
+                        this.append(this.getId('sidePanels'),{tag:'div', id:this.getId('tabSidePanel'), cls:'tabSidePanel', children:[]});
+
+                this.append(this.element(), {tag:'div', id:this.getId('mainPanels'), cls:'mainPanels'});
+                this.append(this.getId('mainPanels'), {tag:'div', id:this.getId('cardGrid'), cls:'gridComponent cardGrid'});
+        //              this.append(this.getId('mainPanels'), {tag:'div', id:this.getId('directLoginGrid'), cls:'gridComponent directLoginGrid'});      
+                        this.append(this.getId('mainPanels'), {tag:'div', id:this.getId('accountPanel'), cls:'otherPanel'});    
+                        this.append(this.getId('mainPanels'), {tag:'div', id:this.getId('dataPanel'), cls:'otherPanel'});       
+                        this.append(this.getId('mainPanels'), {tag:'div', id:this.getId('toolsPanel'), cls:'otherPanel'});      
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/BookmarkletComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/BookmarkletComponent.js
new file mode 100644
index 0000000..42a6052
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/BookmarkletComponent.js
@@ -0,0 +1,109 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.BookmarkletComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.BookmarkletComponent.superclass.constructor.apply(this, arguments);
+        MochiKit.Signal.connect(Clipperz.PM.Strings.Languages, 'switchLanguage', this, 'updateBookmarkletURLs');
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.BookmarkletComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.BookmarkletComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+        //      var bookmarkletUrl;
+//
+        //      if (Clipperz_IEisBroken == true) {
+        //              bookmarkletUrl = bookmarklet_ie;
+        //      } else {
+        ///             bookmarkletUrl = bookmarklet;
+        //              bookmarkletUrl = Clipperz.PM.Strings['bookmarklet'];
+        //      }
+
+                this.append(this.element(), {tag:'div', cls:'bookmarklet', children: [
+                        {tag:'div', id:this.getId('linkBlock'), cls:'bookmarklet_link', children:[
+        //                      {tag:'a', id:this.getId('link'), href:bookmarkletUrl, children:[
+                                {tag:'a', id:this.getId('link'), href:'#', children:[
+                                        {tag:'div', cls:'icon'},
+                                        {tag:'div', cls:'text', children:[
+                                                {tag:'span', html:"add to Clipperz"}
+                                        ]}
+                                ]}
+                        ]}
+                ]});
+
+                new Clipperz.PM.UI.Common.Components.Tooltip({
+                                element:this.getElement('linkBlock'),
+                                text:   "Drag and drop the \"add to Clipperz\" link above to the bookmark bar.",
+                                position:'BELOW'
+                });
+                
+                MochiKit.Signal.connect(this.getId('link'), 'onclick', this, 'handleOnclick');
+                this.updateBookmarkletURLs();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleOnclick': function (anEvent) {
+                anEvent.preventDefault();
+                
+Clipperz.log("BOOKMARKLET CLICK");
+        },
+
+        //-------------------------------------------------------------------------
+
+        'updateBookmarkletURLs': function () {
+                var bookmarkletUrl;
+
+                if (Clipperz_IEisBroken == true) {
+                        bookmarkletUrl = bookmarklet_ie;
+                } else {
+        //              bookmarkletUrl = bookmarklet;
+                        bookmarkletUrl = Clipperz.PM.Strings.getValue('bookmarklet');
+                }
+
+                this.getElement('link').href = bookmarkletUrl;
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js
new file mode 100644
index 0000000..e3238ca
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogComponent.js
@@ -0,0 +1,881 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.CardDialogComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.CardDialogComponent.superclass.constructor.apply(this, arguments);
+
+        this._tabPanelController = null;
+
+        this._tabPanelControllerConfiguration = {
+                'DETAILS': {
+                                tab:'detailTab',
+                                panel:'detailTabpanel'
+                },
+                'DIRECT_LOGINS': {
+                                tab:'directLoginTab',
+                                panel:'directLoginTabpanel'
+                },
+                'SHARING': {
+                                tab:'sharingTab',
+                                panel:'sharingTabpanel'
+                }
+        };
+        
+        this._tooltips = null;
+
+        this._isSavingEnabled = false;
+                this._hintMode = 'OFF';         //'ON'
+
+        this._fieldComponents = {};
+        this._directLoginComponents = {};
+
+                this._displayMode = 'fixed';    //'scrollable';
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.CardDialogComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.CardDialogComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'tabPanelController': function () {
+                if (this._tabPanelController == null) {
+                        this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({
+                                component:this,
+                                configuration:this._tabPanelControllerConfiguration
+                        });
+                        
+                        MochiKit.Signal.connect(this._tabPanelController, 'tabSelected', this, 'handleTabSelected')
+                }
+                
+                return this._tabPanelController;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(this.element(), {tag:'div', cls:'CardDialog mainDialog loading', id:this.getId('panel'), children: [
+                        {tag:'form', id:this.getId('form'), children:[
+        //                      {tag:'input', type:'text', id:this.getId('hidden'), cls:'hidden'},
+                                {tag:'div', cls:'header', children:[
+                                        {tag:'div', cls:'title', children:[
+                                                {tag:'input', type:'text', id:this.getId('title')}
+                                        ]}
+                                ]},
+                                {tag:'div', id:this.getId('body'), cls:'body', children:[
+                                        {tag:'div', cls:'tabs', children:[
+                                                {tag:'ul', cls:'tabs', children:[
+                                                        {tag:'li', id:this.getId('detailTab'), children:[{tag:'span', html:"details"}]},
+                                                        {tag:'li', id:this.getId('directLoginTab'), children:[
+                                                                {tag:'span', html:"direct logins"}//,
+        //                                                      {tag:'div', id:this.getId('addDirectLoginButton'), cls:'addDirectLoginButton', children:[
+        //                                                              {tag:'span', html:"+"}
+        //                                                      ]}
+                                                        ]},
+                                                        {tag:'li', id:this.getId('sharingTab'), children:[{tag:'span', html:"sharing"}]}
+                                                ]}
+                                        ]},
+                                        {tag:'div', cls:'tabPanels', children:[
+                                                {tag:'ul', cls:'tabPanels', children:[
+                                                        {tag:'li', id:this.getId('detailTabpanel'), cls:'tabPanel', children:[
+                                                                {tag:'div', id:this.getId('recordFields'), children:[
+                                                                        {tag:'table', cls:'fields', cellpadding:'0', id:this.getId('fieldTable'), cellspacing:'0', children:[
+                                                                                {tag:'thead', children:[
+                                                                                        {tag:'tr', children:[
+                                                                                                        {tag:'th', cls:'fieldStateTH',html:""},
+                                                                                                        {tag:'th', cls:'fieldLabelTH',html:"label"},
+                                                                                                        {tag:'th', cls:'fieldLockTH',html:""},
+                                                                                                        {tag:'th', cls:'fieldValueTH',html:"value"},
+                                                                                                        {tag:'th', cls:'fieldActionTH',html:""},
+                                                                                                        {tag:'th', cls:'fieldDeleteTH',html:""}
+                                                                                        ]}
+                                                                                ]},
+                                                                                {tag:'tfoot'},
+                                                                                {tag:'tbody', id:this.getId('tableBody'), children:[
+                                                                                        {tag:'tr', id:this.getId('newFieldTR'), cls:'newFieldTR', children:[
+                                                                                                {tag:'td', cls:'fieldState'},
+                                                                                                {tag:'td', cls:'fieldLabel', children:[
+                                                                                                        {tag:'input', cls:'label', id:this.getId('newFieldLabel')}
+                                                                                                ]},
+                                                                                                {tag:'td', cls:'fieldLock', children:[
+                                                                                                        {tag:'div', cls:'unlocked', id:this.getId('newFieldIsLocked')}
+                                                                                                ]},
+                                                                                                {tag:'td', cls:'fieldValue', children:[
+                                                                                                        {tag:'div', cls:'unlocked', id:this.getId('newFieldValueWrapper'), children:[
+                                                                                                                        {tag:'input',type:'text', cls:'value', id:this.getId('newFieldValue')}
+                                                                                                        ]}
+                                                                                                ]},
+                                                                                                {tag:'td', cls:'fieldAction', children:[
+                                                                                                        {tag:'div', html:'&nbsp;'}
+                                                                                                ]},
+                                                                                                {tag:'td', cls:'fieldAddDelete', children:[
+                                                                                                        {tag:'div', cls:'new', children:[
+                                                                                                                {tag:'span', children:[
+                                                                                                                        {tag:'a', href:'#', id:this.getId('newFieldAddButton'), html:"add"}
+                                                                                                                ]}
+                                                                                                        ]}
+                                                                                                ]}
+                                                                                        ]}
+                                                                                ]}
+                                                                        ]}
+                                                                ]},
+                                                                {tag:'div', cls:'notes', children:[
+                                                                        {tag:'div', children:[
+                                                                                {tag:'textarea', id:this.getId('recordNote'), value:""}
+                                                                        ]}
+                                                                ]}
+                                                        ]},
+                                                        {tag:'li', id:this.getId('directLoginTabpanel'), cls:'tabPanel', children:[
+                                                                {tag:'div', id:this.getId('directLoginsComponentContainer'), cls:'directLoginsComponentContainer', children:[
+                                                                        {tag:'div', id:this.getId('directLogins'), cls:'directLogins', children:[
+                                                                                {tag:'div', id:this.getId('addNewDirectLoginSplash'), cls:'addNewDirectLoginSplash', children:[
+                                                                                        {tag:'h3', html:"Here you can add a Direct Login for this card: instant access to your favorit website!"},
+                                                                                        {tag:'a', href:'#', id:this.getId('addNewDirectLoginSplashButton'), children:[{tag:'span', html:"Add Direct Login"}]}
+                                                                                ]},
+                                                                                {tag:'div', id:this.getId('directLoginsList')},
+                                                                                {tag:'div', cls:'addDirectLoginListItem', id:this.getId('addDirectLoginListItem'), children:[{tag:'a', href:'#', id:this.getId('addNewDirectLoginListItemButton'), children:[{tag:'span', html:"Add Direct Login"}]}]}
+                                                                        ]},
+                                                                        {tag:'div', id:this.getId('directLoginEditDetail'), cls:'directLoginEditDetail'}
+                                                                ]}
+                                                        ]},
+                                                        {tag:'li', id:this.getId('sharingTabpanel'), cls:'tabPanel', children:[
+                                                                {tag:'h2', html:"Coming soon!"}
+                                                        ]}
+                                                ]}
+                                        ]},
+                                        {tag:'div', cls:'mask', children:[
+                                                {tag:'div', id:this.getId('progress'), children:[
+                                                        {tag:'h3', id:this.getId('progressDescription'), cls:'progressDescription', html:"Loading"},
+                                                        {tag:'div', id:this.getId('progressBar')}
+                                                ]},
+                                                {tag:'div', id:this.getId('error'), cls:'error', children:[
+                                                        {tag:'div', cls:'img'},
+                                                        {tag:'p', id:this.getId('errorMessage')}
+                                                ]}
+                                        ]}
+                                ]},
+                                {tag:'div', cls:'footer', children:[
+                                        {tag:'div', cls:'buttonArea', children:[
+                                                {tag:'div', cls:'cancel', id:this.getId('cancelButton'), html:"cancel"},
+                                                {tag:'div', cls:'save disabled',   id:this.getId('saveButton'),   html:"save"}
+                                        ]}
+                                ]}
+                        ]}
+                ]});
+
+
+                this.insertAllTooltips();
+                
+                this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':this.getElement('progressBar')}));
+
+                this.tabPanelController().setup({selected:'DETAILS'});
+        //      this.tabPanelController().setup({selected:'DIRECT_LOGINS'});
+
+                MochiKit.Style.hideElement(this.getId('error'));
+                MochiKit.Style.hideElement(this.getElement('directLoginEditDetail'));
+                MochiKit.Style.hideElement(this.getElement('addDirectLoginListItem'));
+                this.plumbDetailsPanel();
+
+                        MochiKit.Signal.connect(this.getId('cancelButton'),                                             'onclick',      this, 'handleCancelEvent');
+                        MochiKit.Signal.connect(this.getId('saveButton'),                                               'onclick',      this, 'handleSaveEvent');
+
+                        MochiKit.Signal.connect(this.getId('addNewDirectLoginSplashButton'),    'onclick',      this, 'handleAddDirectLogin');
+                        MochiKit.Signal.connect(this.getId('addNewDirectLoginListItemButton'),  'onclick',      this, 'handleAddDirectLogin');
+                
+                        MochiKit.Signal.connect(MochiKit.DOM.currentDocument().body,                    'onkeydown',this, 'handleKeyEvent');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'displayMode': function () {
+                return this._displayMode;
+        },
+        
+        'setDisplayMode': function (aValue) {
+                this._displayMode = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'plumbDetailsPanel': function () {
+                        MochiKit.Signal.connect(this.getId('title'),    'onfocus',      MochiKit.Base.method(this, 'handleOnFocusEvent',this.getElement('title').parentNode));
+                        MochiKit.Signal.connect(this.getId('title'),    'onblur',MochiKit.Base.method(this, 'handleLooseFocusEvent', this.getElement('title').parentNode));
+                        MochiKit.Signal.connect(this.getId('title'),    'onchange',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+                        MochiKit.Signal.connect(this.getId('title'),    'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+
+                        MochiKit.Signal.connect(this.getId('recordNote'),       'onfocus',      MochiKit.Base.method(this, 'handleOnFocusEvent',MochiKit.Selector.findChildElements(this.element(), ['div.notes'])[0]));
+                        MochiKit.Signal.connect(this.getId('recordNote'),       'onblur',MochiKit.Base.method(this, 'handleLooseFocusEvent', MochiKit.Selector.findChildElements(this.element(), ['div.notes'])[0]));
+                        MochiKit.Signal.connect(this.getId('recordNote'),       'onchange',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+                        MochiKit.Signal.connect(this.getId('recordNote'),       'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+
+                        MochiKit.Signal.connect(this.getId('newFieldValue'),     'onkeydown',this, 'handleKeyDownOnNewFieldValue');
+
+                        MochiKit.Signal.connect(this.getId('newFieldLabel'),    'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+                        MochiKit.Signal.connect(this.getId('newFieldIsLocked'),         'onclick',this, 'toggleNewFieldIsHidden');
+                        MochiKit.Signal.connect(this.getId('newFieldValue'),    'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+
+                        MochiKit.Signal.connect(this.getId('newFieldAddButton'), 'onclick', this, 'handleAddClick');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'insertAllTooltips': function () {
+                var tooltips;
+                var tooltipEnabled;
+
+                tooltips = {};
+                tooltipEnabled = (this.hintMode() == 'ON');
+                
+                tooltips['title'] = new Clipperz.PM.UI.Common.Components.Tooltip({
+                                'element':this.getElement('title'),
+                                'text':         "Insert here the title of the card",
+                                'position':'RIGHT'
+                });
+                this.addComponent(tooltips['title']);
+                        MochiKit.Signal.connect(this.getId('title'),    'onfocus',MochiKit.Base.method(this, 'showTooltipOnFocus', 'title'));
+                        MochiKit.Signal.connect(this.getId('title'),    'onblur',       MochiKit.Base.method(this, 'hideTooltipOnBlur', 'title'));
+                
+                tooltips['newFieldTR'] = new Clipperz.PM.UI.Common.Components.Tooltip({
+                                'element':this.getElement('newFieldTR'),
+                                'text':         "Insert your card new values here",
+                                'position':'RIGHT'
+                });
+                this.addComponent(tooltips['newFieldTR']);
+                        MochiKit.Signal.connect(this.getId('newFieldLabel'),    'onfocus',MochiKit.Base.method(this, 'showTooltipOnFocus', 'newFieldTR'));
+                        MochiKit.Signal.connect(this.getId('newFieldValue'),    'onblur',       MochiKit.Base.method(this, 'hideTooltipOnBlur', 'newFieldTR'));
+
+                tooltips['recordNote'] = new Clipperz.PM.UI.Common.Components.Tooltip({
+                                'element':this.getElement('recordNote'),
+                                'text':         "You can insert some notes here",
+                                'position':'RIGHT'
+                });
+                this.addComponent(tooltips['recordNote']);
+                        MochiKit.Signal.connect(this.getId('recordNote'),       'onfocus',MochiKit.Base.method(this, 'showTooltipOnFocus', 'recordNote'));
+                        MochiKit.Signal.connect(this.getId('recordNote'),       'onblur',       MochiKit.Base.method(this, 'hideTooltipOnBlur', 'recordNote'));
+
+                this._tooltips = tooltips;
+        },
+
+        //.........................................................................
+
+        'updateAllTooltipsEnabledMode': function (aStatus) {
+                        vartooltipLabel;
+                var tooltipEnabled;
+                
+                tooltipEnabled = (aStatus == 'ON') ? true : false;
+                
+                for (tooltipLabel in this.tooltips()) {
+                        this.tooltips()[tooltipLabel].setIsEnabled(tooltipEnabled);
+                }
+        },
+
+        //.........................................................................
+
+        'tooltips': function () {
+                return this._tooltips;
+        },
+
+        //.........................................................................
+
+        'showTooltipOnFocus': function (aTooltip, anEvent) {
+                MochiKit.Async.callLater(0.5, MochiKit.Base.method(this.tooltips()[aTooltip], 'show'));
+        },
+
+        //.........................................................................
+
+        'hideTooltipOnBlur': function (aTooltip, anEvent) {
+                this.tooltips()[aTooltip].hide();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'displayElement': function() {
+                return this.getElement('panel');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'fieldComponents': function () {
+                return this._fieldComponents;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'directLoginComponents': function () {
+                return this._directLoginComponents;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'hintMode': function () {
+                return this._hintMode;
+        },
+        
+        'setHintMode': function (aValue) {
+                if (this._hintMode != aValue) {
+                        this._hintMode = aValue;
+
+                        this.updateAllTooltipsEnabledMode(this._hintMode);
+        //              if (this._hintMode == 'ON') {
+        //                      this.enableHints();
+        //              }
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'focusOnNewFieldLabel': function () {
+                this.getElement('newFieldLabel').focus();
+        },
+        
+        //=========================================================================
+
+        'isSavingEnabled': function () {
+                return this._isSavingEnabled;
+        },
+        
+        'setShouldEnableSaving': function (aValue) {
+                this._isSavingEnabled = aValue || this.newFieldHasPendingChanges();
+
+                if (this._isSavingEnabled == true) {
+                        MochiKit.DOM.addElementClass(this.getElement('panel'), 'hasPendingChanges');
+                        MochiKit.DOM.removeElementClass(this.getId('saveButton'), 'disabled');
+                } else {
+                        MochiKit.DOM.removeElementClass(this.getElement('panel'), 'hasPendingChanges');
+                        MochiKit.DOM.addElementClass(this.getId('saveButton'), 'disabled');
+                }
+        },
+
+        //=========================================================================
+
+        'title': function () {
+                return this.getElement('title').value;
+        },
+
+        'setTitle': function (aValue) {
+                this.renderTitle(aValue);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderTitle': function (aValue) {
+                this.getElement('title').value = Clipperz.Base.sanitizeString(aValue);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setFocusOnTitleField': function () {
+                this.getElement('title').focus();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'disableCardTitleEditing': function () {
+                this.getElement('title').disabled = true;
+                MochiKit.DOM.addElementClass(this.getElement('title').parentNode, 'disabled');
+        },
+        
+        
+        'enableCardTitleEditing': function () {
+                this.getElement('title').disabled = false;
+                MochiKit.DOM.removeElementClass(this.getElement('title').parentNode, 'disabled');
+        },
+
+        //=========================================================================
+
+        'notes': function () {
+                return this.getElement('recordNote').value;
+        },
+
+        'setNotes': function (aValue) {
+                this.renderNotes(aValue);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderNotes': function (aValue) {
+                var noteElement;
+
+                noteElement = this.getElement('recordNote');
+                
+                if ((aValue != null) && (typeof(aValue) != 'undefined')) {
+                        noteElement.value = aValue;
+                } else {
+                        noteElement.value = "";
+                }
+                
+                this.fixNotesHeight();
+        },
+
+        //=========================================================================
+
+        'addFieldRowComponent': function (aFieldComponent) {
+                        varfieldTR;
+
+                fieldTR = this.insertBefore(this.getElement('newFieldTR'), {tag:'tr', id:'recordFieldReferece_'+aFieldComponent.reference()});
+                aFieldComponent.renderInNode(fieldTR);
+                this.fieldComponents()[aFieldComponent.reference()] = aFieldComponent;
+        },
+
+        //=========================================================================
+
+        'addDirectLoginComponent': function (aDirectLoginComponent) {
+                var directLoginDIV;
+
+                if (MochiKit.Base.keys(this.directLoginComponents()).length == 0) {
+                        this.hideNewDirectLoginSplash();
+                }
+                
+                directLoginDIV = this.append(this.getElement('directLoginsList'), {tag:'div', cls:'directLoginItem'});
+                aDirectLoginComponent.renderInNode(directLoginDIV);
+                this.directLoginComponents()[aDirectLoginComponent.reference()] = aDirectLoginComponent;
+        },
+
+        'removeDirectLoginComponent': function (aDirectLoginComponent) {
+                delete this.directLoginComponents()[aDirectLoginComponent.reference()];
+                aDirectLoginComponent.remove();
+
+                if (MochiKit.Base.keys(this.directLoginComponents()).length == 0) {
+                        this.showNewDirectLoginSplash();
+                }
+        },
+
+        //=========================================================================
+
+        'showNewDirectLoginSplash': function () {
+                MochiKit.Style.showElement(this.getElement('addNewDirectLoginSplash'));
+                MochiKit.Style.hideElement(this.getElement('addDirectLoginListItem'));
+        },
+        
+        'hideNewDirectLoginSplash': function () {
+                MochiKit.Style.hideElement(this.getElement('addNewDirectLoginSplash'));
+                MochiKit.Style.showElement(this.getElement('addDirectLoginListItem'));
+        },
+        
+        //=========================================================================
+
+        'renderDirectLoginEditingComponent': function (aDirectLoginEditingComponent) {
+                aDirectLoginEditingComponent.renderInNode(this.getElement('directLoginEditDetail'));
+        },
+        
+        'placeDirectLoginEditingComponent': function () {
+                var width;
+
+                        width = MochiKit.Style.getElementDimensions(this.getElement('directLoginsComponentContainer'))['w'];
+                
+                return Clipperz.Async.callbacks("CardDialogComponent.renderDirectLoginEditingComponent", [
+                        MochiKit.Base.bind(function () {
+                                MochiKit.Style.setElementPosition  (this.getElement('directLoginEditDetail'), {x:width, y:-MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']});
+                                MochiKit.Style.setElementDimensions(this.getElement('directLoginEditDetail'), {w:width});
+                        }, this),
+
+                        MochiKit.Base.noop
+                ], {trace:false});
+        },
+
+        //=========================================================================
+
+        'newFieldLabel': function () {
+                return this.getElement('newFieldLabel').value;
+        },
+
+        'setNewFieldLabel': function (aValue) {
+                this.getElement('newFieldLabel').value = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'newFieldValue': function () {
+                return this.getElement('newFieldValue').value;
+        },
+
+        'setNewFieldValue': function (aValue) {
+                this.getElement('newFieldValue').value = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'newFieldIsHidden': function () {
+                return MochiKit.DOM.hasElementClass(this.getElement('newFieldIsLocked'), 'locked');
+        },
+
+        'setNewFieldIsHidden': function (aValue) {
+                MochiKit.DOM.setElementClass(this.getElement('newFieldIsLocked'), (aValue ? 'locked': 'unlocked'));
+                MochiKit.DOM.setElementClass(this.getElement('newFieldValueWrapper'), (aValue ? 'locked': 'unlocked'));
+        },
+
+        'toggleNewFieldIsHidden': function (anEvent) {
+                anEvent.preventDefault();
+                
+                this.setNewFieldIsHidden(! this.newFieldIsHidden());
+                MochiKit.Signal.signal(this, 'changedValue');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'newFieldHasPendingChanges': function () {
+                return ((this.newFieldLabel() != '') || (this.newFieldValue() != '') || (this.newFieldIsHidden() == true));
+        },
+
+        'resetNewFieldInputs': function () {
+                this.setNewFieldLabel('');
+                this.setNewFieldValue('');
+                this.setNewFieldIsHidden(false);
+        },
+
+        //=========================================================================
+
+        'handleKeyDownOnNewFieldValue': function (anEvent) {
+                MochiKit.Signal.signal(this, 'keyPressed', anEvent);
+/*
+                if ((anEvent.key().string == 'KEY_TAB') && this.newFieldHasPendingChanges()) {
+                        anEvent.preventDefault();
+
+                        MochiKit.Signal.signal(this, 'addField');
+                        this.getElement('newFieldLabel').focus();
+                }
+*/
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleAddClick': function (anEvent) {
+                anEvent.preventDefault();
+                MochiKit.Signal.signal(this, 'addField');
+                this.getElement('newFieldLabel').focus();
+        },
+
+        //=========================================================================
+
+        'handleDeleteClick': function (aFieldKey, anEvent) {
+                anEvent.preventDefault();
+                MochiKit.Signal.signal(this, 'deleteField', aFieldKey);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'toggleLock': function (aFieldKey, anEvent) {
+                var shouldRedrawAsLocked;
+                var currentTRElement;
+                
+                anEvent.preventDefault();
+                
+                currentTRElement = Clipperz.DOM.get(aFieldKey);
+                shouldRedrawAsLocked = (MochiKit.DOM.hasElementClass(currentTRElement, 'locked') ? false : true);
+
+                this.renderFieldTR(currentTRElement, {
+                        label:MochiKit.Selector.findChildElements(currentTRElement, ['td.fieldLabel input'])[0].value,
+                        value:MochiKit.Selector.findChildElements(currentTRElement, ['td.fieldValue input'])[0].value
+                }, shouldRedrawAsLocked, MochiKit.DOM.hasElementClass(currentTRElement, 'new'));
+        },
+
+        //=========================================================================
+
+        'fixNotesHeight': function () {
+                var element;
+                
+                element = this.getElement('recordNote');
+
+                if (element.scrollHeight == 0) {
+                        MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'fixNotesHeight'));
+                } else {
+                        var textareaHeight;
+
+                        textareaHeight = Math.min(Math.max(50, element.scrollHeight), 500);
+
+                        MochiKit.Style.setElementDimensions(element, {h:textareaHeight}, 'px');
+                        MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'fixRendering'));
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'fixRendering': function () {
+        //              varheight;
+                var y;
+                        varscrollHeight;
+                var viewportHeight;
+                var viewportY;
+                var footerElement;
+                var footerElementPosition;
+                var footerElementDimensions;
+                var footerComputedHeight;
+
+        //      height = MochiKit.Style.getElementDimensions(this.displayElement())['h'];
+                y = MochiKit.Style.getElementPosition(this.displayElement())['y'];
+
+                footerElement = MochiKit.Selector.findChildElements(this.displayElement(), ['div.footer'])[0];
+                footerElementPosition = MochiKit.Style.getElementPosition(footerElement);
+                footerElementDimensions = MochiKit.Style.getElementDimensions(footerElement);
+                footerComputedHeight = footerElementPosition['y'] + footerElementDimensions['h'] - y;
+
+        //      scrollHeight = this.displayElement().scrollHeight;
+                scrollHeight = footerComputedHeight;
+
+                viewportHeight = MochiKit.Style.getViewportDimensions()['h'];
+                viewportY = MochiKit.Style.getViewportPosition()['y'];
+
+                if ((y + scrollHeight) > (viewportY + viewportHeight)) {
+                        this.setDisplayMode('scrollable');
+                        MochiKit.DOM.addElementClass(this.element(), 'scrollable');
+                        MochiKit.DOM.removeElementClass(this.element(), 'fixed');
+                        MochiKit.Style.setElementPosition(this.displayElement(), {y:Math.max(0, Math.min(y, (viewportY + viewportHeight) - scrollHeight))}, 'px');
+                        MochiKit.Visual.ScrollTo(this.displayElement(), {duration:0.5});
+                } else {
+                        this.setDisplayMode('fixed');
+                        MochiKit.DOM.removeElementClass(this.element(), 'scrollable');
+                        MochiKit.DOM.addElementClass(this.element(), 'fixed');
+                }
+        },
+
+        //=========================================================================
+
+        'unselectCurrentSelectedItems': function () {
+                MochiKit.Iter.forEach(MochiKit.Selector.findChildElements(this.displayElement(), ['.selectedField']), function (anElement) {
+                        MochiKit.DOM.removeElementClass(anElement, 'selectedField');
+                });
+        },
+
+        //=========================================================================
+
+        'hideProgressMask': function () {
+                MochiKit.DOM.removeElementClass(this.getId('panel'), 'loading');
+        },
+
+        'showProgressMask': function () {
+                this.getElement('progressDescription').innerHTML = "Saving";
+                MochiKit.DOM.addElementClass(this.getId('panel'), 'loading');
+        },
+
+        'showError': function (anError) {
+//console.log(">>> showError", anError);
+                MochiKit.Style.hideElement(this.getId('progress'));
+                this.getElement('errorMessage').innerHTML = Clipperz.PM.Strings.errorDescriptionForException(anError['message']);
+                MochiKit.Style.showElement(this.getId('error'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'cancel': function () {
+/*
+                var deferredResult;
+                
+                deferredResult = new Clipperz.Async.Deferred("CardDialogComponent.cancel", {trace:false});
+                deferredResult.addCallback(MochiKit.Base.method(this, 'isSavingEnabled'));
+                deferredResult.addIf([
+                        MochiKit.Base.method(this, 'askConfirmationForLoosingPendingChanges')
+                ], []);
+                deferredResult.addCallback(MochiKit.Base.partial(MochiKit.Signal.signal, this, 'cancel'));
+                deferredResult.callback();
+                
+                return deferredResult;
+*/
+                MochiKit.Signal.signal(this, 'cancel');
+        },
+
+        'handleCancelEvent': function (anEvent) {
+                anEvent.preventDefault();
+                this.cancel();
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'handleSaveEvent': function (anEvent) {
+                anEvent.preventDefault();
+                
+                if (! MochiKit.DOM.hasElementClass(anEvent.src(), 'disabled')) {
+                        MochiKit.Signal.signal(this, 'save');
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleAddDirectLogin': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'addDirectLogin');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleOnFocusEvent': function (anElement, anEvent) {
+                this.unselectCurrentSelectedItems();
+                MochiKit.DOM.addElementClass(anElement, 'selectedField');
+        },
+
+        'handleLooseFocusEvent': function (anElement, anEvent) {
+                this.unselectCurrentSelectedItems();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleTabSelected': function (aSelectedTab) {
+                this.unselectCurrentSelectedItems();
+
+                switch (aSelectedTab) {
+                        case 'DETAILS':
+        //                      MochiKit.Style.hideElement(this.getElement('addDirectLoginButton'));
+                                break;
+                        case 'DIRECT_LOGINS':
+        //                      MochiKit.Style.showElement(this.getElement('addDirectLoginButton'));
+                                break;
+                        case 'SHARING':
+        //                      MochiKit.Style.hideElement(this.getElement('addDirectLoginButton'));
+                                break;
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleKeyEvent': function (anEvent) {
+//console.log("####", anEvent.key().string);
+                if (anEvent.key().string == 'KEY_ESCAPE') {
+                        MochiKit.Signal.signal(this, 'changedValue');
+                        this.cancel();
+                } else if (anEvent.key().string == 'KEY_ENTER') {
+                        if (anEvent.target().nodeName == 'TEXTAREA') {
+                                
+                        } else {
+                                anEvent.preventDefault();
+                        }
+                }
+        },
+
+        //=========================================================================
+
+        'askConfirmationForLoosingPendingChanges': function () {
+                var deferredResult;
+                var confirmationDialog;
+                
+                confirmationDialog = new Clipperz.PM.UI.Common.Components.SimpleMessagePanel({
+                                title:"Alert",
+                                text:"Should lost pending changes?",
+                                type:'ALERT',
+                        buttons: [
+                                        {text:"Cancel",result:'CANCEL', isDefault:true},
+                                {text:"Ok", result:'OK'}
+                        ]
+                });
+
+                deferredResult = new Clipperz.Async.Deferred("CardDialogComponent.askConfirmationForLoosingPendingChanges", {trace:false});
+        //      deferredResult = confirmationDialog.deferredShow({openFromElement:anEvent.src(), onOkCloseToElement:MochiKit.DOM.currentDocument().body, onCancelCloseToElement:anEvent.src()});
+                deferredResult.addMethod(confirmationDialog, 'deferredShow', {
+                                'openFromElement':              this.getElement('cancelButton'),
+                                'onOkCloseToElement':           null,   //this.getElement('cancelButton'),
+                                'onCancelCloseToElement':this.getElement('cancelButton')
+                });
+        //      deferredResult.addCallback(function () { console.log("DELETE: " + anObject.toString(), anObject); });
+        //      deferredResult.addErrbackPass(function () { console.log("skip deletion: " + anObject.toString(), anObject); });
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //=========================================================================
+
+        'showDirectLoginEditingComponent': function () {
+                        varwidth;
+                var transition;
+                var duration;
+                
+                        width = MochiKit.Style.getElementDimensions(this.getElement('directLoginsComponentContainer'))['w'];
+                transition = MochiKit.Visual.Transitions.sinoidal;
+                duration = 1;
+
+                return Clipperz.Async.callbacks("CardDialogComponent.showDirectLoginEditingComponent", [
+                        MochiKit.Base.method(this, 'disableCardTitleEditing'),
+                        MochiKit.Base.method(this.tabPanelController(), 'disable'),
+
+                        MochiKit.Base.bind(function () {
+                                MochiKit.Style.setElementPosition  (this.getElement('directLoginEditDetail'), {x:width, y:-MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']});
+                                MochiKit.Style.setElementDimensions(this.getElement('directLoginEditDetail'), {w:width});
+                                MochiKit.Style.showElement(this.getElement('directLoginEditDetail'));
+                                MochiKit.Style.setOpacity(this.getElement('directLoginEditDetail'), 0);
+                                MochiKit.Style.setElementDimensions(this.getElement('directLoginsComponentContainer'), {
+                                        h:Math.max(
+                                                MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h'],
+                                                MochiKit.Style.getElementDimensions(this.getElement('directLoginEditDetail'))['h']
+                                        )
+                                });
+        //                      MochiKit.Style.setElementDimensions(this.getElement('directLoginsComponentContainer'), {h:MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']});
+                        }, this),
+                                MochiKit.Base.partial(Clipperz.Visual.deferredAnimations,MochiKit.Visual.Parallel, [
+                                        new MochiKit.Visual.Move(this.getElement('directLogins'),                       {x:-width, y:0, mode:'relative', transition:transition, sync:true}),
+                                        new MochiKit.Visual.Opacity(this.getElement('directLogins'),            {from:1.0, to:0.0, transition:transition, sync:true}),
+                                        new MochiKit.Visual.Move(this.getElement('directLoginEditDetail'),      {x:-width, y:0, mode:'relative', transition:transition, sync:true}),
+                                        new MochiKit.Visual.Opacity(this.getElement('directLoginEditDetail'),{from:0.0, to:1.0, transition:transition, sync:true})
+                        ], {duration:duration}),
+
+                        MochiKit.Base.noop
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'hideDirectLoginEditingComponent': function () {
+                        varwidth;
+                var transition;
+                var duration;
+        
+                        width = MochiKit.Style.getElementDimensions(this.getElement('directLoginsComponentContainer'))['w'];
+                transition = MochiKit.Visual.Transitions.sinoidal;
+                duration = 1;
+
+                return Clipperz.Async.callbacks("CardDialogComponent.hideDirectLoginEditingComponent", [
+                                MochiKit.Base.partial(Clipperz.Visual.deferredAnimations,MochiKit.Visual.Parallel, [
+                                        new MochiKit.Visual.Move(this.getElement('directLogins'),                       {x:width, y:0, mode:'relative', transition:transition, sync:true}),
+                                        new MochiKit.Visual.Opacity(this.getElement('directLogins'),            {from:0.0, to:1.0, transition:transition, sync:true}),
+                                        new MochiKit.Visual.Move(this.getElement('directLoginEditDetail'),      {x:width, y:0, mode:'relative', transition:transition, sync:true}),
+                                        new MochiKit.Visual.Opacity(this.getElement('directLoginEditDetail'),{from:1.0, to:0.0, transition:transition, sync:true})
+                        ], {duration:duration}),
+        //              MochiKit.Base.partial(MochiKit.Visual.appear, this.getElement('addDirectLoginButton'), {duration:0.3}),
+                        Clipperz.Async.clearResult,
+                        MochiKit.Base.partial(MochiKit.Style.hideElement, this.getElement('directLoginEditDetail')),
+        //              MochiKit.Base.partial(MochiKit.Style.showElement, this.getElement('directLogins')),
+                        MochiKit.Base.partial(MochiKit.Style.setElementDimensions, this.getElement('directLoginsComponentContainer'), {h:MochiKit.Style.getElementDimensions(this.getElement('directLogins'))['h']}),
+
+                        MochiKit.Base.method(this, 'enableCardTitleEditing'),
+                        MochiKit.Base.method(this.tabPanelController(), 'enable')
+                ], {trace:false});
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogRecordDirectLoginComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogRecordDirectLoginComponent.js
new file mode 100644
index 0000000..126c5b1
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogRecordDirectLoginComponent.js
@@ -0,0 +1,182 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.CardDialogRecordDirectLoginComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.CardDialogRecordDirectLoginComponent.superclass.constructor.apply(this, arguments);
+
+                this._reference = args.reference|| Clipperz.Base.exception.raise('MandatoryParameter');
+        this._faviconComponent = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.CardDialogRecordDirectLoginComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.CardDialogRecordDirectLoginComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'reference': function () {
+                return this._reference;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+//console.log(">>> CardDialogRecordDirectLoginComponent.renderSelf");
+                this.append(this.element(), [
+                        {tag:'div', cls:'cardDialogRecordDirectLoginComponent_favicon', children:[
+                                {tag:'img', cls:'favicon', id:this.getId('favicon')}
+                        ]},
+                        {tag:'div', cls:'cardDialogRecordDirectLoginComponent_label', children:[
+                                {tag:'input', id:this.getId('label'), type:'text'}
+                        ]},
+                        {tag:'div', cls:'open', children:[
+                                {tag:'span', children:[
+                                        {tag:'a', href:'open', id:this.getId('open'), html:'&nbsp;'}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'edit', children:[
+                                {tag:'span', children:[
+                                        {tag:'a', href:'edit', id:this.getId('edit'), html:"edit"}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'delete', children:[
+                                {tag:'span', children:[
+                                        {tag:'a', href:'delete', id:this.getId('delete'), html:"delete"}
+                                ]}
+                        ]}
+/*
+                        {tag:'td', cls:'fieldState'},
+                        {tag:'td', cls:'fieldLabel', children:[
+                                {tag:'input', cls:'label', id:this.getId('label')}
+                        ]},
+                        {tag:'td', cls:'fieldLock', children:[
+                                {tag:'div', cls:'unlocked', id:this.getId('isHidden')}
+                        ]},
+                        {tag:'td', cls:'fieldValue', children:[
+                                {tag:'div', cls:'unlocked', id:this.getId('valueWrapper'), children:[
+                                        {tag:'input', type:'text', cls:'value', id:this.getId('value')}
+                                ]}
+                        ]},
+                        {tag:'td', cls:'fieldAddDelete', children:[
+                                {tag:'div', cls:'delete', children:[
+                                        {tag:'span', children:[
+                                                {tag:'a', href:'#', id:this.getId('delete'), html:"delete"}
+                                        ]}
+                                ]}
+                        ]}
+*/
+                ]);
+
+                        MochiKit.Signal.connect(this.getId('label'),    'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+                        MochiKit.Signal.connect(this.getId('open'),             'onclick',this, 'openDirectLogin');
+                        MochiKit.Signal.connect(this.getId('edit'),             'onclick',this, 'editDirectLogin');
+                        MochiKit.Signal.connect(this.getId('delete'),   'onclick',this, 'deleteDirectLogin');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'shouldShowElementWhileRendering': function () {
+                return false;
+        },
+
+        //-------------------------------------------------------------------------
+        
+        'faviconComponent': function () {
+                if (this._faviconComponent == null) {
+//console.log("created the FAVICON component");
+                        this._faviconComponent = new Clipperz.PM.UI.Common.Components.FaviconComponent({element:this.getId('favicon')});
+                }
+                
+                return this._faviconComponent;
+        },
+
+        //=========================================================================
+
+        'label': function () {
+                return this.getElement('label').value;
+        },
+
+        'setLabel': function (aValue) {
+                this.getElement('label').value = Clipperz.Base.sanitizeString(aValue);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'favicon': function () {
+        //      return this.getElement('favicon').src;
+                return this.faviconComponent().src();
+        },
+
+        'setFavicon': function (aValue) {
+        //      this.getElement('favicon').src = Clipperz.Base.sanitizeString(aValue);
+                this.faviconComponent().setSrc(Clipperz.Base.sanitizeString(aValue));
+        },
+
+        //=========================================================================
+
+        'openDirectLogin': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'openDirectLogin', this.reference());
+        },
+
+        //-------------------------------------------------------------------------
+
+        'editDirectLogin': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'editDirectLogin', this.reference());
+//console.log("EDIT DIRECT LOGIN");
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deleteDirectLogin': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'deleteDirectLogin', this.reference());
+//console.log("DELETE DIRECT LOGIN");
+        },
+
+
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogRecordFieldComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogRecordFieldComponent.js
new file mode 100644
index 0000000..c1a7c13
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CardDialogRecordFieldComponent.js
@@ -0,0 +1,190 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.CardDialogRecordFieldComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.CardDialogRecordFieldComponent.superclass.constructor.apply(this, arguments);
+
+                this._reference = args.reference|| Clipperz.Base.exception.raise('MandatoryParameter');
+        this._actionType = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.CardDialogRecordFieldComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.CardDialogRecordFieldComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(this.element(), [
+                        {tag:'td', cls:'fieldState'},
+                        {tag:'td', cls:'fieldLabel', children:[
+                                {tag:'input', cls:'label', id:this.getId('label')}
+                        ]},
+                        {tag:'td', cls:'fieldLock', children:[
+                                {tag:'div', cls:'unlocked', id:this.getId('isHidden')}
+                        ]},
+                        {tag:'td', cls:'fieldValue', children:[
+                                {tag:'div', cls:'unlocked', id:this.getId('valueWrapper'), children:[
+                                        {tag:'input', type:'text', cls:'value', id:this.getId('value')}
+                                ]}
+                        ]},
+                        {tag:'td', cls:'fieldAction', children:[
+                                {tag:'a', href:'#', id:this.getId('actionLink'), html:'&nbsp;'}
+                        ]},
+                        {tag:'td', cls:'fieldAddDelete', children:[
+                                {tag:'div', cls:'delete', children:[
+                                        {tag:'span', children:[
+                                                {tag:'a', href:'#', id:this.getId('delete'), html:"delete"}
+                                        ]}
+                                ]}
+                        ]}
+                ]);
+
+                        MochiKit.Signal.connect(this.getId('label'),            'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+                        MochiKit.Signal.connect(this.getId('isHidden'),                 'onclick',this, 'toggleIsHidden');
+                        MochiKit.Signal.connect(this.getId('value'),            'onkeyup',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'changedValue'));
+                        MochiKit.Signal.connect(this.getId('actionLink'),       'onclick',this, 'handleActionLink');
+                        MochiKit.Signal.connect(this.getId('delete'),           'onclick',this, 'deleteField');
+        //              MochiKit.Signal.connect(this.getId('delete'),           'onclick',MochiKit.Base.partial(MochiKit.Signal.signal, this, 'deleteField', this.reference()));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'shouldShowElementWhileRendering': function () {
+                return false;
+        },
+
+        //=========================================================================
+
+        'reference': function () {
+                return this._reference;
+        },
+
+        //=========================================================================
+
+        'label': function () {
+                return this.getElement('label').value;
+        },
+
+        'setLabel': function (aValue) {
+        //      this.getElement('label').value = Clipperz.Base.sanitizeString(aValue);
+                this.getElement('label').value = aValue;
+        },
+
+        //=========================================================================
+
+        'value': function () {
+                return this.getElement('value').value;
+        },
+
+        'setValue': function (aValue) {
+        //      this.getElement('value').value = Clipperz.Base.sanitizeString(aValue);
+                this.getElement('value').value = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'actionType': function () {
+                return this._actionType;
+        },
+
+        'setActionType': function (anActionType) {
+                this._actionType = anActionType;
+                
+                switch (this._actionType) {
+                        case 'NONE':
+                                MochiKit.Style.hideElement(this.getId('actionLink'));
+                                MochiKit.DOM.setElementClass(this.getId('actionLink'), '');
+                                break;
+                        case 'URL':
+                                MochiKit.Style.showElement(this.getId('actionLink'));
+                                MochiKit.DOM.setElementClass(this.getId('actionLink'), 'url');
+                                break;
+                        case 'EMAIL':
+                                MochiKit.Style.showElement(this.getId('actionLink'));
+                                MochiKit.DOM.setElementClass(this.getId('actionLink'), 'email');
+                                break;
+                        case 'PASSWORD':
+                                MochiKit.Style.showElement(this.getId('actionLink'));
+                                MochiKit.DOM.setElementClass(this.getId('actionLink'), 'password');
+                                break;
+                }
+        },
+
+        //=========================================================================
+
+        'isHidden': function () {
+        //      return this.getElement('value').value;
+                return MochiKit.DOM.hasElementClass(this.getElement('isHidden'), 'locked');
+        },
+
+        'setIsHidden': function (aValue) {
+        //      this.getElement('value').value = Clipperz.Base.sanitizeString(aValue);
+                MochiKit.DOM.setElementClass(this.getElement('isHidden'), (aValue ? 'locked': 'unlocked'));
+                MochiKit.DOM.setElementClass(this.getElement('valueWrapper'), (aValue ? 'locked': 'unlocked'));
+        },
+
+        'toggleIsHidden': function (anEvent) {
+                anEvent.preventDefault();
+                
+                this.setIsHidden(! this.isHidden());
+                MochiKit.Signal.signal(this, 'changedValue');
+        },
+
+        //=========================================================================
+
+        'handleActionLink': function (anEvent) {
+                anEvent.preventDefault();
+
+//console.log("ACTION LINK - " + this.actionType());
+                MochiKit.Signal.signal(this, 'performAction', this.reference(), anEvent.target());
+        },
+
+        //=========================================================================
+
+        'deleteField': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'deleteField', this.reference());
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ColumnManager.js
new file mode 100644
index 0000000..bfc7e61
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ColumnManager.js
@@ -0,0 +1,203 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.ColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.ColumnManager.superclass.constructor.call(this, args);
+
+                this._name               = args.name    || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._selector   = args.selector|| Clipperz.Base.exception.raise('MandatoryParameter');;
+                this._label              = args.label   || null;
+                this._isSortable = args.sortable|| false;
+                this._comparator = args.comparator|| null;
+                this._sorted     = args.sorted          || 'UNSORTED';  //'ASCENDING' | 'DESCENDING' | 'UNSORTED'
+                this._cssClass   = args.cssClass|| '';
+
+        this._signalIdentifiers = [];
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.ColumnManager, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.ColumnManager - " + this._name;
+        },
+        
+        'name': function () {
+                return this._name;
+        },
+
+        'label': function () {
+                return this._label;
+        },
+        
+        'selector': function () {
+                return this._selector;
+        },
+        
+        'comparator': function() {
+                return this._comparator;
+        },
+        
+        'cssClass': function() {
+                return this._cssClass;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'isSortable': function () {
+                return this._isSortable;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'sorted': function () {
+                return this._sorted;
+        },
+        
+        'isSorted': function () {
+                return (this.sorted() != 'UNSORTED');
+        },
+        
+        'setSorted': function(aValue) {
+                this._sorted = aValue;
+                this.updateSortIcon();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'signalIdentifiers': function () {
+                return this._signalIdentifiers;
+        },
+
+        'resetSignalIdentifiers': function () {
+                this._signalIdentifiers = [];
+        },
+
+        //-------------------------------------------------------------------------
+
+        'disconnectRowsSignals': function () {
+                MochiKit.Base.map(MochiKit.Signal.disconnect, this.signalIdentifiers());
+                this.resetSignalIdentifiers();
+        },
+
+        'connectEvent': function () {
+                var ident;
+                
+                ident = MochiKit.Signal.connect.apply(null, arguments);
+                this.signalIdentifiers().push(ident);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderHeader': function(aTRElement) {
+                        varthElement;
+
+                thElement = Clipperz.DOM.Helper.append(aTRElement, {tag:'th', cls:(this.cssClass() + 'TH'), id:this.getId('sortLink'), children:[
+                        {tag:'span', html:this.label() ? this.label() : '&nbsp;'}
+                ]});
+                
+                if (this.isSortable()) {
+                        Clipperz.DOM.Helper.append(thElement, {tag:'span', cls:'sortable', children:[
+                                        {tag:'a', href:'#'/*, id:this.getId('sortLink')*/, html:'&nbsp;'}                       
+                        ]});
+
+                        MochiKit.DOM.addElementClass(thElement, 'sortable');
+                        MochiKit.Signal.connect(thElement, 'onclick', this, 'handleClickOnSortingCriteria');
+                };
+                
+                this.updateSortIcon();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'toggleSorting': function () {
+                var result;
+                switch (this.sorted()) {
+                        case 'UNSORTED':
+                                result = 'ASCENDING';
+                                break;
+                        case 'ASCENDING':
+                                result = 'DESCENDING';
+                                break;
+                        case 'DESCENDING':
+                                result = 'ASCENDING';
+                                break;
+                        default:
+                                result = 'UNSORTED';
+                                break;
+                }
+                
+                this.setSorted(result);
+                
+                return result;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'sortElementClass': function () {
+                return this.sorted().toLowerCase();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'updateSortIcon': function () {
+                if (this.isSortable()) {
+                        MochiKit.DOM.removeElementClass(this.getId('sortLink'), 'ascending');
+                        MochiKit.DOM.removeElementClass(this.getId('sortLink'), 'descending');
+                        MochiKit.DOM.removeElementClass(this.getId('sortLink'), 'unsorted');
+
+                        MochiKit.DOM.addElementClass(this.getId('sortLink'), this.sortElementClass());
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[{tag:'span', html:anObject[this.name()]}]});
+        },
+
+        //-----------------------------------------------------
+
+        'handleClickOnSortingCriteria': function (anEvent) {
+                anEvent.preventDefault();
+                MochiKit.Signal.signal(this, 'sort', this);
+        },
+
+        //-----------------------------------------------------
+        '__syntax_fix__' : 'syntax fix'
+        
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CreateNewCardSplashComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CreateNewCardSplashComponent.js
new file mode 100644
index 0000000..61d6ead
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/CreateNewCardSplashComponent.js
@@ -0,0 +1,71 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.CreateNewCardSplashComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.CreateNewCardSplashComponent.superclass.constructor.apply(this, arguments);
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.CreateNewCardSplashComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.CreateNewCardSplashComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(this.element(), [
+                        {tag:'div', cls:'createNewCardSplash', id:this.getId('button'), children:[
+                                {tag:'span', html:"Create New Card"}
+                        ]}
+                ]);
+                
+                MochiKit.Signal.connect(this.getElement('button'), 'onclick', this, 'handleClick');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleClick': function (anEvent) {
+                anEvent.preventDefault();
+                MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'addCard', this.element());
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DataPanel.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DataPanel.js
new file mode 100644
index 0000000..91d99e3
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DataPanel.js
@@ -0,0 +1,111 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.DataPanel = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.DataPanel.superclass.constructor.apply(this, arguments);
+
+        this._initiallySelectedTab = args.selected || 'OFFLINE_COPY';
+        this._tabPanelControllerConfiguration = {
+                'OFFLINE_COPY': {
+                                tab:'offlineCopyTab',
+                                panel:'offlineCopyPanel'
+                },
+                'SHARING': {
+                                tab:'sharingTab',
+                                panel:'sharingPanel'
+                },
+                'IMPORT': {
+                                tab:'importTab',
+                                panel:'importPanel'
+                },
+                'EXPORT': {
+                                tab:'exportTab',
+                                panel:'exportPanel'
+                }
+        };
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DataPanel, Clipperz.PM.UI.Common.Components.TabPanelComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DataPanel component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'header', children:[
+                                {tag:'div', cls:'subPanelTabs', children:[
+                                        {tag:'ul', children:[
+                                                        {tag:'li', id:this.getId('offlineCopyTab'),children:[{tag:'a', href:'#', html:'Offline copy'}], cls:'first'},
+                                                        {tag:'li', id:this.getId('sharingTab'),         children:[{tag:'a', href:'#', html:'Sharing'}]},
+                                                        {tag:'li', id:this.getId('importTab'),  children:[{tag:'a', href:'#', html:'Import'}]},
+                                                        {tag:'li', id:this.getId('exportTab'),  children:[{tag:'a', href:'#', html:'Export'}]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'div', cls:'accountPanel', children:[
+                                        {tag:'div', cls:'subPanelContent', children:[
+                                                {tag:'ul', children:[
+                                                                {tag:'li', id:this.getId('offlineCopyPanel'),children:[
+                                                                {tag:'h3', html:"Offline copy"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('sharingPanel'),children:[
+                                                                {tag:'h3', html:"Sharing"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('importPanel'),        children:[
+                                                                {tag:'h3', html:"Import"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('exportPanel'),        children:[
+                                                                {tag:'h3', html:"Export"}
+                                                        ]}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]);
+
+                this.tabPanelController().setup({selected:this.initiallySelectedTab()});
+        },
+        
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DateColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DateColumnManager.js
new file mode 100644
index 0000000..3f8aa88
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DateColumnManager.js
@@ -0,0 +1,72 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.DateColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.DateColumnManager.superclass.constructor.call(this, args);
+
+                this._format = args.format|| Clipperz.Base.exception.raise('MandatoryParameter');
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DateColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DateColumnManager component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'format': function () {
+                return this._format;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+                        {
+                                tag:'span',
+                                title:Clipperz.PM.Date.formatDateWithTemplate(anObject[this.name()], "D, d M Y H:i:s"),
+                                html:Clipperz.PM.Date.formatDateWithTemplate(anObject[this.name()], this.format())
+                        }
+                ]});
+        },
+
+        //-----------------------------------------------------
+
+        '__syntax_fix__' : 'syntax fix'
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DeleteObjectColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DeleteObjectColumnManager.js
new file mode 100644
index 0000000..ee60f2f
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DeleteObjectColumnManager.js
@@ -0,0 +1,70 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.DeleteObjectColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.DeleteObjectColumnManager.superclass.constructor.call(this, args);
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DeleteObjectColumnManager, Clipperz.PM.UI.Web.Components.LinkColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DeleteObjectColumnManager component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                var tdElement;
+                var linkElement;
+                
+                tdElement = Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+                        {tag:'div', cls:'delete', children:[
+                                {tag:'span', children:[
+                                        {tag:'a', href:'delete', html:"delete"}
+                                ]}
+                        ]}
+                ]});
+
+                linkElement = MochiKit.DOM.getFirstElementByTagAndClassName('a', null, tdElement);
+        //      MochiKit.Signal.connect(linkElement, 'onclick', MochiKit.Base.method(this, 'handleLinkClick', anObject['_rowObject']));
+                this.connectEvent(linkElement, 'onclick', MochiKit.Base.method(this, 'handleLinkClick', anObject['_rowObject']));
+        },
+
+        //-----------------------------------------------------
+        '__syntax_fix__' : 'syntax fix'
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginColumnManager.js
new file mode 100644
index 0000000..4bf9020
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginColumnManager.js
@@ -0,0 +1,90 @@
+/*
+
+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/>.
+
+*/
+
+/*
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.DirectLoginColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.DirectLoginColumnManager.superclass.constructor.call(this, args);
+
+        this._actionMethod = args.actionMethod || null;
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DateColumnManager component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'actionMethod': function () {
+                return this._actionMethod;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                        vartdElement;
+                        varlinkElement;
+
+                tdElement = Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+                        {tag:'div',  cls:'directLogin_directLogin', children:[
+                                {tag:'div', cls:'directLogin_directLogin_body', children:[
+                                        {tag:'a', href:'#', html:anObject[this.name()]}
+                                ]}
+                        ]}
+                ]});
+
+                linkElement = MochiKit.DOM.getFirstElementByTagAndClassName('a', null, tdElement);
+        //      MochiKit.Signal.connect(linkElement, 'onclick', MochiKit.Base.method(this, 'handleLinkClick', anObject['_rowObject']));
+                this.connectEvent(linkElement, 'onclick', MochiKit.Base.method(this, 'handleLinkClick', anObject['_rowObject']));
+        },
+
+        //-----------------------------------------------------
+
+        'handleLinkClick': function (anObject, anEvent) {
+                anEvent.preventDefault();
+
+                if (this.actionMethod() != null) {
+                        this.actionMethod()(anObject, anEvent);
+                }
+        },
+
+        //-----------------------------------------------------
+        '__syntax_fix__' : 'syntax fix'
+});
+
+*/
\ No newline at end of file
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingBindingComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingBindingComponent.js
new file mode 100644
index 0000000..9a9c0b2
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingBindingComponent.js
@@ -0,0 +1,168 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.DirectLoginEditingBindingComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.DirectLoginEditingBindingComponent.superclass.constructor.apply(this, arguments);
+
+                this._formFieldName                             = args.formFieldName|| Clipperz.Base.exception.raise('MandatoryParameter');
+                this._fields                                    = args.fields           || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._initiallySelectedFieldKey         = args.selectedFieldKey|| null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginEditingBindingComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DirectLoginEditingBindingComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'formFieldName': function () {
+                return this._formFieldName;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'fields': function () {
+                return this._fields;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'selectedValue': function () {
+                var result;
+                
+                result = this.getElement('select').value;
+                
+                if (result == '---') {
+                        result = null;
+                }
+
+                return result;
+        },
+
+        'initiallySelectedFieldKey': function () {
+                return this._initiallySelectedFieldKey;
+        },
+
+        //=========================================================================
+
+        'renderSelf': function() {
+                var initiallySelectedOptions;
+
+                this.append(this.element(), {tag:'div', id:this.getId('div'), cls:'binding', children:[
+                        {tag:'span', cls:'formFieldName', html:this.formFieldName()},
+                        {tag:'span', cls:'fieldLock', id:this.getId('isHidden'), children:[
+                                {tag:'a', href:'#', id:this.getId('showHide'), html:'&nbsp;'}
+                        ]},
+                        {tag:'input', id:this.getId('input'), cls:'formFieldExampleValue', disabled:true, value:''},
+                        {tag:'select', name:this.formFieldName(), id:this.getId('select'), cls:'formFieldMatchinCardField', children:
+                                MochiKit.Base.flattenArguments(
+                                        {tag:'option', value:'---', html:"---"},
+                                        MochiKit.Base.map(
+                                                MochiKit.Base.bind(function (aField) { return {tag:'option', value:aField['reference'], html:aField['label']}; }, this),
+                                                this.fields()
+                                                )
+                                )
+                        }
+                ]});
+
+                        MochiKit.Signal.connect(this.getElement('select'), 'onchange', this, 'handleSelectChange');
+                        MochiKit.Signal.connect(this.getElement('showHide'), 'onclick', this, 'handleShowHide');
+
+                if (! MochiKit.Base.isUndefinedOrNull(this.initiallySelectedFieldKey())) {
+                        initiallySelectedOptions = MochiKit.Selector.findChildElements(this.element(), ['option[value=' + this.initiallySelectedFieldKey() + ']']);
+                        if (initiallySelectedOptions.length == 1) {
+                                MochiKit.DOM.updateNodeAttributes(initiallySelectedOptions[0], {selected:true});
+                                this.handleSelectChange();
+                        }
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setFieldValue': function (aValue) {
+                this.getElement('input').value = aValue;
+        },
+
+        'isHidden': function () {
+                return MochiKit.DOM.hasElementClass(this.getElement('div'), 'locked');
+        },
+
+        'setIsHidden': function (aValue) {
+                if (aValue == true) {
+                        MochiKit.DOM.addElementClass(this.getElement('div'), 'locked');
+                        MochiKit.DOM.addElementClass(this.getElement('div'), 'showLocked');
+                } else {
+                        MochiKit.DOM.removeElementClass(this.getElement('div'), 'locked');
+                        MochiKit.DOM.removeElementClass(this.getElement('div'), 'showLocked');
+                }
+        },
+
+        'isShowLocked': function () {
+                return MochiKit.DOM.hasElementClass(this.getElement('div'), 'showLocked');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleSelectChange': function (anEvent) {
+        //      this.getElement('input').value = this.valueOfField(anEvent.src().value);
+                MochiKit.Signal.signal(this, 'bindChange', this);
+        },
+
+        'handleShowHide': function (anEvent) {
+                anEvent.preventDefault();
+
+                if (this.isShowLocked()) {
+                        MochiKit.DOM.removeElementClass(this.getElement('div'), 'showLocked');
+                } else {
+                        MochiKit.DOM.addElementClass(this.getElement('div'), 'showLocked');
+                }
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
+
+
+
+
+
+
+
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js
new file mode 100644
index 0000000..d254c29
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingComponent.js
@@ -0,0 +1,481 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent.superclass.constructor.apply(this, arguments);
+
+        this._tabPanelController = null;
+
+        this._initiallySelectedTab = args.selected || 'TYPE';
+        this._tabPanelControllerConfiguration = {
+                'LABEL': {
+                                tab:'labelTab',
+                                panel:'labelTabpanel'
+                },
+                'TYPE': {
+                                tab:'typeTab',
+                                panel:'typeTabpanel'
+                },
+                'CONFIGURATION': {
+                                tab:'configurationTab',
+                                panel:'configurationTabpanel'
+                },
+                'BINDINGS': {
+                                tab:'bindingsTab',
+                                panel:'bindingsTabpanel'
+                },
+                'FAVICON': {
+                                tab:'faviconTab',
+                                panel:'faviconTabpanel'
+                },
+                'DONE': {
+                                tab:'doneTab',
+                                panel:'doneTabpanel'
+                }
+        };
+
+        this._directLoginReference = null;
+
+        this._directLoginFavicon = null;
+
+        this._updateFaviconCounter = 0;
+        this._faviconComponent = null;
+
+                this._bindingComponents= [];
+        this._formValueComponents = [];
+
+        return this;
+}
+
+//=============================================================================
+
+//Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent, Clipperz.PM.UI.Common.Components.TabPanelComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent component";
+        },
+
+        //=========================================================================
+
+        'directLoginReference': function () {
+                return this._directLoginReference;
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'setDirectLoginReference': function (aDirectLoginReference) {
+                this._directLoginReference = aDirectLoginReference;
+
+                return this._directLoginReference;
+        },
+
+        //=========================================================================
+
+        'label': function () {
+                return this.getElement('label').value
+        },
+        
+        'setLabel': function (aValue) {
+//console.log("##> LABEL: " + aValue);
+                this.getElement('label').value = (aValue ? aValue : '');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'favicon': function () {
+                return this.getElement('faviconURL').value;
+        },
+        
+        'setFavicon': function (aValue) {
+                var regexp;
+                var displayValue;
+
+                regexp = new RegExp('^data\:\/\/.*', 'i');
+                if (regexp.test(aValue)) {
+                        displayValue = ''
+                } else {
+                        displayValue = (aValue ? aValue : '');
+                }
+
+                this.getElement('faviconURL').value = displayValue;
+                this.faviconComponent().setSrc(aValue);
+        },
+
+        //'setFaviconData': function (aValue) {
+        //      this.getElement('faviconIcon').src = aValue;
+        //},
+
+        'directLoginFavicon': function () {
+                return this._directLoginFavicon;
+        },
+        
+        'setDirectLoginFavicon': function (aValue) {
+                this._directLoginFavicon = aValue;
+                this.setFavicon(aValue);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'bookmarkletConfiguration': function () {
+                return this.getElement('bookmarkletConfiguration').value
+        },
+        
+        'setBookmarkletConfiguration': function (aValue) {
+                this.getElement('bookmarkletConfiguration').value = aValue;
+        },
+
+        'highlightConfigurationSyntaxError': function () {
+                MochiKit.DOM.addElementClass(this.getElement('bookmarkletConfiguration'), 'error');
+        },
+
+        'removeHighlightConfigurationSyntaxError': function () {
+                MochiKit.DOM.removeElementClass(this.getElement('bookmarkletConfiguration'), 'error');
+        },
+
+        //=========================================================================
+
+        'disableAllPanels': function () {
+                this.getElement('label').disabled = true;
+                MochiKit.DOM.addElementClass(this.getElement('label').parentNode, 'disabled');
+
+                this.tabPanelController().selectTab(null);
+        },
+
+        //-------------------------------------------------------------------------
+
+        //'disableLabelField': function () {
+        //      this.getElement('label').disabled = true;
+        //      MochiKit.DOM.addElementClass(this.getElement('label').parentNode, 'disabled');
+        //},
+        
+        'enableLabelField': function () {
+                this.getElement('label').disabled = false;
+                MochiKit.DOM.removeElementClass(this.getElement('label').parentNode, 'disabled');
+                this.tabPanelController().selectTab('LABEL');
+        },
+
+        //-------------------------------------------------------------------------
+
+        //'disableTypeField': function () {
+        //      this.tabPanelController().selectTab(null);
+        //},
+        
+        'enableTypeField': function () {
+                this.tabPanelController().selectTab('TYPE');
+        },
+        
+        //-------------------------------------------------------------------------
+
+        //'disableConfigurationField': function () {
+        //      this.tabPanelController().selectTab(null);
+        //},
+        
+        'enableConfigurationField': function () {
+                this.tabPanelController().selectTab('CONFIGURATION');
+        },
+        
+        //-------------------------------------------------------------------------
+
+        //'disableBindingFields': function () {
+        //      this.tabPanelController().selectTab(null);
+        //},
+        
+        'enableBindingFields': function () {
+                this.tabPanelController().selectTab('BINDINGS');
+        },
+        
+        //-------------------------------------------------------------------------
+
+        //'disableFaviconField': function () {
+        //      this.tabPanelController().selectTab(null);
+        //},
+
+        'enableFaviconField': function () {
+                this.tabPanelController().selectTab('FAVICON');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'enableDonePanel': function () {
+                this.tabPanelController().selectTab('DONE');
+        },
+        
+        //=========================================================================
+
+        'shouldShowElementWhileRendering': function() {
+                return false;
+        },
+        
+        //=========================================================================
+        
+        'faviconComponent': function () {
+                if (this._faviconComponent == null) {
+                        this._faviconComponent = new Clipperz.PM.UI.Common.Components.FaviconComponent({element:this.getId('favicon')});
+                }
+                
+                return this._faviconComponent;
+        },
+
+        //=========================================================================
+
+        'tabPanelController': function () {
+                if (this._tabPanelController == null) {
+                        this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({
+                                component:this,
+                                configuration:this._tabPanelControllerConfiguration
+                        });
+                        
+                        MochiKit.Signal.connect(this._tabPanelController, 'tabSelected', this, 'handleTabSelected')
+                }
+                
+                return this._tabPanelController;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                        varbookmarkletComponent;
+                
+                this.append(this.element(), {tag:'div', cls:'directLoginEditing', id:this.getId('panel'), children: [
+        //              {tag:'div', cls:'back', children:[
+        //                      {tag:'a', href:'#', id:this.getId('back'), html:"&nbsp;"}
+        //              ]},
+                        {tag:'form', id:this.getId('form'), cls:'directLoginEditingForm', children:[
+                                {tag:'div', cls:'title', children:[
+                                        {tag:'img', id:this.getId('favicon'), cls:'favicon'},
+                                                {tag:'input', type:'text', id:this.getId('label')}//,
+        //                              {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.LABEL.description')}]},
+                                ]},
+                                {tag:'div', cls:'tabContainer', children:[
+                                        {tag:'ul', cls:'tabs', children:[
+                                                        {tag:'li', id:this.getId('labelTab'),           children:[{tag:'span', html:"label"}]},
+                                                        {tag:'li', id:this.getId('typeTab'),            children:[{tag:'span', html:"type"}]},
+                                                        {tag:'li', id:this.getId('configurationTab'),children:[{tag:'span', html:"configuration"}]},
+                                                        {tag:'li', id:this.getId('bindingsTab'),        children:[{tag:'span', html:"bindings"}]},
+                                                        {tag:'li', id:this.getId('faviconTab'),                 children:[{tag:'span', html:"favicon"}]},
+                                                        {tag:'li', id:this.getId('doneTab'),            children:[{tag:'span', html:"done"}]}
+                                        ]},
+                                        {tag:'ul', cls:'tabPanels', children:[
+                                                {tag:'li', id:this.getId('labelTabpanel'), cls:'tabPanel label', children:[
+                                                        {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.LABEL.description')}]}
+                                                ]},
+                                                {tag:'li', id:this.getId('typeTabpanel'), cls:'tabPanel type', children:[
+                                                        {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.TYPE.description')}]},
+                                                        {tag:'h2', html:"type"}
+                                                ]},
+                                                {tag:'li', id:this.getId('configurationTabpanel'), cls:'tabPanel configuration', children:[
+                                                        {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.CONFIGURATION.description')}]},
+                                                        {tag:'div', cls:'bookmarkletConfigurationWrapper', children:[
+                                                                {tag:'textarea', id:this.getId('bookmarkletConfiguration'), value:""},
+        //                                                      {tag:'div', cls:'bookmarkletComponentWrapper', children:[{tag:'div', id:this.getId('bookmarkletComponent'), cls:'bookmarkletComponent'}]}
+                                                                {tag:'div', id:this.getId('bookmarkletComponent'), cls:'bookmarkletComponent'}
+                                                        ]}
+                                                ]},
+                                                {tag:'li', id:this.getId('bindingsTabpanel'), cls:'tabPanel bindings', children:[
+                                                        {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.BINDINGS.description')}]},
+                                                        {tag:'div', cls:'bindings', id:this.getId('bindings'), children:[]},
+                                                        {tag:'div', cls:'formValues', id:this.getId('formValues'), children:[]}
+                                                ]},
+                                                {tag:'li', id:this.getId('faviconTabpanel'), cls:'tabPanel favicon', children:[
+                                                        {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.FAVICON.description')}]},
+                                                        {tag:'div', cls:'favicon', children:[
+                                                                {tag:'input', type:'text', id:this.getId('faviconURL')}
+                                                        ]}
+                                                ]},
+                                                {tag:'li', id:this.getId('doneTabpanel'), cls:'tabPanel done', children:[
+                                                        {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', id:this.getId('doneDescription')/*, html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.DONE.description')*/}]}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'clear'}
+                ]});
+
+                bookmarkletComponent = new Clipperz.PM.UI.Web.Components.BookmarkletComponent({element:this.getElement('bookmarkletComponent')});
+                bookmarkletComponent.render();
+
+                this.tabPanelController().setup(/*{selected:this.initiallySelectedTab()}*/);
+
+                        MochiKit.Signal.connect(this.getId('label'),                            'onchange', this, 'changedValue');
+                        MochiKit.Signal.connect(this.getId('label'),                            'onkeyup',  this, 'changedValue');
+
+                        MochiKit.Signal.connect(this.getId('bookmarkletConfiguration'),'onchange', this, 'changedValue');
+                        MochiKit.Signal.connect(this.getId('bookmarkletConfiguration'),'onkeyup',  this, 'changedValue');
+
+                        MochiKit.Signal.connect(this.getId('faviconURL'),                       'onchange', this, 'changedValue');
+                        MochiKit.Signal.connect(this.getId('faviconURL'),                       'onkeyup',  this, 'changedValue');
+
+                        MochiKit.Signal.connect(this.getId('panel'),                            'onkeydown',this, 'handleKeyEvent');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleTabSelected': function (aSelectedTab) {
+                switch (aSelectedTab) {
+                        case 'DETAILS':
+                                break;
+                        case 'DIRECT_LOGINS':
+                                MochiKit.Style.hideElement(this.getElement('backToDirectLoginList'));
+                                break;
+                        case 'SHARING':
+                                break;
+                }
+        },
+
+        //=========================================================================
+
+        'incrementUpdateFaviconCounter': function () {
+                this._updateFaviconCounter ++;
+        },
+
+        'decrementUpdateFaviconCounter': function () {
+                this._updateFaviconCounter --;
+        },
+
+        'updateFaviconCounter': function () {
+                return this._updateFaviconCounter;
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'updateFavicon': function () {
+                this.decrementUpdateFaviconCounter();
+                
+                if (this.updateFaviconCounter() == 0) {
+                        this.setFavicon(this.favicon());
+                }
+        },
+
+        //=========================================================================
+
+        'bindingComponents': function () {
+                return this._bindingComponents;
+        },
+
+        'clearAllBindingsComponents': function () {
+                MochiKit.Iter.forEach(this.bindingComponents(), MochiKit.Base.methodcaller('remove'));
+                this._bindingComponents = [];
+                this.getElement('bindings').innerHTML = '';
+        },
+
+        'addBindingComponent': function (aBindingComponent) {
+                this.bindingComponents().push(aBindingComponent);
+                aBindingComponent.renderInNode(this.append(this.getElement('bindings'), {tag:'div'}));
+        },
+
+        //=========================================================================
+
+        'formValueComponents': function () {
+                return this._formValueComponents;
+        },
+        
+        'clearAllFormValueComponents': function () {
+                MochiKit.Iter.forEach(this.formValueComponents(), MochiKit.Base.methodcaller('remove'));
+                this._formValueComponents = [];
+                this.getElement('formValues').innerHTML = '';
+        },
+
+        'addFormValueComponent': function (aFormValueComponent) {
+                this.formValueComponents().push(aFormValueComponent);
+                aFormValueComponent.renderInNode(this.append(this.getElement('formValues'), {tag:'div'}));
+        },
+
+        //=========================================================================
+
+        'changedValue': function (anEvent) {
+                MochiKit.Signal.signal(this, 'changedValue', anEvent);
+
+                this.incrementUpdateFaviconCounter();
+                MochiKit.Async.callLater(1, MochiKit.Base.method(this, 'updateFavicon'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleBackClick': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'back');
+        },
+
+        //=========================================================================
+
+        'bottomMargin': function () {
+                        returnMochiKit.Style.getElementPosition(this.element().parentNode)['y'] +
+                                MochiKit.Style.getElementDimensions(this.element())['h'];
+        },
+
+        //=========================================================================
+
+        'focusOnLabelElement': function () {
+                this.getElement('label').focus();
+        },
+        
+        'focusOnBookmarkletConfigurationElement': function () {
+                this.getElement('bookmarkletConfiguration').focus();
+        },
+
+        'focusOnFaviconElement': function () {
+                this.getElement('faviconURL').focus();
+        },
+
+        //=========================================================================
+
+        'setDoneDescriptionWithKeys': function (someKeys) {
+        //      {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', id:this.getId('doneDescription')/*, html:Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.DONE.description')*/}]}
+                this.getElement('doneDescription').innerHTML = Clipperz.PM.Strings.getValue('Wizards.DirectLoginWizard.DONE.description', someKeys);
+        },
+
+        //=========================================================================
+
+        'handleKeyEvent': function (anEvent) {
+                MochiKit.Signal.signal(this, 'keyPressed', anEvent);
+/*
+                if (anEvent.key().string == 'KEY_ENTER') {
+                        if (anEvent.target().nodeName != 'TEXTAREA') {
+                                MochiKit.Signal.signal(this, 'moveForward');
+                                anEvent.preventDefault();
+                        }
+                } else if (anEvent.key().string == 'KEY_TAB') {
+                        if ((anEvent.target().nodeName == 'INPUT') || (anEvent.target().nodeName == 'TEXTAREA')) {
+                                MochiKit.Signal.signal(this, 'moveForward');
+                                anEvent.preventDefault();
+                        }
+                }
+*/
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingFormValueComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingFormValueComponent.js
new file mode 100644
index 0000000..b91eb98
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginEditingFormValueComponent.js
@@ -0,0 +1,179 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.DirectLoginEditingFormValueComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.DirectLoginEditingFormValueComponent.superclass.constructor.apply(this, arguments);
+
+                this._formFieldName             = args.formFieldName|| Clipperz.Base.exception.raise('MandatoryParameter');
+                this._fieldOptions              = args.fieldOptions     || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._initialValue              = args.initialValue     || null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginEditingFormValueComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DirectLoginEditingFormValueComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'formFieldName': function () {
+                return this._formFieldName;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'fieldOptions': function () {
+                return this._fieldOptions;
+        },
+
+        'fieldType': function () {
+                return this.fieldOptions()['type'];
+        },
+
+        'optionValues': function () {
+                return MochiKit.Base.map(function (anOptionValue) {
+                        return {
+                                'label': anOptionValue['label'] || anOptionValue['value'],
+                                'value': anOptionValue['value']
+                        }
+                }, this.fieldOptions()['options']);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'selectedValue': function () {
+                var result;
+                
+                result = this.getElement('select').value;
+                
+                if (result == '---') {
+                        result = null;
+                }
+
+                return result;
+        },
+
+        'initialValue': function () {
+                return this._initialValue;
+        },
+
+        //=========================================================================
+
+        'renderSelf': function() {
+//console.log(">>> DirectLoginEditingFormValueComponent.renderSelf");
+//console.log("FIELD OPTIONS", this.fieldOptions());
+//console.log("OPTION VALUES", this.optionValues());
+                this.append(this.element(), {tag:'div', id:this.getId('div'), cls:'formValue', children:[
+                        {tag:'span', cls:'formFieldName', html:this.formFieldName()},
+                        {tag:'div', id:this.getId('values')}
+                ]});
+
+                if ((this.fieldType() == 'radio') || (this.fieldType() == 'select')) {
+                        this.append(this.getElement('values'),
+                                {tag:'select', name:this.formFieldName(), id:this.getId('select'), cls:'formFieldMatchinCardField', children:
+                                        MochiKit.Base.flattenArguments(
+        //                                      {tag:'option', value:'---', html:"---"},
+                                                MochiKit.Base.map(
+                                                        MochiKit.Base.bind(function (aValue) { return {tag:'option', value:aValue['value'], html:aValue['label']}; }, this),
+                                                        this.optionValues()
+                                                        )
+                                        )
+                                }
+                        );
+                        
+                                MochiKit.Signal.connect(this.getElement('select'), 'onchange', this, 'handleSelectChange');
+
+                        if (! MochiKit.Base.isUndefinedOrNull(this.initialValue())) {
+                                var initiallySelectedOptions;
+                                initiallySelectedOptions = MochiKit.Selector.findChildElements(this.element(), ['option[value=' + this.initialValue() + ']']);
+                                if (initiallySelectedOptions.length == 1) {
+                                        MochiKit.DOM.updateNodeAttributes(initiallySelectedOptions[0], {selected:true});
+                                        this.handleSelectChange();
+                                } else {
+                                        Clipperz.DOM.Helper.insertBefore(this.getElement('select').childNodes[0], {tag:'option', value:'---', html:"", selected:true});
+                                }
+                        } else {
+                                Clipperz.DOM.Helper.insertBefore(this.getElement('select').childNodes[0], {tag:'option', value:'---', html:"", selected:true});
+                        }
+                } else if (this.fieldType() == 'checkbox') {
+                        this.append(this.getElement('values'),
+                                {tag:'input', type:'checkbox', name:this.formFieldName(), id:this.getId('checkbox'), cls:'formFieldMatchinCardField'}
+                        );
+
+                        MochiKit.Signal.connect(this.getElement('checkbox'), 'onchange', this, 'handleSelectChange');
+
+                        if (this.initialValue()) {
+                                MochiKit.DOM.updateNodeAttributes(this.getElement('checkbox'), {checked:true});
+                        }
+                } else {
+                        WTF = TODO;
+                }
+//console.log("<<< DirectLoginEditingFormValueComponent.renderSelf");
+        },
+
+        //=========================================================================
+
+        'handleSelectChange': function (anEvent) {
+//console.log("handleSelectChange", anEvent, anEvent.src(), anEvent.src().value);
+                var options;
+
+                options = {};
+                
+                options['fieldName'] = this.formFieldName();
+
+                if (this.fieldType() == 'checkbox') {
+                        options['selectedValue'] = (this.getElement('checkbox').checked ? 1 : null);
+                } else {
+                        options['selectedValue'] = this.selectedValue();
+                }
+
+                MochiKit.Signal.signal(this, 'formValueChange', options);
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
+
+
+
+
+
+
+
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginsColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginsColumnManager.js
new file mode 100644
index 0000000..1f49575
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/DirectLoginsColumnManager.js
@@ -0,0 +1,271 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.DirectLoginsColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.DirectLoginsColumnManager.superclass.constructor.call(this, args);
+        
+        this._enterLeaveCounter = 0;
+        this._selectedRowObject = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.DirectLoginsColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DirectLoginsColumnManager component";
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'renderHeader': function(aTRElement) {
+                Clipperz.PM.UI.Web.Components.DirectLoginsColumnManager.superclass.renderHeader.call(this, aTRElement);
+
+                Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, {tag:'div', cls:'DirectLoginListPopup', id:this.getId('DirectLoginListPopup'), children:[
+                        {tag:'div', cls:'DirectLoginListPopup_body', children:[
+                                {tag:'ul', id:this.getId('DirectLoginListPopup_list'), children:[
+        //                              {tag:'li', children:[
+        //                                      {tag:'img', cls:'favicon', src:'http://www.microsoft.com/favicon.ico'},
+        //                                      {tag:'a', href:'#', html:"Google Mail"}
+        //                              ]},
+        //                              ...
+                                ]}
+                        ]},
+                        {tag:'div', cls:'DirectLoginListPopup_footer'}
+                ]});
+
+                MochiKit.Style.hideElement(this.getId('DirectLoginListPopup'));
+
+                        //BEWARE: use MochiKit.Signal.connect instead of this.connectEvent, as the HEADER is NOT redrawn after each refresh
+                MochiKit.Signal.connect(this.getId('DirectLoginListPopup'), 'onmouseenter', this, 'handleDirectLoginListPopupEnter');
+                MochiKit.Signal.connect(this.getId('DirectLoginListPopup'), 'onmouseleave', this, 'handleDirectLoginListPopupLeave');
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                var i,c;
+                var directLoginsInfo;
+                
+                directLoginsInfo = anObject[this.name()];
+                
+                TDElement = Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:'card_directLogins'});
+                
+                c = Math.min(2, directLoginsInfo.length);
+                for (i=0; i<c; i++) {
+                        var elementID;
+                        
+                        elementID = 'directLogin_' + directLoginsInfo[i]['_reference'];
+        
+                        Clipperz.DOM.Helper.append(TDElement, {tag:'div',  cls:'card_directLogin', children:[
+                                {tag:'div', cls:'card_directLogin_body', children:[
+                                        {tag:'a', href:'#', id:elementID, html:directLoginsInfo[i]['label']}
+                                ]}
+                        ]});
+        //              MochiKit.Signal.connect(elementID, 'onclick', MochiKit.Base.method(this, 'handleDirectLoginClick', directLoginsInfo[i]['_rowObject']));
+                        this.connectEvent(elementID, 'onclick', MochiKit.Base.method(this, 'handleDirectLoginClick', directLoginsInfo[i]['_rowObject']));
+                }
+                
+                if (directLoginsInfo.length > 2) {
+                        var ellipsesElement;
+
+                        ellipsesElement =  Clipperz.DOM.Helper.append(TDElement, {tag:'div', cls:'card_directLogin_ellipses', children:[
+                                {tag:'div', cls:'card_directLogin_ellipses_body', children:[
+                                        {tag:'span', html:'&hellip;'}
+                                ]}
+                        ]});
+
+        ///             MochiKit.Signal.connect(ellipsesElement, 'onmouseenter', MochiKit.Base.method(this, 'handleEllipsesEnter', anObject));
+        ///             MochiKit.Signal.connect(ellipsesElement, 'onmouseleave', MochiKit.Base.method(this, 'handleEllipsesLeave'));
+        //              MochiKit.Signal.connect(TDElement, 'onmouseleave', MochiKit.Base.method(this, 'handleTDLeave'));
+                        this.connectEvent(TDElement, 'onmouseleave', MochiKit.Base.method(this, 'handleTDLeave'));
+                }
+        //      MochiKit.Signal.connect(TDElement, 'onmouseenter', MochiKit.Base.method(this, 'handleTDEnter', anObject));
+                this.connectEvent(TDElement, 'onmouseenter', MochiKit.Base.method(this, 'handleTDEnter', anObject));
+
+        },
+
+        //=========================================================================
+/*
+        'handleEllipsesEnter': function (aRecordInfo, anEvent) {
+                this._enterLeaveCounter ++;
+                if (this._enterLeaveCounter > 2) {
+                        this._enterLeaveCounter = 2;
+                }
+                
+                if (this._enterLeaveCounter == 1) {
+                        this.showDirectLoginListPopup(aRecordInfo, anEvent.src());
+                }
+        },
+
+        'handleEllipsesLeave': function (anEvent) {
+                this._enterLeaveCounter --;
+                
+                MochiKit.Async.callLater(0.3, MochiKit.Base.bind(function () {
+                        if (this._enterLeaveCounter == 0) {
+                                this.hideDirectLoginListPopup();
+                        }
+                }, this))
+        },
+*/
+        //-------------------------------------------------------------------------
+
+        'handleTDEnter': function (aRecordInfo, anEvent) {
+                if (MochiKit.Selector.findChildElements(anEvent.src(), ['div.card_directLogin_ellipses']).length > 0) {
+                        this._enterLeaveCounter ++;
+                        if (this._enterLeaveCounter > 2) {
+                                this._enterLeaveCounter = 2;
+                        }
+        
+                        if (this._enterLeaveCounter == 1) {
+                                this.showDirectLoginListPopup(aRecordInfo, anEvent.src());
+                        }
+                } else {
+                        if (this._selectedRowObject != null) {
+                                this.hideDirectLoginListPopup();
+                        }
+                }
+        },
+
+        'handleTDLeave': function (anEvent) {
+                this._enterLeaveCounter --;
+                if (this._enterLeaveCounter < 0) {
+                        this._enterLeaveCounter = 0;
+                }
+                
+                MochiKit.Async.callLater(0.3, MochiKit.Base.bind(function () {
+                        if (this._enterLeaveCounter == 0) {
+                                this.hideDirectLoginListPopup();
+                        }
+                }, this))
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleDirectLoginListPopupEnter': function (anEvent) {
+                this._enterLeaveCounter ++;
+                if (this._enterLeaveCounter > 2) {
+                        this._enterLeaveCounter = 2;
+                }
+        },
+        
+        'handleDirectLoginListPopupLeave': function (anEvent) {
+                this._enterLeaveCounter --;
+                if (this._enterLeaveCounter < 0) {
+                        this._enterLeaveCounter = 0;
+                }
+                
+                MochiKit.Async.callLater(0.3, MochiKit.Base.bind(function () {
+                        if (this._enterLeaveCounter == 0) {
+                                this.hideDirectLoginListPopup();
+                        }
+                }, this))
+        },
+
+        //=========================================================================
+
+        'showDirectLoginListPopup': function (aRecordInfo, anElement) {
+                var position;
+                var directLoginsInfo;
+                var directLoginsListElement;
+                var ellipsesElement;
+                
+                
+                ellipsesElement = MochiKit.Selector.findChildElements(anElement, ['div.card_directLogin_ellipses'])[0];
+                position = MochiKit.Style.getElementPosition(ellipsesElement);
+        //      position = MochiKit.Style.getElementPosition(anElement);
+                position.x += 14;
+                position.y -= 26;
+
+                MochiKit.Style.setElementPosition(this.getId('DirectLoginListPopup'), position /*[, units='px'] */);
+
+                directLoginsListElement = this.getElement('DirectLoginListPopup_list');
+                directLoginsListElement.innerHTML = '';
+                
+                directLoginsInfo = aRecordInfo[this.name()];
+                c = directLoginsInfo.length;
+                for (i=0; i<c; i++) {
+                                varelementID;
+                                varlabel;
+                        var trunkedLabel;
+                        
+                        label = directLoginsInfo[i]['label'];
+                        trunkedLabel = (label.length > 20 ? label.slice(0,20) + '&hellip;' : label);
+                        
+                        elementID = this.getId('directLoginList_' + directLoginsInfo[i]['_reference']);
+                        
+                        Clipperz.DOM.Helper.append(directLoginsListElement, {tag:'li', children:[
+                                {tag:'div', children:[
+                                        {tag:'img', cls:'favicon', src:directLoginsInfo[i]['favicon']},
+                                        (label == trunkedLabel ? {tag:'a', href:'#', id:elementID, html:trunkedLabel} : {tag:'a', href:'#', id:elementID, title:label, html:trunkedLabel})
+                                ]}
+                        ]});
+
+        //              MochiKit.Signal.connect(elementID, 'onclick', MochiKit.Base.method(this, 'handleDirectLoginClick', directLoginsInfo[i]['_rowObject']));
+                        this.connectEvent(elementID, 'onclick', MochiKit.Base.method(this, 'handleDirectLoginClick', directLoginsInfo[i]['_rowObject']));
+                }
+
+        //      MochiKit.Style.showElement(this.getId('DirectLoginListPopup'));
+                MochiKit.Visual.appear(this.getId('DirectLoginListPopup'), {duration:0.5});
+                MochiKit.Signal.signal(this, 'selectRow', aRecordInfo);
+                
+                this._selectedRowObject = aRecordInfo;
+        },
+
+        //-------------------------------------------------------------------------
+        
+        'hideDirectLoginListPopup': function () {
+                if (this._selectedRowObject != null) {
+                        MochiKit.Signal.signal(this, 'unselectRow', this._selectedRowObject);
+                        MochiKit.Visual.fade(this.getId('DirectLoginListPopup'), {duration:0.5});
+                        this._selectedRowObject = null;
+                        this._enterLeaveCounter = 0;
+                }
+        },
+
+        //=========================================================================
+
+        'handleDirectLoginClick': function (aDirectLogin, anEvent) {
+                anEvent.preventDefault();
+        //      aDirectLogin.runDirectLogin();
+                Clipperz.PM.UI.Common.Controllers.DirectLoginRunner.openDirectLogin(aDirectLogin);
+        },
+
+        //-------------------------------------------------------------------------
+
+        '__syntax_fix__' : 'syntax fix'
+        
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/FaviconColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/FaviconColumnManager.js
new file mode 100644
index 0000000..19d1635
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/FaviconColumnManager.js
@@ -0,0 +1,89 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.FaviconColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.FaviconColumnManager.superclass.constructor.call(this, args);
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.FaviconColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.FaviconColumnManager component";
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                        varfaviconImageElement;
+                var faviconUrl;
+                
+                faviconImageElement = this.getId('favicon');
+                faviconUrl = anObject[this.name()];
+
+                if (faviconUrl == null) {
+                        faviconUrl = Clipperz.PM.Strings.getValue('defaultFaviconUrl');
+                }
+
+                Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+                        {tag:'img', id:faviconImageElement, src:faviconUrl}
+                ]});
+
+                MochiKit.Signal.connect(faviconImageElement, 'onload',  this, 'handleLoadedFaviconImage');
+                MochiKit.Signal.connect(faviconImageElement, 'onerror', this, 'handleMissingFaviconImage');
+                MochiKit.Signal.connect(faviconImageElement, 'onabort', this, 'handleMissingFaviconImage');
+        },
+
+        //-----------------------------------------------------
+
+        'handleLoadedFaviconImage': function(anEvent) {
+                MochiKit.Signal.disconnectAllTo(anEvent.src());
+                if (anEvent.src().complete == false) {
+                        anEvent.src().src = Clipperz.PM.Strings.getValue('defaultFaviconUrl');
+                }
+        },
+
+        //-----------------------------------------------------
+
+        'handleMissingFaviconImage': function(anEvent) {
+                MochiKit.Signal.disconnectAllTo(anEvent.src());
+                anEvent.src().src = Clipperz.PM.Strings.getValue('defaultFaviconUrl');
+        },
+
+        //-----------------------------------------------------
+        '__syntax_fix__' : 'syntax fix'
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/GridComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/GridComponent.js
new file mode 100644
index 0000000..8b3e6c9
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/GridComponent.js
@@ -0,0 +1,262 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.GridComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.GridComponent.superclass.constructor.apply(this, arguments);
+
+        this._columnsManagers = args.columnsManagers;
+
+        this._rowsObjects = [];
+        this._noRowsGridComponent = null;
+        
+        this._slots = {
+                        'headerSlot':this.getId('headerSlot')
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.GridComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.GridComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'rows': function () {
+                throw Clipperz.Base.exception.AbstractMethod;
+        //      return this._rows;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'columnsManagers': function () {
+                return this._columnsManagers;
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'header', children:[
+                                {tag:'form', id:this.getId('searchForm'), cls:'search', children:[
+                                        {tag:'div', cls:'search', children:[
+                                                {tag:'input', type:'text', id:this.getId('search'), cls:'search', placeholder:"search", name:'textToSearch'/*, value:"clipperz"*/}
+                                        ]},
+                                        {tag:'div', cls:'clearSearchButton', id:this.getId('clearSearch')},
+        //                              {tag:'input', type:'button', cls:'searchButton', name:'searchButton', value:"search"},
+                                        {tag:'div', cls:'headerSlot', id:this.getId('headerSlot')}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'div', cls:'rows', id:this.getId('rows'), children:[
+                                        {tag:'table', cellpadding:'0', cellspacing:'0', cls:'rows', children:[
+                                                {tag:'thead', children:[
+                                                        {tag:'tr', id:this.getId('thead_tr'), children:[]}
+                                                ]},
+                                                {tag:'tbody', id:this.getId('gridRows'), children:[]}
+                                        ]}
+                                ]},
+                                {tag:'div', cls:'noRowsBlock', id:this.getId('noRowsBlock'), children:[]}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]);
+
+                this.renderHeader();
+                MochiKit.Signal.connect(this.getId('clearSearch'), 'onclick', this, 'clearSearchHandler');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderHeader': function () {
+                var headerElement;
+                
+                headerElement = this.getElement('thead_tr');
+                headerElement.innerHTML = "";
+
+                MochiKit.Iter.forEach(this.columnsManagers(), function (aColumnManager) {
+                        aColumnManager.renderHeader(headerElement);
+                });
+        },
+
+        //-------------------------------------------------------------------------
+
+        'update': function (someObjects) {
+                this._rowsObjects = someObjects
+                this.refresh();
+                this.focus();
+        },
+
+        'focus': function () {
+                this.getElement('search').focus();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'startSearch': function () {
+//console.log("--> startSearch");
+                MochiKit.DOM.addElementClass(this.getElement('search'), 'running');
+        },
+
+        'endSearch': function () {
+                MochiKit.DOM.removeElementClass(this.getElement('search'), 'running');
+//console.log("<-- startSearch");
+        },
+
+        //-------------------------------------------------------------------------
+
+        'disconnectColumnManagersRowsSignals': function () {
+                MochiKit.Iter.forEach(this.columnsManagers(), function (aColumnManager) {
+                        aColumnManager.disconnectRowsSignals();
+                });
+        },
+
+        //-------------------------------------------------------------------------
+
+        'refresh': function () {
+                var gridRowsElement;
+                var rowClass;
+
+                this.disconnectColumnManagersRowsSignals();
+
+                {
+                        MochiKit.DOM.removeElementClass(this.getElement('search'), 'disabled');
+        //              MochiKit.DOM.setNodeAttribute(this.getElement('search'), 'disabled', null);
+                        MochiKit.DOM.removeElementClass(this.element(), 'empty');
+                        MochiKit.DOM.removeElementClass(this.element(), 'noRows');
+                }
+
+                
+                gridRowsElement = this.getElement('gridRows');
+                gridRowsElement.innerHTML = "";
+
+                MochiKit.DOM.removeElementClass(this.element(), 'empty');
+                
+                rowClass = 'odd';
+                MochiKit.Iter.forEach(this._rowsObjects, MochiKit.Base.bind(function (aRowObject) {
+                        var cardRowElement;
+
+                        cardRowElement = this.append(gridRowsElement, {tag:'tr', id:this.getId(aRowObject['_reference']), cls:rowClass});
+                        MochiKit.Iter.forEach(this.columnsManagers(), function (aColumnManager) {
+                                aColumnManager.renderCell(cardRowElement, aRowObject);
+                        });
+                        
+                        rowClass = (rowClass == 'odd') ? 'even' : 'odd';
+                }, this));
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'filterElement': function () {
+                return this.getElement('search');
+        },
+
+        //-------------------------------------------------------------------------
+        
+        'shouldShowElementWhileRendering': function () {
+                return false;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'selectRow': function (aRowObject) {
+                MochiKit.DOM.addElementClass(this.getId(aRowObject['_reference']), 'selected');
+        },
+
+        'unselectRow': function (aRowObject) {
+                MochiKit.DOM.removeElementClass(this.getId(aRowObject['_reference']), 'selected');
+        },
+
+        //-------------------------------------------------------------------------
+        /*
+        'passOpenDirectLogin': function(aDirectLoginReferenceId) {
+                MochiKit.Signal.signal(this, 'openDirectLogin', aDirectLoginReferenceId);
+        },
+        */
+        //-------------------------------------------------------------------------
+
+        'clearSearchHandler': function (anEvent) {
+                var searchElement;
+
+                anEvent.preventDefault();
+
+                searchElement = this.getElement('search');
+                searchElement.value = "";
+                searchElement.focus();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'drawEmpty': function () {
+                this.disconnectColumnManagersRowsSignals();
+                MochiKit.DOM.addElementClass(this.getElement('search'), 'disabled');
+        //      MochiKit.DOM.setNodeAttribute(this.getElement('search'), 'disabled', 'disabled');
+
+                gridRowsElement = this.getElement('gridRows');
+                gridRowsElement.innerHTML = "";
+                MochiKit.DOM.addElementClass(this.element(), 'empty');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setNoRowsGridComponent': function (aComponent) {
+                this.removeNoRowsGridComponent();
+                this._noRowsGridComponent = aComponent;
+                
+                this.disconnectColumnManagersRowsSignals();
+                MochiKit.DOM.addElementClass(this.getElement('search'), 'disabled');
+        //      MochiKit.DOM.setNodeAttribute(this.getElement('search'), 'disabled', 'disabled');
+
+                gridRowsElement = this.getElement('gridRows');
+                gridRowsElement.innerHTML = "";
+                MochiKit.DOM.addElementClass(this.element(), 'noRows');
+                
+                if (aComponent != null) {
+                        aComponent.renderInNode(this.getElement('noRowsBlock'));
+                }
+        },
+
+        'removeNoRowsGridComponent': function () {
+                if (this._noRowsGridComponent != null) {
+                        this._noRowsGridComponent.remove();
+                        this._noRowsGridComponent = null;
+                }
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ImageColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ImageColumnManager.js
new file mode 100644
index 0000000..07b8dcc
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ImageColumnManager.js
@@ -0,0 +1,68 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.ImageColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.ImageColumnManager.superclass.constructor.call(this, args);
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.ImageColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.ImageColumnManager component";
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+                        {tag:'img', src:anObject[this.name()]}
+                ]});
+
+        //      return Clipperz.Async.callbacks("ImageColumnManager.renderCell", [
+        //              this.selector(),
+        //              MochiKit.Base.bind(function (aValue) {
+        //                      Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+        //                              {tag:'img', src:aValue}
+        //                      ]});
+        //              }, this)
+        //      ], {trace:false}, anObject);
+        },
+
+        //-----------------------------------------------------
+                '__syntax_fix__' : 'syntax fix'
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LinkColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LinkColumnManager.js
new file mode 100644
index 0000000..e833190
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LinkColumnManager.js
@@ -0,0 +1,92 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.LinkColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.LinkColumnManager.superclass.constructor.call(this, args);
+
+        this._actionMethod = args.actionMethod || null;
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.LinkColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.DateColumnManager component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'actionMethod': function () {
+                return this._actionMethod;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderCell': function(aRowElement, anObject) {
+                        vartdElement;
+                        varlinkElement;
+
+                tdElement = Clipperz.DOM.Helper.append(aRowElement, {tag:'td', cls:this.cssClass(), children:[
+                        {tag:'span', children:[
+                                {tag:'a', href:'#', html:anObject[this.name()]}
+                        ]}
+                ]});
+
+                linkElement = MochiKit.DOM.getFirstElementByTagAndClassName('a', null, tdElement);
+        //      MochiKit.Signal.connect(linkElement, 'onclick', MochiKit.Base.method(this, 'handleLinkClick', anObject['_rowObject']));
+                this.connectEvent(linkElement, 'onclick', MochiKit.Base.method(this, 'handleLinkClick', anObject['_rowObject']));
+        },
+
+        //-----------------------------------------------------
+
+        'handleLinkClick': function (anObject, anEvent) {
+                anEvent.preventDefault();
+
+                if (this.actionMethod() != null) {
+                        var deferredResult;
+
+                        deferredResult = new Clipperz.Async.Deferred("LinkColumnManager.handleLinkClick", {trace:false});
+        //              deferredResult.addCallbackPass(MochiKit.Signal.signal, this, 'selectRow', anObject);
+                        deferredResult.addCallback(this.actionMethod(), anObject, anEvent);
+        //              deferredResult.addBothPass(MochiKit.Signal.signal, this, 'unselectRow', anObject);
+                        deferredResult.callback();
+                }
+        },
+
+        //-----------------------------------------------------
+                '__syntax_fix__' : 'syntax fix'
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js
new file mode 100644
index 0000000..de20853
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js
@@ -0,0 +1,203 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.LoginForm = function(args) {
+        args = args || {};
+
+        this._autocomplete = args.autocomplete || 'off';
+
+        Clipperz.PM.UI.Web.Components.LoginForm.superclass.constructor.apply(this, arguments);
+
+        this._slots = {
+                        'passphraseEntropy':this.getId('passphraseEntropy')
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.LoginForm component";
+        },
+
+        'autocomplete': function () {
+                return this._autocomplete;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(this.element(), {tag:'div', id:'loginBox', children:[
+                        {tag:'div', cls:'header'},
+                        {tag:'div', cls:'body', id:this.getId('body'), children:[
+                                {tag:'div', id:this.getId('loginForm'), children:[
+                                        {tag:'div', children:[
+                                                {tag:'h4', html:'Login'},
+        //                                      {tag:'form', cls:'loginForm', autocomplete:this.autocomplete(), children:[
+                                                {tag:'form', id:this.getId('form'), cls:'loginForm', children:[
+                                                        {tag:'label', html:'username', 'for':this.getId('usernameField')},
+                                                        {tag:'input', id:this.getId('usernameField'), type:'text', cls:'username'/*, value:'joe'*/},
+                                                        {tag:'ul', id:this.getId('passwordOptions'), children:[
+                                                                {tag:'li', id:this.getId('passphraseOption'), children:[
+                                                                        {tag:'label', html:'passphrase / OTP', 'for':this.getId('passphraseField')},
+                                                                        {tag:'input', id:this.getId('passphraseField'), type:'password', cls:'password'/*, value:'clipperz'*/}
+                                                                        ]}      //,
+/*
+                                                                {tag:'li', id:this.getId('otpOption'), children:[
+                                                                        {tag:'label', html:'one-time password', 'for':this.getId('otpField_1')},
+                                                                        {tag:'input', id:this.getId('otpField_1'), type:'text', cls:'otp', value:'abcd-efgh'},
+                                                                        {tag:'input', id:this.getId('otpField_2'), type:'text', cls:'otp', value:'abcd-efgh'},
+                                                                        {tag:'input', id:this.getId('otpField_3'), type:'text', cls:'otp', value:'abcd-efgh'},
+                                                                        {tag:'input', id:this.getId('otpField_4'), type:'text', cls:'otp', value:'abcd-efgh'}
+                                                                ]}
+*/
+                                                        ]},
+        //                                              {tag:'input', id:this.getId('otpCheckbox'), type:'checkbox', cls:'checkbox'},
+        //                                              {tag:'label', html:'use a one-time passphrase', 'for':this.getId('otpCheckbox'), cls:'checkbox'},
+
+                                                        {tag:'div', cls:'translations', children:[
+                                                                {tag:'h4', html:'choose your language'},
+                                                                {tag:'ul', children:[
+                                                                        {tag:'li', cls:'selected', html:'english'},
+                                                                        {tag:'li', html:'italiano'},
+                                                                        {tag:'li', html:'dutch'},
+                                                                        {tag:'li', html:'french'},
+                                                                        {tag:'li', html:'spanish'},
+                                                                        {tag:'li', html:'chinese'},
+                                                                        {tag:'li', html:'japanese'},
+                                                                        {tag:'li', html:'portugal'},
+                                                                        {tag:'li', html:'arabic'}
+                                                                ]}
+                                                        ]},
+
+                                                        {tag:'input', id:this.getId('submitButton'), type:'submit', value:'login', cls:'submit'}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]});
+
+                if (this.autocomplete() == 'off') {
+                        MochiKit.DOM.updateNodeAttributes(this.getElement('form'), {autocomplete:'off'});
+                }
+
+        //      Clipperz.Style.setBackgroundGradient(this.getElement('body'), {from:"#ff9955", to:"#ff6622"})
+                
+        //      this.setEntropyDisplay(new Clipperz.PM.UI.Common.Components.PasswordEntropyDisplay(this.getElement('passphraseField')));
+
+        //      MochiKit.Signal.connect(this.getId('otpCheckbox'), 'onclick', this, 'togglePasswordFields');
+        //      this.showPassphraseField();
+                
+                this.getElement('usernameField').focus();
+
+                MochiKit.Signal.connect(this.getElement('loginForm'), 'onsubmit', this, 'loginEventHandler');
+        },
+
+        //-----------------------------------------------------------------------------
+/*
+        'togglePasswordFields': function(anEvent) {
+                var shouldUseOTP;
+                
+                shouldUseOTP = this.getElement('otpCheckbox').checked;
+                
+                if (shouldUseOTP == false) {
+                        this.showPassphraseField();
+                } else {
+                        this.showOTPFields();
+                }
+        },
+*/
+        //-----------------------------------------------------------------------------
+/*
+        'showPassphraseField': function() {
+                this.showElement('passphraseOption');
+                this.hideElement('otpOption');
+        },
+*/
+        //-----------------------------------------------------------------------------
+
+        'focusOnPassphraseField': function () {
+                this.getElement('passphraseField').focus();
+                this.getElement('passphraseField').select();
+        },
+
+        //-----------------------------------------------------------------------------
+/*
+        'showOTPFields': function() {
+                this.hideElement('passphraseOption');
+                this.showElement('otpOption');
+        },
+*/
+        //-------------------------------------------------------------------------
+        
+        'loginEventHandler': function(anEvent) {
+                        varusername;
+                var passphrase;
+        //      var shouldUseOTP;
+        //      var otp;
+                var signalArguments;
+
+                anEvent.preventDefault();
+
+                username = this.getElement('usernameField').value;
+                passphrase = this.getElement('passphraseField').value;
+        //              otp =this.getElement('otpField_1').value +
+        //                      this.getElement('otpField_2').value +
+        //                      this.getElement('otpField_3').value +
+        //                      this.getElement('otpField_4').value;
+        //      shouldUseOTP = this.getElement('otpCheckbox').checked;
+
+                signalArguments = {username:username};
+
+        //      if (shouldUseOTP) {
+        //              signalArguments.otp = otp;
+        //      } else {
+                        signalArguments.passphrase = passphrase;
+        //      }
+
+                MochiKit.Signal.signal(this, 'doLogin', signalArguments);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'submitButtonElement': function() {
+                return this.getElement('submitButton');
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginPage.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginPage.js
new file mode 100644
index 0000000..49c030d
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginPage.js
@@ -0,0 +1,206 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.LoginPage = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.LoginPage.superclass.constructor.apply(this, arguments);
+
+        this._slots = {
+                        'loginForm':this.getId('loginBoxSlot')
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.LoginPage, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.LoginPage component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', id:this.getId('loginBoxSlot')},
+                        {tag:'div', id:'main', children:[
+                                {tag:'div', id:'featurePoints', children:[
+                                        {tag:'table', children:[
+                                                {tag:'tr', children:[
+                                                        {tag:'td', children:[
+                                                                {tag:'div', cls:'block', children:[
+                                                                        {tag:'h3', html:'Clipperz is:'},
+                                                                        {tag:'ul', children:[
+                                                                                {tag:'li', html:'a secure and simple password manager'},
+                                                                                {tag:'li', html:'an effective single sign-on solution'},
+                                                                                {tag:'li', html:'a digital vault for your personal data'}
+                                                                        ]}
+                                                                ]},
+                                                                {tag:'div', cls:'block', children:[
+                                                                        {tag:'h3', html:'Clipperz benefits:'},
+                                                                        {tag:'ul', children:[
+                                                                                {tag:'li', html:'free and completely anonymous'},
+                                                                                {tag:'li', html:'access it any time from any computer'},
+                                                                                {tag:'li', html:'no software to download and nothing to install'},
+                                                                                {tag:'li', html:'avoid keeping secrets on your PC or on paper'}
+                                                                        ]}
+                                                                ]}
+                                                        ]}, {tag:'td', children:[
+                                                                {tag:'div', cls:'block', children:[
+                                                                        {tag:'h3', html:'Clipperz security:'},
+                                                                        {tag:'ul', children:[
+                                                                                {tag:'li', html:'your secretes are locally encrypted by your browser before being uploaded to Clipperz'},
+                                                                                {tag:'li', html:'the encryption key is a passphrase known only to you'},
+                                                                                {tag:'li', html:'Clipperz hosts your sensitive data in an encrypted form and could never access the data in its plain form'},
+                                                                                {tag:'li', html:'Clipperz is built upon standard encryption schemes, nothing fancies of homemade'},
+                                                                                {tag:'li', html:'you can review the source code anytime you like, but you need to know nothing about cryptography to be an happy user!'}
+                                                                        ]}
+                                                                ]}
+                                                        ]}
+                                                ]}
+                                        ]}
+                                ]},
+                                {tag:'div', cls:'activeFeatures', children:[
+                                        {tag:'div', id:this.getId('registerButton'), cls:'createAccountLink', children:[
+                                                {tag:'canvas', id:this.getId('registerButtonIcon')},
+                                                {tag:'a', href:'#', id:this.getId('createAccountLink'), cls:'createAccountLink', children:[
+                                                        {tag:'span', cls:'payoff', html:"Free sign up!"},
+                                                        {tag:'span', cls:'link', html:"Create account >>"}
+                                                ]}
+                                        ]},
+                                        {tag:'div', cls:'keepTogether', children:[
+                                                {tag:'div', id:this.getId('screenshotLink'), cls:'screenshotLink', children:[
+                                                        {tag:'canvas', id:this.getId('lookIcon')},
+                                                        {tag:'a', href:'#', cls:'screenshotLink', children:[
+                                                                {tag:'span', cls:'payoff', html:"Look Clipperz!"},
+                                                                {tag:'span', cls:'link', html:"screenshot tour >>"}
+                                                        ]}
+                                                ]},
+                                                {tag:'div', id:this.getId('offlineLink'), cls:'offlineLink', children:[
+                                                        {tag:'canvas', id:this.getId('downloadIcon')},
+                                                        {tag:'a', href:'#', cls:'offlineLink', children:[
+                                                                {tag:'span', cls:'payoff', html:"Download!"},
+                                                                {tag:'span', cls:'link', html:"Offline version >>"}
+                                                        ]}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]}
+                ]);
+
+                this.setRegistrationButtonIconDefaultColors();
+                this.setLookIconDefaultColors();
+                this.setDownloadIconDefaultColors();
+
+        //      MochiKit.Signal.connect(this.getElement('createAccountLink'), 'onclick', this, 'handleCreateAccountLink')
+
+                MochiKit.Signal.connect(this.getElement('registerButton'), 'onmouseenter', this, 'handleMouseEnterOnRegisterButtonIcon');
+                MochiKit.Signal.connect(this.getElement('registerButton'), 'onmouseleave', this, 'handleMouseLeaveOnRegisterButtonIcon');
+
+                MochiKit.Signal.connect(this.getElement('screenshotLink'), 'onmouseenter', this, 'handleMouseEnterOnLookIcon');
+                MochiKit.Signal.connect(this.getElement('screenshotLink'), 'onmouseleave', this, 'handleMouseLeaveOnLookIcon');
+
+                MochiKit.Signal.connect(this.getElement('offlineLink'), 'onmouseenter', this, 'handleMouseEnterOnDownloadIcon');
+                MochiKit.Signal.connect(this.getElement('offlineLink'), 'onmouseleave', this, 'handleMouseLeaveOnDownloadIcon');
+                
+                MochiKit.Signal.connect(this.getElement('createAccountLink'), 'onclick', this, 'handleCreateAccountLink')
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setRegistrationButtonIconDefaultColors': function () {
+                Clipperz.PM.UI.Canvas.registerButton.normal(this.getElement('registerButtonIcon'), "#eeeeee", "#eeeeee", "#ecab12", "#e14624", "#ffffff");
+        },
+
+        'setRegistrationButtonIconHoverColors': function () {
+                Clipperz.PM.UI.Canvas.registerButton.normal(this.getElement('registerButtonIcon'), "#cccccc", "#999999", "#ffb710", "#ff4d27", "#ffffff");
+        },
+
+        'handleMouseEnterOnRegisterButtonIcon': function (anEvent) {
+                this.setRegistrationButtonIconHoverColors();
+        },
+
+        'handleMouseLeaveOnRegisterButtonIcon': function (anEvent) {
+                this.setRegistrationButtonIconDefaultColors();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setLookIconDefaultColors': function () {
+                Clipperz.PM.UI.Canvas.coverActions.look(this.getElement('lookIcon'), "#7e7e7e", "#ffffff", 1);
+        },
+
+        'setLookIconHoverColors': function () {
+                Clipperz.PM.UI.Canvas.coverActions.look(this.getElement('lookIcon'), "#666666", "#ffffff", 2);
+        },
+
+        'handleMouseEnterOnLookIcon': function (anEvent) {
+                this.setLookIconHoverColors();
+        },
+        
+        'handleMouseLeaveOnLookIcon': function (anEvent) {
+                this.setLookIconDefaultColors();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setDownloadIconDefaultColors': function () {
+                Clipperz.PM.UI.Canvas.coverActions.download(this.getElement('downloadIcon'), "#7e7e7e", "#ffffff", 1);
+        },
+
+        'setDownloadIconHoverColors': function () {
+                Clipperz.PM.UI.Canvas.coverActions.download(this.getElement('downloadIcon'), "#666666", "#ffffff", 2);
+        },
+
+        'handleMouseEnterOnDownloadIcon': function (anEvent) {
+                this.setDownloadIconHoverColors();
+        },
+        
+        'handleMouseLeaveOnDownloadIcon': function (anEvent) {
+                this.setDownloadIconDefaultColors();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleCreateAccountLink': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'createNewAccountClick', anEvent.src());
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginProgress.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginProgress.js
new file mode 100644
index 0000000..03c7b9e
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginProgress.js
@@ -0,0 +1,155 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.LoginProgress = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.LoginProgress.superclass.constructor.apply(this, arguments);
+
+        this._deferred = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.LoginProgress, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.LoginProgress component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferred': function() {
+                return this._deferred;
+        },
+
+        'setDeferred': function(aValue) {
+                this._deferred = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+        //      var loginProgressElement;
+        //      
+        //      loginProgressElement = MochiKit.DOM.getElement('loginProgress');
+        //      
+        //      if (loginProgressElement == null) {
+        //              loginProgressElement = this.append(this.element(), {tag:'div', id:'loginProgress', cls:'LoginProgress'}, true);
+        //      }
+
+//console.log(">> LoginProgress.renderSelf", this.element());
+                this.append(this.element(), {tag:'div', id:'loginProgress', cls:'LoginProgress', children: [
+        //      this.append(loginProgressElement, [
+                        {tag:'div', cls:'header', children:[
+                                {tag:'h3', id:this.getId('title'), html:"login progress"}
+                        ]},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'div', id:this.getId('progressBar')},
+                                {tag:'div', id:this.getId('errorBox'), cls:'errorBox', children:[
+        //                                      {tag:'div',cls:'img ALERT', children:[{tag:'div'}]},
+                                                {tag:'div',cls:'img ALERT', children:[{tag:'canvas', id:this.getId('canvas')}]},
+                                        {tag:'p', html:"Login failed"}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'footer', children:[
+                                {tag:'div', cls:'buttonArea', id:this.getId('buttonArea'), children:[
+                                        {tag:'div', cls:'button', id:this.getId('button'), children:[
+                                                {tag:'a', href:'#', id:this.getId('buttonLink'), html:"cancel"}
+                                        ]}
+                                ]}
+                        ]}
+                ]});
+        //      ]);
+
+                Clipperz.PM.UI.Canvas.marks['!'](this.getElement('canvas'), "#ffffff");
+
+                this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':this.getElement('progressBar')}));
+                MochiKit.Style.hideElement(this.getElement('errorBox'));
+                
+                MochiKit.Signal.connect(this.getId('buttonLink'), 'onclick', this, 'cancelEventHandler');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'displayElement': function() {
+                return MochiKit.DOM.getElement('loginProgress');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'cancelEventHandler': function(anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'cancelEvent');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'disableCancel': function() {
+                MochiKit.Style.hideElement(this.getElement('buttonArea'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showErrorMessage': function() {
+                this.getElement('buttonLink').innerHTML = "close";
+
+                MochiKit.Style.hideElement(this.getElement('progressBar'));
+
+                this.getElement('title').innerHTML = "Error";
+                MochiKit.Style.showElement(this.getElement('errorBox'));
+                MochiKit.Style.showElement(this.getElement('buttonArea'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredHideModalAndRemove': function(someParameters, aResult) {
+                        vardeferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("LoginProgress.deferredHideModalAndRemove", {trace:false});
+                deferredResult.addMethod(this, 'deferredHideModal');
+                deferredResult.addMethod(this, 'remove');
+                deferredResult.addCallback(function () {
+                        return aResult;
+                });
+                deferredResult.callback(someParameters);
+
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js
new file mode 100644
index 0000000..b40d1f3
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/NewUserCreationComponent.js
@@ -0,0 +1,430 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.NewUserCreationComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.NewUserCreationComponent.superclass.constructor.apply(this, arguments);
+
+        this._tabPanelController = null;
+
+        this._initiallySelectedTab = args.selected || 'CREDENTIALS';
+        this._tabPanelControllerConfiguration = {
+                'CREDENTIALS': {
+                                tab:'credentialsTab',
+                                panel:'credentialsTabpanel'
+                },
+                'CHECK_CREDENTIALS': {
+                                tab:'checkCredentialsTab',
+                                panel:'checkCredentialsTabpanel'
+                },
+                'TERMS_OF_SERVICE': {
+                                tab:'termsOfServiceTab',
+                                panel:'termsOfServiceTabpanel'
+                },
+                'CREATE_USER': {
+                                tab:'createUserTab',
+                                panel:'createUserTabpanel'
+                        }//,
+/*
+                'LOGIN': {
+                                tab:'loginTab',
+                                panel:'loginTabpanel'
+                }
+*/
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.NewUserCreationComponent, Clipperz.PM.UI.Common.Components.TabPanelComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.NewUserCreationComponent component";
+        },
+
+        //=========================================================================
+
+        'disableAllPanels': function () {
+                this.tabPanelController().selectTab(null);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'enableCredentialsPanel': function () {
+                this.tabPanelController().selectTab('CREDENTIALS');
+        },
+
+        'enableCheckCredentialsPanel': function () {
+                this.tabPanelController().selectTab('CHECK_CREDENTIALS');
+        },
+
+        'enableTermsOfServicePanel': function () {
+                this.tabPanelController().selectTab('TERMS_OF_SERVICE');
+        },
+
+        'enableCreateUserPanel': function () {
+                this.tabPanelController().selectTab('CREATE_USER');
+        },
+
+        //'enableLoginPanel': function () {
+        //      this.tabPanelController().selectTab('LOGIN');
+        //},
+
+        //=========================================================================
+
+        'shouldShowElementWhileRendering': function() {
+                return false;
+        },
+        
+        //=========================================================================
+
+        'tabPanelController': function () {
+                if (this._tabPanelController == null) {
+                        this._tabPanelController = new Clipperz.PM.UI.Common.Controllers.TabPanelController({
+                                component:this,
+                                configuration:this._tabPanelControllerConfiguration
+                        });
+                        
+                        MochiKit.Signal.connect(this._tabPanelController, 'tabSelected', this, 'handleTabSelected')
+                }
+                
+                return this._tabPanelController;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+//console.log('** Clipperz.targetModalDimensionsAndPosition', Clipperz.Base.serializeJSON(Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition));
+
+                this.append(this.element(), {tag:'div', cls:'NewUserCreation mainDialog', id:this.getId('panel'), children: [
+                        {tag:'form', id:this.getId('form'), cls:'newUserCreationForm', children:[
+                                {tag:'div', cls:'header', children:[
+                                        {tag:'div', cls:'title', children:[
+                                                {tag:'h3', id:this.getId('title'), html:"Create new user"}
+                                        ]}
+                                ]},
+                                {tag:'div', id:this.getId('body'), cls:'body', children:[
+                                        {tag:'div', cls:'tabContainer', children:[
+                                                {tag:'ul', cls:'tabs', children:[
+                                                                {tag:'li', id:this.getId('credentialsTab'),             children:[{tag:'span', html:"credentials"}]},
+                                                                {tag:'li', id:this.getId('checkCredentialsTab'),children:[{tag:'span', html:"credentials check"}]},
+                                                                {tag:'li', id:this.getId('termsOfServiceTab'),  children:[{tag:'span', html:"terms of service"}]},
+                                                                {tag:'li', id:this.getId('createUserTab'),                      children:[{tag:'span', html:"create user"}]}//,
+        //                                                      {tag:'li', id:this.getId('loginTab'),                   children:[{tag:'span', html:"login"}]},
+                                                ]},
+                                                {tag:'ul', cls:'tabPanels', children:[
+                                                        {tag:'li', id:this.getId('credentialsTabpanel'), cls:'tabPanel credentials', children:[
+                                                                {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.CREDENTIALS.description')}]},
+                                                                {tag:'ul', cls:'credentials', children:[
+                                                                                {tag:'li', children:[{tag:'span', cls:'label', html:"username"},{tag:'input', type:'text', id:this.getId('username')/*, value:'test'*/}]},
+                                                                                {tag:'li', children:[{tag:'span', cls:'label', html:"passphrase"},{tag:'input', type:'password', id:this.getId('passphrase')/*, value:'test'*/}]}
+                                                                ]}
+                                                        ]},
+                                                        {tag:'li', id:this.getId('checkCredentialsTabpanel'), cls:'tabPanel checkCredentials', children:[
+                                                                {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.CHECK_CREDENTIALS.description')}]},
+                                                                {tag:'ul', cls:'credentials', children:[
+                                                                                {tag:'li', children:[{tag:'span', cls:'label', html:"re-passphrase"},{tag:'input', type:'password', id:this.getId('re-passphrase')/*, value:'test'*/}]}
+                                                                ]}
+                                                        ]},
+                                                        {tag:'li', id:this.getId('termsOfServiceTabpanel'), cls:'tabPanel termsOfService', children:[
+                                                                {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.TERMS_OF_SERVICE.description')}]},
+                                                                {tag:'ul', cls:'termsOfService', children:[
+                                                                        {tag:'li', children:[{tag:'input', type:'checkbox', id:this.getId('awareOfUnrecoverablePassphrase')/*, checked:true*/}, {tag:'label', cls:'label', 'for':this.getId('awareOfUnrecoverablePassphrase'), html:"I understand that Clipperz will not be able to recover a lost passphrase."}]},
+                                                                        {tag:'li', children:[{tag:'input', type:'checkbox', id:this.getId('readTermsOfService')/*, checked:true*/}, {tag:'label', cls:'label', 'for':this.getId('readTermsOfService'), htmlString:"I have read and agreed to the <a href='http://www.clipperz.com/terms_of_service' target='_blank'>Terms of Service</a>."}]}
+                                                                ]}
+                                                        ]},
+                                                        {tag:'li', id:this.getId('createUserTabpanel'), cls:'tabPanel createUser', children:[
+                                                                {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.CREATE_USER.description')}]},
+                                                                {tag:'ul', cls:'createUserStates', children:[
+                                                                        {tag:'li', cls:'creating', id:this.getId('creatingRegistering'), children:[{tag:'span', html:"registering user"}]},
+                                                                        {tag:'li', cls:'done', id:this.getId('creatingDone'), children:[{tag:'span', html:"done"}]},
+                                                                        {tag:'li', cls:'fail', id:this.getId('creatingFailed'), children:[{tag:'span', html:"fail"}]}
+                                                                ]}
+                                                                ]}//,
+        //                                              {tag:'li', id:this.getId('loginTabpanel'), cls:'tabPanel login', children:[
+        //                                                      {tag:'div', cls:'wizardStepDescription', children:[{tag:'span', html:Clipperz.PM.Strings.getValue('Wizards.NewUserWizard.LOGIN.description')}]},
+        //                                              ]}
+                                                ]}
+                                        ]}
+                                ]},
+                                {tag:'div', id:this.getId('footer'), cls:'footer', children:[
+                                        {tag:'div', cls:'buttonArea', children:[
+        //                                      {tag:'div', cls:'cancel', id:this.getId('cancelButton'), html:"cancel"},
+        //                                      {tag:'div', cls:'save disabled',   id:this.getId('saveButton'),   html:"save"}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'clear'}
+                ]});
+
+                this.tabPanelController().setup();
+        //      MochiKit.Signal.connect(this.getId('panel'), 'onkeydown', this, 'handleKeyEvent');
+                MochiKit.Signal.connect(MochiKit.DOM.currentDocument().body, 'onkeydown', this, 'handleKeyEvent');
+                MochiKit.Signal.connect(this.getId('awareOfUnrecoverablePassphrase'), 'onchange', this, 'handleTermsOfServiceCheckboxChange');
+                MochiKit.Signal.connect(this.getId('readTermsOfService'), 'onchange', this, 'handleTermsOfServiceCheckboxChange');
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'resetContent': function () {
+                this.getElement('username').value = '';
+                this.getElement('passphrase').value = '';
+        },
+*/
+        //-------------------------------------------------------------------------
+
+        'displayElement': function() {
+                return this.getElement('panel');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleTabSelected': function (aSelectedTab) {
+/*
+                switch (aSelectedTab) {
+                        case 'DETAILS':
+                                break;
+                        case 'DIRECT_LOGINS':
+                                MochiKit.Style.hideElement(this.getElement('backToDirectLoginList'));
+                                break;
+                        case 'SHARING':
+                                break;
+                }
+*/
+        },
+
+        //=========================================================================
+
+        'username': function () {
+                return this.getElement('username').value;
+        },
+        
+        'usernameElement': function () {
+                return this.getElement('username');
+        },
+
+        'passphrase': function () {
+                return this.getElement('passphrase').value;
+        },
+
+        'rePassphrase': function () {
+                return this.getElement('re-passphrase').value;
+        },
+
+        'awareOfUnrecoverablePassphrase': function () {
+                return this.getElement('awareOfUnrecoverablePassphrase').value;
+        },
+        
+        'readTermsOfService': function () {
+                return this.getElement('readTermsOfService').value;
+        },
+
+        //=========================================================================
+/*
+        'incrementUpdateFaviconCounter': function () {
+                this._updateFaviconCounter ++;
+        },
+
+        'decrementUpdateFaviconCounter': function () {
+                this._updateFaviconCounter --;
+        },
+
+        'updateFaviconCounter': function () {
+                return this._updateFaviconCounter;
+        },
+        */
+        //-------------------------------------------------------------------------
+/*
+        'updateFavicon': function () {
+                this.decrementUpdateFaviconCounter();
+                
+                if (this.updateFaviconCounter() == 0) {
+                        this.setFavicon(this.favicon());
+                }
+        },
+*/
+        //=========================================================================
+/*
+        'bindingComponents': function () {
+                return this._bindingComponents;
+        },
+
+        'clearAllBindingsComponents': function () {
+                MochiKit.Iter.forEach(this.bindingComponents(), MochiKit.Base.methodcaller('remove'));
+                this._bindingComponents = [];
+                this.getElement('bindings').innerHTML = '';
+        },
+
+        'addBindingComponent': function (aBindingComponent) {
+                this.bindingComponents().push(aBindingComponent);
+                aBindingComponent.renderInNode(this.append(this.getElement('bindings'), {tag:'div'}));
+        },
+*/
+        //=========================================================================
+/*
+        'formValueComponents': function () {
+                return this._formValueComponents;
+        },
+        
+        'clearAllFormValueComponents': function () {
+                MochiKit.Iter.forEach(this.formValueComponents(), MochiKit.Base.methodcaller('remove'));
+                this._formValueComponents = [];
+                this.getElement('formValues').innerHTML = '';
+        },
+
+        'addFormValueComponent': function (aFormValueComponent) {
+                this.formValueComponents().push(aFormValueComponent);
+                aFormValueComponent.renderInNode(this.append(this.getElement('formValues'), {tag:'div'}));
+        },
+*/
+        //=========================================================================
+
+        'changedValue': function (anEvent) {
+                MochiKit.Signal.signal(this, 'changedValue', anEvent);
+
+                this.incrementUpdateFaviconCounter();
+                MochiKit.Async.callLater(1, MochiKit.Base.method(this, 'updateFavicon'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleBackClick': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'back');
+        },
+
+        //=========================================================================
+
+        'bottomMargin': function () {
+                var result;
+
+        //TODO: WTF!!!
+        //              result =MochiKit.Style.getElementPosition(this.element())['y'] +
+        //                              MochiKit.Style.getElementDimensions(this.element())['h'];
+
+        //              result =MochiKit.Style.getElementPosition(this.getElement('footer'))['y'];
+//console.log("### bottomMargin");
+//console.log('displayElement', this.displayElement());
+//console.log('-- Clipperz.targetModalDimensionsAndPosition', Clipperz.Base.serializeJSON(Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition));
+//console.log('element', MochiKit.Style.getElementPosition('modalDialog') ['y'], MochiKit.Style.getElementDimensions('modalDialog')['h']);
+        //      result = 450;
+
+                        result =Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition['position']['y'] +
+                                        Clipperz.PM.UI.Common.Components.BaseComponent.targetModalDimensionsAndPosition['dimensions']['h'] -
+                                        60;
+
+                return result;
+        },
+
+        //=========================================================================
+        
+        'focusOnUsernameElement': function () {
+                MochiKit.Async.callLater(0.1, MochiKit.Base.method(this.getElement('username'), 'focus'));
+        },
+
+        'focusOnRePassphraseElement': function () {
+                this.getElement('re-passphrase').focus();
+        },
+        /*
+        'focusOnBookmarkletConfigurationElement': function () {
+                this.getElement('bookmarkletConfiguration').focus();
+        },
+
+        'focusOnFaviconElement': function () {
+                this.getElement('faviconURL').focus();
+        },
+*/
+
+        //=========================================================================
+
+        'hideAllProgeressStates': function () {
+                MochiKit.Style.hideElement(this.getElement('creatingRegistering'));
+                MochiKit.Style.hideElement(this.getElement('creatingDone'));
+                MochiKit.Style.hideElement(this.getElement('creatingFailed'));
+        },
+
+        'showProgressOnUserCreation': function () {
+//Clipperz.log(">>> NewUserCreationComponent.showProgressOnUserCreation");
+                this.hideAllProgeressStates();
+                MochiKit.Style.showElement(this.getElement('creatingRegistering'));
+        },
+
+        'showUserCreationDone': function () {
+//Clipperz.log(">>> NewUserCreationComponent.showUserCreationDone");
+                this.hideAllProgeressStates();
+                MochiKit.Style.showElement(this.getElement('creatingDone'));
+//Clipperz.log("<<< NewUserCreationComponent.showUserCreationDone");
+        },
+
+        'showUserCreationFailed': function () {
+//Clipperz.log(">>> NewUserCreationComponent.showUserCreationFailed");
+                this.hideAllProgeressStates();
+                MochiKit.Style.showElement(this.getElement('creatingFailed'));
+        },
+
+        //=========================================================================
+
+        'handleKeyEvent': function (anEvent) {
+                MochiKit.Signal.signal(this, 'keyPressed', anEvent);
+/*
+                if (anEvent.key().string == 'KEY_ENTER') {
+                        if (anEvent.target().nodeName != 'TEXTAREA') {
+                                MochiKit.Signal.signal(this, 'moveForward');
+                                anEvent.preventDefault();
+                        }
+                } else if (anEvent.key().string == 'KEY_TAB') {
+                        if ((anEvent.target().nodeName == 'INPUT') || (anEvent.target().nodeName == 'TEXTAREA')) {
+                                MochiKit.Signal.signal(this, 'moveForward');
+                                anEvent.preventDefault();
+                        }
+                }
+*/
+        },
+
+        'handleTermsOfServiceCheckboxChange': function (anEvent) {
+                MochiKit.Signal.signal(this, 'changedValue');
+        },
+
+        //=========================================================================
+
+        'clear': function () {
+                this.tabPanelController().selectTab(null);
+                Clipperz.PM.UI.Web.Components.NewUserCreationComponent.superclass.clear.apply(this, arguments);
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/Page.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/Page.js
new file mode 100644
index 0000000..bed6675
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/Page.js
@@ -0,0 +1,71 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.Page = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.Page.superclass.constructor.apply(this, arguments);
+
+        this._slots = {
+                        'header':'pageHeader',
+                        'body':         'pageBody',
+                        'footer':'pageFooter'
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.Page, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.Page component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', id:'pageHeaderAndBody', cls:'pageHeaderAndBody', children:[
+                                {tag:'div', id:'pageHeader', cls:'pageHeader'},
+                                {tag:'div', id:'pageBody',   cls:'pageBody'}
+                        ]},
+                        {tag:'div', id:'pageFooter', cls:'pageFooter'}
+                ]);
+                
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageFooter.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageFooter.js
new file mode 100644
index 0000000..11135d8
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageFooter.js
@@ -0,0 +1,71 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.PageFooter = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.PageFooter.superclass.constructor.apply(this, arguments);
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageFooter, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.PageFooter component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'footerWrapper', children:[
+                                {tag:'div', cls:'footerContent', children:[
+        //                              {tag:'div', cls:'footerStarIcon'},
+                                        {tag:'canvas', id:this.getId('footerStarIcon'), cls:'footerStarIcon'},
+                                        {tag:'span', cls:'copyright', html:'Copyright &copy; 2009 Clipperz Srl'},
+                                                {tag:'a', href:'http://www.clipperz.com/terms_of_service',target:'_blank', html:'terms of service'},
+                                                {tag:'a', href:'http://www.clipperz.com/privacy_policy',target:'_blank', html:'privacy policy'},
+                                        {tag:'span', cls:'applicationVersion', html:'application version: [1992]'}
+                                ]}
+                        ]}
+                ]);
+
+                Clipperz.PM.UI.Canvas.star.normal(this.getElement('footerStarIcon'), "#7e7e7e");
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js
new file mode 100644
index 0000000..3924434
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js
@@ -0,0 +1,184 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.PageHeader = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.PageHeader.superclass.constructor.apply(this, arguments);
+        this._newsIsOpen = args.newsIsOpen || false;
+        this._animationDuration = args.animationDuration || 0.5;
+        
+        this._offset = 82;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageHeader, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.PageHeader component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'iframeURL': function () {
+        //      return './rss_view.html';
+                return 'http://www.clipperz.com/files/clipperz.com/appTips/index.html';
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', id:'miscLinks', children:[
+                                {tag:'ul', children:[
+                                                {tag:'li', children:[{tag:'a', id:'donateHeaderLink',   stringID:'pageHeader.donation',         href:'http://www.clipperz.com/donations',               target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.donation')}]},
+                                                {tag:'li', children:[{tag:'a', id:'forumHeaderLink',    stringID:'pageHeader.forum',    href:'http://www.clipperz.com/forum',                   target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.forum')}]},
+                                                {tag:'li', children:[{tag:'a', id:'creditsHeaderLink',  stringID:'pageHeader.credits',  href:'http://www.clipperz.com/credits',                         target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.credits')}]},
+                                                {tag:'li', children:[{tag:'a', id:'feedbackHeaderLink',         stringID:'pageHeader.feedback',         href:'http://www.clipperz.com/contact',                         target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.feedback')}]},
+                                                {tag:'li', children:[{tag:'a', id:'helpHeaderLink',             stringID:'pageHeader.help',             href:'http://www.clipperz.com/support/user_guide',target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.help')}]}
+                                ]}
+                        ]},
+                        {tag:'div', id:'logoFrame', children:[
+                                {tag:'a', href:'http://www.clipperz.com', target:'_blank', children:[{tag:'div', id:'logo'}]},
+                                {tag:'h5', cls:'clipperzPayoff', html:'keep it to yourself!'}
+                        ]},
+                        {tag:'div', id:'news', cls:'hidden', children:[
+        //                      {tag:'div', cls:'close', children:[
+        //                              {tag:'a', href:'#', id:this.getId('closeTips'), html:'x'}
+        //                      ]},
+                                {tag:'div', id:'newsframe', children:[
+                                        {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()}
+                                ]},
+                                {tag:'div', id:this.getId('newsGrip'), cls:'grip', children:[]}
+                        ]},
+                        {tag:'div', id:'featureTabs', children:[
+                                {tag:'table', children:[{tag:'tr', children:[
+                                                {tag:'td', children:[{tag:'div', id:'feature_store',            children:[{tag:'canvas', cls:'featureIcon', id:this.getId('storeIcon')},        {tag:'span', html:"Store and manage your password and online credentials"}]}]},
+                                                {tag:'td', children:[{tag:'div', id:'feature_protect',          children:[{tag:'canvas', cls:'featureIcon', id:this.getId('protectIcon')},      {tag:'span', html:"Protect all your sensitive data"}]}]},
+                                                {tag:'td', children:[{tag:'div', id:'feature_directLogin',      children:[{tag:'canvas', cls:'featureIcon', id:this.getId('directLoginIcon')},{tag:'span', html:"Login to your web services without entering any username or password"}]}]},
+                                                {tag:'td', children:[{tag:'div', id:'feature_share',            children:[{tag:'canvas', cls:'featureIcon', id:this.getId('shareIcon')},        {tag:'span', html:"Share secret with family members and associates"}]}]}
+                                ]}]}
+                        ]}
+                ]);
+
+                Clipperz.PM.UI.Canvas.features.store(this.getElement('storeIcon'), "#ffffff");
+                Clipperz.PM.UI.Canvas.features.protect(this.getElement('protectIcon'), "#ffffff");
+                Clipperz.PM.UI.Canvas.features.directLogin(this.getElement('directLoginIcon'), "#ffffff");
+                Clipperz.PM.UI.Canvas.features.share(this.getElement('shareIcon'), "#ffffff", "#ffffff", "#ff0000");
+
+                MochiKit.Signal.connect(this.getElement('newsGrip'), 'onclick', this, 'toggleTips');
+                MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'switchToLoggedMode': function() {
+        //      MochiKit.Style.addElementClass(this.element(), 'logged');
+                MochiKit.Style.hideElement('featureTabs');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'animationDuration': function () {
+                return this._animationDuration;
+        },
+
+        'offset': function () {
+                return this._offset;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'isNewsOpen': function () {
+                        return this._newsIsOpen;
+        },
+        
+        'toggleNewsIsOpen': function () {
+                this._newsIsOpen = !this._newsIsOpen;
+        },
+
+        'toggleTips': function(anEvent) {
+                anEvent.preventDefault();
+
+                if (this.isNewsOpen() == true) {
+                        MochiKit.Visual.Move(Clipperz.DOM.get('news'), {
+                                x: 0,
+                                y: -this.offset(),
+                                mode: 'relative',
+                                duration: this.animationDuration(),
+                                beforeStart: function () {
+                                        MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hiding');
+                                },
+                                afterFinish: function () {
+                                        Clipperz.DOM.get('newsframe').innerHTML = "";
+                                        MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hidden');
+                                }
+                        })
+                        this.toggleNewsIsOpen();
+                } else {
+                        MochiKit.DOM.addElementClass('newsframe', 'loading');
+                        MochiKit.Visual.Move(Clipperz.DOM.get('news'), {
+                                x: 0,
+                                y: this.offset(),
+                                mode: 'relative',
+                                duration: this.animationDuration(),
+                                beforeStart: MochiKit.Base.bind(function () {
+                                        this.append(Clipperz.DOM.get('newsframe'), {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()});
+
+                                        MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad');
+                                        MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'opening');
+                                }, this),
+                                afterFinish: function () {
+                                        MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'open');
+                                }
+                        })
+                        this.toggleNewsIsOpen();
+                }
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'handleIframeDidLoad': function (anEvent) {
+                if (this.isNewsOpen() == false) {
+                        this.toggleTips(anEvent);
+                }
+                
+                MochiKit.DOM.removeElementClass('newsframe', 'loading');
+                MochiKit.Signal.disconnectAllTo(this.getElement('iframe'));
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PasswordTooltip.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PasswordTooltip.js
new file mode 100644
index 0000000..79c8d4f
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PasswordTooltip.js
@@ -0,0 +1,164 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
+
+Clipperz.PM.UI.Web.Components.PasswordTooltip = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.PasswordTooltip.superclass.constructor.apply(this, arguments);
+
+                this._referenceElement  = args.referenceElement|| Clipperz.Base.exception.raise('MandatoryParameter');
+                this._text                              = args.text                     || Clipperz.Base.exception.raise('MandatoryParameter');
+
+        this._boxDimensions = null;
+        this._isVisible = false;
+
+        this.renderSelf();
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PasswordTooltip, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.PasswordTooltip component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'referenceElement': function () {
+                return this._referenceElement;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'text': function () {
+                return this._text;
+        },
+        
+        'setText': function (aValue) {
+                this._text = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'isVisible': function () {
+                return this._isVisible;
+        },
+        
+        'setIsVisible': function (aValue) {
+                this._isVisible = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                this.append(MochiKit.DOM.getElement('Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'), {tag:'div', id:this.getId('tooltip'), cls:'passwordTooltip', children:[
+                        {tag:'div', id:this.getId('body'), cls:'passwordTooltip_body', children:[
+                                {tag:'div', cls:'passwordTooltip_text', children:[
+                                        {tag:'span', html:this.text()}
+                                ]},
+                                {tag:'div', id:this.getId('footer'), cls:'passwordTooltip_footer'}
+                        ]},
+                        {tag:'div', id:this.getId('arrow'), cls:'passwordTooltip_arrow'}
+                ]});
+
+                this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body'));
+        //      this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h;
+
+                MochiKit.Style.hideElement(this.displayElement());
+                MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show');
+                MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide');
+        },
+
+        //-----------------------------------------------------
+
+        'displayElement': function() {
+                return this.getElement('tooltip');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'boxDimensions': function () {
+                return this._boxDimensions;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'show': function () {
+                var elementSizeAndPosition;
+                var arrowPosition;
+                var bodyPosition;
+
+                if (this.isVisible() == false) {
+                        arrowPosition = {};
+                        bodyPosition = {};
+
+                        this.setIsVisible(true);
+                        elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element());
+
+                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+                        bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
+                        bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13;
+                
+                        arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+                        arrowPosition.y = elementSizeAndPosition.position.y - 13;
+
+                        MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition);
+                        MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition);
+                        MochiKit.Visual.appear(this.displayElement(), {duration:0.4});
+                }
+        },
+
+        'hide': function () {
+                if (this.isVisible() == true) {
+                        MochiKit.Visual.fade(this.displayElement(), {duration:0.4});
+                        this.setIsVisible(false);
+                }
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'shouldRemoveElementWhenClearningUp': function () {
+                return false;
+        },
+*/
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
+
+Clipperz.PM.UI.Web.Components.PasswordTooltip.initTooltips = function () {
+        Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Web_Components_PasswordTooltip_wrapperNode'});
+}
+
+MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Web.Components.PasswordTooltip.initTooltips);
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js
new file mode 100644
index 0000000..ab8a38c
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/RulerComponent.js
@@ -0,0 +1,324 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.RulerComponent = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.RulerComponent.superclass.constructor.apply(this, arguments);
+
+                this._translationContext        = args.translationContext|| Clipperz.Base.exception.raise('MandatoryParameter');
+        //      this._steps                                     = args.steps                    || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._steps                             = args.steps;
+
+        this._currentStep = -1;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.RulerComponent, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.RulerComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'resetStatus': function (args) {
+                args = args || {};
+
+                if (this.currentStep() != 0) {
+                        var shouldAnimateTransition;
+                
+                        shouldAnimateTransition = args.animateTransition || false;
+
+                        if (shouldAnimateTransition) {
+                                this.moveToFirstStep(MochiKit.Base.method(this, 'cursorMoved'));
+                        } else {
+                                this._currentStep = 0;
+                                this.cursorMoved();
+                        }
+                }
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'translationContext': function () {
+                return this._translationContext;
+        },
+
+        'steps': function () {
+                return this._steps;
+        },
+
+        'setSteps': function (aValue) {
+                this._steps = aValue;
+                this.renderStepsComponents();
+                this.resetStatus();
+        },
+
+        'translatedStepDescription': function (aStep) {
+                return Clipperz.PM.Strings.getValue(this.translationContext() + '.' + aStep + '.' + 'name');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.setElement(this.append(MochiKit.DOM.currentDocument().body, [
+                        {tag:'div', id:this.getId('rulerWrapper'), cls:'rulerWrapper fixed', children:[
+                                {tag:'div', cls:'ruler', children:[
+                                        {tag:'a', href:'#', id:this.getId('exit'), cls:'exit', html:'&nbsp;'},
+                                                {tag:'a', href:'#', id:this.getId('smallPreviousButton'),cls:'smallButton previous', html:'&nbsp;'},
+                                                {tag:'a', href:'#', id:this.getId('smallNextButton'),           cls:'smallButton next',         html:'&nbsp;'},
+                                        {tag:'div', cls:'marker', id:this.getId('marker'), children:[
+                                                {tag:'div', cls:'previous', id:this.getId('previousButton')},
+                                                {tag:'div', cls:'markerBody'},
+                                                {tag:'div', cls:'next', id:this.getId('nextButton')}
+                                        ]},
+                                        {tag:'div', cls:'steps', id:this.getId('stepsFrame')},
+        //                              {tag:'div', cls:'steps' + ' ' + 'steps_' + this.steps().length, children:[
+        //                                      {tag:'ul', id:this.getId('steps'), children:MochiKit.Base.map(MochiKit.Base.bind(function (aStep) { return {tag:'li', children:[{tag:'span', html:this.translatedStepDescription(aStep)}]}}, this), this.steps())}
+        //                              ]},
+                                        {tag:'div', cls:'dots', id:this.getId('dotsFrame')}
+        //                              {tag:'div', cls:'dots' + ' ' + 'steps_' + this.steps().length, children:[
+        //                                      {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map(function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}}, this.steps())}
+        //                              ]}
+                                ]}
+                        ]}
+                ]));
+//console.log("ELEMENT", this.element());
+
+                        MochiKit.Signal.connect(this.getElement('exit'),                        'onclick', this, 'handleExit');
+
+                        MochiKit.Signal.connect(this.getElement('previousButton'),      'onclick', this, 'handlePrevious');
+                        MochiKit.Signal.connect(this.getElement('smallPreviousButton'),'onclick', this, 'handlePrevious');
+
+                        MochiKit.Signal.connect(this.getElement('nextButton'),          'onclick', this, 'handleNext');
+                        MochiKit.Signal.connect(this.getElement('smallNextButton'),     'onclick', this, 'handleNext');
+                
+                this.enablePrevious(false);
+                this.enableNext(false);
+                
+        //      this.cursorMoved();
+        },
+
+        //.........................................................................
+
+        'renderStepsComponents': function () {
+                        varstepsFrame;
+                var dotsFrame;
+        
+                stepsFrames = this.getElement('stepsFrame');
+                MochiKit.DOM.setElementClass(stepsFrames, 'steps');
+                MochiKit.DOM.addElementClass(stepsFrames, 'steps_' + this.steps().length);
+                
+                stepsFrames.innerHTML = "";
+                this.append(stepsFrames, {tag:'ul', id:this.getId('steps'), children:MochiKit.Base.map(
+                        MochiKit.Base.bind(function (aStep) { return {tag:'li', children:[{tag:'span', html:this.translatedStepDescription(aStep)}]}}, this),
+                        this.steps())}
+                );
+
+                dotsFrames = this.getElement('dotsFrame');
+                MochiKit.DOM.setElementClass(dotsFrames, 'dots');
+                MochiKit.DOM.addElementClass(dotsFrames, 'steps_' + this.steps().length);
+
+                dotsFrames.innerHTML = "";
+                this.append(dotsFrames, {tag:'ul', id:this.getId('dots'), children:MochiKit.Base.map(
+                        function (aStep) { return {tag:'li', children:[{tag:'span', html:'*'}]}; },
+                        this.steps())}
+                );
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleExit': function (anEvent) {
+                anEvent.preventDefault();
+                
+                MochiKit.Signal.signal(this, 'exit');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handlePrevious': function (anEvent) {
+                anEvent.preventDefault();
+
+        //      if (!MochiKit.DOM.hasElementClass(this.getElement('previousButton'), 'disabled')) {
+        //              this.moveBackward();
+        //      }
+                
+                MochiKit.Signal.signal(this, 'moveBackward');
+        },
+        
+        'handleNext': function (anEvent) {
+                anEvent.preventDefault();
+
+        //      if (!MochiKit.DOM.hasElementClass(this.getElement('nextButton'), 'disabled')) {
+        //              this.moveForward();
+        //      }
+
+                MochiKit.Signal.signal(this, 'moveForward');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'currentStep': function () {
+                return this._currentStep;
+        },
+
+        'markerInitialOffset': function () {
+                return -246;
+        },
+
+        'markerStepOffset': function () {
+                return 410 / (this.steps().length - 1);
+        //      return 100;
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'moveToFirstStep': function (aCallback) {
+                        varstepsToMove;
+                
+                stepsToMove = this._currentStep;
+                this._currentStep = 0;
+
+                this.enablePrevious(false);
+                this.enableNext(false);
+        //      MochiKit.Signal.signal(this, 'moveBackward');
+                MochiKit.Base.map(
+                        function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); },
+                        MochiKit.Selector.findChildElements(this.element(), ['li.selected'])
+                );
+                new MochiKit.Visual.Move(this.getElement('marker'), {
+                        x:-(this.markerStepOffset() * stepsToMove),
+                        mode:'relative',
+                        duration:(0.5 * (stepsToMove/2)),
+        //              afterFinish:MochiKit.Base.method(this, 'cursorMoved')
+                        afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback)
+                });
+        },
+
+        'moveBackward': function (aCallback) {
+                this._currentStep --;
+
+                this.enablePrevious(false);
+                this.enableNext(false);
+        //      MochiKit.Signal.signal(this, 'moveBackward');
+                MochiKit.Base.map(
+                        function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); },
+                        MochiKit.Selector.findChildElements(this.element(), ['li.selected'])
+                );
+                new MochiKit.Visual.Move(this.getElement('marker'), {
+                        x:-this.markerStepOffset(),
+                        mode:'relative',
+                        duration:0.5,
+        //              afterFinish:MochiKit.Base.method(this, 'cursorMoved')
+                        afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback)
+                });
+        },
+        
+        'moveForward': function (aCallback) {
+                this._currentStep ++;
+
+                if (this._currentStep < this.steps().length) {
+                        this.enablePrevious(false);
+                        this.enableNext(false);
+        //              MochiKit.Signal.signal(this, 'moveForward');
+                        MochiKit.Base.map(
+                                function (anElement) { MochiKit.DOM.removeElementClass(anElement, 'selected'); },
+                                MochiKit.Selector.findChildElements(this.element(), ['li.selected'])
+                        );
+                        new MochiKit.Visual.Move(this.getElement('marker'), {
+                                x:this.markerStepOffset(),
+                                mode:'relative',
+                                duration:0.5,
+        //                      afterFinish:MochiKit.Base.method(this, 'cursorMoved')
+                                afterFinish:MochiKit.Base.compose(MochiKit.Base.method(this, 'cursorMoved'), aCallback)
+                        });
+                } else {
+                        MochiKit.Signal.signal(this, 'done');
+                }
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'enablePrevious': function (aValue) {
+                if (aValue == true) {
+                        MochiKit.DOM.removeElementClass(this.getElement('previousButton'), 'disabled');
+                        MochiKit.DOM.removeElementClass(this.getElement('smallPreviousButton'), 'disabled');
+                } else {
+                        MochiKit.DOM.addElementClass(this.getElement('previousButton'), 'disabled');
+                        MochiKit.DOM.addElementClass(this.getElement('smallPreviousButton'), 'disabled');
+                }
+        },
+
+        //'disablePrevious': function () {
+        //      MochiKit.DOM.addElementClass(this.getElement('previousButton'), 'disabled');
+        //},
+
+        //.........................................................................
+        
+        'enableNext': function (aValue) {
+                if (aValue == true) {
+                        MochiKit.DOM.removeElementClass(this.getElement('nextButton'), 'disabled');
+                        MochiKit.DOM.removeElementClass(this.getElement('smallNextButton'), 'disabled');
+                } else {
+                        MochiKit.DOM.addElementClass(this.getElement('nextButton'), 'disabled');
+                        MochiKit.DOM.addElementClass(this.getElement('smallNextButton'), 'disabled');
+                }
+        },
+
+        //'disableNext': function () {
+        //      MochiKit.DOM.addElementClass(this.getElement('nextButton'), 'disabled');
+        //},
+
+        //-------------------------------------------------------------------------
+
+        'cursorMoved': function () {
+                MochiKit.Style.setElementPosition(this.getElement('marker'), {x:this.markerStepOffset() * this.currentStep() + this.markerInitialOffset()})
+                MochiKit.Signal.signal(this, 'cursorMoved');
+                
+                MochiKit.DOM.addElementClass(this.getElement('steps').childNodes[this.currentStep()], 'selected');
+                MochiKit.DOM.addElementClass(this.getElement('dots').childNodes[this.currentStep()], 'selected');
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setDisplayMode': function (aValue) {
+                MochiKit.DOM.removeElementClass(this.getElement('rulerWrapper'), 'fixed');
+                MochiKit.DOM.removeElementClass(this.getElement('rulerWrapper'), 'scrollable');
+                MochiKit.DOM.addElementClass(this.getElement('rulerWrapper'), aValue);
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/TabSidePanel.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/TabSidePanel.js
new file mode 100644
index 0000000..39a1ccb
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/TabSidePanel.js
@@ -0,0 +1,193 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.TabSidePanel = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.TabSidePanel.superclass.constructor.call(this, args);
+
+        this._element = args.element || null;
+
+        this._slots = {
+        };
+                
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.TabSidePanel, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.TabSidePanel component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deselectAllTabs': function() {
+                var tabListItems;
+                
+                tabListItems = [
+                        'cardsLI',
+        //              'directLoginLI',
+                        'accountLI',
+                        'dataLI',
+                        'toolsLI'
+                ];
+                
+//Clipperz.log("=== TabSidePanel.tabSelected anEvent.src().id", anEvent.src().id);
+                for (var i in tabListItems) {
+//Clipperz.log("=== TabSidePanel.tabSelected aTabListItem", tabListItems[i]); 
+                        MochiKit.DOM.removeElementClass(this.getId(tabListItems[i]), 'selected');
+                }
+        },
+        
+        'selectTab': function(aTabName) {
+                this.deselectAllTabs();
+                MochiKit.DOM.addElementClass(this.getId(this.listItemIdForTabNamed(aTabName)), 'selected');
+                MochiKit.Signal.signal(this, 'tabSelected', aTabName);
+        },
+
+        'tabNameForAnchorId': function(anId) {
+                var result;
+                
+                switch(anId) {
+                        case 'cards_tabSidePanel':
+                                result = 'cards';
+                                break;
+        //              case 'directLogins_tabSidePanel':
+        //                      result = 'directLogins';
+        //                      break;
+                        case 'account_tabSidePanel':
+                                result = 'account';
+                                break;
+                        case 'data_tabSidePanel':
+                                result = 'data';
+                                break;
+                        case 'tools_tabSidePanel':
+                                result = 'tools';
+                                break;
+                }
+                
+                return result;
+        },
+        
+        'listItemIdForTabNamed': function(aTabName) {
+                var result;
+                
+                switch (aTabName) {
+                        case 'cards':
+                                result = 'cardsLI';
+                                break;
+        //              case 'directLogins':
+        //                      result = 'directLoginLI';
+        //                      break;
+                        case 'account':
+                                result = 'accountLI';
+                                break;
+                        case 'data':
+                                result = 'dataLI';
+                                break;
+                        case 'tools':
+                                result = 'toolsLI';
+                                break;
+                }
+                
+                return result;
+        },
+        
+        'tabSelected': function (anEvent) {
+                this.selectTab(this.tabNameForAnchorId(anEvent.src().id));
+        //      anEvent.stop();
+                anEvent.preventDefault();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'addCard': function (anEvent) {
+                anEvent.stop();
+                MochiKit.Signal.signal(this, 'addCard', anEvent.src());
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'header'},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'ul', cls:'mainTabs', children:[
+                                        {tag:'li', id:this.getId('cardsLI'), cls:'cards', children:[
+                                                {tag:'a', id:'cards_tabSidePanel', href:'#', html:"cards"},
+                                                {tag:'div', cls:'selectionHighlighter', children:[
+                                                        {tag:'img', src:'./images/old/main/tabs/selectionHighligher.png'},
+                                                        {tag:'a', id:this.getId('addCardA'), cls:'add', href:'#', children:[
+                                                                {tag:'span', html:"add"},
+                                                                {tag:'h3', html:"+"}
+                                                        ]}
+                                                ]}
+                                        ]}
+                                ]},
+                                {tag:'ul', cls:'otherTabs', children:[
+                                        {tag:'li', id:this.getId('accountLI'), children:[
+                                                {tag:'a', id:'account_tabSidePanel', href:'#', html:"account"},
+                                                {tag:'div', cls:'selectionHighlighter', children:[
+                                                        {tag:'img', src:'./images/old/main/tabs/selectionHighligherGray.png'}
+                                                ]}
+                                        ]},
+                                        {tag:'li', id:this.getId('dataLI'), children:[
+                                                {tag:'a', id:'data_tabSidePanel', href:'#', html:"data"},
+                                                {tag:'div', cls:'selectionHighlighter', children:[
+                                                        {tag:'img', src:'./images/old/main/tabs/selectionHighligherGray.png'}
+                                                ]}
+                                        ]},
+                                        {tag:'li', id:this.getId('toolsLI'), children:[
+                                                {tag:'a', id:'tools_tabSidePanel', href:'#', html:"tools"},
+                                                {tag:'div', cls:'selectionHighlighter', children:[
+                                                        {tag:'img', src:'./images/old/main/tabs/selectionHighligherGray.png'}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]);
+        
+                MochiKit.Signal.connect('cards_tabSidePanel', 'onclick', this, 'tabSelected');
+        //      MochiKit.Signal.connect('directLogins_tabSidePanel', 'onclick', this, 'tabSelected');
+                MochiKit.Signal.connect('account_tabSidePanel', 'onclick', this, 'tabSelected');
+                MochiKit.Signal.connect('data_tabSidePanel', 'onclick', this, 'tabSelected');
+                MochiKit.Signal.connect('tools_tabSidePanel', 'onclick', this, 'tabSelected');
+                MochiKit.Signal.connect(this.getId('addCardA'), 'onclick', this, 'addCard');
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/TextColumnManager.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/TextColumnManager.js
new file mode 100644
index 0000000..97e81b4
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/TextColumnManager.js
@@ -0,0 +1,53 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+//#############################################################################
+
+Clipperz.PM.UI.Web.Components.TextColumnManager = function(args) {
+        args = args || {};
+        Clipperz.PM.UI.Web.Components.TextColumnManager.superclass.constructor.call(this, args);
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.TextColumnManager, Clipperz.PM.UI.Web.Components.ColumnManager, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.TextColumnManager component";
+        },
+        
+        //-----------------------------------------------------
+
+        '__syntax_fix__' : 'syntax fix'
+        
+});
+
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ToolsPanel.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ToolsPanel.js
new file mode 100644
index 0000000..179c495
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/ToolsPanel.js
@@ -0,0 +1,113 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.ToolsPanel = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.ToolsPanel.superclass.constructor.apply(this, arguments);
+        
+        this._initiallySelectedTab = args.selected || 'PASSWORD_GENERATOR';
+        this._tabPanelControllerConfiguration = {
+                'PASSWORD_GENERATOR': {
+                                tab:'passwordGeneratorTab',
+                                panel:'passwordGeneratorPanel'
+                },
+                'BOOKMARKLET': {
+                                tab:'bookmarkletTab',
+                                panel:'bookmarkletPanel'
+                },
+                'COMPACT_EDITION': {
+                                tab:'compactEditionTab',
+                                panel:'compactEditionPanel'
+                },
+                'HTTP_AUTH': {
+                                tab:'httpAuthTab',
+                                panel:'httpAuthPanel'
+                }
+        };
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.ToolsPanel, Clipperz.PM.UI.Common.Components.TabPanelComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.ToolsPanel component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'header', children:[
+                                {tag:'div', cls:'subPanelTabs', children:[
+                                        {tag:'ul', children:[
+                                                        {tag:'li', id:this.getId('passwordGeneratorTab'),children:[{tag:'a', href:'#', html:'Password generator'}], cls:'first'},
+                                                        {tag:'li', id:this.getId('bookmarkletTab'),             children:[{tag:'a', href:'#', html:'Bookmarklet'}]},
+                                                        {tag:'li', id:this.getId('compactEditionTab'),  children:[{tag:'a', href:'#', html:'Compact edition'}]},
+                                                        {tag:'li', id:this.getId('httpAuthTab'),                children:[{tag:'a', href:'#', html:'HTTP Auth'}]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'div', cls:'accountPanel', children:[
+                                        {tag:'div', cls:'subPanelContent', children:[
+                                                {tag:'ul', children:[
+                                                                {tag:'li', id:this.getId('passwordGeneratorPanel'),children:[
+                                                                {tag:'h3', html:"Password generator"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('bookmarkletPanel'),children:[
+                                                                {tag:'h3', html:"Bookmarklet"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('compactEditionPanel'),        children:[
+                                                                {tag:'h3', html:"Compact edition"}
+                                                        ]},
+                                                                {tag:'li', id:this.getId('httpAuthPanel'),      children:[
+                                                                {tag:'h3', html:"HTTP Auth"}
+                                                        ]}
+                                                ]}
+                                        ]}
+                                ]}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]);
+
+                this.tabPanelController().setup({selected:this.initiallySelectedTab()});
+        },
+        
+        //-------------------------------------------------------------------------
+
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UnlockPasswordComponent.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UnlockPasswordComponent.js
new file mode 100644
index 0000000..5b9d522
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UnlockPasswordComponent.js
@@ -0,0 +1,184 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.UnlockPasswordComponent = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.UnlockPasswordComponent.superclass.constructor.apply(this, arguments);
+
+                this._openFromElement                   = args.openFromElement          || null;
+                this._onOkCloseToElement                = args.onOkCloseToElement       || null;
+                this._onCancelCloseToElement    = args.onCancelCloseToElement|| null;
+
+        this._progressBarComponent = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UnlockPasswordComponent, Clipperz.PM.UI.Common.Components.SimpleMessagePanel, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.UnlockPasswordComponent component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'getPassphrase': function () {
+        /*      var deferredResult;
+
+                if (this.passphrase() == null) {
+                        this.deferredShowModal({'openFromElement': this.openFromElement()});
+                        deferredResult = this.deferred();
+                } else {
+                        deferredResult = MochiKit.Async.succeed(this.passphrase());
+                }
+
+                return deferredResult;
+*/
+
+                this.deferredShowModal({'openFromElement': this.openFromElement()});
+
+                return this.deferred();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'deferredShowModal': function (someParameters) {
+                return Clipperz.Async.callbacks("UnlockPasswordComponent.deferredShowModal", [
+                        MochiKit.Base.bind(Clipperz.PM.UI.Web.Components.UnlockPasswordComponent.superclass.deferredShowModal, this, someParameters),
+                        MochiKit.Base.method(this, 'getElement', 'passphrase'),
+                        MochiKit.Base.methodcaller('focus')
+                ], {trace:false})
+        },
+
+        //-------------------------------------------------------------------------
+
+        'openFromElement': function () {
+                return this._openFromElement;
+        },
+
+        'onOkCloseToElement': function () {
+                return this._onOkCloseToElement;
+        },
+        
+        'onCancelCloseToElement': function () {
+                return this._onCancelCloseToElement;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function() {
+                Clipperz.PM.UI.Web.Components.UnlockPasswordComponent.superclass.renderSelf.apply(this, arguments);
+                
+                this.append(this.getElement('container'), {tag:'div', cls:'passphrase', children: [
+        //              {tag:'form', id:this.getId('passphraseForm'), children:[
+                                {tag:'input', id:this.getId('passphrase'), type:'password', name:'passphrase', value:''}
+        //              ]}
+                ]});
+                
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'userSuccessfullyLoggedIn', this, 'userSuccessfullyLoggedInHandler');
+                        MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'userLoginFailed',          this, 'userLoginFailedHandler');
+
+                
+        //      MochiKit.Async.callLater(0.1, MochiKit.Base.method(this.getElement('passphrase'), 'focus'));
+        //      this.getElement('passphrase').select();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showProgressBar': function () {
+                        varprogressBarElement;
+                
+                this.getElement('container').innerHTML = '';
+
+                progressBarElement = this.append(this.getElement('container'), {tag:'div', cls:'progressBarWrapper'});
+                this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':progressBarElement}));
+                
+                this.setButtons([{text:"Cancel", result:'CANCEL'}]);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showFailure': function () {
+                this.setType('ALERT');
+                this.setTitle("Login failed");
+                this.setText("Wrong passphrase; the unlock has failed.");
+                this.getElement('container').innerHTML = '';
+                this.setButtons([{text:"Close", result:'CANCEL', isDefault:true}]);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'closeOk': function () {
+                var passphrase;
+                
+                passphrase = this.getElement('passphrase').value;
+                this.showProgressBar();
+        //      this.deferred().callback(passphrase);
+                MochiKit.Async.callLater(0.5, MochiKit.Base.method(this.deferred(), 'callback', passphrase));
+                this._deferred = null;
+        },
+        
+        'closeCancel': function () {
+                this.deferredHideModal({closeToElement:this.onCancelCloseToElement()});
+                this.deferred().cancel();
+                this._deferred = null;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'userSuccessfullyLoggedInHandler': function (anEvent) {
+                this.deferredHideModal({closeToElement:this.onOkCloseToElement()});
+        },
+        
+        'userLoginFailedHandler': function (anEvent) {
+//console.log("############### FAILED LOGIN ################");
+                this.showFailure();
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'deferredShow': function (someArgs, aResult) {
+                this.deferredShowModal(someArgs);
+
+        //      this.deferred().addMethod(this, 'deferredHideModal', {closeToElement:someArgs.onOkCloseToElement });
+        //      this.deferred().addErrback (MochiKit.Base.method(this, 'deferredHideModal', {closeToElement:someArgs.onCancelCloseToElement }));
+        //      this.deferred().addCallback(MochiKit.Async.succeed, aResult);
+
+                return this.deferred();
+        },
+*/
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js
new file mode 100644
index 0000000..f26118e
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js
@@ -0,0 +1,346 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
+
+Clipperz.PM.UI.Web.Components.UserInfoBox = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Components.UserInfoBox.superclass.constructor.apply(this, arguments);
+
+                this._slots = {};
+        this._isLocked = false;
+        this._lockTooltip = null;
+        
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.Web.Components.UserInfoBox component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleLogout': function(anEvent) {
+//Clipperz.log(">>> UserInfoBox.handleLogout");
+                anEvent.preventDefault();
+                MochiKit.Signal.signal(this, 'logout');
+//Clipperz.log("<<< UserInfoBox.handleLogout");
+        },
+
+        //-------------------------------------------------------------------------
+
+        'lockTooltip': function () {
+                return this._lockTooltip;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'isLocked': function () {
+                return this._isLocked;
+        },
+        
+        'setIsLocked': function (aValue) {
+                this._isLocked = aValue;
+        },
+
+        'toggleLock': function(anEvent) {
+                var deferredResult;
+                var shouldLock;
+
+//console.log(">>> UserInfoBox.toggleLock [locked: " + this.isLocked() + "]");
+                anEvent.preventDefault();
+                this.lockTooltip().hide();
+
+                shouldLock = (this.isLocked() == false);
+
+                if (shouldLock) {
+                        var maskElement;
+
+                        this.setIsLocked(true);
+                        maskElement = this.getId('modalDialogMask');
+                        deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [lock]", [
+                                MochiKit.Base.partial(MochiKit.DOM.addElementClass, this.element(), 'locked'),
+                                MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.appear, maskElement, {from:0.0, to:0.75, duration:0.5}),
+                                MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', MochiKit.Base.method(this, 'askForPassphrase')),
+                                MochiKit.Base.partial(MochiKit.Signal.signal, this, 'lock')
+                        ], {trace:false});
+                } else {
+                        deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [unlock]", [
+                                MochiKit.Base.partial(MochiKit.Signal.signal, this, 'unlock')
+                        ], {trace:false});
+                }
+//console.log("<<< UserInfoBox.toggleLock");
+                
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'unlock': function () {
+                var deferredResult;
+                var maskElement;
+                
+                this.setIsLocked(false);
+                maskElement = this.getId('modalDialogMask');
+                
+                deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [
+                        MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}),
+        //              Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}),
+                        MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'askForPassphrase': function () {
+                        varunlockPasswordComponent;
+/*
+                        vardeferredResult;
+                
+                deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false});
+                deferredResult.addCallback(MochiKit.Async.succeed, 'test');
+                
+                deferredResult.callback();
+                
+                return deferredResult;
+*/
+//console.log(">>> UserInfoBox.askForPassphrase");
+                unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({
+                                'title':"Unlock account",
+                                'text':         "Insert the passprase to unlock the account",
+                                'type':         'INFO',
+                        'buttons': [
+                                        {text:"Cancel",result:'CANCEL'},
+                                        {text:"Unlock",         result:'OK',isDefault:true}
+                        ],
+                                'openFromElement':              this.getElement('lock'),
+                                'onOkCloseToElement':   null,
+                                'onCancelCloseToElement':this.getId('lock')
+                });
+//console.log("<<< UserInfoBox.askForPassphrase");
+
+                return unlockPasswordComponent.getPassphrase();
+        },
+
+        //=========================================================================
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+        //              {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'},
+                        {tag:'div', cls:'header', children:[
+                                {tag:'h1', html:"Welcome"},
+                                {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:'&nbsp;'}
+                        ]},
+                        {tag:'div', cls:'body', children:[
+                                {tag:'h3', id:this.getId('username'), html:""},
+                                {tag:'ul', children:[
+                                        {tag:'li', id:this.getId('cards'), children:[
+                                                {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"},
+                                                {tag:'span', id:this.getId('cardsLabel'), html:"cards"}
+                                        ]},
+                                        {tag:'li', id:this.getId('directLogins'), children:[
+                                                {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"},
+                                                {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"}
+                                        ]}
+                                ]},
+                                {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"}
+                        ]},
+                        {tag:'div', cls:'footer'}
+                ]);
+
+                MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout');
+                MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock');
+
+                this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({
+                                element:this.getElement('lock'),
+                                text:   "Click here to lock/unlock your account.",
+                                position:'RIGHT'
+                });
+
+                Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body,
+                        {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[
+                                {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'}
+                        ]}
+                );
+                MochiKit.Style.hideElement(this.getId('modalDialogMask'));
+                
+        //      this.drawUserInfoBackground(this.getElement('canvas'));
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'drawUserInfoBackground': function (canvas) {
+                var kMyDrawingFunctionWidth = 188.0;
+                var kMyDrawingFunctionHeight = 154.0;
+
+                var context = canvas.getContext("2d");
+                var color;
+                var resolution;
+                var alignStroke;
+                var path;
+                var pointX;
+                var pointY;
+                var controlPoint1X;
+                var controlPoint1Y;
+                var controlPoint2X;
+                var controlPoint2Y;
+                var gradient;
+                if (window.devicePixelRatio)
+                        resolution = window.devicePixelRatio;
+                else
+                        resolution = 1.0;
+                resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight);
+        
+                context.save();
+                context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight);
+                context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight);
+        
+                // Setup for Shadow Effect
+                color = "rgba(0.0%, 0.0%, 0.0%, 0.667)";
+                context.save();
+                context.shadowColor = color;
+                context.shadowBlur = 3.0;
+                context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution;
+                context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution;
+        
+                // Layer 1
+        
+                alignStroke = 0.0;
+                context.beginPath();
+                pointX = 169.5;
+                pointY = 141.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                context.moveTo(pointX, pointY);
+                pointX = 177.5;
+                pointY = 133.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                controlPoint1X = 173.889;
+                controlPoint1Y = 141.5;
+                controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+                controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+                controlPoint2X = 177.5;
+                controlPoint2Y = 137.889;
+                controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+                controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+                context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+                pointX = 177.5;
+                pointY = 19.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                context.lineTo(pointX, pointY);
+                pointX = 169.5;
+                pointY = 11.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                controlPoint1X = 177.5;
+                controlPoint1Y = 15.111;
+                controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+                controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+                controlPoint2X = 173.889;
+                controlPoint2Y = 11.5;
+                controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+                controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+                context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+                pointX = 18.5;
+                pointY = 11.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                context.lineTo(pointX, pointY);
+                pointX = 10.5;
+                pointY = 19.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                controlPoint1X = 14.111;
+                controlPoint1Y = 11.5;
+                controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+                controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+                controlPoint2X = 10.5;
+                controlPoint2Y = 15.111;
+                controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+                controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+                context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+                pointX = 10.5;
+                pointY = 133.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                context.lineTo(pointX, pointY);
+                pointX = 18.5;
+                pointY = 141.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                controlPoint1X = 10.5;
+                controlPoint1Y = 137.889;
+                controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution;
+                controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution;
+                controlPoint2X = 14.111;
+                controlPoint2Y = 141.5;
+                controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution;
+                controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution;
+                context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY);
+                pointX = 169.5;
+                pointY = 141.5;
+                pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution;
+                pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution;
+                context.lineTo(pointX, pointY);
+                context.closePath();
+                gradient = context.createLinearGradient(94.0, 11.5, 94.0, 141.5);
+                color = "#EE9B69";
+                gradient.addColorStop(0.0, color);
+                color = "#E38D62";
+                gradient.addColorStop(1.0, color);
+                context.fillStyle = gradient;
+                context.fill();
+        
+                // Shadow Effect
+                context.restore();
+        
+                context.restore();
+        },
+*/
+        //-------------------------------------------------------------------------
+
+        'updateUserDetails': function (someUserInfo) {
+                        varelementName;
+                
+                for (elementName in someUserInfo) {
+                        this.getElement(elementName).innerHTML = someUserInfo[elementName];
+                }
+        },
+
+        //-------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/AppController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/AppController.js
new file mode 100644
index 0000000..05563bf
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/AppController.js
@@ -0,0 +1,329 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.AppController = function(args) {
+
+        this._user = null;
+        this._tabSlotNames = {
+                        //tabName:       slotName
+                        'cards':        'cardGrid',
+        //              'directLogins':'directLoginGrid',
+                        'account':      'accountPanel',
+                        'data':                 'dataPanel',
+                        'tools':        'toolsPanel'
+        };
+        
+        //controllers
+                this._cardsController= null;
+        //this._directLoginsController = null;
+                this._filterController  = null;                 //new Clipperz.PM.UI.Web.Controllers.FilterController();
+        
+        //components
+        this._appPage = null;
+        this._userInfoBox = null;
+        this._tabSidePanel = null;
+
+        //      MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'editCard',         this, 'handleEditCard');
+        //      MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'deleteCard',this, 'handleDeleteCard');
+
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'userDataSuccessfullySaved',this, 'userDataSuccessfullySavedHandler');
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Web.Controllers.AppController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.AppController";
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'setUser': function(anUser) {
+                this._user = anUser;
+        },
+        
+        'user': function() {
+                return this._user;
+        },
+
+        //-----------------------------------------------------------------------------
+        /*
+        'tabSlotNames': function() {
+                return this._tabSlotNames;
+        },
+*/
+        'slotNameForTab': function(aTabName) {
+                return this._tabSlotNames[aTabName];
+        },
+        
+        'hideAllAppPageTabSlots': function() {
+                var aTabName;
+                
+                for (aTabName in this._tabSlotNames) {
+                        this.appPage().hideSlot(this.slotNameForTab(aTabName));
+                }
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'appPage': function() {
+                if (this._appPage == null) {
+                        this._appPage = new Clipperz.PM.UI.Web.Components.AppPage();
+                }
+                
+                return this._appPage;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'tabSidePanel': function() {
+                if (this._tabSidePanel == null) {
+                        this._tabSidePanel = new Clipperz.PM.UI.Web.Components.TabSidePanel();
+                }
+                
+                return this._tabSidePanel;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'userInfoBox': function() {
+                if (this._userInfoBox == null) {
+                        this._userInfoBox = new Clipperz.PM.UI.Web.Components.UserInfoBox();
+                        
+                                MochiKit.Signal.connect(this._userInfoBox, 'logout',this, 'handleLogout');
+                                MochiKit.Signal.connect(this._userInfoBox, 'lock',      this, 'handleLock');
+                                MochiKit.Signal.connect(this._userInfoBox, 'unlock',this, 'handleUnlock');
+                }
+                
+                return this._userInfoBox;
+        },
+
+        //-----------------------------------------------------------------------------
+
+                'accountPanel': function () {
+                if (this._accountPanel == null) {
+                        this._accountPanel = new Clipperz.PM.UI.Web.Components.AccountPanel(/*{selected:'Preferences'}*/);
+                }
+                
+                return this._accountPanel;
+        },
+
+        //.........................................................................
+
+                'dataPanel': function () {
+                if (this._dataPanel == null) {
+                        this._dataPanel = new Clipperz.PM.UI.Web.Components.DataPanel();
+                }
+                
+                return this._dataPanel;
+        },
+        
+        //.........................................................................
+
+                'toolsPanel': function () {
+                if (this._toolsPanel == null) {
+                        this._toolsPanel = new Clipperz.PM.UI.Web.Components.ToolsPanel();
+                }
+                
+                return this._toolsPanel;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'filterController': function () {
+                if (this._filterController == null) {
+                        this._filterController = new Clipperz.PM.UI.Web.Controllers.FilterController();
+                }
+                
+                return this._filterController;
+        },
+        
+        'cardsController': function() {
+                if (this._cardsController == null) {
+                        this._cardsController = new Clipperz.PM.UI.Web.Controllers.CardsController({'filterController':this._filterController});
+                }
+                
+                return this._cardsController;
+        },
+        
+        //-----------------------------------------------------------------------------
+/*
+        'directLoginsController': function() {
+//Clipperz.log(">>> AppController.directLoginsController");
+                if (this._directLoginsController == null) {
+                        this._directLoginsController = new Clipperz.PM.UI.Web.Controllers.DirectLoginsController({'filterController':this._filterController});
+                }
+//Clipperz.log("<<< AppController.directLoginsController");
+                
+                return this._directLoginsController;
+        },
+*/
+        //-----------------------------------------------------------------------------
+
+        'populateUserInfo': function() {
+                var deferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("AppController.populateUserInfo", {trace:false});
+                deferredResult.collectResults({
+                                'username':MochiKit.Base.methodcaller('displayName'),
+                                'cardsNumber':[
+                                MochiKit.Base.methodcaller('getRecords'),
+                                function (someResults) { return someResults.length; }
+                        ],
+                        'directLoginsNumber': [
+                                MochiKit.Base.methodcaller('getDirectLogins'),
+                                function (someResults) { return someResults.length; }
+                        ]
+                })
+                deferredResult.addMethod(this.userInfoBox(), 'updateUserDetails');
+                deferredResult.callback(this.user());
+
+                return deferredResult;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'run': function(args) {
+                var deferredResult;
+                        varslot;
+                        varpage;
+                var user;
+                
+                slot = args.slot;
+                user = args.user;
+
+                this.setUser(user);
+                
+                slot.setContent(this.appPage());
+
+                this.appPage().slotNamed('userInfoBox').setContent(this.userInfoBox());
+                this.appPage().slotNamed('tabSidePanel').setContent(this.tabSidePanel());
+
+                this.appPage().slotNamed('accountPanel').setContent(this.accountPanel());
+                this.appPage().slotNamed('dataPanel').setContent(this.dataPanel());
+                this.appPage().slotNamed('toolsPanel').setContent(this.toolsPanel());
+
+                this.hideAllAppPageTabSlots();
+                this.appPage().showSlot(this.slotNameForTab('cards'));
+                
+                        MochiKit.Signal.connect(this.tabSidePanel(),                            'tabSelected',this, 'handleTabSelected');
+                        MochiKit.Signal.connect(this.tabSidePanel(),                            'addCard',      this, 'handleAddCard');
+                        MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'addCard',  this, 'handleAddCard');
+
+                deferredResult = new Clipperz.Async.Deferred("AppController.run", {trace:false});
+
+                deferredResult.addMethod(this.cardsController(),        'run', {slot:this.appPage().slotNamed('cardGrid'), user:user});
+        //      deferredResult.addMethod(this.directLoginsController(), 'run', {slot:this.appPage().slotNamed('directLoginGrid'), user:user});
+                        deferredResult.addMethod(this,                                             'populateUserInfo');
+                
+                deferredResult.addCallback(MochiKit.Visual.ScrollTo, 'miscLinks', {duration:0});
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'CARDS_CONTROLLER_DID_RUN');
+                deferredResult.addMethod(this.tabSidePanel(), 'selectTab', 'cards');
+                deferredResult.callback();
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleTabSelected': function (selectedTabName) {
+                var aTabName;
+                var aSlotName;
+                
+//Clipperz.log(">>> AppController.handleTabSelected", selectedTabName); 
+                this.hideAllAppPageTabSlots();
+                this.appPage().showSlot(this.slotNameForTab(selectedTabName));
+
+                switch (selectedTabName) {
+                        case 'cards':
+                                this.cardsController().focus();
+                                break;
+        //              case 'directLogins':
+        //                      this.directLoginsController().focus();
+        //                      break;
+                        case 'data':
+                                break;
+                        case 'account':
+                                break;
+                        case 'tools':
+                                break;
+                }
+//Clipperz.log("<-- AppController.handleTabSelected", aTabName);
+        },
+        
+        //=============================================================================
+
+        'handleAddCard': function (aSourceElement) {
+//Clipperz.log("=== AppController.addCard", aSourceElement);
+                this.cardsController().addCard(aSourceElement);
+        },
+
+        //=============================================================================
+
+        'userDataSuccessfullySavedHandler': function (anEvent) {
+                this.populateUserInfo();
+        },
+
+        //=============================================================================
+
+        'handleLogout': function(anEvent) {
+                var deferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("AppController.handleLogout", {trace:false});
+                deferredResult.addMethod(this.user(), 'logout');
+                deferredResult.addCallback(MochiKit.Signal.signal, this, 'logout');
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleLock': function (anEvent) {
+                return Clipperz.Async.callbacks("AppController.handleLock", [
+                        MochiKit.Base.method(this.cardsController(), 'deleteAllCleanTextData'),
+                        MochiKit.Base.method(this.user(), 'lock')
+                ], {trace:false});
+        },
+
+        //.............................................................................
+
+        'handleUnlock': function (anEvent) {
+                return Clipperz.Async.callbacks("AppController.handleUnock", [
+                        MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress'),
+                        MochiKit.Base.method(this.user(), 'login'),
+                        MochiKit.Base.method(this.cardsController(), 'focus'),
+                        MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'progressDone'),
+                        MochiKit.Base.method(this.userInfoBox(), 'unlock')
+                ], {trace:false});
+        },
+
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/CardDialogController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/CardDialogController.js
new file mode 100644
index 0000000..2340aeb
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/CardDialogController.js
@@ -0,0 +1,652 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.CardDialogController = function(args) {
+        args = args || {};
+        
+        Clipperz.PM.UI.Web.Controllers.CardDialogController.superclass.constructor.call(this, args);
+        
+                this._record    = args.record   || Clipperz.Base.exception.raise('MandatoryParameter');
+                this._delegate  = args.delegate         || Clipperz.Base.exception.raise('MandatoryParameter');
+
+        this._referenceElement = null;
+        this._cardDialogComponent = null;
+
+        this._fieldsReferences = {};
+        this._directLoginReferences = {};
+
+        this._directLoginWizardController = null;
+        this._directLoginEditingComponent = null;
+        this._isDirectLoginEditingComponentVisible = false;
+
+        return this;
+};
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Controllers.CardDialogController, Object, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.CardDialogController";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'record': function () {
+                return this._record;
+        },
+
+        'delegate': function () {
+                return this._delegate;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'fieldsReferences': function () {
+                return this._fieldsReferences;
+        },
+
+        'directLoginReferences': function () {
+                return this._directLoginReferences;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'referenceElement': function () {
+                return this._referenceElement;
+        },
+
+        'setReferenceElement': function (anElement) {
+                this._referenceElement = anElement;
+         },
+
+        //-------------------------------------------------------------------------
+
+        'cardDialogComponent': function () {
+                if (this._cardDialogComponent == null) {
+                        this._cardDialogComponent = new Clipperz.PM.UI.Web.Components.CardDialogComponent();
+
+                                MochiKit.Signal.connect(this._cardDialogComponent, 'cancel',    this, 'handleCancel');
+                                MochiKit.Signal.connect(this._cardDialogComponent, 'save',              this, 'handleSave');
+
+                                MochiKit.Signal.connect(this._cardDialogComponent, 'addField',  this, 'handleAddField');
+                                MochiKit.Signal.connect(this._cardDialogComponent, 'changedValue',this, 'handleChangedValue');
+
+                        MochiKit.Signal.connect(this._cardDialogComponent, 'addDirectLogin',this, 'handleAddDirectLogin');
+                                MochiKit.Signal.connect(this._cardDialogComponent, 'keyPressed',this, 'handleCardDialogComponentKeyPressed');
+                }
+                
+                return this._cardDialogComponent;
+        },
+
+        //=========================================================================
+
+        'directLoginWizardController': function () {
+                if (this._directLoginWizardController == null) {
+                        this._directLoginWizardController = new Clipperz.PM.UI.Web.Controllers.DirectLoginWizardController({
+                                'cardLabel': this.cardDialogComponent().title(),
+                                'directLoginEditingComponent': this.directLoginEditingComponent()
+                        })
+
+                                MochiKit.Signal.connect(this._directLoginWizardController, 'exit',this, 'handleHideDirectLoginEditingComponent');
+                                MochiKit.Signal.connect(this._directLoginWizardController, 'done',this, 'handleCompleteDirectLoginEditingComponent');
+                }
+                
+                return this._directLoginWizardController;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'directLoginEditingComponent': function () {
+                if (this._directLoginEditingComponent == null) {
+                        this._directLoginEditingComponent = new Clipperz.PM.UI.Web.Components.DirectLoginEditingComponent();
+
+                        this.cardDialogComponent().renderDirectLoginEditingComponent(this._directLoginEditingComponent);
+                        
+        //                      MochiKit.Signal.connect(this._directLoginEditingComponent, 'back',              this, 'handleHideDirectLoginEditingComponent')
+        //                      MochiKit.Signal.connect(this._directLoginEditingComponent, 'changedValue',this, 'handleChangedValue');
+        //                      MochiKit.Signal.connect(this.__directLoginEditingComponent, 'keyPressed',this, 'handleDirectLoginEditingComponentKeyPressed');
+                }
+                
+                return this._directLoginEditingComponent;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'isDirectLoginEditingComponentVisible': function () {
+                return this._isDirectLoginEditingComponentVisible;
+        },
+        
+        'setIsDirectLoginEditingComponentVisible': function (aValue) {
+                this._isDirectLoginEditingComponentVisible = aValue;
+        },
+        
+        //=========================================================================
+
+        'run': function (anElement) {
+                var deferredResult;
+                
+                this.setReferenceElement(anElement);
+
+                deferredResult = new Clipperz.Async.Deferred("CardDialogController.run", {trace:false});
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress', {'steps':11});
+
+                deferredResult.addMethod(this.cardDialogComponent(), 'deferredShowModal', {openFromElement:this.referenceElement()});
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'advanceProgress');
+
+                deferredResult.addMethod(this.record(), 'label');
+                deferredResult.addMethod(this.cardDialogComponent(), 'setTitle');
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'advanceProgress');
+
+                deferredResult.addMethod(this, 'updateComponentState');
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'advanceProgress');
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'progressDone');
+
+                deferredResult.addMethod(this.cardDialogComponent(), 'fixRendering');
+                deferredResult.addMethod(this.cardDialogComponent(), 'hideProgressMask');
+                
+                if (this.record().isBrandNew()) {
+                        deferredResult.addMethod(this.cardDialogComponent(), 'setHintMode', 'ON');
+                        deferredResult.addMethod(this.cardDialogComponent(), 'setFocusOnTitleField');
+                }
+
+                deferredResult.addErrback(MochiKit.Base.method(this.cardDialogComponent(), 'showError'));
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+        //=========================================================================
+
+        'updateComponentState': function () {
+                return Clipperz.Async.callbacks("CardDialogController.updateComponentState", [
+                        MochiKit.Base.method(this.record(), 'hasPendingChanges'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'setShouldEnableSaving'),
+                
+                        MochiKit.Base.method(this.record(), 'label'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'setTitle'),
+                        MochiKit.Base.method(this.record(), 'notes'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'setNotes'),
+                
+                        MochiKit.Base.method(this.record(), 'fields'),
+                        MochiKit.Base.values,
+                        MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.method(this, 'addCardDialogComponentWithField')),
+
+                        MochiKit.Base.method(this.record(), 'directLogins'),
+                        MochiKit.Base.values,
+                        MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.method(this, 'addCardDialogComponentWithDirectLogin')),
+
+                        MochiKit.Base.method(this.cardDialogComponent(), 'resetNewFieldInputs'),
+                        MochiKit.Base.noop
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'addCardDialogComponentWithField': function (aField) {
+                        varfieldComponent;
+                
+                fieldComponent = new Clipperz.PM.UI.Web.Components.CardDialogRecordFieldComponent({reference: aField.reference()});
+                        MochiKit.Signal.connect(fieldComponent, 'changedValue',this, 'handleChangedValue');
+                MochiKit.Signal.connect(fieldComponent, 'performAction',this, 'handlePerformFieldAction');
+                        MochiKit.Signal.connect(fieldComponent, 'deleteField',this, 'handleDeleteField');
+
+        //      this.fieldsReferences().push({'field':aField, 'component':fieldComponent});
+                this.fieldsReferences()[aField.reference()] = {'field':aField, 'component':fieldComponent};
+
+                return Clipperz.Async.callbacks("CardDialogController.addCardDialogComponentWithField", [
+                        MochiKit.Base.method(this.cardDialogComponent(), 'addFieldRowComponent', fieldComponent),
+
+                        MochiKit.Base.method(aField, 'label'),
+                        MochiKit.Base.method(fieldComponent, 'setLabel'),
+                        MochiKit.Base.method(aField, 'value'),
+                        MochiKit.Base.method(fieldComponent, 'setValue'),
+                        MochiKit.Base.method(aField, 'actionType'),
+                        MochiKit.Base.method(fieldComponent, 'setActionType'),
+                        MochiKit.Base.method(aField, 'isHidden'),
+                        MochiKit.Base.method(fieldComponent, 'setIsHidden')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'addCardDialogComponentWithDirectLogin': function (aDirectLogin) {
+                var directLoginComponent;
+                
+                directLoginComponent = new Clipperz.PM.UI.Web.Components.CardDialogRecordDirectLoginComponent({reference: aDirectLogin.reference()});
+                        MochiKit.Signal.connect(directLoginComponent, 'changedValue',   this, 'handleChangedValue');
+                        MochiKit.Signal.connect(directLoginComponent, 'deleteDirectLogin',this, 'handleDeleteDirectLogin');
+                        MochiKit.Signal.connect(directLoginComponent, 'editDirectLogin',this, 'handleEditDirectLogin');
+                        MochiKit.Signal.connect(directLoginComponent, 'openDirectLogin',this, 'handleOpenDirectLogin');
+
+                this.directLoginReferences()[aDirectLogin.reference()] = {'directLogin':aDirectLogin, 'component':directLoginComponent};
+
+                return Clipperz.Async.callbacks("CardDialogController.addCardDialogComponentWithDirectLogin", [
+                        MochiKit.Base.method(this.cardDialogComponent(), 'addDirectLoginComponent', directLoginComponent),
+                        MochiKit.Base.method(this, 'refreshDirectLoginComponent', this.directLoginReferences()[aDirectLogin.reference()])
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'refreshDirectLoginComponent': function (aDirectLoginReference) {
+                return Clipperz.Async.callbacks("CardDialogController.refreshDirectLoginComponent", [
+                                MochiKit.Base.method(aDirectLoginReference['directLogin'],'favicon'),
+        //                      MochiKit.Base.method(aDirectLoginReference['directLogin'],'faviconData'),
+                                MochiKit.Base.method(aDirectLoginReference['component'],'setFavicon'),
+                                MochiKit.Base.method(aDirectLoginReference['directLogin'],'label'),
+                                MochiKit.Base.method(aDirectLoginReference['component'],'setLabel')
+                ], {trace:false});
+        },
+
+        'refreshDirectLoginComponents': function () {
+                return Clipperz.Async.callbacks("CardDialogController.refreshDirectLoginComponents", [
+                        MochiKit.Base.method(this, 'directLoginReferences'),
+                        MochiKit.Base.values,
+                        MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.method(this, 'refreshDirectLoginComponent')),
+                        Clipperz.Async.collectAll
+                ])
+        },
+
+        //-------------------------------------------------------------------------
+
+        'updateRecordValues': function () {
+                return Clipperz.Async.callbacks('CardDialogController.updateRecordValues', [
+                        MochiKit.Base.method(this.cardDialogComponent(), 'title'),
+                        MochiKit.Base.method(this.record(), 'setLabel'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'notes'),
+                        MochiKit.Base.method(this.record(), 'setNotes'),
+                        
+                        MochiKit.Base.method(this, 'fieldsReferences'),
+                        MochiKit.Base.values,
+                        MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.method(this, 'updateRecordFieldValues')),
+
+                        MochiKit.Base.method(this, 'directLoginReferences'),
+                        MochiKit.Base.values,
+                        MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.method(this, 'updateRecordDirectLoginValues')),
+
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'directLoginReference'),
+                        MochiKit.Base.method(this.record(), 'directLoginWithReference'),
+                        MochiKit.Base.method(this, 'updateRecordDirectLoginDetails'),
+
+                        MochiKit.Base.noop
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'updateRecordFieldValues': function (aFieldReference) {
+                var deferredResult;
+
+                deferredResult = Clipperz.Async.callbacks('CardDialogController.updateRecordFieldValues', [
+                                MochiKit.Base.method(aFieldReference['component'],'label'),
+                                MochiKit.Base.method(aFieldReference['field'],  'setLabel'),
+
+                                MochiKit.Base.method(aFieldReference['component'],'value'),
+                                MochiKit.Base.method(aFieldReference['field'],  'setValue'),
+
+                                MochiKit.Base.method(aFieldReference['component'],'isHidden'),
+                                MochiKit.Base.method(aFieldReference['field'],  'setIsHidden'),
+
+                                MochiKit.Base.method(aFieldReference['field'],  'actionType'),
+                                MochiKit.Base.method(aFieldReference['component'],'setActionType')
+                ], {trace:false});
+                
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'updateRecordDirectLoginValues': function (aDirectLoginReference) {
+                var deferredResult;
+
+                deferredResult = Clipperz.Async.callbacks('CardDialogController.updateRecordDirectLoginValues', [
+                        MochiKit.Base.method(aDirectLoginReference['component'], 'label'),
+                        MochiKit.Base.method(aDirectLoginReference['directLogin'], 'setLabel')
+                ], {trace:false});
+                
+                return deferredResult;
+        },
+        
+        //-------------------------------------------------------------------------
+
+        'updateRecordDirectLoginDetails': function (aDirectLogin) {
+                var result;
+
+                if (MochiKit.Base.isUndefinedOrNull(aDirectLogin)) {
+                        result = MochiKit.Async.succeed();
+                } else {
+                        result = Clipperz.Async.callbacks("CardDialogController.updateRecordDirectLoginDetails", [
+                                MochiKit.Base.method(this.directLoginEditingComponent(), 'label'),
+                                MochiKit.Base.method(aDirectLogin, 'setLabel'),
+                                MochiKit.Base.method(this.directLoginEditingComponent(), 'favicon'),
+                                MochiKit.Base.method(aDirectLogin, 'setFavicon')
+                        ], {trace:false});
+                }
+                
+                return result;
+        },
+
+        //=========================================================================
+
+        'addField': function () {
+                return this.record().addField({
+                        'label':this.cardDialogComponent().newFieldLabel(),
+                        'value':this.cardDialogComponent().newFieldValue(),
+                        'isHidden':this.cardDialogComponent().newFieldIsHidden()
+                });
+        },
+
+        'handleAddField': function () {
+                return Clipperz.Async.callbacks("CardDialogController.handleAddField", [
+                        MochiKit.Base.method(this, 'addField'),
+
+                        MochiKit.Base.method(this, 'addCardDialogComponentWithField'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'resetNewFieldInputs'),
+
+                        MochiKit.Base.method(this.cardDialogComponent(), 'fixRendering'),
+                        MochiKit.Base.method(this, 'handleChangedValue')
+                ], {trace:false})
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handlePerformFieldAction': function (aFieldID, aTargetElement) {
+//console.log("### targetElement", aTargetElement);
+                return Clipperz.Async.callbacks("CardDialogController.handleDeleteField", [
+                        MochiKit.Base.method(this.record(), 'fields'),
+                        MochiKit.Base.itemgetter(aFieldID),
+                        Clipperz.Async.collectResults("CardDialogController.handleDeleteField <collect results>", {
+                                        'value':MochiKit.Base.methodcaller('value'),
+                                        'type':         MochiKit.Base.methodcaller('actionType')
+                        }, {trace:false}),
+                        MochiKit.Base.bind(function (someValues) {
+                                switch (someValues['type']) {
+                                        case 'NONE':
+                                                throw "this event handler should not be triggered for fields with type 'NONE'";
+                                                break;
+                                        case 'URL':
+                                                var url;
+                                                
+                                                url = someValues['value'];
+                                                if (/^https?\:\/\//.test(url) == false) {
+                                                        url = 'http://' + url;
+                                                }
+                                                
+                                                window.open(url);
+                                                break;
+                                        case 'EMAIL':
+                                                var url;
+                                                
+                                                url = 'mailto:' + someValues['value'];
+                                                
+                                                MochiKit.DOM.currentWindow().location = url;
+                                                break;
+                                        case 'PASSWORD':
+//Clipperz.log("SHOW PASSWORD " + someValues['value']);
+                                                this.showPasswordTooltip(someValues['value'], aTargetElement);
+                                                break;
+                                }
+                        }, this)
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleDeleteField': function (aFieldID) {
+                return Clipperz.Async.callbacks("CardDialogController.handleDeleteField", [
+                        MochiKit.Base.method(this.record(), 'fields'),
+                        MochiKit.Base.itemgetter(aFieldID),
+                        MochiKit.Base.method(this.record(), 'removeField'),
+
+                        MochiKit.Base.method(this, 'fieldsReferences'),
+                        MochiKit.Base.itemgetter(aFieldID),
+                        MochiKit.Base.itemgetter('component'),
+
+                        function (aComponent) {
+                                return Clipperz.Async.callbacks("CardDialogController.handleDeleteField [fade and remove]", [
+                                                MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, aComponent.element(), {from:1.0, to:0.0, duration:0.5}),
+        //                                      Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, aComponent.element(), {from:1.0, to:0.0, duration:0.5}),
+                                        MochiKit.Base.method(aComponent, 'remove')
+                                ], {trace:false});
+                        },
+        
+                        MochiKit.Base.bind(function () {
+                                delete this.fieldsReferences()[aFieldID];
+                        }, this),
+
+                        MochiKit.Base.method(this.cardDialogComponent(), 'fixRendering'),
+                        MochiKit.Base.method(this, 'handleChangedValue')
+                ], {trace:false});
+        },
+
+        //=========================================================================
+
+        'handleDeleteDirectLogin': function(aDirectLoginReference) {
+                var cardDialogComponent;
+                
+                cardDialogComponent = this.cardDialogComponent();
+                
+                return Clipperz.Async.callbacks("CardDialogController.handleDeleteDirectLogin", [
+                        MochiKit.Base.method(this.record(), 'directLogins'),
+                        MochiKit.Base.itemgetter(aDirectLoginReference),
+                        MochiKit.Base.methodcaller('remove'),
+
+                        MochiKit.Base.method(this, 'directLoginReferences'),
+                        MochiKit.Base.itemgetter(aDirectLoginReference),
+                        MochiKit.Base.itemgetter('component'),
+
+                        function (aComponent) {
+                                return Clipperz.Async.callbacks("CardDialogController.handleDeleteDirectLogin [fade and remove]", [
+                                                MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade,   aComponent.element(), {from:1.0, to:0.0, duration:0.5}),//                                     Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, aComponent.element(), {from:1.0, to:0.0, duration:0.5}),
+        ///                             MochiKit.Base.method(aComponent, 'remove')
+                                        MochiKit.Base.method(cardDialogComponent, 'removeDirectLoginComponent', aComponent)
+                                ], {trace:false});
+                        },
+        
+                        MochiKit.Base.bind(function () {
+                                delete this.directLoginReferences()[aDirectLoginReference];
+                        }, this),
+
+                        MochiKit.Base.method(this.cardDialogComponent(), 'fixRendering'),
+                        MochiKit.Base.method(this, 'handleChangedValue')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleOpenDirectLogin': function (aDirectLoginReference) {
+                return Clipperz.Async.callbacks("CardDialogController.handleOpenDirectLogin", [
+                        MochiKit.Base.method(this.record(), 'directLoginWithReference', aDirectLoginReference),
+                        Clipperz.PM.UI.Common.Controllers.DirectLoginRunner.openDirectLogin
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleEditDirectLogin': function (aDirectLoginReference) {
+                return Clipperz.Async.callbacks("CardDialogController.handleEditDirectLogin", [
+                        MochiKit.Base.method(this, 'setIsDirectLoginEditingComponentVisible', true),
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setDirectLoginReference', aDirectLoginReference),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'placeDirectLoginEditingComponent'),
+                        MochiKit.Base.method(this.record(), 'directLoginWithReference', aDirectLoginReference),
+                        MochiKit.Base.method(this.directLoginWizardController(), 'runWithDirectLogin'),
+                        MochiKit.Base.method(this.directLoginWizardController(), 'fixRulerRendering', this.cardDialogComponent().displayMode()),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'showDirectLoginEditingComponent')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleHideDirectLoginEditingComponent': function () {
+                return Clipperz.Async.callbacks("CardDialogController.handleHideDirectLoginEditingComponent", [
+                        MochiKit.Base.method(this, 'setIsDirectLoginEditingComponentVisible', false),
+                        MochiKit.Base.method(this.directLoginWizardController(), 'hideRuler'),
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setDirectLoginReference', null),
+                        MochiKit.Base.method(this, 'refreshDirectLoginComponents'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'hideDirectLoginEditingComponent')
+                ], {trace:false})
+        },
+
+        'handleCompleteDirectLoginEditingComponent': function (someParameters) {
+                return Clipperz.Async.callbacks("CardDialogController.handleCompleteDirectLoginEditingComponent", [
+                        MochiKit.Base.method(this, 'setIsDirectLoginEditingComponentVisible', false),
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setDirectLoginReference', null),
+                        MochiKit.Base.partial(MochiKit.Async.succeed, someParameters['hasJustBeenAdded']),
+                        Clipperz.Async.deferredIf("CardDialogController.handleCompleteDirectLoginEditingComponent - should addTheEditedDirectLogin", [
+                                MochiKit.Base.method(this, 'addCardDialogComponentWithDirectLogin', someParameters['directLogin'])
+                        ], []),
+                        MochiKit.Base.method(this, 'refreshDirectLoginComponents'),
+                        MochiKit.Base.method(this, 'handleChangedValue'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'hideDirectLoginEditingComponent')
+                ], {trace:false})
+        },
+
+        //=========================================================================
+
+        'handleChangedValue': function () {
+                return Clipperz.Async.callbacks("CardDialogController.handleChangedValue", [
+                        MochiKit.Base.method(this, 'updateRecordValues'),
+                        MochiKit.Base.method(this.record(), 'hasPendingChanges'),
+                        MochiKit.Base.method(this.cardDialogComponent(), 'setShouldEnableSaving')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleSave': function () {
+                var deferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("CardDialogController.handleSave", {trace:false});
+                deferredResult.addCallbackPass(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress', {'steps':8});
+                deferredResult.addMethod(this.cardDialogComponent(), 'showProgressMask');
+                deferredResult.addMethod(this.cardDialogComponent(), 'newFieldHasPendingChanges');
+                deferredResult.addIf([
+                        MochiKit.Base.method(this, 'addField')
+                ], [])
+                deferredResult.addMethod(this, 'saveChanges');
+                deferredResult.addMethod(this.cardDialogComponent(), 'deferredHideModal', {closeToElement:null});
+                deferredResult.addMethod(this.cardDialogComponent(), 'remove');
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'cardDialogComponentClosed');
+                
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+        //.........................................................................
+
+        'saveChanges': function () {
+                var deferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("CardDialogController.handleSave", {trace:false});
+                deferredResult.addMethod(this.delegate(), 'saveChanges');
+deferredResult.addErrback(function (aValue) { Clipperz.log("SHIT HAPPENS!!"); return aValue; });
+
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleCancel': function () {
+                var deferredResult;
+
+                if (this.isDirectLoginEditingComponentVisible()) {
+                        deferredResult = this.handleHideDirectLoginEditingComponent();
+                } else {
+                        deferredResult = new Clipperz.Async.Deferred("CardDialogController.handleCancel", {trace:false});
+                //      deferredResult.addMethod(this.record(), 'hasPendingChanges'),
+                        deferredResult.addMethod(this.delegate(), 'hasPendingChanges'),
+                        deferredResult.addIf([
+                                MochiKit.Base.method(this.cardDialogComponent(), 'askConfirmationForLoosingPendingChanges')
+                        ], [])
+                        deferredResult.addMethod(this.delegate(), 'revertChanges');
+                        deferredResult.addMethod(this.cardDialogComponent(), 'deferredHideModal', {closeToElement:this.referenceElement()});
+                        deferredResult.addMethod(this.cardDialogComponent(), 'remove');
+                        deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'cardDialogComponentClosed');
+
+                        deferredResult.callback();
+                }
+                
+                return deferredResult;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleAddDirectLogin': function () {
+                return Clipperz.Async.callbacks("CardDialogController.handleAddDirectLogin", [
+                        MochiKit.Base.method(this.record(), 'createNewDirectLogin'),
+                        MochiKit.Base.bind(function (aDirectLogin) {
+                                return Clipperz.Async.callbacks("CardDialogController.handleAddDirectLogin - directLogin", [
+                                        MochiKit.Base.method(this.cardDialogComponent(), 'newFieldHasPendingChanges'),
+                                        Clipperz.Async.deferredIf("cardDialogComponent.newFieldHasPendingChanges", [
+                                                MochiKit.Base.method(this, 'handleAddField')
+                                        ], []),
+
+                                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setDirectLoginReference', aDirectLogin.reference()),
+                                        MochiKit.Base.method(this.cardDialogComponent(), 'placeDirectLoginEditingComponent'),
+                                        MochiKit.Base.method(this.directLoginWizardController(), 'runWithDirectLogin', aDirectLogin, true),
+                                        MochiKit.Base.method(this.directLoginWizardController(), 'fixRulerRendering', this.cardDialogComponent().displayMode()),
+                                        MochiKit.Base.method(this.cardDialogComponent(), 'showDirectLoginEditingComponent')
+                                ], {trace:false});
+                        }, this)
+                ], {trace:false});
+        },
+
+        //=========================================================================
+
+        'handleCardDialogComponentKeyPressed': function (anEvent) {
+                if ((anEvent.key().string == 'KEY_TAB') && this.cardDialogComponent().newFieldHasPendingChanges()) {
+                        anEvent.preventDefault();
+
+        //              MochiKit.Signal.signal(this.cardDialogComponent(), 'addField');
+                        this.handleAddField()
+                        this.cardDialogComponent().focusOnNewFieldLabel();
+                }
+        },
+
+        //=========================================================================
+
+        'showPasswordTooltip': function (aValue, anElement) {
+                        varpasswordTooltip;
+                
+                passwordTooltip = new Clipperz.PM.UI.Web.Components.PasswordTooltip({
+                        'referebceElement': anElement,
+                        'text': aValue
+                });
+                
+                passwordTooltip.show();
+                
+                
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/CardsController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/CardsController.js
new file mode 100644
index 0000000..b1a34b2
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/CardsController.js
@@ -0,0 +1,207 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.CardsController = function() {
+        Clipperz.PM.UI.Web.Controllers.CardsController.superclass.constructor.apply(this, arguments);
+
+        MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'cardDialogComponentClosed', this, 'handleHideCard');
+
+        return this;
+}
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Controllers.CardsController, Clipperz.PM.UI.Web.Controllers.GridController, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.CardsController";
+        },
+
+        'createGrid': function () {
+                var grid;
+                
+                grid = new Clipperz.PM.UI.Web.Components.GridComponent({columnsManagers: [
+                        new Clipperz.PM.UI.Web.Components.FaviconColumnManager({
+                                        'name':                 'Cards.favicon',
+                                        'selector':  MochiKit.Base.methodcaller('favicon'),
+                                        'cssClass':     'favicon'
+                        }),
+                        new Clipperz.PM.UI.Web.Components.LinkColumnManager({
+                                        'name':                 'Cards.title',
+                                        'selector':      MochiKit.Base.methodcaller('label'),
+                                        'label':        'title',
+                                        'cssClass':     'title',
+                                        'comparator': Clipperz.Base.caseInsensitiveCompare,
+                                        'sortable':       true,
+                                        'sorted':       'ASCENDING',
+        //                              'actionMethod': function(anObject, anEvent) { MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'editCard', {objectData:anObject, element:anEvent.src()})}
+                                        'actionMethod': MochiKit.Base.method(this, 'handleShowCard')
+                        }),
+                        new Clipperz.PM.UI.Web.Components.DirectLoginsColumnManager({
+                                        'name':                 'Cards.directLogins',
+                                        'selector':       MochiKit.Base.methodcaller('directLoginReferences'),
+                                        'label':        'direct logins',
+                                        'cssClass':     'directLogin'
+                        }),
+                        new Clipperz.PM.UI.Web.Components.DateColumnManager({
+                                        'name':                 'Cards.latestUpdate',
+                                        'selector':       MochiKit.Base.methodcaller('updateDate'),
+                                        'label':        'latest update',
+                                        'cssClass':     'latestUpdate',
+                                        'format':       'd-m-Y',
+                                        'comparator': MochiKit.Base.compare,
+                                        'sortable':      true,
+                                        'sorted':       'UNSORTED'
+                        }),
+                        new Clipperz.PM.UI.Web.Components.DeleteObjectColumnManager({
+                                        'name':                 'Cards.delete',
+                                        'selector':      MochiKit.Base.noop,
+                                        'cssClass':     'delete',
+        //                      'actionMethod':  function(anObject, anEvent) { MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'deleteCard', {objectData:anObject, element:anEvent.src()})}
+                                'actionMethod':  MochiKit.Base.method(this, 'handleDeleteCard')
+                        })
+                ]});
+
+                grid.setComponentForSlotNamed(new Clipperz.PM.UI.Web.Components.BookmarkletComponent(), 'headerSlot');
+
+                return grid;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'getRows': function () {
+                //TODO relying on user() in GridController, bad code smell :|
+                return this.user().getRecords();
+        },
+
+        //=============================================================================
+
+        'displayEmptyContent': function () {
+                        varemptyGridComponent;
+                
+                emptyGridComponent = new Clipperz.PM.UI.Web.Components.CreateNewCardSplashComponent();
+
+                return Clipperz.Async.callbacks("CardsController.displayEmptyContent", [
+                        MochiKit.Base.method(this.grid(), 'setNoRowsGridComponent', emptyGridComponent),
+                        MochiKit.Base.bind(Clipperz.PM.UI.Web.Controllers.CardsController.superclass.displayEmptyContent, this)
+                ], {trace:false});
+        },
+
+        'displaySelectedRows': function (aFilter) {
+                this.columnManagerWithName('Cards.directLogins').hideDirectLoginListPopup();
+                
+                return Clipperz.PM.UI.Web.Controllers.CardsController.superclass.displaySelectedRows.apply(this, arguments);
+        },
+
+        //=============================================================================
+
+        'handleShowCard': function (anObject, anEvent) {
+                var cardDialogController;
+
+                cardDialogController = new Clipperz.PM.UI.Web.Controllers.CardDialogController({record:anObject, delegate:this});
+                this.grid().selectRow(anObject);
+
+                cardDialogController.run(anEvent.src());
+        },
+
+        //.........................................................................
+
+        'handleHideCard': function () {
+                this.focus();
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'addCard': function (aSourceElement) {
+                return Clipperz.Async.callbacks("CardsController.addCard", [
+                        Clipperz.Async.collectResults("CardsController.addCard <inner results>", {
+                                'record': MochiKit.Base.method(this.user(), 'createNewRecord'),
+                                        'delegate':MochiKit.Base.partial(MochiKit.Async.succeed, this)
+                        }, {trace:false}),
+                        function (someParameters) {
+                                return new Clipperz.PM.UI.Web.Controllers.CardDialogController(someParameters);
+                        },
+                        MochiKit.Base.methodcaller('run', aSourceElement)
+                ], {trace:false});
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleDeleteCard': function (anObject, anEvent) {
+                var deferredResult;
+                var confirmationDialog;
+                
+        //      confirmationDialog = new Clipperz.PM.UI.Common.Components.SimpleMessagePanel({
+                confirmationDialog = new Clipperz.PM.UI.Common.Components.MessagePanelWithProgressBar({
+                                'title':"Delete Card",
+                                'text':         "Do you want to delete …",
+                                'type':         'ALERT',
+                        'buttons': [
+                                        {text:"Cancel",result:'CANCEL'},
+                                {text:"Delete", result:'OK', isDefault:true}
+                        ],
+                                'canCancelWhileProcessing':false
+                });
+
+                deferredResult = new Clipperz.Async.Deferred("AppController.handleDeleteCard", {trace:false});
+                deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress', {'steps':5}),
+                deferredResult.addMethod(this.grid(), 'selectRow', anObject);
+                deferredResult.addMethod(confirmationDialog, 'deferredShowModal', {
+                                'openFromElement':              anEvent.src(),
+                                'onOkCloseToElement':           null,   //MochiKit.DOM.currentDocument().body,
+                                'onCancelCloseToElement':anEvent.src()
+                });
+        //      deferredResult.addCallback(function () { Clipperz.log("DELETE: " + anObject.toString(), anObject); });
+                deferredResult.addMethod(this.user(), 'deleteRecord', anObject);
+                deferredResult.addBothPass(MochiKit.Base.method(this.grid(), 'unselectRow', anObject));
+                deferredResult.addMethod(this, 'saveChanges');
+                deferredResult.addMethod(confirmationDialog, 'deferredDone');
+                deferredResult.addErrbackPass(function (anError) {
+                        var result;
+                        
+                        if (! (anError instanceof MochiKit.Async.CancelledError)) {
+                                result = confirmationDialog.deferredError({
+                                                'type':         'ALERT',
+                                                'title':"Error",
+                                                'text':         Clipperz.PM.Strings.errorDescriptionForException(anError),
+                                                'buttons':[{text:"Close", result:'CANCEL', isDefault:true}]
+                                })
+                        } else {
+                                result = anError;
+                        }
+                        
+                        return result;
+                });
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/DirectLoginWizardController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/DirectLoginWizardController.js
new file mode 100644
index 0000000..38fdc08
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/DirectLoginWizardController.js
@@ -0,0 +1,611 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.DirectLoginWizardController = function(args) {
+                this._directLoginEditingComponent       = args.directLoginEditingComponent|| Clipperz.Base.exception.raise('MandatoryParameter');
+                this._cardLabel                                         = args.cardLabel                                || Clipperz.Base.exception.raise('MandatoryParameter');
+
+                MochiKit.Signal.connect(this._directLoginEditingComponent, 'changedValue',this, 'handleChangedValue');
+                MochiKit.Signal.connect(this._directLoginEditingComponent, 'moveForward',this, 'handleMoveForward');
+                MochiKit.Signal.connect(this._directLoginEditingComponent, 'keyPressed',this, 'handleDirectLoginEditingComponentKeyPressed');
+
+        this._directLogin = null;
+        this._directLoginHasJustBeenAdded = false;
+        
+        this._rulerComponent = null;
+
+        this._steps = null;
+        this._currentStepIndex = 0;
+        this._isNextEnabled = false;
+
+        this._recordFields = null;
+        this._originalBindings = null;
+
+        this._bindingComponents = [];
+        this._formValueComponents = [];
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Web.Controllers.DirectLoginWizardController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.DirectLoginWizardController";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'directLogin': function () {
+                return this._directLogin;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'directLoginHasJustBeenAdded': function () {
+                return this._directLoginHasJustBeenAdded;
+        },
+
+        'setDirectLoginHasJustBeenAdded': function (aValue) {
+                this._directLoginHasJustBeenAdded = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'directLoginEditingComponent': function () {
+                return this._directLoginEditingComponent;
+        },
+
+        //=============================================================================
+
+        'cardLabel': function () {
+                return this._cardLabel;
+        },
+
+        //=============================================================================
+
+        'resetCurrentStepIndex': function () {
+                this._currentStepIndex = 0;
+                this.rulerComponent().resetStatus();
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'enableNext': function (aValue) {
+                this.rulerComponent().enableNext(aValue);
+                this._isNextEnabled = aValue;
+        },
+        
+        'isNextEnabled': function () {
+                return this._isNextEnabled;
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'enablePrevious': function (aValue) {
+                this.rulerComponent().enablePrevious(aValue);
+        },
+        
+        //=============================================================================
+
+        'bindingComponents': function () {
+                return this._bindingComponents;
+        },
+        
+        'resetBindingComponents': function () {
+                this.directLoginEditingComponent().clearAllBindingsComponents();
+                this._bindingComponents = [];
+        },
+
+        //=============================================================================
+
+        'formValueComponents': function () {
+                return this._formValueComponents;
+        },
+
+        'resetFormValueComponents': function () {
+                this.directLoginEditingComponent().clearAllFormValueComponents();
+                this._formValueComponents = [];
+        },
+
+        //=============================================================================
+
+        'recordFields': function () {
+                return this._recordFields;
+        },
+        
+        'setRecordFields': function (aValue) {
+                this._recordFields = aValue;
+        },
+
+        'recordFieldWithReference': function (aReference) {
+                var matchingValues;
+                var result;
+
+                matchingValues = MochiKit.Base.filter(function (aField) { return aField['reference'] == aReference; }, this.recordFields());
+
+                if (matchingValues.length == 0) {
+                        result = null;
+                } else {
+                        result = matchingValues[0];
+                }
+                
+                return result;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'originalBindings': function () {
+                return this._originalBindings;
+        },
+        
+        'setOriginalBindings': function (aValue) {
+//console.log("BINDINGS", aValue);
+                this._originalBindings = aValue;
+        },
+
+        //=============================================================================
+
+        'rulerComponent': function () {
+                if (this._rulerComponent == null) {
+                        this._rulerComponent = new Clipperz.PM.UI.Web.Components.RulerComponent({
+                                translationContext:'Wizards.DirectLoginWizard'
+                        });
+                        this._rulerComponent.render();
+                        
+                                MochiKit.Signal.connect(this._rulerComponent, 'exit',           this, 'handleExit');
+                                MochiKit.Signal.connect(this._rulerComponent, 'done',           this, 'done');
+                                MochiKit.Signal.connect(this._rulerComponent, 'moveForward',this, 'handleMoveForward');
+                                MochiKit.Signal.connect(this._rulerComponent, 'moveBackward',this, 'handleMoveBackward');
+                                MochiKit.Signal.connect(this._rulerComponent, 'cursorMoved',this, 'handleCursorMoved');
+                }
+                
+                return this._rulerComponent;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'showRuler': function (someSteps) {
+                var rulerElement;
+
+                this.setSteps(someSteps);
+
+                rulerElement = this.rulerComponent().element();
+                this.directLoginEditingComponent().disableAllPanels();
+
+                MochiKit.Style.showElement(rulerElement);
+                MochiKit.Style.setElementPosition(rulerElement, {x:-1000, y:this.directLoginEditingComponent().bottomMargin()});
+                new MochiKit.Visual.Move(rulerElement, {
+                        x:0, y:this.directLoginEditingComponent().bottomMargin(),
+                        mode:'absolute',
+                        duration:1,
+                        afterFinish:MochiKit.Base.method(this, 'handleCursorMoved')
+                });
+        },
+
+        'fixRulerRendering': function (aValue) {
+                this.rulerComponent().setDisplayMode(aValue);
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'hideRuler': function () {
+                new MochiKit.Visual.Move(this.rulerComponent().element(), {x:-1000, mode:'relative', duration:1});
+        },
+
+        'doneWithRuler': function () {
+                var rulerComponentElement;
+                
+                rulerComponentElement = this.rulerComponent().element();
+                new MochiKit.Visual.Move(this.rulerComponent().element(), {
+                        x:1000,
+                        mode:'relative',
+                        duration:1,
+        //              afterFinish:MochiKit.Base.partial(MochiKit.Style.hideElement, rulerComponentElement)
+                        afterFinish:function () { MochiKit.Style.hideElement(rulerComponentElement); }
+                });
+        },
+
+        //=============================================================================
+
+        'addNewDirectLoginRulerSteps': function () {
+                return MochiKit.Base.concat([ 'LABEL'], this.editDirectLoginRulerSteps());
+                
+        },
+        
+        'editDirectLoginRulerSteps': function () {
+                return [ /*'TYPE',*/ 'CONFIGURATION', 'BINDINGS','FAVICON', 'DONE'];
+        },
+
+        //-------------------------------------------------------------------------
+
+        'runWithDirectLogin': function (aDirectLogin, hasJustBeenAdded) {
+                this._directLogin = aDirectLogin;
+                this.setDirectLoginHasJustBeenAdded(hasJustBeenAdded);
+
+                return Clipperz.Async.callbacks("DirectLoginWizardController.runWithDirectLogin", [
+                        MochiKit.Base.method(aDirectLogin, 'label'),
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setLabel'),
+
+                        MochiKit.Base.method(aDirectLogin, 'favicon'),
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setDirectLoginFavicon'),
+
+                        MochiKit.Base.method(aDirectLogin, 'bookmarkletConfiguration'),
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'setBookmarkletConfiguration'),
+
+                        MochiKit.Base.method(aDirectLogin, 'bindings'),
+                        MochiKit.Base.method(this, 'setOriginalBindings'),
+
+                        MochiKit.Base.method(aDirectLogin, 'record'),
+                        MochiKit.Base.methodcaller('fields'),
+                        MochiKit.Base.values,
+                        MochiKit.Base.partial(MochiKit.Base.map, Clipperz.Async.collectResults("Record.directLoginReferences - collectResults", {
+                                'reference': MochiKit.Base.methodcaller('reference'),
+                                'label': MochiKit.Base.methodcaller('label'),
+                                'isHidden': MochiKit.Base.methodcaller('isHidden'),
+                                'value': MochiKit.Base.methodcaller('value')
+                        }, {trace:false})),
+                        Clipperz.Async.collectAll,
+                        
+                        MochiKit.Base.method(this, 'setRecordFields'),
+
+                        MochiKit.Base.partial(MochiKit.Async.succeed, hasJustBeenAdded),
+                        Clipperz.Async.deferredIf("Direct login has just been added", [
+                                MochiKit.Base.method(this, 'addNewDirectLoginRulerSteps')
+                        ], [
+                                MochiKit.Base.method(this, 'editDirectLoginRulerSteps')
+                        ]),
+                        MochiKit.Base.method(this, 'showRuler')
+                ], {trace:false});
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'checkState': function () {
+                var enablePrevious;
+                var enableNext;
+
+                enablePrevious = true;
+                enableNext = false;
+
+                this.directLoginEditingComponent().disableAllPanels();
+
+                switch(this.currentStep()) {
+                        case 'LABEL':
+                                this.directLoginEditingComponent().enableLabelField();
+
+                                enableNext = (this.directLoginEditingComponent().label() != '');
+                                enablePrevious = false;
+                                break;
+                        case 'TYPE':
+                                this.directLoginEditingComponent().enableTypeField();
+
+                                enableNext = true;
+                                enablePrevious = true;
+                                break
+                        case 'CONFIGURATION':
+                                this.directLoginEditingComponent().enableConfigurationField();
+
+                                enableNext = (this.directLoginEditingComponent().bookmarkletConfiguration() != '');
+                                
+                                if (enableNext == true) {
+                                        try {
+                                                Clipperz.PM.DataModel.DirectLogin.checkBookmarkletConfiguration(this.directLoginEditingComponent().bookmarkletConfiguration());
+                                                this.directLoginEditingComponent().removeHighlightConfigurationSyntaxError();
+                                        } catch (e) {
+                                                this.directLoginEditingComponent().highlightConfigurationSyntaxError();
+                                                enableNext = false;
+                                        }
+                                }
+                                break;
+                        case 'BINDINGS':
+                                enableNext = MochiKit.Iter.every(this.bindingComponents(), function (aBindingComponent) { return aBindingComponent.selectedValue() != null; })
+                                this.directLoginEditingComponent().enableBindingFields();
+                                break;
+                        case 'FAVICON':
+                                enableNext = true;
+                                this.directLoginEditingComponent().enableFaviconField();
+                                break;
+                        case 'DONE':
+                                enableNext = true;
+                                this.directLoginEditingComponent().enableDonePanel();
+                                break;
+                }
+
+                if (this.currentStepIndex() > 0) {
+                        this.enablePrevious(enablePrevious);
+                } else {
+                        this.enablePrevious(false);
+                }
+                this.enableNext(enableNext);
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'setFocus': function () {
+                switch(this.currentStep()) {
+                        case 'LABEL':
+                                this.directLoginEditingComponent().focusOnLabelElement();
+                                break;
+                        case 'TYPE':
+                                break;
+                        case 'CONFIGURATION':
+                                this.directLoginEditingComponent().focusOnBookmarkletConfigurationElement();
+                                break;
+                        case 'BINDINGS':
+        //                      this.directLoginEditingComponent().getElement('???').focus();
+                                break;
+                        case 'FAVICON':
+                                this.directLoginEditingComponent().focusOnFaviconElement();
+                                break;
+                        case 'DONE':
+                                break;
+                }
+        },
+
+        //=============================================================================
+
+        'steps': function () {
+                return this._steps;
+        },
+
+        'setSteps': function (aValue) {
+                this._steps = aValue;
+
+                this.rulerComponent().setSteps(aValue);
+                this.resetCurrentStepIndex();
+        },
+        
+        'currentStepIndex': function () {
+                return this._currentStepIndex;
+        },
+        
+        'currentStep': function () {
+                return this.steps()[this.currentStepIndex()];
+        },
+
+        //=============================================================================
+
+        'handleExit': function () {
+                MochiKit.Signal.signal(this, 'exit');
+        },
+
+        'done': function () {
+                this.doneWithRuler();
+
+                Clipperz.Async.callbacks("DirectLoginWizardController.done", [
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'label'),
+                        MochiKit.Base.method(this.directLogin(), 'setLabel'),
+                        
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'bookmarkletConfiguration'),
+                        MochiKit.Base.method(this.directLogin(), 'setBookmarkletConfiguration'),
+
+                                //Bindings
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'bindingComponents'),
+        //              MochiKit.Base.partial(MochiKit.Base.map, MochiKit.Base.bind(function (aBindingComponent) {
+                        Clipperz.Async.forEach(MochiKit.Base.bind(function (aBindingComponent) {
+//console.log("aBindingComponent", aBindingComponent);
+        //                      this.directLogin().
+                                return Clipperz.Async.callbacks("DirectLoginWizardController.done - update directLogin bindings", [
+                                        MochiKit.Base.method(this.directLogin(), 'bindings'),
+                                        MochiKit.Base.itemgetter(aBindingComponent.formFieldName()),
+                                        MochiKit.Base.methodcaller('setFieldKey', aBindingComponent.selectedValue())
+                                ], {trace:false});
+                        }, this)),
+
+                        MochiKit.Base.method(this.directLoginEditingComponent(), 'favicon'),
+                        MochiKit.Base.method(this.directLogin(), 'setFavicon'),
+                        
+                        MochiKit.Base.partial(MochiKit.Signal.signal, this, 'done', {
+                                        'directLogin':  this.directLogin(),
+                                        'hasJustBeenAdded':this.directLoginHasJustBeenAdded()
+                        })
+                ], {trace:false});
+        },
+        
+        //=============================================================================
+
+        'handleMoveBackward': function () {
+                if (this._currentStepIndex > 0) {
+                                varafterMoveAction;
+
+                        this._currentStepIndex --;
+                        afterMoveAction = MochiKit.Base.noop;
+
+                        switch(this.currentStep()) {
+                                case 'LABEL':
+                                        break;
+                                case 'TYPE':
+                                        break;
+                                case 'CONFIGURATION':
+                                        break;
+                                case 'BINDINGS':
+                                        break;
+                                case 'FAVICON':
+                                        break;
+                                case 'DONE':
+                                        break;
+                        };
+
+                        this.rulerComponent().moveBackward(afterMoveAction);
+                }
+                
+                if (this._currentStepIndex == 0) {
+                        this.enablePrevious(false);
+                }
+        },
+
+        'handleMoveForward': function () {
+                if (this.isNextEnabled()) {
+                                varafterMoveAction;
+
+                        this._currentStepIndex ++;
+                        afterMoveAction = MochiKit.Base.noop;
+
+                        switch(this.currentStep()) {
+                                case 'LABEL':
+                                        break;
+                                case 'TYPE':
+                                        break;
+                                case 'CONFIGURATION':
+                                        break;
+                                case 'BINDINGS':
+                                        this.resetBindingComponents();
+                                        this.resetFormValueComponents();
+
+                                        afterMoveAction = MochiKit.Base.partial(Clipperz.Async.callbacks, "DirectLoginWizardController.handleMoveForward - BINDINGS", [
+                                                MochiKit.Base.method(this.directLogin(), 'setBookmarkletConfiguration', this.directLoginEditingComponent().bookmarkletConfiguration()),
+
+                                                MochiKit.Base.method(this.directLogin(), 'favicon'),
+                                                MochiKit.Base.method(this.directLoginEditingComponent(), 'setDirectLoginFavicon'),
+
+                                                MochiKit.Base.method(this.directLogin(), 'bindings'),
+                                                MochiKit.Base.values,
+                                                Clipperz.Async.forEach(MochiKit.Base.bind(function (aBinding) {
+                                                        var bindingComponent;
+
+                                                        bindingComponent = new Clipperz.PM.UI.Web.Components.DirectLoginEditingBindingComponent({
+                                                                formFieldName: aBinding.key(),
+                                                                fields: this.recordFields(),
+                                                                selectedFieldKey: aBinding.fieldKey()
+                                                        });
+
+                                                        this.bindingComponents().push(bindingComponent);
+
+                                                        MochiKit.Signal.connect(bindingComponent, 'bindChange', this, 'handleBindChange', bindingComponent);
+                                                        this.directLoginEditingComponent().addBindingComponent(bindingComponent);
+
+                                                }, this)),
+
+                                                MochiKit.Base.method(this.directLogin(), 'formValues'),
+                                                MochiKit.Base.values,
+                                                Clipperz.Async.forEach(MochiKit.Base.bind(function (aFormValue) {
+                                                        var formValueComponent;
+
+                                                        formValueComponent = new Clipperz.PM.UI.Web.Components.DirectLoginEditingFormValueComponent({
+                                                                'formFieldName': aFormValue.key(),
+                                                                        'fieldOptions': aFormValue.fieldOptions(),
+                                                                        'initialValue': aFormValue.value()
+                                                        });
+
+                                                        this.formValueComponents().push(formValueComponent);
+
+                                                        MochiKit.Signal.connect(formValueComponent, 'formValueChange', this, 'handleFormValueChange', formValueComponent);
+                                                        this.directLoginEditingComponent().addFormValueComponent(formValueComponent);
+                                                }, this))
+                                                
+                                        ], {trace:false});
+                                        
+                                        break;
+                                case 'FAVICON':
+                                        break;
+                                case 'DONE':
+                                        this.directLoginEditingComponent().setDoneDescriptionWithKeys({
+                                                '__cardName__': this.cardLabel(),
+                                                '__directLoginName__': this.directLoginEditingComponent().label()
+                                        });
+                                        break;
+                        };
+
+                        this.rulerComponent().moveForward(afterMoveAction);
+                };
+        },
+
+        'handleCursorMoved': function () {
+                this.checkState();
+                this.setFocus();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleChangedValue': function (anEvent) {
+                this.checkState();
+        },
+
+        //.........................................................................
+
+        'handleBindChange': function (aDirectLoginEditingBindingComponent) {
+                        varselectedField;
+
+                selectedField = this.recordFieldWithReference(aDirectLoginEditingBindingComponent.selectedValue());
+
+                return Clipperz.Async.callbacks("DirectLoginWizardController.handleBindChange", [
+                        MochiKit.Base.method(this.directLogin(), 'bindings'),
+                        MochiKit.Base.itemgetter(aDirectLoginEditingBindingComponent.formFieldName()),
+                        MochiKit.Base.methodcaller('setFieldKey', selectedField['reference']),
+                        function () {
+                                if (selectedField != null) {
+                                        aDirectLoginEditingBindingComponent.setFieldValue(selectedField['value']);
+                                        aDirectLoginEditingBindingComponent.setIsHidden(selectedField['isHidden']);
+                                } else {
+                                        aDirectLoginEditingBindingComponent.setFieldValue('');
+                                        aDirectLoginEditingBindingComponent.setIsHidden(false);
+                                }
+                        },
+                        MochiKit.Base.method(this, 'checkState')
+                ], {trace:false});
+        },
+
+        //.........................................................................
+
+        'handleFormValueChange': function (someOptions) {
+                return Clipperz.Async.callbacks("DirectLoginWizardController.handleFormValueChange", [
+                        MochiKit.Base.method(this.directLogin(), 'formValues'),
+                        MochiKit.Base.itemgetter(someOptions['fieldName']),
+                        MochiKit.Base.methodcaller('setValue', someOptions['selectedValue']),
+                        MochiKit.Base.method(this, 'checkState')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleDirectLoginEditingComponentKeyPressed': function (anEvent) {
+                if (anEvent.key().string == 'KEY_ENTER') {
+                        if (anEvent.target().nodeName != 'TEXTAREA') {
+                                anEvent.preventDefault();
+                                this.handleMoveForward();
+                        }
+                } else if (anEvent.key().string == 'KEY_TAB') {
+                        this.handleMoveForward();
+                        if ((anEvent.target().nodeName == 'INPUT') || (anEvent.target().nodeName == 'TEXTAREA')) {
+                                anEvent.preventDefault();
+                        }
+                } else if ((anEvent.key().string == 'KEY_ARROW_RIGHT') && (anEvent.modifier().meta == true)) {
+                        this.handleMoveForward();
+                } else if ((anEvent.key().string == 'KEY_ARROW_LEFT') && (anEvent.modifier().meta == true)) {
+                        this.handleMoveBackward();
+                } else if (anEvent.key().string == 'KEY_ESCAPE') {
+                        anEvent.stop();
+                        this.handleExit();
+                }
+        },
+
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/DirectLoginsController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/DirectLoginsController.js
new file mode 100644
index 0000000..28401a2
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/DirectLoginsController.js
@@ -0,0 +1,145 @@
+/*
+
+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/>.
+
+*/
+
+/*
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.DirectLoginsController = function() {
+        Clipperz.PM.UI.Web.Controllers.DirectLoginsController.superclass.constructor.apply(this, arguments);
+        
+        return this;
+};
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Controllers.DirectLoginsController, Clipperz.PM.UI.Web.Controllers.GridController, {
+
+        'createGrid': function () {
+                return new Clipperz.PM.UI.Web.Components.GridComponent({columnsManagers: [
+                        new Clipperz.PM.UI.Web.Components.FaviconColumnManager({
+                                        'name':                 'DirectLogins.favicon',
+                                        'selector':  MochiKit.Base.methodcaller('favicon'),
+                                        'cssClass': 'favicon'
+                        }),
+        //              new Clipperz.PM.UI.Web.Components.LinkColumnManager({
+                        new Clipperz.PM.UI.Web.Components.DirectLoginColumnManager({
+                                        'name':                 'DirectLogins.title',
+                                        'selector':      MochiKit.Base.methodcaller('label'),
+                                        'label':        'title',
+                                        'cssClass':     'title',
+                                        'comparator':  Clipperz.Base.caseInsensitiveCompare,
+                                        'sortable':      true,
+                                        'sorted':       'ASCENDING',
+                                        'actionMethod': MochiKit.Base.methodcaller('runDirectLogin')
+                        }),
+        //              new Clipperz.PM.UI.Web.Components.TextColumnManager({ //should be StrengthColumnManager
+        //                              'label':'strength',
+        //                              'cssClass':'title',
+        //                              'selector': MochiKit.Base.methodcaller('label') //should be 'strength' or a strenght evaluation function
+        //              }),
+                        new Clipperz.PM.UI.Web.Components.LinkColumnManager({
+                                        'name':                 'DirectLogins.cardTitle',
+                                        'selector':      MochiKit.Base.compose(MochiKit.Base.methodcaller('label'), MochiKit.Base.methodcaller('record')),
+                                        'label':        'card',
+                                        'cssClass':     'cardTitle',
+                                        'comparator':  Clipperz.Base.caseInsensitiveCompare,
+                                        'sortable':      true,
+                                        'sorted':       'UNSORTED',
+                                        'actionMethod': MochiKit.Base.method(this, 'handleShowCard')
+                        }),
+        //              new Clipperz.PM.UI.Web.Components.TextColumnManager({ //should be StrengthColumnManager
+        //                              'label':'last access',
+        //                              'cssClass':'title',
+        //                              'selector': MochiKit.Base.methodcaller('label')
+        //              //                                      'sortable': true,
+        //              //                                      'sorted': 'UNSORTED'
+        //              }),
+        //              new Clipperz.PM.UI.Web.Components.TextColumnManager({
+        //                              'label':'commands',
+        //                              'cssClass':'title',
+        //                              'selector': MochiKit.Base.methodcaller('label'), //should be a function for commands display
+        //              }),
+                        new Clipperz.PM.UI.Web.Components.DeleteObjectColumnManager({
+                                        'name':                 'DirectLogins.delete',
+                                        'selector':      MochiKit.Base.noop,
+                                        'cssClass':     'delete',
+        //                      'actionMethod':  function(anObject, anEvent) { MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'deleteDirectLogin', {objectData:anObject, element:anEvent.src()})}
+                                'actionMethod':  MochiKit.Base.method(this, 'handleDeleteDirectLogin')
+                        })
+                ]});
+
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'getRows': function () {
+                        //TODO: relying on user() in GridController, bad code smell :|
+                return this.user().getDirectLogins();
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleShowCard': function (anObject, anEvent) {
+                var cardDialogController;
+
+                cardDialogController = new Clipperz.PM.UI.Web.Controllers.CardDialogController({record:anObject.record()})
+                cardDialogController.run(anEvent.src());
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleDeleteDirectLogin': function (anObject, anEvent) {
+                var deferredResult;
+                var confirmationDialog;
+                
+                confirmationDialog = new Clipperz.PM.UI.Common.Components.SimpleMessagePanel({
+                                title:"Delete DirectLogin",
+                                text:"Do you want to delete …",
+                                type:'ALERT',
+                        buttons: [
+                                        {text:"Cancel",result:'CANCEL', isDefault:true},
+                                {text:"Delete", result:'OK'}
+                        ]
+                });
+
+                deferredResult = new Clipperz.Async.Deferred("AppController.handleDeleteCard", {trace:false});
+        //      deferredResult = confirmationDialog.deferredShow({openFromElement:anEvent.src(), onOkCloseToElement:MochiKit.DOM.currentDocument().body, onCancelCloseToElement:anEvent.src()});
+                deferredResult.addMethod(confirmationDialog, 'deferredShow', {
+                                'openFromElement':              anEvent.src(),
+                                'onOkCloseToElement':           null,   //MochiKit.DOM.currentDocument().body,
+                                'onCancelCloseToElement':anEvent.src()
+                });
+                deferredResult.addCallback(function () { Clipperz.log("DELETE: " + anObject.toString(), anObject); });
+                deferredResult.addErrbackPass(function () { Clipperz.log("skip deletion: " + anObject.toString(), anObject); });
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //-----------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
+*/
\ No newline at end of file
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/FilterController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/FilterController.js
new file mode 100644
index 0000000..13e02bc
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/FilterController.js
@@ -0,0 +1,158 @@
+/*
+
+Copyright 2008-2011 Clipperz Srl
+
+This file is part of Clipperz's Javascript Crypto Library.
+Javascript Crypto Library provides web developers with an extensive
+and efficient set of cryptographic functions. The library aims to
+obtain maximum execution speed while preserving modularity and
+reusability.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com
+
+* Javascript Crypto Library is free software: you can redistribute
+  it and/or modify it under the terms of the GNU Affero General Public
+  License as published by the Free Software Foundation, either version
+  3 of the License, or (at your option) any later version.
+
+* Javascript Crypto Library is distributed in the hope that it will
+  be useful, but WITHOUT ANY WARRANTY; without even the implied
+  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Javascript Crypto Library.  If not, see
+  <http://www.gnu.org/licenses/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.FilterController = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.Web.Controllers.FilterController.superclass.constructor.call(this, args);
+
+        this._filterElements = [];
+        this._filter = "";
+        
+        this._pendingSearchClicks = 0;
+                
+        return this;
+};
+
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Controllers.FilterController, Object, {
+
+        //-----------------------------------------------------------------------------
+
+        'getFilter': function () {
+                return this._filter;
+        },
+
+        '_setFilter': function (aFilterElement, aFilter) {
+                if (aFilter != this._filter) {
+                        this._filter = aFilter;
+                        MochiKit.Signal.signal(this, 'filterUpdated', aFilter);
+                        this.updateFilterElements(aFilterElement, aFilter);
+                }
+        },
+        
+        'setFilter': function (aFilter) {
+                this._setFilter(null, aFilter);
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'filterElements': function () {
+                return this._filterElements;
+        },
+
+        'registerFilterElement': function (aFilterElement) {
+//Clipperz.log("=== FilterController.registerFilterElement", aFilterElement);
+                this._filterElements.push(aFilterElement);
+                MochiKit.Signal.connect(aFilterElement, 'onkeydown', this, 'searchClickHandler');
+                MochiKit.Signal.connect(aFilterElement, 'onfocus',  this, 'searchClickHandler');
+        },
+        
+        'removeFilterElement': function (aFilterElement) {
+                var i;
+                var filterElements;
+                for (i=0; i < filterElements; i++) {
+                        if (filterElements[i] == aFilterElement);
+                        filterElements.splice(i, 1);
+        // TODO unregister/disconnect filterElement     ??MochiKit.Signal.disconnect(this.grid().filterElement(), 'updateFilter', this.filterController(), 'handleUpdateFilter');
+                }
+        },
+        
+        'updateFilterElements': function (aSourceElement, aFilterString) {
+                MochiKit.Iter.forEach(this.filterElements(),
+                        function (aFilterElement) {
+                                if (aFilterElement != aSourceElement) { 
+                                        aFilterElement.value = aFilterString;
+                                }
+                        }
+                );
+                
+                if (aSourceElement != null) {
+                        aSourceElement.focus();
+                }
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'run': function () {
+//Clipperz.log("=== FilterController.run");
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'pendingSearchClicks': function () {
+                        return this._pendingSearchClicks;
+        },
+
+        'incrementPendingSearchClicks': function () {
+                this._pendingSearchClicks++;
+        },
+
+        'decrementPendingSearchClicks': function () {
+                this._pendingSearchClicks--;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'searchClickHandler': function (anEvent) {
+                if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ENTER')) {
+                        anEvent.preventDefault();
+                } else {
+                        var value;
+                        
+                        if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ESCAPE')) {
+                                value = ""
+                        } else if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ARROW_UP')) {
+                        } else if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ARROW_DOWN')) {
+                        } else {
+                                value = null;
+                        }
+                        
+                        this.incrementPendingSearchClicks();
+                        MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, "searchClickDeferredHandler", anEvent.src(), value));
+                }
+        },
+
+        //.........................................................................
+
+        'searchClickDeferredHandler': function (aFilterElement, aValue) {
+                if (aValue != null) {
+                        aFilterElement.value = aValue;
+                }
+
+                this.decrementPendingSearchClicks();
+                if (this.pendingSearchClicks()==0) {
+                        this._setFilter(aFilterElement, aFilterElement.value);
+                }
+        },
+
+                //-----------------------------------------------------------------------------
+        'syntaxFix': 'syntax fix'
+});
\ No newline at end of file
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/GridController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/GridController.js
new file mode 100644
index 0000000..740a091
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/GridController.js
@@ -0,0 +1,374 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.GridController = function(args) {
+        args = args || {};
+        
+        Clipperz.PM.UI.Web.Controllers.GridController.superclass.constructor.call(this, args);
+        
+        this._grid = null;
+        this._user = null;
+        this._sortedColumnManager = null;
+        this._cachedObjects = null;
+        this._filterController = args.filterController || null;
+
+        this._deferredDisplaySelectedRowsInvocation = null;
+        
+        return this;
+};
+
+Clipperz.Base.extend(Clipperz.PM.UI.Web.Controllers.GridController, Object, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.GridController";
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'createGrid': function () {
+                throw Clipperz.Base.exception.AbstractMethod;
+        },
+        
+        'setupWithGrid': function (aGrid) {
+                this._grid = aGrid;
+                
+                if (this._grid != null) {
+                        MochiKit.Iter.forEach(this.columnsManagers(), function (aColumnManager) {
+                                if (aColumnManager.isSortable()) {
+                                        if (aColumnManager.isSorted()) {
+                                                this.setSortedColumnManager(aColumnManager);
+                                        }
+                                        MochiKit.Signal.connect(aColumnManager, 'sort', this, 'handleColumnManagerSort');
+                                }
+                                MochiKit.Signal.connect(aColumnManager, 'selectRow', this, 'handleColumnManagerSelectRow');
+                                MochiKit.Signal.connect(aColumnManager, 'unselectRow', this, 'handleColumnManagerUnselectRow');
+                        }, this);
+                }
+        },
+
+        'grid': function() {
+                if (this._grid == null) {
+                        this.setupWithGrid(this.createGrid());
+                }
+                
+                return this._grid;
+        },
+        
+        'filterController': function () {
+//Clipperz.log('GridController.filterController >>>', this._filterController);
+                if (this._filterController == null) {
+                        this._filterController = new Clipperz.PM.UI.Web.Controllers.FilterController();
+                }
+//Clipperz.log('GridController.filterController <<<', this._filterController);
+                return this._filterController;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'columnsManagers': function () {
+                return this.grid().columnsManagers();
+        },
+
+        'columnManagerWithName': function (aName) {
+                        varmanagers;
+                var result;
+                
+                managers = MochiKit.Base.filter(function (aManager) { return aManager.name() == aName; } , this.columnsManagers());
+                
+                if (managers.length == 1) {
+                        result = managers[0];
+                } else if (managers.length == 0) {
+                        result = null;
+                } else {
+                        throw "WTF!!!";
+                }
+                
+                return result;
+        },
+
+        'sortedColumnManager': function () {
+                return this._sortedColumnManager;
+        },
+        
+        'setSortedColumnManager': function(aValue) {
+                if (aValue.sorted() != 'UNSORTED') {
+                        this._sortedColumnManager = aValue;
+                } else {
+                        this._sortedColumnManager = null;
+                }
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleColumnManagerSort': function(aSelectedColumnManager) {
+                MochiKit.Iter.forEach(this.columnsManagers(), function(aColumnManager) {
+                        if (aSelectedColumnManager != aColumnManager) {
+                                if (aColumnManager.isSortable()) {
+                                        aColumnManager.setSorted('UNSORTED');
+                                }
+                        }
+                });
+                
+                aSelectedColumnManager.toggleSorting();
+                this.setSortedColumnManager(aSelectedColumnManager);
+
+                this.displaySelectedRows(this.filterController().getFilter());
+        },
+
+        'handleColumnManagerSelectRow': function (aRowObject) {
+                this.grid().selectRow(aRowObject);
+        },
+
+        'handleColumnManagerUnselectRow': function (aRowObject) {
+                this.grid().unselectRow(aRowObject);
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'handleFilterUpdated': function (aFilter) {
+                if (this.grid().isActive()) {
+                        this.displaySelectedRows(aFilter);
+                }
+        },
+
+        //-----------------------------------------------------------------------------
+                //TODO: relying on user() in GridController, bad code smell :|
+                //mhh: a controller should have access to business logic object too. Otherwise it will fail its controller role. [Giulio Cesare]
+
+        'setUser': function(anUser) {
+                this._user = anUser;
+        },
+        
+        'user': function() {
+                return this._user;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'run': function(args) {
+//Clipperz.log("=== GridController.run");
+                var deferredResult;
+
+                this.setUser(args.user);
+                args.slot.setContent(this.grid());
+                this.filterController().registerFilterElement(this.grid().filterElement());
+                MochiKit.Signal.connect(this.filterController(), 'filterUpdated', this, 'handleFilterUpdated');
+                
+                return this.displaySelectedRows();
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleGenericError': function(anError) {
+                var result;
+                
+                if (anError instanceof MochiKit.Async.CancelledError) {
+                        result = anError;
+                } else {
+Clipperz.log("## GridController - GENERIC ERROR" + "\n" + "==>> " + anError + " <<==\n" + anError.stack);
+                        result = new MochiKit.Async.CancelledError(anError);
+                }
+        
+                return result;
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'getRows': function () {
+                throw Clipperz.Base.AbstractMethod;
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'setDeferredDisplaySelectedRowsInvocation': function (aDeferred) {
+                if (this._deferredDisplaySelectedRowsInvocation != null) {
+                        this._deferredDisplaySelectedRowsInvocation.cancel();
+                }
+                
+                this._deferredDisplaySelectedRowsInvocation = aDeferred;
+        },
+        
+        //-----------------------------------------------------------------------------
+        
+        'resetDeferredDisplaySelectedRowsInvocation': function () {
+                if (this._deferredDisplaySelectedRowsInvocation != null) {
+                        this._deferredDisplaySelectedRowsInvocation.cancel();
+                }
+        },
+        
+        //-----------------------------------------------------------------------------
+        
+        '_displaySelectedRows': function (aFilter, someRows) {
+                var result;
+                var delay;
+                
+                if ((aFilter != null) && (aFilter != '')) {
+                        var filter;
+                                varfilterRegExp;
+                        
+                        filter = aFilter.replace(/[^A-Za-z0-9]/g, "\\$&");
+                        filterRegExp = new RegExp(filter, "i");
+                        result = MochiKit.Base.filter(function (aCachedResult) { return filterRegExp.test(aCachedResult['_searchableContent'])}, someRows);
+                        delay = 0.002*result.length;
+
+                        this.setDeferredDisplaySelectedRowsInvocation(MochiKit.Async.callLater(delay, MochiKit.Base.method(this, "deferredDisplaySelectedRows", result)));
+                } else {
+                        result = someRows;
+
+                        this.resetDeferredDisplaySelectedRowsInvocation();
+                        this.deferredDisplaySelectedRows(result);
+                }
+
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'deferredDisplaySelectedRows': function (someRows) {
+                if (this.sortedColumnManager() != null) {
+                        var comparator;
+                        var fieldName;
+                        
+                        fieldName = this.sortedColumnManager().name();
+                        comparator = this.sortedColumnManager().comparator();
+                        if (this.sortedColumnManager().sorted() == 'DESCENDING') {
+                                comparator = Clipperz.Base.reverseComparator(comparator);
+                        }
+
+                        someRows.sort(MochiKit.Base.partial(function(aKey, aComparator, aObject, bObject){
+                                return comparator(aObject[aKey], bObject[aKey]);
+                        }, this.sortedColumnManager().name(), comparator));
+                }
+
+                this.grid().update(someRows);
+                this.grid().endSearch();
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'getCachedValues': function () {
+                var deferredResult;
+
+                if (this._cachedObjects != null) {
+                        deferredResult = MochiKit.Async.succeed(this._cachedObjects);
+                } else {
+                        var objectCollectResultsConfiguration;
+                        
+                        objectCollectResultsConfiguration = {
+                                        '_rowObject':           MochiKit.Async.succeed,
+                                        '_reference':           MochiKit.Base.methodcaller('reference'),
+                                        '_searchableContent':MochiKit.Base.methodcaller('searchableContent')
+                        };
+
+                        MochiKit.Base.map(function (aColumnManager) {
+                                objectCollectResultsConfiguration[aColumnManager.name()] = aColumnManager.selector();
+                        }, this.columnsManagers());
+
+                        deferredResult = new Clipperz.Async.Deferred("GridController.getCachedValues", {trace:false});
+                        deferredResult.addMethod(this, 'getRows');
+                        deferredResult.addCallback(MochiKit.Base.map, Clipperz.Async.collectResults("GridController.getCachedValues - collectResults", objectCollectResultsConfiguration, {trace:false}));
+                        deferredResult.addCallback(Clipperz.Async.collectAll);
+                        deferredResult.addCallback(MochiKit.Base.bind(function (someRows) {
+                                this._cachedObjects = someRows;
+                                return this._cachedObjects;
+                        }, this));
+                        deferredResult.callback();
+                }
+                
+                return deferredResult;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'hasPendingChanges': function () {
+                return this.user().hasPendingChanges();
+        },
+
+        'saveChanges': function () {
+                this._cachedObjects = null;
+
+                return Clipperz.Async.callbacks("GridController.saveChanges", [
+                        MochiKit.Base.method(this.user(), 'saveChanges'),
+                        MochiKit.Base.method(this, 'focus')
+                ], {trace:false});
+        },
+        
+        'revertChanges': function () {
+                return this.user().revertChanges();
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'displayEmptyContent': function () {
+        },
+
+        'hideEmptyContent': function () {
+                this.grid().removeNoRowsGridComponent();
+        },
+
+        'displaySelectedRows': function (aFilter) {
+                if ((aFilter != null) && (aFilter != '')){
+                        this.grid().startSearch();
+                }
+
+                return Clipperz.Async.callbacks("GridController.displaySelectedrows", [
+                        MochiKit.Base.method(this, 'getCachedValues'),
+                        MochiKit.Base.itemgetter('length'),
+                        Clipperz.Async.deferredIf("There are some items to show in the grid", [
+                                MochiKit.Base.method(this, 'hideEmptyContent'),
+                                MochiKit.Base.method(this, 'getCachedValues'),
+                                MochiKit.Base.method(this, '_displaySelectedRows', aFilter)
+                        ], [
+                                MochiKit.Base.method(this, 'displayEmptyContent'),
+                                MochiKit.Base.method(this.grid(), 'endSearch')
+                        ])
+                ], {trace:false});
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'focus': function () {
+                return Clipperz.Async.callbacks("GridController.focus", [
+                        MochiKit.Base.method(this, 'displaySelectedRows', this.filterController().getFilter()),
+                        MochiKit.Base.method(this.grid(), 'focus')
+                ], {trace:false})
+        //*##*/this.displaySelectedRows(this.filterController().getFilter());
+        //      this.grid().focus();
+        },
+
+        //=============================================================================
+
+        'deleteAllCleanTextData': function () {
+                this._cachedObjects = null;
+                this.grid().drawEmpty();
+        },
+
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js
new file mode 100644
index 0000000..d88af41
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js
@@ -0,0 +1,259 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.LoginController = function(args) {
+        this._args = args || {};
+
+        this._loginPage = null;
+
+        this._newUserWizardController = null;
+        this._newUserCreationComponent = null;
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Web.Controllers.LoginController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.LoginController";
+        },
+
+        'args': function () {
+                return this._args;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'loginPage': function() {
+                if (this._loginPage == null) {
+                        this._loginPage = new Clipperz.PM.UI.Web.Components.LoginPage();
+                        
+                        MochiKit.Signal.connect(this._loginPage, 'createNewAccountClick', this, 'handleCreateNewAccountClick')
+                }
+                
+                return this._loginPage;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'run': function(args) {
+                        varslot;
+                        varloginPage;
+                        varloginForm;
+
+                slot = args.slot;
+
+                        loginForm =new Clipperz.PM.UI.Web.Components.LoginForm({'autocomplete': this.args()['autocomplete']});
+
+                slot.setContent(this.loginPage());
+                this.loginPage().slotNamed('loginForm').setContent(loginForm);
+
+                MochiKit.Signal.connect(loginForm, 'doLogin', MochiKit.Base.method(this, 'doLogin', loginForm));
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'doLogin', MochiKit.Base.method(this, 'doLogin', loginForm));
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'doLogin': function(aLoginForm, anEvent) {
+                var deferredResult;
+                        varparameters;
+        //              varshouldUseOTP;
+                var loginProgress;
+                        varuser;
+                var getPassphraseDelegate;
+
+                parameters = anEvent;
+        //      shouldUseOTP = (typeof(parameters.passphrase) == 'undefined');
+
+                getPassphraseDelegate = MochiKit.Base.partial(MochiKit.Async.succeed, parameters.passphrase);
+                user = new Clipperz.PM.DataModel.User({'username':parameters.username, 'getPassphraseFunction':MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'getPassphrase')});
+
+                loginProgress = new Clipperz.PM.UI.Web.Components.LoginProgress();
+
+                deferredResult = new Clipperz.Async.Deferred("LoginController.doLogin", {trace:false});
+                deferredResult.addCallbackPass(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress', {'steps':4});
+                deferredResult.addMethod(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', getPassphraseDelegate);
+                deferredResult.addMethod(loginProgress, 'deferredShowModal', {deferredObject:deferredResult, openFromElement:aLoginForm.submitButtonElement()});
+                deferredResult.addMethod(Clipperz.Crypto.PRNG.defaultRandomGenerator(), 'deferredEntropyCollection');
+        //      if (shouldUseOTP == false) {
+                        deferredResult.addMethod(user, 'login');
+        //      } else {
+        //              deferredResult.addMethod(user, 'loginUsingOTP', parameters.username, parameters.otp);
+        //      }
+                deferredResult.addCallback(function(aLoginProgress, res) {
+                        aLoginProgress.disableCancel();
+                        return res;
+                }, loginProgress);
+                deferredResult.addCallback(function () {
+                                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'CARDS_CONTROLLER_DID_RUN',MochiKit.Base.method(loginProgress, 'deferredHideModalAndRemove', {closeToElement:MochiKit.DOM.currentDocument().body}));
+                })
+                deferredResult.addMethod(this, 'userLoggedIn', user, loginProgress, aLoginForm);
+                deferredResult.addErrback (MochiKit.Base.method(this, 'handleFailedLogin', loginProgress));
+
+                deferredResult.addErrback (MochiKit.Base.method(loginProgress, 'deferredHideModalAndRemove', {closeToElement:aLoginForm.submitButtonElement()}));
+                deferredResult.addErrbackPass (MochiKit.Base.method(aLoginForm, 'focusOnPassphraseField'));
+                deferredResult.addBoth(MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'removePassphraseDelegate', getPassphraseDelegate));
+                deferredResult.callback();
+
+                MochiKit.Signal.connect(loginProgress, 'cancelEvent', deferredResult, 'cancel');
+
+                return deferredResult;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'userLoggedIn': function(aUser) {
+//Clipperz.log(">>> LoginController.userLoggedIn");
+                MochiKit.Signal.signal(this, 'userLoggedIn', {user: aUser});
+//Clipperz.log("<<< LoginController.userLoggedIn");
+        },
+
+        //=========================================================================
+
+        'handleCreateNewAccountClick': function (aComponent) {
+        //      return Clipperz.PM.DataModel.User.registerNewAccount("new", "user");
+                return Clipperz.Async.callbacks("LoginController.handleCreateNewAccountClick", [
+        //'             MochiKit.Base.method(this, 'newUserCreationComponent'),
+        //              MochiKit.Base.methodcaller('deferredShowModal', {openFromElement:aComponent}),
+        //              MochiKit.Base.method(this.newUserWizardController(), 'run')
+
+
+                        MochiKit.Base.method(this, 'newUserCreationComponent'),
+                        Clipperz.Async.forkAndJoin("Async.test succeedingForkedAndWaitDeferrer", [
+                                MochiKit.Base.method(this.newUserCreationComponent(), 'deferredShowModal', {openFromElement:aComponent, duration:0.5}),
+                                MochiKit.Base.method(this.newUserWizardController(), 'run')
+                        ], {trace:false}),
+        //                      MochiKit.Base.method(this.newUserCreationComponent(), 'enableCredentialsField')                 
+                ], {trace:false});
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'newUserWizardController': function () {
+                if (this._newUserWizardController == null) {
+                        this._newUserWizardController = new Clipperz.PM.UI.Web.Controllers.NewUserWizardController({
+                                'newUserCreationComponent': this.newUserCreationComponent()
+                        })
+
+        //                      MochiKit.Signal.connect(this._newUserWizardController, 'exit',this, 'handleHideNewUserCreationComponent');
+                                MochiKit.Signal.connect(this._newUserWizardController, 'done',this, 'handleCompleteNewUserCreationComponent');
+                }
+                
+                return this._newUserWizardController;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'newUserCreationComponent': function () {
+                if (this._newUserCreationComponent == null) {
+                        this._newUserCreationComponent = new Clipperz.PM.UI.Web.Components.NewUserCreationComponent();
+                }
+                
+                return this._newUserCreationComponent;
+        },
+
+        'clearNewUserCreationComponent': function () {
+                if (this._newUserCreationComponent != null) {
+                        this._newUserCreationComponent.clear();
+                }
+                this._newUserCreationComponent = null;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleHideNewUserCreationComponent': function () {
+                this.clearNewUserCreationComponent();
+        },
+
+        'handleCompleteNewUserCreationComponent': function (someParameters) {
+                        vardeferredResult;
+                        varuser;
+                        varnewUserCreationComponent;
+
+                user = someParameters.user;
+                newUserCreationComponent = this.newUserCreationComponent();
+                        MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'CARDS_CONTROLLER_DID_RUN',MochiKit.Base.method(newUserCreationComponent, 'deferredHideModal', {closeToElement:MochiKit.DOM.currentDocument().body})),
+
+                deferredResult = new Clipperz.Async.Deferred("LoginController.handleCompleteNewUserCreationComponent", {trace:false});
+
+                deferredResult.addCallbackList([
+                        MochiKit.Base.method(Clipperz.Crypto.PRNG.defaultRandomGenerator(), 'deferredEntropyCollection'),
+                        MochiKit.Base.method(user, 'login'),
+                        MochiKit.Base.method(this, 'userLoggedIn', user),
+                        MochiKit.Base.method(this, 'clearNewUserCreationComponent')
+                ]);
+                deferredResult.addErrback(function (aValue) { Clipperz.log("WTF!! Error doing the login after creating a new user" + aValue)});
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+
+        //=========================================================================
+
+        'handleFailedLogin': function(aLoginProgress, anError) {
+                var result;
+
+//console.log("anError", anError);
+                if (anError instanceof MochiKit.Async.CancelledError) {
+                        result = anError;
+                } else {
+                        var deferredResult;
+                        
+MochiKit.Logging.logError("## MainController - FAILED LOGIN: " + anError);
+                        deferredResult = new MochiKit.Async.Deferred();
+
+                        aLoginProgress.showErrorMessage("failed login");
+        //              Clipperz.NotificationCenter.register(loginProgress, 'cancelEvent', deferredResult, 'callback');
+                        MochiKit.Signal.connect(aLoginProgress, 'cancelEvent', deferredResult, 'callback');
+                        deferredResult.addCallback(MochiKit.Async.fail, anError)
+                        result = deferredResult;
+                }
+        
+                return result;
+        },
+
+        'handleGenericError': function(anError) {
+                var result;
+                
+                if (anError instanceof MochiKit.Async.CancelledError) {
+                        result = anError;
+                } else {
+MochiKit.Logging.logError("## MainController - GENERIC ERROR" + "\n" + "==>> " + anError + " <<==\n" + anError.stack);
+//console.log(anError);
+                        result = new MochiKit.Async.CancelledError(anError);
+                }
+        
+                return result;
+        },
+
+        //-----------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/MainController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/MainController.js
new file mode 100644
index 0000000..aa0d6ad
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/MainController.js
@@ -0,0 +1,218 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.MainController = function(args) {
+        this._args = args;
+
+                //controllers
+                this._loginController =null;
+                this._appController =null;
+
+                //components
+        this._headerComponent = null;
+                this._pageComponent =null;
+        this._footerComponent = null;
+        
+        this._passphraseDelegateLock = new MochiKit.Async.DeferredLock();
+        this._passphraseDelegateLock.acquire();
+//Clipperz.log('MainController init _passphraseDelegateLock', this._passphraseDelegateLock);
+        this._passphraseDelegate = null;
+
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'remoteRequestSent',        this, 'handleRemoteRequestSent');
+                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'remoteRequestReceived',this, 'handleRemoteRequestReceived');
+
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Web.Controllers.MainController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.MainController";
+        },
+
+        'args': function () {
+                return this._args;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'headerComponent': function() {
+                if (this._headerComponent == null) {
+                        this._headerComponent = new Clipperz.PM.UI.Web.Components.PageHeader();
+                }
+                
+                return this._headerComponent;
+        },
+
+        'footerComponent': function() {
+                if (this._footerComponent == null) {
+                        this._footerComponent = new Clipperz.PM.UI.Web.Components.PageFooter();
+                }
+                
+                return this._footerComponent;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'pageComponent': function() {
+                if (this._pageComponent == null) {
+                        this._pageComponent = new Clipperz.PM.UI.Web.Components.Page({element:MochiKit.DOM.getElement('mainDiv')});
+                }
+                
+                return this._pageComponent;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'loginController': function() {
+                if (this._loginController == null) {
+                        this._loginController = new Clipperz.PM.UI.Web.Controllers.LoginController(this.args());
+
+                        MochiKit.Signal.connect(this._loginController, 'userLoggedIn', this, 'loginControllerUserLoggedInCallback');
+                }
+
+                return this._loginController;
+        },
+
+        'appController': function() {
+                if (this._appController == null) {
+                        this._appController = new Clipperz.PM.UI.Web.Controllers.AppController();
+
+                        MochiKit.Signal.connect(this._appController, 'logout', this, 'handleLogout');
+                }
+
+                return this._appController;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'run': function(shoudShowRegistrationForm) {
+                this.pageComponent().slotNamed('header').setContent(this.headerComponent());
+                this.pageComponent().slotNamed('footer').setContent(this.footerComponent());
+
+                this.pageComponent().render();
+                
+                this.loginController().run({slot:this.pageComponent().slotNamed('body')});
+                
+                if (shoudShowRegistrationForm) {
+                        MochiKit.Signal.signal(this.loginController().loginPage(), 'createNewAccountClick');
+        //              this.loginController().handleCreateNewAccountClick();
+                }
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'getPassphrase': function () {
+                var deferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("MainController.getPassphrase", {trace:false});
+
+                deferredResult.acquireLock(this._passphraseDelegateLock);
+                deferredResult.addMethod(this, 'invokePassphraseDelegate');
+                deferredResult.releaseLock(this._passphraseDelegateLock);
+                deferredResult.callback();
+        
+                return deferredResult;
+        },
+        
+        //.........................................................................
+        
+        'invokePassphraseDelegate': function () {
+                return this._passphraseDelegate();
+        },
+
+        'passphraseDelegateLock': function () {
+                return this._passphraseDelegateLock;
+        },
+
+        //.........................................................................
+
+        'setPassphraseDelegate': function (aDelegate) {
+                var shouldReleaseLock;
+
+                shouldReleaseLock = (this._passphraseDelegate == null);
+
+                this._passphraseDelegate = aDelegate;
+
+                if (shouldReleaseLock) {
+                        this._passphraseDelegateLock.release();
+                }
+        },
+        
+        //.........................................................................
+
+        'removePassphraseDelegate': function (aDelegate) {
+                if (this._passphraseDelegate == aDelegate) {
+                        this._passphraseDelegate = null;
+                        this._passphraseDelegateLock.acquire();
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'loginControllerUserLoggedInCallback': function(anEvent) {
+//Clipperz.log(">>> loginControllerUserLoggedInCallback", anEvent);
+        //      this.setUser(anEvent.parameters()['user']);
+//console.log("--- loginControllerUserLoggedInCallback - 1");
+
+//console.log("--- loginControllerUserLoggedInCallback - 2");
+                this.headerComponent().switchToLoggedMode();
+                this.appController().run({slot:this.pageComponent().slotNamed('body'), user:anEvent['user']});
+//Clipperz.log("<<< loginControllerUserLoggedInCallback");
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleRemoteRequestSent': function () {
+//Clipperz.log("REMOTE REQUEST sent >>>");
+        },
+
+        'handleRemoteRequestReceived': function () {
+//Clipperz.log("REMOTE REQUEST received <<<");
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleLogout': function(anEvent) {
+                this.exit('logout.html');
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'exit': function(aPageName) {
+//Clipperz.log("### exit " + aPageName);
+                MochiKit.Async.wait(0).addCallback(function() {
+                        window.location.href = "./" + aPageName + "?ln=" + Clipperz.PM.Strings.selectedLanguage;
+                });
+        },
+
+        //-----------------------------------------------------------------------------
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/NewUserWizardController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/NewUserWizardController.js
new file mode 100644
index 0000000..28d9d20
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/NewUserWizardController.js
@@ -0,0 +1,469 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
+
+Clipperz.PM.UI.Web.Controllers.NewUserWizardController = function(args) {
+                this._newUserCreationComponent  = args.newUserCreationComponent|| Clipperz.Base.exception.raise('MandatoryParameter');
+
+                MochiKit.Signal.connect(this._newUserCreationComponent, 'changedValue',this, 'handleChangedValue');
+                MochiKit.Signal.connect(this._newUserCreationComponent, 'moveForward',this, 'handleMoveForward');
+                MochiKit.Signal.connect(this._newUserCreationComponent, 'keyPressed',this, 'handleNewUserCreationComponentKeyPressed');
+
+        this._rulerComponent = null;
+
+        this._steps = null;
+        this._currentStepIndex = 0;
+        this._isNextEnabled = false;
+
+                this._userCreationState = 'IDLE';       //'IN PROGRESS', 'DONE', 'FAILED'
+        this._user = null;
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.Web.Controllers.NewUserWizardController.prototype, {
+
+        'toString': function() {
+                return "Clipperz.PM.UI.Web.Controllers.NewUserWizardController";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'newUserCreationComponent': function () {
+                return this._newUserCreationComponent;
+        },
+
+        //=============================================================================
+
+        'user': function () {
+                return this._user;
+        },
+        
+        'setUser': function (aValue) {
+                this._user = aValue;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'userCreationState': function () {
+                return this._userCreationState;
+        },
+        
+        'setUserCreationState': function (aValue) {
+//console.log("+++ NewUserWizardController.setUserCreationState", aValue);
+                this._userCreationState = aValue;
+                this.checkState();
+        },
+
+        //=============================================================================
+
+        'resetCurrentStepIndex': function () {
+                this._currentStepIndex = 0;
+                this.rulerComponent().resetStatus({animateTransition:true});
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'enableNext': function (aValue) {
+                this.rulerComponent().enableNext(aValue);
+                this._isNextEnabled = aValue;
+        },
+        
+        'isNextEnabled': function () {
+                return this._isNextEnabled;
+        },
+        
+        //-----------------------------------------------------------------------------
+
+        'enablePrevious': function (aValue) {
+                this.rulerComponent().enablePrevious(aValue);
+        },
+        
+        //=============================================================================
+
+        'rulerComponent': function () {
+                if (this._rulerComponent == null) {
+                        this._rulerComponent = new Clipperz.PM.UI.Web.Components.RulerComponent({
+                                translationContext:'Wizards.NewUserWizard'
+                        });
+                        this._rulerComponent.render();
+                        
+                                MochiKit.Signal.connect(this._rulerComponent, 'exit',           this, 'handleExit');
+                                MochiKit.Signal.connect(this._rulerComponent, 'done',           this, 'done');
+                                MochiKit.Signal.connect(this._rulerComponent, 'moveForward',this, 'handleMoveForward');
+                                MochiKit.Signal.connect(this._rulerComponent, 'moveBackward',this, 'handleMoveBackward');
+                                MochiKit.Signal.connect(this._rulerComponent, 'cursorMoved',this, 'handleCursorMoved');
+                }
+                
+                return this._rulerComponent;
+        },
+
+        'resetRuler': function () {
+        //      if (this._rulerComponent != null) {
+        //              this._rulerComponent.clear();
+        //      }
+        //      this._rulerComponent = null;
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'showRuler': function (someSteps) {
+                var rulerElement;
+
+                this.setSteps(someSteps);
+
+                rulerElement = this.rulerComponent().element();
+                this.newUserCreationComponent().disableAllPanels();
+
+                MochiKit.Style.showElement(rulerElement);
+                MochiKit.Style.setElementPosition(rulerElement, {x:-1000, y:this.newUserCreationComponent().bottomMargin()});
+                new MochiKit.Visual.Move(rulerElement, {
+                        x:0, y:this.newUserCreationComponent().bottomMargin(),
+                        mode:'absolute',
+                        duration:0.5,
+        //              afterFinish:MochiKit.Base.method(this, 'handleCursorMoved')
+                        afterFinish:MochiKit.Base.method(this, 'handleRulerShowed')
+                });
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'handleRulerShowed':function () {
+                return Clipperz.Async.callbacks("NewUserWizardController.handlerRulerShowed", [
+                        MochiKit.Base.method(this.newUserCreationComponent(), 'waitUntilFullyRendered'),
+                        MochiKit.Base.method(this, 'handleCursorMoved')
+                ], {trace:false});
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'hideRuler': function () {
+                new MochiKit.Visual.Move(this.rulerComponent().element(), {x:-1000, mode:'relative', duration:0.5});
+        },
+
+        'doneWithRuler': function () {
+                var rulerComponentElement;
+                
+                rulerComponentElement = this.rulerComponent().element();
+                new MochiKit.Visual.Move(this.rulerComponent().element(), {
+                        x:1000,
+                        mode:'relative',
+                        duration:1,
+        //              afterFinish:MochiKit.Base.partial(MochiKit.Style.hideElement, rulerComponentElement)
+                        afterFinish:function () { MochiKit.Style.hideElement(rulerComponentElement); }
+                });
+        },
+
+        //=============================================================================
+
+        'createNewUserRulerSteps': function () {
+                return [ 'CREDENTIALS', 'CHECK_CREDENTIALS', 'TERMS_OF_SERVICE', 'CREATE_USER'/*, 'LOGIN' */];
+        },
+
+        //-------------------------------------------------------------------------
+
+        'run': function () {
+                return Clipperz.Async.callbacks("NewUserWizardController.run", [
+                        MochiKit.Base.method(this, 'createNewUserRulerSteps'),
+                        MochiKit.Base.method(this, 'showRuler')
+                ], {trace:false});
+        },
+
+        //-----------------------------------------------------------------------------
+        
+        'checkState': function () {
+                var enablePrevious;
+                var enableNext;
+
+                enablePrevious = true;
+                enableNext = false;
+
+                this.newUserCreationComponent().disableAllPanels();
+
+                switch(this.currentStep()) {
+                        case 'CREDENTIALS':
+                                this.newUserCreationComponent().enableCredentialsPanel();
+
+                                enableNext = (
+                                        (this.newUserCreationComponent().username() != '')
+                                        &&
+                                        (this.newUserCreationComponent().passphrase() != '')
+                                );
+        //                      enablePrevious = false;
+                                break;
+                        case 'CHECK_CREDENTIALS':
+                                this.newUserCreationComponent().enableCheckCredentialsPanel();
+
+                                enableNext = (this.newUserCreationComponent().passphrase() == this.newUserCreationComponent().rePassphrase());
+        //                      enablePrevious = true;
+                                break
+                        case 'TERMS_OF_SERVICE':
+                                this.newUserCreationComponent().enableTermsOfServicePanel();
+
+//console.log("awareOfUnrecoverablePassphrase", this.newUserCreationComponent().awareOfUnrecoverablePassphrase());
+//console.log("readTermsOfService", this.newUserCreationComponent().readTermsOfService());
+                                enableNext = (
+                                        (this.newUserCreationComponent().awareOfUnrecoverablePassphrase() == 'on')
+                                        &&
+                                        (this.newUserCreationComponent().readTermsOfService() == 'on')
+                                )
+                                break;
+                        case 'CREATE_USER':
+//console.log(">>> CREATE_USER", this.userCreationState());
+                                this.newUserCreationComponent().enableCreateUserPanel();
+
+                                switch (this.userCreationState()) {
+                                        case 'IDLE':
+                                                this.setUserCreationState('IN PROGRESS');
+                                                this.preformActualUserRegistration();
+
+                                                enablePrevious = false;
+                                                enableNext = false;
+                                                break;
+                                        case 'IN PROGRESS':
+                                                enablePrevious = false;
+                                                enableNext = false;
+                                                break;
+                                        case 'DONE':
+                                                enablePrevious = false;
+                                                enableNext = true;
+                                                break;
+                                        case 'FAILED':
+                                                enablePrevious = true;
+                                                enableNext = false;
+                                                break;
+                                };
+                                break;
+        //              case 'LOGIN':
+        //                      this.newUserCreationComponent().enableLoginPanel();
+        //                      break;
+                }
+
+                if (this.currentStepIndex() > 0) {
+                        this.enablePrevious(enablePrevious);
+                } else {
+                        this.enablePrevious(false);
+                }
+                this.enableNext(enableNext);
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'setFocus': function () {
+                switch(this.currentStep()) {
+                        case 'CREDENTIALS':
+                                this.newUserCreationComponent().focusOnUsernameElement();
+                                break;
+                        case 'CHECK_CREDENTIALS':
+                                this.newUserCreationComponent().focusOnRePassphraseElement();
+                                break
+                        case 'TERMS_OF_SERVICE':
+                                break;
+                        case 'CREATE_USER':
+                                break;
+        //              case 'LOGIN':
+        //                      break;
+                }
+        },
+
+        //=============================================================================
+
+        'steps': function () {
+                return this._steps;
+        },
+
+        'setSteps': function (aValue) {
+                this._steps = aValue;
+
+                this.rulerComponent().setSteps(aValue);
+                this.resetCurrentStepIndex();
+        },
+        
+        'currentStepIndex': function () {
+                return this._currentStepIndex;
+        },
+        
+        'currentStep': function () {
+                return this.steps()[this.currentStepIndex()];
+        },
+
+        //=============================================================================
+
+        'handleExit': function () {
+                return Clipperz.Async.callbacks("NewUserWizardController.handleExit", [
+        //              MochiKit.Base.method(this.newUserCreationComponent(), 'resetContent'),
+                        Clipperz.Async.forkAndJoin("NewUserWizardController.handleExit - fork and join", [
+                                MochiKit.Base.method(this, 'hideRuler'),
+                                MochiKit.Base.method(this.newUserCreationComponent(), 'deferredHideModal')
+                        ], {trace:false}),
+                        MochiKit.Base.method(this, 'resetRuler'),
+        //              MochiKit.Base.method(this.newUserCreationComponent(), 'reset'),
+                        MochiKit.Base.partial(MochiKit.Signal.signal, this, 'exit')
+                ], {trace:false})
+        },
+
+        'done': function () {
+                this.doneWithRuler();
+                MochiKit.Signal.signal(this, 'done', {'user': this.user()});
+        },
+        
+        //=============================================================================
+
+        'handleMoveBackward': function () {
+                if (this._currentStepIndex > 0) {
+                                varafterMoveAction;
+
+                        afterMoveAction = MochiKit.Base.noop;
+
+//console.log("<-- backward", this.currentStep());
+                        switch(this.currentStep()) {
+                                case 'CREDENTIALS':
+                                case 'CHECK_CREDENTIALS':
+                                case 'TERMS_OF_SERVICE':
+                                        this._currentStepIndex --;
+                                        this.rulerComponent().moveBackward(afterMoveAction);
+                                        break;
+                                case 'CREATE_USER':
+                                        this.setUser(null);
+                                        this.newUserCreationComponent().hideAllProgeressStates();
+                                        this.resetCurrentStepIndex();
+                                        this.setUserCreationState('IDLE');
+                                        break;
+        //                      case 'LOGIN':
+        //                              break;
+                        };
+
+                }
+                
+                if (this._currentStepIndex == 0) {
+                        this.enablePrevious(false);
+                }
+        },
+
+        'handleMoveForward': function () {
+                if (this.isNextEnabled()) {
+                                varafterMoveAction;
+
+                        this._currentStepIndex ++;
+                        afterMoveAction = MochiKit.Base.noop;
+
+                        switch(this.currentStep()) {
+                                case 'CREDENTIALS':
+                                        break;
+                                case 'CHECK_CREDENTIALS':
+                                        break
+                                case 'TERMS_OF_SERVICE':
+                                        break;
+                                case 'CREATE_USER':
+                                        break;
+        //                      case 'LOGIN':
+        //                              break;
+                        };
+
+                        this.rulerComponent().moveForward(afterMoveAction);
+                };
+        },
+
+        'handleCursorMoved': function () {
+        //      this.checkState();
+        //      this.setFocus();
+                
+                return Clipperz.Async.callbacks("NewUserWizardController.handleCursorMoved", [
+                        MochiKit.Base.method(this.newUserCreationComponent(), 'waitUntilFullyRendered'),
+                        MochiKit.Base.method(this, 'checkState'),
+                        MochiKit.Base.method(this, 'setFocus')
+                ], {trace:false});
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleChangedValue': function (anEvent) {
+                this.checkState();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'handleNewUserCreationComponentKeyPressed': function (anEvent) {
+//console.log(">>> handleNewUserCreationComponentKeyPressed", anEvent.key().string);
+                if (anEvent.key().string == 'KEY_ENTER') {
+                        if (anEvent.target().nodeName != 'TEXTAREA') {
+                                anEvent.preventDefault();
+                                this.handleMoveForward();
+                        }
+                } else if (anEvent.key().string == 'KEY_TAB') {
+                        if (anEvent.target() == this.newUserCreationComponent().usernameElement()) {
+                        } else {
+                                this.handleMoveForward();
+                                if ((anEvent.target().nodeName == 'INPUT') || (anEvent.target().nodeName == 'TEXTAREA')) {
+                                        anEvent.preventDefault();
+                                }
+                        }
+                } else if ((anEvent.key().string == 'KEY_ARROW_RIGHT') && (anEvent.modifier().meta == true)) {
+                        this.handleMoveForward();
+                } else if ((anEvent.key().string == 'KEY_ARROW_LEFT') && (anEvent.modifier().meta == true)) {
+                        this.handleMoveBackward();
+                } else if (anEvent.key().string == 'KEY_ESCAPE') {
+                        anEvent.stop();
+                        this.handleExit();
+                } else {
+                        MochiKit.Async.callLater(0.1, MochiKit.Base.method(this, 'checkState'));
+                }
+        },
+
+        //=============================================================================
+
+        'preformActualUserRegistration': function () {
+                        vardeferredResult;
+
+                deferredResult = new Clipperz.Async.Deferred("NewUSerWizardController.preformActualUserRegistration", {trace:false});
+                deferredResult.addMethod(this.newUserCreationComponent(), 'showProgressOnUserCreation');
+                deferredResult.addMethod(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', MochiKit.Base.method(this.newUserCreationComponent(), 'passphrase'));
+                deferredResult.addCallback(Clipperz.PM.DataModel.User.registerNewAccount,
+                        this.newUserCreationComponent().username(),
+                        MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'getPassphrase')
+                );
+                deferredResult.addMethod(this, 'setUser');
+                deferredResult.addMethod(this.newUserCreationComponent(), 'showUserCreationDone');
+                deferredResult.addMethod(this, 'setUserCreationState', 'DONE');
+                
+        //      deferredResult.addErrback(MochiKit.Base.method(this.newUserCreationComponent(), 'showUserCreationFailed'));
+        //      deferredResult.addErrback(MochiKit.Base.method(this, 'setUser', null));
+        //      deferredResult.addErrback(MochiKit.Base.method(this, 'setUserCreationState', 'FAILED'));
+                deferredResult.addErrback(MochiKit.Base.bind(function (aValue) {
+                        this.newUserCreationComponent().showUserCreationFailed();
+                        this.setUser(null);
+                        this.setUserCreationState('FAILED');
+                }, this));
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+        //=============================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/CardDetail.js b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/CardDetail.js
new file mode 100644
index 0000000..23fd236
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/CardDetail.js
@@ -0,0 +1,166 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.iPhone.Components');
+
+Clipperz.PM.UI.iPhone.Components.CardDetail = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.iPhone.Components.CardDetail.superclass.constructor.apply(this, arguments);
+
+        this._cardReference = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.iPhone.Components.CardDetail, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.iPhone.Components.CardDetail component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'cardReference': function () {
+                return this._cardReference;
+        },
+        
+        'setCardReference': function (aValue) {
+                this._cardReference = aValue;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'cardDetail', id:this.getId('cardDetail'), children:[
+                                {tag:'div', id:this.getId('progressBar')} //,
+        //                      {tag:'h1', cls:'loading', html:"loading"}
+                        ]}
+                ]);
+
+                this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':this.getElement('progressBar')}));
+                MochiKit.Signal.signal(Clipperz.PM.UI.Common.Controllers.ProgressBarController.defaultController, 'updateProgress', 0);
+        },
+
+        //=========================================================================
+
+        'showCardDetails': function (someData) {
+                this.element().innerHTML = '';
+                this.append(this.element(), [
+                        {tag:'fieldset', id:this.getId('fields'), children:MochiKit.Base.map(function (aFieldData) {
+                                return {tag:'div', cls:'row', children:[
+                                        {tag:'label', html:aFieldData['label']},
+        //                                      {tag:'span', cls:('fieldValue ' + (aFieldData['isHidden']? 'password' : 'text')), html:aFieldData['value']}
+                                                {tag:'div', cls:('fieldValue ' + (aFieldData['isHidden']? 'password' : 'text')), children:[
+                                                {tag:'div', children:[{tag:'p', html:aFieldData['value']}]}
+                                        ]}
+        //                                      {tag:'input', type:'text', cls:('fieldValue ' + (aFieldData['isHidden']? 'password' : 'text')), value:aFieldData['value'], disabled:true}
+
+                                ]}
+                        }, someData['fields'])}
+                ]);
+
+                MochiKit.Iter.forEach(MochiKit.Selector.findChildElements(this.element(), ['span.password']), MochiKit.Base.bind(function (aPasswordElement) {
+                        MochiKit.Signal.connect(aPasswordElement, 'onclick', function (anEvent) { alert(MochiKit.DOM.scrapeText(anEvent.src())); })
+                }, this));
+
+                if (someData['directLogins'].length > 0) {
+                        this.append(this.element(), [
+                                {tag:'h2', html:"Direct logins"},
+                                {tag:'fieldset', id:this.getId('directLogins'), children:MochiKit.Base.map(function (aDirectLoginData) {
+                                        return {tag:'div', cls:'row', id:('directLogin_' + aDirectLoginData['_reference']), children:[
+                                                {tag:'img', cls:'favicon', src:aDirectLoginData['favicon']},
+        //                                      {tag:'input', cls:'directLogin', disabled:'disabled', type:'text', name:aDirectLoginData['label'], value:aDirectLoginData['label']}
+                                                {tag:'span', cls:'directLogin', html:aDirectLoginData['label']}
+                                        ]}
+                                }, someData['directLogins'])}
+                        ]);
+
+                        MochiKit.Base.map(MochiKit.Base.bind(function (aRowNode) {
+                                        MochiKit.Signal.connect(aRowNode, 'onclick', this, 'directLoginClickHandler');
+                                }, this),
+                                MochiKit.Selector.findChildElements(this.getElement('directLogins'), ['div.row'])
+                        )
+                };
+                
+                if (someData['notes'] != '') {
+                        this.append(this.element(), [
+                                {tag:'h2', html:"Notes"},
+                                {tag:'fieldset', id:this.getId('fieldset'), children:[
+                                        {tag:'div', cls:'row notes', children:[
+                                                {tag:'span', html:someData['notes']}
+                                        ]}
+                                ]}
+                        ]);
+                };
+
+                return true;
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'toggleClickHandler': function (anEvent) {
+                        varnextState;
+                        varfieldValue;
+                
+//console.log("TOGGLE");
+                anEvent.preventDefault;
+                fieldValue = MochiKit.Selector.findChildElements(anEvent.src().parentNode.parentNode, ['span.password'])[0];
+
+                nextState = (MochiKit.DOM.getNodeAttribute(anEvent.src(), 'toggled') != 'true');
+                if (nextState) {
+                        MochiKit.DOM.removeElementClass(fieldValue, 'clear');
+                } else {
+                        MochiKit.DOM.addElementClass(fieldValue, 'clear');
+                }
+                
+                MochiKit.DOM.setNodeAttribute(anEvent.src(), 'toggled', nextState);
+        },
+*/
+        //=========================================================================
+
+        'directLoginClickHandler': function (anEvent) {
+                anEvent.preventDefault();
+                
+                if (/(directLogin_)/.test(anEvent.src().id)) {
+                        var directLoginReference;
+                        
+                        directLoginReference = anEvent.src().id.match(/(directLogin_)(.*)/)[2];
+                        MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectedDirectLogin', {cardReference:this.cardReference(), directLoginReference:directLoginReference});
+                }
+        },
+
+        //=========================================================================
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/CardList.js b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/CardList.js
new file mode 100644
index 0000000..770f983
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/CardList.js
@@ -0,0 +1,204 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.iPhone.Components');
+
+Clipperz.PM.UI.iPhone.Components.CardList = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.iPhone.Components.CardList.superclass.constructor.apply(this, arguments);
+
+        this._cardDetail = null;
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.iPhone.Components.CardList, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.iPhone.Components.CardList component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'toolbar', id:'toolbar', children:[
+                                {tag:'h1', id:'pageTitle', html:"cards"},
+                                {tag:'a', id:'backButton', cls:'button', href:'#', html:"cards"}
+                        ]},
+                        {tag:'div', cls:'cardList', id:this.getId('cardList'), children:[
+                                {tag:'form', title:'search', cls:'panel cardListSearchForm', id:this.getId('cardListSearchForm'), children:[
+                                        {tag:'input', type:'search', name:'search', value:"", placeholder:"search", id:this.getId('searchField')}
+                                ]},
+                                {tag:'ul', cls:'panel cardListPanel', id:this.getId('cardListPanel'), children:[]}
+                        ]},
+                        {tag:'div', cls:'panel cardDetailPanel', id:this.getId('cardDetail')}
+                ]);
+
+                        MochiKit.Signal.connect(this.getElement('cardListSearchForm'),  'onsubmit',             this,'searchHandler');
+                        MochiKit.Signal.connect(this.getElement('cardListSearchForm'),  'onkeydown',    this,'searchHandler');
+                        MochiKit.Signal.connect(this.getElement('cardListSearchForm'),  'onkeyup',              this,'searchHandler');
+                
+                        MochiKit.Signal.connect(this.getElement('cardListPanel'),               'onclick',              this,'cardListClickHandler');
+                        MochiKit.Signal.connect('backButton',   'onclick',              this,'backButtonClickHandler');
+
+                MochiKit.Style.hideElement('backButton');
+                MochiKit.Style.hideElement(this.getElement('cardDetail'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'searchHandler': function (anEvent) {
+                        if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ENTER')) {                          //RETURN
+                        anEvent.preventDefault();
+                } else {
+                        if ((typeof(anEvent.key()) != 'undefined') && (anEvent.key().string == 'KEY_ESCAPE')) {
+                                anEvent.target().value = "";
+                        }
+        
+                        if (anEvent.type() == 'keyup') {
+                                MochiKit.Signal.signal(this, 'searchEvent', anEvent.target().value);
+                        }
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'update': function (someObjects) {
+                        varcardListPanel;
+                var i,c;
+
+                cardListPanel = this.getElement('cardListPanel');
+                cardListPanel.innerHTML = '';
+
+                c = someObjects.length;
+                
+                for (i=0; i<c; i++) {
+                        this.append(cardListPanel, {tag:'li', cls:'cardListItem', id:('cardListItem_' + someObjects[i]['_reference']), children:[
+                                {tag:'img', src:(someObjects[i]['favicon'] ? someObjects[i]['favicon'] : 'data:application/octet-stream;charset=utf-8;base64,AAABAAEAFxcAAAEAGAD8BgAAFgAAACgAAAAXAAAALgAAAAEAGAAAAAAAAAAAABIXAAASFwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////9zAC////////////////////////////////////////////////////////////////////////////////////////////9pAG////////////////////////////////////////////////////////////////////////////////////////////9rAC////////////////////////////////////////////////////////////////////////////////////////////9yAHP////////////////////////IyMizs7O6urrq6ur////////////Ozs6zs7Ozs7Pq6ur///////////////////////8AAAD////////////////////V1dWXl5eXl5eXl5elpaX4+Pj////Ozs6Xl5eXl5eXl5eenp7///////////////////////8AAAD////////////////////Ozs6Xl5eXl5eXl5eXl5fBwcHq6uqenp6Xl5eXl5eXl5eXl5f///////////////////////8AAAD////////////////////j4+OXl5eXl5eXl5eXl5eXl5elpaWXl5eXl5eXl5eXl5ezs7P///////////////////////8AAAD////////////////////////IyMiXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eenp7x8fH////////////////////////////////////////////////////4+PilpaWXl5eXl5eXl5eXl5eXl5eXl5eXl5fOzs7////////////////////////////////////////////////////////q6uq6urqXl5eXl5eXl5eXl5eXl5eXl5eenp7V1dX4+Pj///////////////////////8AAAD////////////4+PjOzs6lpaWXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5e6urrj4+P///////////////8AAAD////////////BwcGXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5fx8fH///////////8AAAD///////////+zs7OXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5eXl5fj4+P///////////8AAAD////////////IyMiXl5eXl5eXl5eXl5e6urqXl5eXl5eXl5eXl5esrKylpaWXl5eXl5eXl5eenp7x8fH///////////8AAAD////////////////Ozs7Ozs7V1dX4+Pj///+Xl5eXl5eXl5eXl5fOzs7////q6urOzs7Ozs7q6ur///////////////8AAAD///////////////////////////////////+Xl5eXl5eXl5eXl5fOzs7///////////////////////////////////8AAAD///////////////////////////////////+Xl5eXl5eXl5eXl5fOzs7///////////////////////////////////8AAAD///////////////////////////////////+Xl5eXl5eXl5eXl5fOzs7///////////////////////////////////8AAAD////////////////////////////////////IyMiXl5eXl5eenp7x8fH///////////////////////////////////8AAAD////////////////////////////////////////j4+Pj4+Px8fH///////////////////////////////////////8AAAD///////////////////////////////////////////////////////////////////////////////////////////8AAAD///////////////////////////////////////////////////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAo=')},
+                                {tag:'a', id:('cardListReference_' + someObjects[i]['_reference']), href:'#', html:someObjects[i]['label']}
+                        ]})
+                        
+                        MochiKit.Signal.connect('cardListItem_' + someObjects[i]['_reference'], 'onclick', this, 'cardListClickHandler');
+                }
+
+        },
+
+        'cardListClickHandler': function (anEvent) {
+                anEvent.preventDefault();
+
+                if (/(cardListReference_|cardListItem_)/.test(anEvent.target().id)) {
+                        var cardListReference;
+                        
+                        cardListReference = anEvent.target().id.match(/(cardListReference_|cardListItem_)(.*)/)[2];
+//console.log("Showing detail for card named", cardListReference);
+                        MochiKit.Signal.signal(this, 'selectedCard', cardListReference);
+                }
+        },
+
+        //=========================================================================
+
+        'cardDetail': function (someData) {
+                if (this._cardDetail == null) {
+                        this._cardDetail = new Clipperz.PM.UI.iPhone.Components.CardDetail({element:this.getElement('cardDetail')});
+                }
+                
+                return this._cardDetail;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'removeCardDetail': function () {
+                if (this._cardDetail != null) {
+                        this._cardDetail.remove();
+                        this._cardDetail = null;
+                }
+        },
+
+        //=========================================================================
+
+        'showCard': function (someData) {
+                        vardeferredResult;
+                        varoffset;
+
+                offset = ((MochiKit.DOM.getNodeAttribute(MochiKit.DOM.currentDocument().body, 'orientation') == 'portrait') ? 320 : 480);
+                this.cardDetail().render();
+                this.cardDetail().setCardReference(someData['_reference']);
+                MochiKit.Style.setElementPosition(this.cardDetail().element(), {x:offset});
+                new MochiKit.Visual.Sequence([
+        //              new MochiKit.Visual.Move(this.cardDetail().element(), {x:offset, y:45, mode:'absolute', duration:0, sync:true}),
+                        new MochiKit.Visual.Parallel([
+                                        new MochiKit.Visual.Move(this.getElement('cardList'),           {x:-offset, y:0, mode:'relative',transition:MochiKit.Visual.Transitions.linear, sync:true}),
+                                        new MochiKit.Visual.Move(this.getElement('cardDetail'),                 {x:0, y:45,              mode:'absolute',transition:MochiKit.Visual.Transitions.linear, sync:true}),
+        //                      new MochiKit.Visual.ScrollTo('toolbar', {sync:true}),
+                                        MochiKit.Visual.appear  ('backButton',                                          {                                                               transition:MochiKit.Visual.Transitions.linear, sync:true})
+                        ], {duration:1, sync:true}),
+                        MochiKit.Visual.fade(this.getElement('cardList'), {duration:0, sync:true})
+                ], {})
+
+                MochiKit.DOM.getElement('pageTitle').innerHTML = someData['title'];
+
+                return true;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showCardDetails': function (someData) {
+                return this.cardDetail().showCardDetails(someData);
+        },
+
+        //=========================================================================
+
+        'backButtonClickHandler': function (anEvent) {
+                        varoffset;
+
+                anEvent.preventDefault();
+
+                MochiKit.DOM.getElement('pageTitle').innerHTML = "cards";
+
+                offset = ((MochiKit.DOM.getNodeAttribute(MochiKit.DOM.currentDocument().body, 'orientation') == 'portrait') ? 320 : 480);
+                MochiKit.Style.setElementPosition(this.getElement('cardList'), {x:-offset});
+                MochiKit.DOM.showElement(this.getElement('cardList'));
+
+                new MochiKit.Visual.Parallel([
+                                new MochiKit.Visual.Move(this.getElement('cardList'),           {x:offset, y:0, mode:'relative',transition:MochiKit.Visual.Transitions.linear, sync:true}),
+                                new MochiKit.Visual.Move(this.getElement('cardDetail'),                 {x:offset, y:0, mode:'relative',transition:MochiKit.Visual.Transitions.linear, sync:true}),
+                                MochiKit.Visual.fade    (this.getElement('cardDetail'),                 {                                                               transition:MochiKit.Visual.Transitions.linear, sync:true}),
+                                MochiKit.Visual.fade    ('backButton',                                          {                                                               transition:MochiKit.Visual.Transitions.linear, sync:true})
+                ], {duration:1, afterFinish:MochiKit.Base.method(this, 'removeCardDetail')})
+                
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/LoginForm.js b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/LoginForm.js
new file mode 100644
index 0000000..eec83b0
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Components/LoginForm.js
@@ -0,0 +1,181 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.iPhone.Components');
+
+Clipperz.PM.UI.iPhone.Components.LoginForm = function(args) {
+        args = args || {};
+
+        Clipperz.PM.UI.iPhone.Components.LoginForm.superclass.constructor.apply(this, arguments);
+
+        return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.iPhone.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, {
+
+        //-------------------------------------------------------------------------
+
+        'toString': function () {
+                return "Clipperz.PM.UI.iPhone.Components.LoginForm component";
+        },
+
+        //-------------------------------------------------------------------------
+
+        'focusOnUsername': function () {
+                this.getElement('username').focus();
+        },
+
+        //-------------------------------------------------------------------------
+
+        'username': function () {
+                return this.getElement('username').value;
+        },
+        
+        'passphrase': function () {
+                return this.getElement('passphrase').value;
+        },
+
+        //-------------------------------------------------------------------------
+
+        'renderSelf': function(/*aContainer, aPosition*/) {
+                this.append(this.element(), [
+                        {tag:'div', cls:'toolbar iPhoneClipperzToolbar', children:[
+                                {tag:'h1', id:'pageTitle', html:'Clipperz'},
+                                {tag:'a', id:'backButton', cls:'button', href:'#', html:"back"}
+                        ]},
+                        {tag:'form', title:'Theaters', cls:'panel toolbarlessPanel loginForm', id:this.getId('loginFormPanel'), children:[
+                                {tag:'fieldset', id:this.getId('fieldset'), children:[
+                                        {tag:'div', cls:'row', children:[
+                                                {tag:'label', html:"username"},
+                                                {tag:'input', type:'text', name:'username', value:"", autocorrect:'off', autocapitalize:'off', id:this.getId('username')}
+                                        ]},
+                                        {tag:'div', cls:'row', children:[
+                                                {tag:'label', html:"passphrase"},
+                                                {tag:'input', type:'password', name:'passphrase', value:"", id:this.getId('passphrase')}
+                                        ]}
+                                ]},
+                                {tag:'a', cls:'whiteButton', type:'submit', href:'#', html:"Login", id:this.getId('submit')}
+                        ]},
+                        {tag:'div', cls:'panel toolbarlessPanel loginProgressPanel', id:this.getId('loginProgressPanel'), children:[
+                                {tag:'div', id:this.getId('progressBar')} //,
+        //                      {tag:'a', cls:'whiteButton', type:'submit', href:'#', html:"Cancel", id:this.getId('cancel')}
+                        ]},
+                        {tag:'div', cls:'panel loginErrorPanel', id:this.getId('loginErrorPanel'), children:[
+                                {tag:'div', cls:'errorMessage', id:this.getId('errorMessageBox'), children:[
+                                        {tag:'h2', id:this.getId('errorMessage'), html:"Login failed"}
+                                ]}
+                        ]}
+                ]);
+
+                        MochiKit.Signal.connect(this.getElement('submit'),      'onclick',this, 'submitHandler');
+                        MochiKit.Signal.connect(this.getElement('loginFormPanel'),      'onsubmit',this, 'submitHandler');
+
+        //              MochiKit.Signal.connect(this.getElement('cancel'),      'onclick',this, 'cancelHandler');
+                        MochiKit.Signal.connect('backButton',   'onclick',this, 'backHandler');
+
+                this.addComponent(new Clipperz.PM.UI.Common.Components.ProgressBar({'element':this.getElement('progressBar')}));
+
+        //      MochiKit.Style.hideElement(this.getElement('errorMessage'));
+
+                this.showLoginForm();
+        //      MochiKit.Async.callLater(0.2, MochiKit.Base.method(this, 'focusOnUsername'));
+        },
+
+        //-------------------------------------------------------------------------
+
+        'showLoginForm': function () {
+                MochiKit.Style.showElement(this.getElement('loginFormPanel'));
+                MochiKit.Style.hideElement(this.getElement('loginProgressPanel'));
+                MochiKit.Style.hideElement(this.getElement('loginErrorPanel'));
+                MochiKit.Style.hideElement('backButton');
+        },
+
+        'slideInLoginForm': function () {
+                        varoffset;
+
+                offset = ((MochiKit.DOM.getNodeAttribute(MochiKit.DOM.currentDocument().body, 'orientation') == 'portrait') ? 320 : 480);
+
+                MochiKit.Style.showElement(this.getElement('loginFormPanel'));
+                MochiKit.Style.setElementPosition(this.getElement('loginFormPanel'), {x:-offset, y:0});
+
+                new MochiKit.Visual.Sequence([
+                        new MochiKit.Visual.Parallel([
+                                        new MochiKit.Visual.Move(this.getElement('loginErrorPanel'),    {x:offset, y:0,         mode:'relative',transition:MochiKit.Visual.Transitions.linear, sync:true}),
+                                        new MochiKit.Visual.Move(this.getElement('loginFormPanel'),             {x:0, y:0,              mode:'absolute',transition:MochiKit.Visual.Transitions.linear, sync:true}),
+                                        MochiKit.Visual.fade    ('backButton',                                                  {                                                               transition:MochiKit.Visual.Transitions.linear, sync:true})
+                        ], {duration:0.5, sync:true}),
+                        MochiKit.Visual.fade(this.getElement('loginErrorPanel'), {duration:0, sync:true})
+                ], {})
+        },
+
+        'showLoginProgress': function () {
+                MochiKit.Style.hideElement(this.getElement('loginFormPanel'));
+                MochiKit.Style.showElement(this.getElement('loginProgressPanel'));
+        },
+
+        'showLoginError': function (anError) {
+                this.getElement('errorMessage').innerHTML = "Login error";
+
+                MochiKit.Style.showElement('backButton');
+                MochiKit.Style.hideElement(this.getElement('loginProgressPanel'));
+                MochiKit.Style.showElement(this.getElement('loginErrorPanel'));
+                MochiKit.Style.setElementPosition(this.getElement('loginErrorPanel'), {x:0, y:45});
+        },
+
+        //-------------------------------------------------------------------------
+/*
+        'disableCancelButton': function () {
+                MochiKit.DOM.hideElement(this.getElement('cancel'));
+        },
+*/
+        //-------------------------------------------------------------------------
+
+        'submitHandler': function (anEvent) {
+                anEvent.preventDefault();
+
+                MochiKit.Signal.signal(this, 'doLogin', {'username':this.username(), 'passphrase':this.passphrase()});
+        },
+
+        'cancelHandler': function (anEvent) {
+                anEvent.preventDefault();
+                
+//console.log("CANCEL");
+        },
+
+        'backHandler': function (anEvent) {
+                anEvent.preventDefault();
+
+                this.slideInLoginForm();
+        },
+
+        //-------------------------------------------------------------------------
+
+        __syntaxFix__: "syntax fix"
+});
diff --git a/frontend/gamma/js/Clipperz/PM/UI/iPhone/Controllers/MainController.js b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Controllers/MainController.js
new file mode 100644
index 0000000..b43d877
--- a/dev/null
+++ b/frontend/gamma/js/Clipperz/PM/UI/iPhone/Controllers/MainController.js
@@ -0,0 +1,372 @@
+/*
+
+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/>.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.iPhone.Controllers');
+
+        //Some parts of this controller have been derived from the iUI library.
+
+Clipperz.PM.UI.iPhone.Controllers.MainController = function() {
+                this._loginForm =       null;
+                this._cardList =        null;
+                this._cachedValues =null;
+                this._user =            null;
+
+        if (typeof window.onorientationchange == 'object') {
+                MochiKit.Signal.connect(window, 'onorientationchange', this, 'orientationChangeHandler');
+                MochiKit.Async.callLater(0, MochiKit.Base.method(this, 'orientationChangeHandler'));
+        } else {
+                this.setOrientation('portrait');
+        //      this.setOrientation('landscape');
+        }
+
+        this.addMetaTag('viewport', 'width=devicewidth; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');
+        this.addMetaTag('apple-mobile-web-app-capable', 'yes');
+        this.addMetaTag('apple-mobile-web-app-status-bar-style', 'black');
+
+        this.addLinkTag('apple-touch-icon', 'data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABfCAYAAACOTBv1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAQC0lEQVR4nO2ce3wU1b3AvzOzz2TzBpKQhIS3CnLxgYoPqAgiQS8igiAqiFprtT571YpKUa9tvVgrVvhc7IXS4lUUvGgR5CWIoiAIYoQgJGDI+0k2yW42szNz7h8pGBHIPmazqeb7+UD4DHt+vzPfPTnnzJkzIwGCLqKCHO0K/JTpkh9FuuRHkS75UaRLfhTpkh9FuuRHkS75UaRLfhTpkh9FLNGuwKnIzc3l9WXLQAIhQILWvwQnjn3vUNtjkoQQ4kSZr77KY+TIkR1/EgHQKeWnp6eTkJiI0P2gqyeOnxD7T+ttxf/wp4SwOOnTp0/UzqM9OqV8oFXygSVIm3/xvePSKf59up/cWfO9z3c2OnmfH646qVMv2XZa+RKtrT8cWruoztv2O6384/15OLSODZ237Xda+W1nMKEiROe+U9Rp5ZtFJ+51Oq/8E/P7MOjE3oFOLL/1Iik8fUJoCF03pT6RoNPKF4Q/2zF0P0J0yQ8aM/pqoesIXQs/UITotPKFYRDuXMXQ/dDV8oNECIShgRGmOKFjGIY5dYoAnVK+QCB0DSNM+Ybmb/0SOylhy8/NzWXYsGFm1OU7hGhd0RThtdrW2Y758kdcdhGLX30h7Dhhr2ouWrSI9PQ0ykrLeHn+fBYsWIDX6w0zqsAwNOQwW77QtbBnTMdJSkzgkfvuZPqkXOJi7SAMLhl2Htt37gk5ZlgtPycnh7TU7oiGo6TH6zz/3DPUVpXz3qp3+Lch54YeWLR2OyLcbkcPf9wY/bNL2fjuMg7uWM09t11PnE1FaSwADB65746wYofV8ufMeQph6MhfvoT09atIWWORBt7GNaOv5urRWyktLeWll//MXxb/FZ/PF3BcgcDQVeRwux1DQxjBz1m7JSfx2IM/Z/J1Y3A5LUiShFK3G3vpWuwVW9Bjs6i/eCGXnjcgrPqF1fJzrxkLuopUuAJJGMhH12LZMA3LG2ej7JxDZmwT//W7uVSVFPDW/y5l4ID+gQUWAmHo4V8g6VrAA64kSYwfM5It//g7+z9Zye2TxxJPDY7CpSRsnUrCzgdwlH2AZPiwNB5CajyMYqjkjhkRcvVCbvnnnzeUBJcDUbIFyVv+/RNprsKSNx/y5mP0uAS53zSuvWoc48duoqi4lD++vIC/vb4cVVVPHVyA0P1hLw0Yhh/EmU8xtXsyv3noHiaMu5xYmwXJ8GMr34ijfB3Wut2nvR3jKN9EU850fnXHNNZs2BpS/UKW/+QTj4GhIxe+fcbPyVXbsVVtR1ifRMueQE7fKbz0u6f5/dzfsGb9JuY8+wJHiopPKmXObAdDwzhFtyPLMhPGjeKRe2cyIDsVCYHiPoCjcB32qi3Imqfd0PaqrTRmTWFw31QURUbXg69ryPKvuOxihN+LXLQ6oM9L/kasBcuwFixDTzwbS+8buf6q8UwYu4bDR8t4cf5/8+bK99C01hmKOfP87/f5PdO6M/vhX3DdmOHYLTKyWo/92zdxlm/A4j0aVGyLrxzFfQDD1ZdpE8exbMX7QdcvJPmjR/2MWJuCVLIBSXUHXV6pz0fZ8yz2vS+gZYymX/ZEXvnDbOY99yjvrd1CwZFiU65wDd0PhsTUieN44O7p9E5PQhI6trrPcJavx1a7E4nQf7uc1Z/gj8nmjptCk39860tQrFu9ksuGDcX+6f1YioNPeir0mEzUrOtQs65FtyYhSWA7uorYr0O/mKm5/C0MJRYhDBRPEc6KjTirNiP7g28wp6yzNZHywfMQsoUBo+7C1+IPqnxILf+ioYMRaj1K2aZQip8SxVuC85uFOA4uwt/9EloyxkOYSwNSyzEcdRtxVm7C2lRoUk2/Q/HXY2vYj881kLumX88ri888/p1M0PKnTr4BRfKjHN2ApAc+dw8USejYqrZhq9qGkJSwYiXv+iVShFc1nXXbaXb2Ydq1VwQtP+h5/r13zUAYOpbiwAbacAhXXKTFA8S492BoPlLjBPGumKDKBiVfURQG9ctCeKuxVH0WVKIfK4rRjLMhD8lQeWDWpKDKBiX/njtngFCxlK7rkFb1r4KrYTeG5ue6kcGtZwUlf8bUCWBo2ErWBZXkx06MJx+hNZFg8dCzR1LA5QKWH+N0kpOeCJ4yLPVfhVTJHyuy0HA17Qeh8+Cs6wMvF+gHH77vTjA0JG85emx2SJX8saLJsaA3I3Q/V52fE3C5gKeaY6+6AmH4UV39qRu2EMVThL1qK47qj7F4S0Kp8780ftlFo3MATc6z8Fp6Ht/ZS0xiMg6bFZ/a/gVXwFe4TqeTqVMmMevm6zk7pwea9xhCGCAEFk8RjpptOGo/xdJcFuZpdV78sotGxwAanQNptvZEIJAkGUtiDnuLmnht+Xo2bNoS8E37kJYXYmNjmXbTjcy8aTwDMpLRmmtb1+CFQPEcIaZuB87a7VhaKoMN3enwy3E0OgfQYO9PsyWt1ZikYEnKIa+oidfe2sj6jZtD2iURkvy2uFwupk+9kRmTc+mT7kLz1CAMAQgsniPEHNtJzLGdWNTqcNJ0KKoST6O9Pw2O/visaQjDQJJlrEl9+KrYy+IVm/hg/YfoYd5vCFt+W+Lj47ll2mRuvWE02d0crV+EECAMbN4iYty7iKnfjcVfa1ZK01CVBBrs/Wi098dnTUUIA0lubeH7in0sXrmZNes2hi28LabKb0tCQgIzpk/h5glXkpko//OLaB0jbM1FxLh3E9uwF6t2LBLpA0JVEmiw9afB3heftUfrLjlZxprUm/wylSXvbOH9DzaiaZHZ+xMx+W1JSkpi5i1TuGn85fSMF2hNVSe6JntzEbGNe3E15WHRzFnqPRMtSiIN9n402Pris3RrHasAW3IfDlT4WfLOVlav3RAx4W3pEPltSUlJYdYtU5g8bjipMS2oDa2DclzDLlJrVkU0twCK4q7DY81AIGFP6UN+ucZfV33M6rUb8PuDW48Plw6X35aZU3J5YvowbGoVWRWvIYvItzZNclIQNxHVlsK4B/5OWXV9xHOejqjt1UzvkcRj04eD5iWtenmHiAewiGYyPZsQ3jqWzp2CIkdvu2pUMsuyxMo/3Y+keehRtxq7Vteh+V16Janql6RY3Lz48IQOzd2WqMh/dc7PSbJ6iG/cSUJzfjSqQKq2D5dWyuV9YPKYoVGpQ4fLv/Ga4YwY6MTmKyO1YUtHpz+BBORon2PVm3h0Yj/6ZAS+FGwWHSo/My2FObMuR9K8ZLjfRya6N2SsqPQWu8DvZsmjY3DYwrtnHCwdJl+WJd78w+2gNtKzaSN2I/Jz+kCI4xgZ4iBOo4ZFj4/v0NwdJn/h0zOJl9wkN+8lQT0cdjyBRAtOE2oGaVIRcUYF/WJr+NVkkx/0OAMdIn/KuEu4OBuc/nLSmneYErNc6k8hF2CY8KizJEFfy0FseJk2zMqFZ6WaUMP2ibj8XunJzJ42FFn3kOXdjBzG9rzjeIinzMjBI2IpNQLcdt4OVkljgO0QQvXw4syBxDkj3/9HVL4iyyx75iaMlnqyfNuwi/Z3/7aHISQO62cj2eOxxCRTbvTEbSSaUFuIUzxk24qR1RqWPnpFxF8XE1H5C2ZPxWXU0K1lP4lGqSkxS4zeeA0HGwqd/N8+G8IwKFD7429nH36gZDjqSJLrSDaKmDvjfFNino6IyZ86bhgXpHtxalVkGHmmxGw04inX0tESB/HEvGU8+6eluBOGoxoShS05puQAGOiqxI6XKzIqGHdRpmlxTyYi8nN6JvPrCX1QdC+99R2mvGxLFzIFLb2R7XHc+8cNJ54yvPnx17B0P4taNZZyNSXsPAAWWXBOQi3oXv7jaomMFLspcU/GdPkWRWbp7FyE6ibH2IMdczbTFqkZeDWZLSUp7N136MTx2to65r5xGMUWw2FPCh7dZkq+eJtG3zg3oqWEhXenYY3A+Gu6/AWPT8ShVtDDKCBRMue+bb3mosyXgEgewuPz3vjB/7+/8RN2egah6xr57m4YwpyBMivOoLsDnL6jvDjLnFlVW0yVf8v4CxmSXItL1JIlFZgSUxMyhzypWOxxPLjgs9PuEnjouSWQOQqPJlHYGGdKboCzUwQOBAMdBdx2lbn9v2ny+2amcN+YZBTdSz9ln2mv1zrs6YZPk9hWm80XeQdP+zld15n5n+uwJedQ0iRT4zOnn7DIMCQNEIKbB9UwqFesKXHBRPnzf/3vGC1udF3jmBZvSszaFgflXgei+1Aem9f+gwdHior5y45YJFmQX2vQYsK6nRBQ3dT6eJhQVZ672bzuxzT5D/75I6SMK9ENQaEvk2+8vdBE6OH9hsQ37ngUu5NH/+frgLdsLF6+nrKECbSosK86vDcUtmiwq0jiYIWEoUnY++by9HvhXygexzT5hwoOM+L2F9mnjES2u6huiWFPQ28aNEdI8Q7Wx9Ki+dnlGcyOPQeCKnvnb9/Gnn0NtR6ZohBv0dY0wceHJKobQFJiqO11K7lPbSRv/6H2CweIAvzWrGCGYfCPjds5ZhvAqGF98R4roaI5BgmDeKsa8DhQ6VU44jawpF3ILXM3BL0VT9M08sqtjD03luraerq7wB7gBbAQcLAS8opB80s4087hrbLBPPXKO6ZvJzFV/nHyDx7m3c+rmXDDJOT6/dSrFtwtFpLtLSjt/K6pOnxZJZBsCcxeBUUlVSHVoayyhoxBo+glDlHnEWQmgtzOl+9TYddhiZJaCYSM45wJ3Pu3YjZ8/EVIdWiPiC0vVFZWcvVd8/nUPxqrqzt1PoMdlQ5qfWdOub9Gwq9J7NNHsG1XcN3NyTy/8B18fabS2Az729k8XemGj/KhpkFCtrqoyJrO+CfX8E3Bt2HV4Ux0yL6dEZdewO9vTaO5cC1CCHrFCfom/bAlljbA/moJS/pljH1qhymbmJKTk1j50CCaDm/jwt6CtJMWQA0D8kuhsEJCGODKOpcl+d14/d0Pw87dHhHpdk6mqLicFZ9Ucc3E27A35lPv1anxQrKTE5ftPj98WS6BEscz66wcKTZne3lzs48q0rm0ZwsV1V4yUr7L6W2B7QehvFYCAc5zJ3H3kkNs3bHXlNzt0WG3Ed1uNzfcv4j368fh6H4Obi98+i2UN7QOcnnlEqoKB61XsvXz/abmXrt5B/tixtCiSuwuaM1XVgeb86DeI6M4Ezjaazrjn1zFkaKOe8omKtsFzx00kFd/eR6evOUgQYJdUN8sYc+8hHHPfnH69/CEgaIorHl+Es1fvU2yS3DMIyOEIC7nfBbujmXF2tDemRMOUdur6XA4WPDUbWRVr0D11CNbY5i3pzebPjNn7f9U9M7O5LWpyTSV5CFJYB08hbvmf0RpWUXEcp6JDunzT4Wmabz74ReIjBEMH9iNQwzhleWRbX317gbktCGcn6ZzICGX2597i4aGxojmbA8R7T/ZvTKF3W7rsHwDB/SL+jkDIqpbxH/qdMrX+f5U6JIfRbrkR5Eu+VGkS34U6ZIfRbrkR5Eu+VGkS34U6ZIfRbrkR5H/Bx8z6HmTXnicAAAAAElFTkSuQmCCCg==');
+        //this.addLinkTag('apple-touch-startup-image', 'default.png');
+
+        //      if (!window.navigator.standalone)// not running as an installed app
+
+        MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'selectedDirectLogin', this, 'selectedDirectLoginHandler');
+
+        MochiKit.DOM.addElementClass(document.body, 'iPhone');
+        return this;
+}
+
+MochiKit.Base.update(Clipperz.PM.UI.iPhone.Controllers.MainController.prototype, {
+
+        'toString': function () {
+                return "Clipperz.PM.UI.iPhone.Controllers.MainController";
+        },
+
+        //=========================================================================
+
+        'user': function () {
+                return this._user;
+        },
+        
+        'setUser': function (aValue) {
+                this._user = aValue;
+        },
+
+        //=========================================================================
+
+        'loginForm': function() {
+                if (this._loginForm == null) {
+                        MochiKit.DOM.removeElement('mainDiv');
+                        this._loginForm = new Clipperz.PM.UI.iPhone.Components.LoginForm({element:MochiKit.DOM.currentDocument().body});
+                        MochiKit.Signal.connect(this._loginForm, 'doLogin', this, 'doLoginHandler')
+                }
+                
+                return this._loginForm;
+        },
+
+        'removeLoginForm': function () {
+                if (this._loginForm != null) {
+                        this._loginForm.remove();
+                        this._loginForm = null;
+                }
+        },
+
+        //-----------------------------------------------------------------------------
+
+        'cardList': function () {
+                if (this._cardList == null) {
+                        this._cardList = new Clipperz.PM.UI.iPhone.Components.CardList({element:MochiKit.DOM.currentDocument().body});
+                                MochiKit.Signal.connect(this._cardList, 'searchEvent',this, 'searchEventHandler')
+                                MochiKit.Signal.connect(this._cardList, 'selectedCard',this, 'selecetedCardHandler')
+                }
+                
+                return this._cardList;
+        },
+
+        //=========================================================================
+
+        'currentWidth': function () {
+                return this._currentWidth;
+        },
+        
+        'setCurrentWidth': function (aValue) {
+                this._currentWidth = aValue;
+        },
+
+        //=========================================================================
+
+        'orientationChangeHandler': function () {
+                switch(window.orientation) {
+                        case 0:
+                                this.setOrientation('portrait');
+                                break;  
+                        case 90:
+                        case -90: 
+                                this.setOrientation('landscape');
+                                break;
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'setOrientation': function (anOrientation) {
+                document.body.setAttribute('orientation', anOrientation);
+                setTimeout(scrollTo, 100, 0, 1);
+        },
+
+        //-------------------------------------------------------------------------
+
+        'slidePages': function (fromPage, toPage, backwards) {        
+                var axis;
+                var slideDone;
+                
+                slideDone = function () {
+                //      console.log("slideDone");
+                        if (!hasClass(toPage, "dialog")) {
+                                fromPage.removeAttribute("selected");
+                        }
+                        checkTimer = setInterval(checkOrientAndLocation, 300);
+                        setTimeout(updatePage, 0, toPage, fromPage);
+                        fromPage.removeEventListener('webkitTransitionEnd', slideDone, false);
+                }
+
+                axis = (backwards ? fromPage : toPage).getAttribute("axis");
+
+                clearInterval(checkTimer);
+
+                if (canDoSlideAnim() && axis != 'y') {
+                        slide2(fromPage, toPage, backwards, slideDone);
+                } else {
+                        slide1(fromPage, toPage, backwards, axis, slideDone);
+                }
+        },
+
+        //-------------------------------------------------------------------------
+
+        'getCachedValues': function () {
+                var deferredResult;
+
+                if (this._cachedObjects != null) {
+                        deferredResult = MochiKit.Async.succeed(this._cachedObjects);
+                } else {
+                        deferredResult = new Clipperz.Async.Deferred("MainController.getCachedValues", {trace:false});
+                        deferredResult.addMethod(this.user(), 'getRecords');
+                        deferredResult.addCallback(MochiKit.Base.map, Clipperz.Async.collectResults("MainController.getCachedValues - collectResults", {
+                                        '_rowObject':           MochiKit.Async.succeed,
+                                        '_reference':           MochiKit.Base.methodcaller('reference'),
+                                        'label':                        MochiKit.Base.methodcaller('label'),
+                                        'favicon':                      MochiKit.Base.methodcaller('favicon'),
+                                        '_searchableContent':MochiKit.Base.methodcaller('searchableContent')
+                        }, {trace:false}));
+                        deferredResult.addCallback(Clipperz.Async.collectAll);
+                        deferredResult.addCallback(MochiKit.Base.bind(function (someRows) {
+                                this._cachedObjects = someRows;
+                                return this._cachedObjects;
+                        }, this));
+                        deferredResult.callback();
+                }
+                
+                return deferredResult;
+        },
+        //=========================================================================
+
+        'run': function(shouldShowRegistrationForm) {
+                this.loginForm().render();
+                MochiKit.Async.callLater(1, MochiKit.Base.method(this.loginForm(), 'focusOnUsername'));
+        },
+        
+        //=========================================================================
+
+        'doLoginHandler': function (someArgs) {
+                var deferredResult;
+                        varparameters;
+                        varshouldUseOTP;
+        //      var loginProgress;
+                        varuser;
+                var getPassphraseDelegate;
+
+                parameters = someArgs;
+                shouldUseOTP = (typeof(parameters.passphrase) == 'undefined');
+
+                getPassphraseDelegate = MochiKit.Base.partial(MochiKit.Async.succeed, parameters.passphrase);
+                user = new Clipperz.PM.DataModel.User({'username':parameters.username, 'getPassphraseFunction':getPassphraseDelegate});
+
+                deferredResult = new Clipperz.Async.Deferred("MainController.doLogin", {trace:false});
+                deferredResult.addCallbackPass(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress', {'steps':4});
+                deferredResult.addMethod(this.loginForm(), 'showLoginProgress');
+                deferredResult.addCallback(MochiKit.Async.wait, 0.1);
+                deferredResult.addMethod(Clipperz.Crypto.PRNG.defaultRandomGenerator(), 'deferredEntropyCollection');
+                deferredResult.addMethod(user, 'login');
+                deferredResult.addMethod(this, 'setUser', user);
+                deferredResult.addMethod(user, 'getRecords');
+                deferredResult.addMethod(this, 'removeLoginForm');
+                deferredResult.addMethod(this.cardList(), 'render');
+                deferredResult.addMethod(this, 'displaySelectedRecords', '');
+                deferredResult.addErrback(MochiKit.Base.method(this.loginForm(), 'showLoginError'));
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //=========================================================================
+
+        'searchEventHandler': function (aValue) {
+//console.log("searching for ... " + aValue);
+                return this.displaySelectedRecords(aValue);
+        },
+
+        //=========================================================================
+
+        '_displaySelectedRows': function (aFilter, someRows) {
+                var result;
+                
+                result = someRows;
+
+                if (aFilter != null) {
+                        var filter;
+                                varfilterRegExp;
+                        
+                        filter = aFilter.replace(/[^A-Za-z0-9]/g, "\\$&");
+                        filterRegExp = new RegExp(filter, "i");
+                        result = MochiKit.Base.filter(function (aCachedResult) { return filterRegExp.test(aCachedResult['_searchableContent'])}, result);
+                }
+
+
+                result.sort(MochiKit.Base.partial(function (aKey, aComparator, aObject, bObject) {
+                        return aComparator(aObject[aKey], bObject[aKey]);
+                }, 'label',  Clipperz.Base.caseInsensitiveCompare));
+
+                this.cardList().update(result);
+        },
+
+        //-------------------------------------------------------------------------
+        
+        'displaySelectedRecords': function (aFilter) {
+                return Clipperz.Async.callbacks("MainController.displaySelectedrows", [
+                        MochiKit.Base.method(this, 'getCachedValues'),
+                        MochiKit.Base.method(this, '_displaySelectedRows', aFilter)
+                ], {trace:false});
+        },
+
+        //=========================================================================
+
+        'selecetedCardHandler': function (aRecordReference) {
+                        vardeferredResult;
+                        varrecordData;
+
+                recordData = {};
+//console.log("Showing detail for card with reference", aRecordReference);
+                deferredResult = new Clipperz.Async.Deferred("MainController.selectedCardHandler", {trace:false});
+                deferredResult.addMethod(this.user(), 'getRecord', aRecordReference);
+                deferredResult.collectResults({
+                                '_reference':MochiKit.Base.methodcaller('reference'),
+                                'title':        MochiKit.Base.methodcaller('label'),
+                                'favicon':      MochiKit.Base.methodcaller('favicon')
+                });
+                deferredResult.addCallback(function (someData) {
+                        MochiKit.Base.update(recordData, someData);
+                })
+                deferredResult.addMethod(this.cardList(), 'showCard', recordData);
+
+                deferredResult.addMethod(this.user(), 'getRecord', aRecordReference);
+                deferredResult.addMethodcaller('notes');
+                deferredResult.addCallback(function (someNotes) {
+                        recordData['notes'] = someNotes;
+                })
+
+                deferredResult.addMethod(this.user(), 'getRecord', aRecordReference);
+                deferredResult.addMethodcaller('getCurrentRecordVersion');
+                deferredResult.addMethodcaller('fields');
+                deferredResult.addCallback(MochiKit.Base.values);
+                deferredResult.addCallback(MochiKit.Base.map, Clipperz.Async.collectResults("MainController.selectedCardHandler - fields", {
+                                'label':MochiKit.Base.methodcaller('label'),
+                                'value':MochiKit.Base.methodcaller('value'),
+                                'isHidden':MochiKit.Base.methodcaller('isHidden')
+                }, {trace:false}));
+                deferredResult.addCallback(Clipperz.Async.collectAll);
+                deferredResult.addCallback(function (someData) {
+                        recordData['fields'] = someData;
+                });
+
+                deferredResult.addMethod(this.user(), 'getRecord', aRecordReference);
+                deferredResult.addMethodcaller('directLogins');
+                deferredResult.addCallback(MochiKit.Base.values);
+                deferredResult.addCallback(MochiKit.Base.map, Clipperz.Async.collectResults("MainController.selectedCardHandler - directLogins", {
+                                'label':        MochiKit.Base.methodcaller('label'),
+                                'favicon':      MochiKit.Base.methodcaller('favicon'),
+                                '_reference':MochiKit.Base.methodcaller('reference')
+                }, {trace:false}));
+                deferredResult.addCallback(Clipperz.Async.collectAll);
+                deferredResult.addCallback(function (someData) {
+                        recordData['directLogins'] = someData;
+                });
+
+                deferredResult.addMethod(this.cardList(), 'showCardDetails', recordData);
+                deferredResult.callback();
+                
+                return deferredResult;
+        },
+
+        //=========================================================================
+
+        'selectedDirectLoginHandler': function (someData) {
+                        vardeferredResult;
+
+//console.log("<<< signal - directLogin");
+                deferredResult = new Clipperz.Async.Deferred("MainController.selectedDirectLoginHandler", {trace:false});
+                deferredResult.addMethod(this.user(), 'getRecord', someData['cardReference']);
+                deferredResult.addMethodcaller('directLogins');
+                deferredResult.addCallback(MochiKit.Base.itemgetter(someData['directLoginReference']));
+        //      deferredResult.addMethodcaller('runDirectLogin');
+                deferredResult.addCallback(Clipperz.PM.UI.Common.Controllers.DirectLoginRunner.openDirectLogin);
+                deferredResult.callback();
+
+                return deferredResult;
+        },
+
+        //=========================================================================
+
+        'addMetaTag': function (aName, aContent) {
+                        varmetaTag;
+
+                metaTag = document.createElement('meta');
+                metaTag.name = aName;
+                metaTag.content = aContent;
+                document.getElementsByTagName('head')[0].appendChild(metaTag);
+        },
+
+        'addLinkTag': function (aRel, anHref) {
+                var linkTag;
+
+                linkTag = document.createElement('link');
+                linkTag.rel = aRel;
+                linkTag.href = anHref;
+                document.getElementsByTagName('head')[0].appendChild(linkTag);
+        },
+
+        //=========================================================================
+        __syntaxFix__: "syntax fix"
+});
\ No newline at end of file