Index: ether_megapoli/trunk/web/resources/css/backoffice.css
===================================================================
--- ether_megapoli/trunk/web/resources/css/backoffice.css	(revision 264)
+++ ether_megapoli/trunk/web/resources/css/backoffice.css	(revision 265)
@@ -27,5 +27,5 @@
 .containerTitle {
     font-size: 20px;
-    color: #808080;
+    color: #778899;
     font-weight: bold;
     float: left;
@@ -54,5 +54,5 @@
     float: right;
     position: relative;
-    top: 11px;
+    top: 13px;
 }
 
@@ -97,5 +97,5 @@
     width: 800px;
     height: 26px;
-    color: #646464;
+    color: #778899;
     font-weight: bold;
     padding-left: 10px;
@@ -106,5 +106,5 @@
     -moz-border-radius-topright: 0;
     -webkit-border-radius: 0;
-    background: -moz-linear-gradient(white, #C0C0C0);
+    background: -moz-linear-gradient(white, #778899);
     min-height: 400px;
     text-align: justify;
@@ -120,5 +120,5 @@
 
 .containerBottom {
-    background-color: #C0C0C0;
+    background-color: #778899;
     color: #FFFFFF;
     height: 26px;
Index: ether_megapoli/trunk/web/resources/css/button.css
===================================================================
--- ether_megapoli/trunk/web/resources/css/button.css	(revision 264)
+++ ether_megapoli/trunk/web/resources/css/button.css	(revision 265)
@@ -121,5 +121,5 @@
 /* GRAY BUTTON */
 button.gray_button {
-    background-color: #646464;
+    background-color: #778899;
     height: 39px;
     float: right;
Index: ether_megapoli/trunk/web/resources/css/complexButton.css
===================================================================
--- ether_megapoli/trunk/web/resources/css/complexButton.css	(revision 264)
+++ ether_megapoli/trunk/web/resources/css/complexButton.css	(revision 265)
@@ -8,6 +8,6 @@
 }
 
-.complexButton_left {
-    background-image: url("../images/elements/button_left_3.png"); /*background-image: url("../images/elements/button_left.png");*/
+.complexButton_left, .complexButton_left_gray {
+    background-image: url("../images/elements/button_left_3.png");
     background-repeat: no-repeat;
     background-position: top left;
@@ -18,9 +18,18 @@
 }
 
-.complexButton_middle {
+.complexButton_left_gray {
+    background-image: url("../images/elements/button_left_gray.png"); /*background-image: url("../images/elements/button_left.png");*/
+}
+
+
+.complexButton_middle, .complexButton_middle_gray {
     background-image: url("../images/elements/button_middle_3.png"); /*background-image: url("../images/elements/button_middle.png");*/
     background-repeat: repeat-x;
     height: 39px;
     float: left;
+}
+
+.complexButton_middle_gray  {
+    background-image: url("../images/elements/button_middle_gray.png"); /*background-image: url("../images/elements/button_middle.png");*/
 }
 
@@ -44,6 +53,6 @@
 }
 
-.complexButton_right {
-    background-image: url("../images/elements/button_right_3.png"); /*background-image: url("../images/elements/button_right.png");*/
+.complexButton_right, .complexButton_right_gray {
+    background-image: url("../images/elements/button_right_3.png");
     background-repeat: no-repeat;
     background-position: top right;
@@ -52,4 +61,8 @@
     width: 0;
     float: left;
+}
+
+.complexButton_right_gray {
+    background-image: url("../images/elements/button_right_gray.png");
 }
 
Index: ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js
===================================================================
--- ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js	(revision 265)
+++ ether_megapoli/trunk/web/resources/js/classesForJQuery/LoginButton.js	(revision 265)
@@ -0,0 +1,240 @@
+//********************************************************
+// Class LoginButton
+// Display a button to login or logout
+//
+// use jQuery && librairies from TwitterLogin
+//********************************************************
+
+var LoginButton = Class.create( {
+
+    initialize: function( param )
+    {
+        // Init
+        this.parent = param.parent ? param.parent : document.body;
+        this.onClickLogin = param.anotherOnClickLogin ? param.anotherOnClickLogin : this.onClickLogin;
+        this.onClickLogout = param.anotherOnClickLogout ? param.anotherOnClickLogout : this.onClickLogout;
+        this.jSONUser = param.jSONUser ? param.jSONUser : false;
+        this.urlLogin = param.urlLogin ? param.urlLogin : false;
+        this.urlLogout = param.urlLogout ? param.urlLogout : false;
+
+        // Texts
+        this.connexionText = param.connexionText ? param.connexionText : loginTexts["app.connexion"];
+        this.loginText = param.loginText ? param.loginText : loginTexts["data.authentification.login"];
+        this.pwdText = param.pwdText ? param.pwdText : loginTexts["data.authentification.pwd"];
+        this.submitText = param.submitText ? param.submitText : loginTexts["data.authentification.sign"];
+        this.forgotPText = param.forgotPText ? param.forgotPText : loginTexts["data.authentification.pwdForget"];
+        this.forgotUNPHelpText = param.forgotUNPHelpText ? param.forgotUNPHelpText : loginTexts["data.authentification.loginForget.help"];
+        this.forgotUNPText = param.forgotUNPText ? param.forgotUNPText : loginTexts["data.authentification.loginForget"];
+        this.text1 = param.text1 ? param.text1 : loginTexts["app.admin"];
+        this.errorText = param.errorText ? param.errorText : loginTexts[this.errors];
+    },
+
+    // GETTER / SETTER ********************************************************
+    setJSONUser: function( jSONUser )
+    {
+        this.jSONUser = jSONUser;
+    },
+
+    getJSONUser: function()
+    {
+        return this.jSONUser;
+    },
+
+    // ACTIONS ********************************************************
+    createLoginForm: function()
+    {
+        var containerLoginForm = $( document.createElement( "fieldset" ) );
+        containerLoginForm.attr( {id:"signin_menu"} );
+        this.parent.append( containerLoginForm );
+
+        var labelLogin = $( document.createElement( "label" ) );
+        labelLogin.attr( {for:"login"} );
+        labelLogin.append( this.loginText );
+        var inputLogin = $( document.createElement( "input" ) );
+        inputLogin.attr( {id:"login", name:"login", tabIndex:"4", type:"text"} );
+        containerLoginForm.append( labelLogin );
+        containerLoginForm.append( inputLogin );
+
+        var labelPwd = $( document.createElement( "label" ) );
+        labelPwd.attr( {for:"pwd"} );
+        labelPwd.append( this.pwdText );
+        var inputPwd = $( document.createElement( "input" ) );
+        inputPwd.attr( {id:"pwd", name:"pwd", tabIndex:"5", type:"password"} );
+        containerLoginForm.append( labelPwd );
+        containerLoginForm.append( inputPwd );
+
+        var inputSubmitP = $( document.createElement( "p" ) );
+        inputSubmitP.addClass( "remember" );
+        var inputSubmit = $( document.createElement( "input" ) );
+        inputSubmit.attr( {id:"signin_submit", value:this.submitText, tabIndex:"6", type:"submit"} );
+        inputSubmit.bind( "click", jQuery.proxy( this.onClickLogin, this ) );
+        inputSubmitP.append( inputSubmit );
+        containerLoginForm.append( inputSubmitP );
+
+        var inputForgotP = $( document.createElement( "p" ) );
+        inputForgotP.addClass( "forgot" );
+        var aForgotP = $( document.createElement( "a" ) );
+        aForgotP.attr( {id:"resend_password_link", href:"mailto:${webmaster}?subject=[MEGAPOLI] login"} );
+        aForgotP.append( this.forgotPText );
+        inputForgotP.append( aForgotP );
+        containerLoginForm.append( inputForgotP );
+
+        var inputForgotUNP = $( document.createElement( "p" ) );
+        inputForgotUNP.addClass( "username" );
+        var aForgotUNP = $( document.createElement( "a" ) );
+        aForgotUNP.attr( {id:"forgot_username_link", href:"mailto:${webmaster}?subject=[MEGAPOLI] password", title:this.forgotUNPHelpText} );
+        aForgotUNP.append( this.forgotUNPText );
+        inputForgotUNP.append( aForgotUNP );
+        containerLoginForm.append( inputForgotUNP );
+
+        var divErrors = $( document.createElement( "div" ) );
+        divErrors.attr( {id:"errors", class:"containerErrors"} );
+        containerLoginForm.append( divErrors );
+        this.containerErrors = $( "#errors" );
+    },
+
+    display: function()
+    {
+        if( this.jSONUser )
+        {
+            var textLogin = this.jSONUser.name + " " + this.jSONUser.firstName;
+            if( this.jSONUser.role && "coordinateur" == this.jSONUser.role )
+                textLogin += " (" + this.text1 + ")";
+
+            var loginButton = new ComplexButton( {value:textLogin, parent:this.parent, id:"button_login"} );
+
+            $( "#button_login #button_middle #button_text" ).addClass( "containerUserLogout" );
+
+            var loginMiddle = $( "#button_login #button_middle" );
+            var divImgLogout = $( document.createElement( "div" ) );
+            divImgLogout.addClass( "containerImgLogout" );
+            divImgLogout.append( "<img src='resources/images/utils/logout.png' width='15px' height='15px/>" );
+            divImgLogout.bind( "click", jQuery.proxy( this.onClickLogout, this ) );
+            loginMiddle.append( divImgLogout );
+        }
+        else
+        {
+            this.createLoginForm();
+
+            var loginButton = new ComplexButton( {value:this.connexionText, parent:this.parent, id:"button_login"} );
+
+            var loginMiddle = $( "#button_login #button_middle" );
+            loginMiddle.empty();
+            loginMiddle.attr( {id:"topnav", class:"topnav complexButton_middle"} );
+            var aLogin = $( document.createElement( "a" ) );
+            aLogin.attr( {id:"button_login_a", href:"login", class:"signin"} );
+            aLogin.html( "<span>" + this.connexionText + "</span>" );
+            loginMiddle.append( aLogin );
+
+            $( ".signin" ).click( function( e )
+            {
+                e.preventDefault();
+                $( "fieldset#signin_menu" ).toggle();
+                $( ".signin" ).toggleClass( "menu-open" );
+            } );
+
+            $( "fieldset#signin_menu" ).mouseup( function()
+            {
+                return false
+            } );
+
+            $( document ).mouseup( function( e )
+            {
+                if( 0 == $( e.target ).parent( "a.signin" ).length )
+                {
+                    $( ".signin" ).removeClass( "menu-open" );
+                    $( "fieldset#signin_menu" ).hide();
+                }
+            } );
+        }
+    },
+
+    updateLogin: function()
+    {
+        this.parent.empty();
+        this.display();
+    },
+
+    displayLoginErrors: function ( text )
+    {
+        $( "#errors" ).show();
+        $( "#errors" ).html( text );
+    },
+
+    // TODO : vÃ©rifier cette mÃ©thode
+    showLogin: function( text )
+    {
+        if( $( "fieldset#signin_menu" ) && $( ".signin" ) )
+        {
+            $( "fieldset#signin_menu" ).toggle();
+            $( ".signin" ).toggleClass( "menu-open" );
+            if( text )
+                this.displayLoginErrors( text );
+        }
+        else
+            alert( this.displayLoginErrors( text ) );
+    },
+
+    // REQUESTS ********************************************************
+    requestLogin: function()
+    {
+        if( !this.urlLogin )
+            return;
+
+        // TODO : passer en crypter ces infos !!!!!
+        var login = $( "#login" ).val();
+        var pwd = $( "#pwd" ).val();
+        $.ajax( {
+            url: this.urlLogin + "&login=" + login + "&pwd=" + pwd,
+            success:jQuery.proxy( this.onHandleLogin, this )
+        } );
+    },
+
+    requestLogout: function()
+    {
+        if( !this.urlLogout )
+            return;
+
+        $.ajax( {
+            url: this.urlLogout,
+            success:jQuery.proxy( this.onHandleLogout, this )
+        } );
+    },
+
+    // HANDLES ********************************************************
+    onHandleLogin: function( result )
+    {
+        this.errors = jQuery.parseJSON( result ).errors;
+        this.setJSONUser( null != jQuery.parseJSON( result ).jSONPeople ? jQuery.parseJSON( result ).jSONPeople : false );
+        if( null == this.errors )
+            this.updateLogin();
+        else
+            this.displayLoginErrors( loginTexts[this.errors] );
+    },
+
+    onHandleLogout: function( result )
+    {
+        this.errors = jQuery.parseJSON( result ).errors;
+        if( null == this.errors )
+        {
+            this.setJSONUser( false );
+            this.updateLogin();
+        }
+        else
+            this.displayLoginErrors( loginTexts[this.errors] );
+    },
+
+    // EVENTS ********************************************************
+    onClickLogin: function()
+    {
+        this.containerErrors.hide();
+        this.requestLogin();
+    },
+
+    onClickLogout: function()
+    {
+        this.requestLogout();
+    }
+
+} );
+
Index: ether_megapoli/trunk/web/resources/jsp/backofficeHead.jsp
===================================================================
--- ether_megapoli/trunk/web/resources/jsp/backofficeHead.jsp	(revision 264)
+++ ether_megapoli/trunk/web/resources/jsp/backofficeHead.jsp	(revision 265)
@@ -9,4 +9,5 @@
             this.containerTitle = $( "#title" );
             this.containerTools = $( "#tools" );
+            this.containerLogin = $( "#loginModule" );
 
             /** *********** VARIABLES *********** **/
@@ -20,4 +21,5 @@
             /** ************ CREATE ************ **/
             this.createTitleTools();
+            this.createMenu();
         },
 
@@ -30,9 +32,4 @@
             this.createLogin();
 
-            var valueLanguage = templateTexts["app.fr"];
-            if( this.isLanguageFr )
-                valueLanguage = templateTexts["app.en"];
-
-            var languageButton = new Button( {value:valueLanguage, parent:this.containerTools, id:"button_language", className: "gray_button", classNameText:"blue_button_text", onClick:jQuery.proxy( this.onClickLanguage, this )} );
             var homeButton = new Button( {value:templateTexts["app.home"], parent:this.containerTools, id:"button_home", className: "gray_button", classNameText:"blue_button_text", onClick:this.onClickHome} );
 
@@ -46,64 +43,11 @@
         createLogin: function()
         {
-            var containerLoginButton = $( "#button_login" );
+            var buttonLogin = new LoginButton( {parent:this.containerLogin, urlLogin:"project?methodName=login", urlLogout:"project?methodName=logout" } );
+            buttonLogin.setJSONUser( this.jSONUser );
+            buttonLogin.display();
+        },
 
-            if( this.jSONUser )
-            {
-                var textLogin = this.jSONUser.name + " " + this.jSONUser.firstName;
-                if( this.jSONUser.role && this.jSONUser.role == "coordinateur" )
-                    textLogin += " (" + templateTexts["app.admin"] + ")";
-
-                var loginButton = new ComplexButton( {value:textLogin, parent:this.containerTools, id:"button_login"} );
-
-                $( "#button_login #button_middle #button_text" ).addClass( "containerUserLogout" );
-
-                var loginMiddle = $( "#button_login #button_middle" );
-                var divImgLogout = $( document.createElement( "div" ) );
-                divImgLogout.addClass( "containerImgLogout" );
-                divImgLogout.append( "<img src='resources/images/utils/logout.png' width='15px' height='15px/>" );
-                divImgLogout.bind( "click", this.onClickLogout );
-                loginMiddle.append( divImgLogout );
-            }
-            else
-            {
-                var loginButton = new ComplexButton( {value:templateTexts["app.connexion"], parent:this.containerTools, id:"button_login"} );
-
-                var loginMiddle = $( "#button_login #button_middle" );
-                loginMiddle.empty();
-                loginMiddle.attr( {id:"topnav", class:"topnav complexButton_middle"} );
-                var aLogin = $( document.createElement( "a" ) );
-                aLogin.attr( {id:"button_login_a", href:"login", class:"signin"} );
-                aLogin.html( "<span>" + templateTexts["app.connexion"] + "</span>" );
-                loginMiddle.append( aLogin );
-
-                $( document ).ready( function()
-                {
-                    $( ".signin" ).click( function( e )
-                    {
-                        e.preventDefault();
-                        $( "fieldset#signin_menu" ).toggle();
-                        $( ".signin" ).toggleClass( "menu-open" );
-                    } );
-
-                    $( "fieldset#signin_menu" ).mouseup( function()
-                    {
-                        return false
-                    } );
-
-                    $( document ).mouseup( function( e )
-                    {
-                        if( $( e.target ).parent( "a.signin" ).length == 0 )
-                        {
-                            $( ".signin" ).removeClass( "menu-open" );
-                            $( "fieldset#signin_menu" ).hide();
-                        }
-                    } );
-                } );
-
-                $( function()
-                {
-                    $( '#forgot_username_link' ).tipsy( {gravity: 'w'} );
-                } );
-            }
+        createMenu: function()
+        {
         },
 
@@ -116,13 +60,12 @@
         onClickLogout: function()
         {
+            alert( "BO" );
             document.location.href = "Disconnect.do";
         },
 
-        onClickLanguage: function()
+        onClickLogout: function()
         {
-            if( this.isLanguageFr )
-                document.location.href = this.path + "/English.do?requestUri=" + this.relativePageUri;
-            else
-                document.location.href = this.path + "/French.do?requestUri=" + this.relativePageUri;
+            alert( "BO" );
+            document.location.href = "Disconnect.do";
         }
     } );
Index: ether_megapoli/trunk/web/resources/jsp/megapoliHead.jsp
===================================================================
--- ether_megapoli/trunk/web/resources/jsp/megapoliHead.jsp	(revision 264)
+++ ether_megapoli/trunk/web/resources/jsp/megapoliHead.jsp	(revision 265)
@@ -2,384 +2,192 @@
 
 <script type="text/javascript">
-var InterfaceTemplate = Class.create( {
+    var InterfaceTemplate = Class.create( {
 
-    initialize: function()
+        initialize: function()
+        {
+            /** *********** CONTAINERS *********** **/
+            this.containerTitle = $( "#title" );
+            this.containerTools = $( "#tools" );
+            this.containerLogin = $( "#loginModule" );
+            this.containerMenuData = $( "#menuData" );
+
+            /** *********** VARIABLES *********** **/
+            this.isLanguageFr = <%=Context.getLangue(request).equals( "fr" )%>;
+            this.path = "<%=request.getContextPath()%>";
+            setPath( this.path );
+            this.webmaster = "<%=Context.getWebmaster(request)%>";
+            this.relativePageUri = <%=request.getQueryString() != null%> ? "<%=Context.getRelativePath( request )%>?<%=request.getQueryString()%>" : "<%=Context.getRelativePageURI(request)%>";
+            this.jSONUser = <%=Context.getJSONUser( request )%> ? <%=Context.getJSONUser( request )%> : false;
+            this.screenWidthLimit = 1336;
+
+            /** ************ CREATE ************ **/
+            this.createTitle();
+            this.createTools();
+            this.createLogin();
+            this.createMenuData();
+            jQuery.proxy( this.createLeftSlides(), this );
+        },
+
+        // CREATES ********************************************************
+        createTitle: function()
+        {
+            this.containerTitle.addClass( "containerTitle" );
+            this.containerTitle.html( templateTexts["app.fulltitle"] );
+        },
+
+        createTools: function()
+        {
+            var mailButton = new Button( {value:templateTexts["data.upload.metadata.contact.mail"], parent:this.containerTools, id:"button_mail", className: "blue_button", classNameText:"blue_button_text", onClick:jQuery.proxy( this.onClickMail, this )} );
+
+            var valueLanguage = templateTexts["app.fr"];
+            if( this.isLanguageFr )
+                valueLanguage = templateTexts["app.en"];
+
+            var languageButton = new Button( {value:valueLanguage, parent:this.containerTools, id:"button_language", className: "blue_button", classNameText:"blue_button_text", onClick:jQuery.proxy( this.onClickLanguage, this )} );
+            var homeButton = new Button( {value:templateTexts["app.home"], parent:this.containerTools, id:"button_home", className: "blue_button", classNameText:"blue_button_text", onClick:this.onClickHome} );
+
+            var divSmallLogoEther = $( document.createElement( "div" ) );
+            divSmallLogoEther.attr( {id:"smallLogoEther", class:"containerSmallLogoEther"} );
+            divSmallLogoEther.append( '<a href="http://ether.ipsl.jussieu.fr" target="help"><img src="resources/images/logo_Ether.jpg" width="40px" height="40px"/></a>' );
+            this.containerTools.append( divSmallLogoEther );
+
+            this.updateLogoEther();
+        },
+
+        createLogin: function()
+        {
+            this.loginModule = new LoginButton( {parent:this.containerLogin, urlLogin:"project?methodName=login", urlLogout:"project?methodName=logout" } );
+            this.loginModule.setJSONUser( this.jSONUser );
+            this.loginModule.display();
+            setLoginModule( this.loginModule );
+        },
+
+        createMenuData: function()
+        {
+            this.containerMenuData.empty();
+
+            var ulData = $( document.createElement( "ul" ) );
+            this.containerMenuData.append( ulData );
+
+            var liExtract = $( document.createElement( "li" ) );
+            var aExtract = $( document.createElement( "a" ) );
+            aExtract.attr( {onclick:'javascript:neededLogin("/DataAccess.do")'} );
+            aExtract.html( "<span>" + templateTexts["data.access.extract.short"] + "</span>" );
+            liExtract.append( aExtract );
+            ulData.append( liExtract );
+            var liDownload = $( document.createElement( "li" ) );
+            var aDownload = $( document.createElement( "a" ) );
+            aDownload.attr( {onclick:'javascript:neededLogin("/PrepareTree.do")'} );
+            aDownload.html( "<span>" + templateTexts["data.upload.short"] + "</span>" );
+            liDownload.append( aDownload );
+            ulData.append( liDownload );
+        },
+
+        createLeftSlides: function()
+        {
+            var contentSlideCredits = "resources/jsp/credits_fr.jsp";
+            var contentSlideMentions = "resources/jsp/mentions_fr.jsp";
+            var contentSlideInfos = "resources/jsp/informations_fr.jsp";
+
+            var contentButtonCredits = "<button class='big_blue_button' title='" + templateTexts["app.credits"] + "'><div class='big_blue_button_text'>C</div></button>";
+            var contentButtonMentions = "<button class='big_blue_button' title='" + templateTexts["app.mentions"] + "'><div class='big_blue_button_text'>M</div></button>";
+            var contentButtonInfos = "<button class='big_blue_button' title='" + templateTexts["app.infos"] + "'><div class='big_blue_button_text'>I</div></button>";
+
+            if( !this.isLanguageFr )
+            {
+                contentSlideCredits = "resources/jsp/credits_en.jsp";
+                contentSlideMentions = "resources/jsp/mentions_en.jsp";
+                contentSlideInfos = "resources/jsp/informations_en.jsp";
+            }
+            var divSlideCredits = new Slide( { contentId:"slideContentCredits", buttonId: "slideCredits", parent:$( "#creditSlide" ), isIndexToChange:true,
+                contentButton:contentButtonCredits , contentPageSlide:contentSlideCredits} );
+
+            var divSlideMentions = new Slide( { contentId:"slideContentMentions", buttonId: "slideMentions", parent:$( "#mentionSlide" ),specificButtonClass:"containerSlideButtonMentions", isIndexToChange:true,
+                contentButton:contentButtonMentions, contentPageSlide:contentSlideMentions} );
+
+            var divSlideInfos = new Slide( { contentId:"slideContentInfos", buttonId: "slideInfos", parent:$( "#infoSlide" ), specificButtonClass:"containerSlideButtonInfos", isIndexToChange:true,
+                contentButton:contentButtonInfos, contentPageSlide:contentSlideInfos} );
+        },
+
+        // REQUESTS ********************************************************
+
+        // EVENTS ********************************************************
+        onClickHome: function()
+        {
+            document.location.href = "index.jsp";
+        },
+
+        onClickLanguage: function()
+        {
+            if( this.isLanguageFr )
+                document.location.href = this.path + "/English.do?requestUri=" + this.relativePageUri;
+            else
+                document.location.href = this.path + "/French.do?requestUri=" + this.relativePageUri;
+        },
+
+        onClickMail: function()
+        {
+            document.location.href = "mailto:" + this.webmaster + "?subject=[MEGAPOLI]";
+        },
+
+        /**
+         * This method display a small Ether logo if the screen is too small to contain the big one
+         */
+        updateLogoEther: function()
+        {
+            if( this.screenWidthLimit > innerWidth )
+            {
+                $( "#logoEther" ).hide();
+                $( "#linkLogoEther" ).hide();
+                $( "#smallLogoEther" ).show();
+            }
+            else
+            {
+                $( "#logoEther" ).show();
+                $( "#linkLogoEther" ).show();
+                $( "#smallLogoEther" ).hide();
+            }
+        }
+
+    } );
+
+    /** *********************************************** **/
+    /** ******************** USER ********************* **/
+    /** *********************************************** **/
+    function getJSONUser()
     {
-        /** *********** CONTAINERS *********** **/
-        this.containerTitle = $( "#title" );
-        this.containerTools = $( "#tools" );
-        this.containerMenuData = $( "#menuData" );
+        alert( getLoginModule().getJSONUser() );
+        return getLoginModule().getJSONUser();
+    }
 
-        /** *********** VARIABLES *********** **/
-        this.isLanguageFr = <%=Context.getLangue(request).equals( "fr" )%>;
-        this.path = "<%=request.getContextPath()%>";
-        setPath( this.path );
-        this.webmaster = "<%=Context.getWebmaster(request)%>";
-        this.relativePageUri = <%=request.getQueryString() != null%> ? "<%=Context.getRelativePath( request )%>?<%=request.getQueryString()%>" : "<%=Context.getRelativePageURI(request)%>";
-        this.jSONUser = <%=Context.getJSONUser( request )%> ? <%=Context.getJSONUser( request )%> : false;
-        setJSONUser( this.jSONUser );
-        this.screenWidthLimit = 1336;
+    function getPath()
+    {
+        return InterfaceTemplate.path;
+    }
 
-        /** ************ CREATE ************ **/
-        this.createTitle();
-        this.createTools();
-        this.createMenuData();
-        jQuery.proxy( this.createLeftSlides(), this );
-    },
+    function setPath( path )
+    {
+        InterfaceTemplate.path = path;
+    }
 
-    // CREATES ********************************************************
-    createTitle: function()
+    function getLoginModule()
     {
-        this.containerTitle.addClass( "containerTitle" );
-        this.containerTitle.html( templateTexts["app.fulltitle"] );
-    },
+        return InterfaceTemplate.loginModule;
+    }
 
-    createTools: function()
+    function setLoginModule( loginModule )
     {
-        this.createLoginForm();
-        this.createLogin();
-        var mailButton = new Button( {value:templateTexts["data.upload.metadata.contact.mail"], parent:this.containerTools, id:"button_mail", className: "blue_button", classNameText:"blue_button_text", onClick:jQuery.proxy( this.onClickMail, this )} );
+        InterfaceTemplate.loginModule = loginModule;
+    }
 
-        var valueLanguage = templateTexts["app.fr"];
-        if( this.isLanguageFr )
-            valueLanguage = templateTexts["app.en"];
-
-        var languageButton = new Button( {value:valueLanguage, parent:this.containerTools, id:"button_language", className: "blue_button", classNameText:"blue_button_text", onClick:jQuery.proxy( this.onClickLanguage, this )} );
-        var homeButton = new Button( {value:templateTexts["app.home"], parent:this.containerTools, id:"button_home", className: "blue_button", classNameText:"blue_button_text", onClick:this.onClickHome} );
-
-        var divSmallLogoEther = $( document.createElement( "div" ) );
-        divSmallLogoEther.attr( {id:"smallLogoEther", class:"containerSmallLogoEther"} );
-        divSmallLogoEther.append( '<a href="http://ether.ipsl.jussieu.fr" target="help"><img src="resources/images/logo_Ether.jpg" width="40px" height="40px"/></a>' );
-        this.containerTools.append( divSmallLogoEther );
-
-        this.updateLogoEther();
-    },
-
-    createLogin: function()
+    function neededLogin( href )
     {
-        var containerLoginButton = $( "#button_login" );
-
-        if( getJSONUser() )
+        $( "#signin_menu" ).ready( function()
         {
-            var textLogin = getJSONUser().name + " " + getJSONUser().firstName;
-            if( getJSONUser().role && "coordinateur" == getJSONUser().role )
-                textLogin += " (" + templateTexts["app.admin"] + ")";
-
-            var loginButton = new ComplexButton( {value:textLogin, parent:this.containerTools, id:"button_login"} );
-
-            $( "#button_login #button_middle #button_text" ).addClass( "containerUserLogout" );
-
-            var loginMiddle = $( "#button_login #button_middle" );
-            var divImgLogout = $( document.createElement( "div" ) );
-            divImgLogout.addClass( "containerImgLogout" );
-            divImgLogout.append( "<img src='resources/images/utils/logout.png' width='15px' height='15px/>" );
-            divImgLogout.bind( "click", jQuery.proxy( this.onClickLogout, this ) );
-            loginMiddle.append( divImgLogout );
-        }
-        else
-        {
-            var loginButton = new ComplexButton( {value:templateTexts["app.connexion"], parent:this.containerTools, id:"button_login"} );
-
-            var loginMiddle = $( "#button_login #button_middle" );
-            loginMiddle.empty();
-            loginMiddle.attr( {id:"topnav", class:"topnav complexButton_middle"} );
-            var aLogin = $( document.createElement( "a" ) );
-            aLogin.attr( {id:"button_login_a", href:"login", class:"signin"} );
-            aLogin.html( "<span>" + templateTexts["app.connexion"] + "</span>" );
-            loginMiddle.append( aLogin );
-
-            $( document ).ready( function()
-            {
-                $( ".signin" ).click( function( e )
-                {
-                    e.preventDefault();
-                    $( "fieldset#signin_menu" ).toggle();
-                    $( ".signin" ).toggleClass( "menu-open" );
-                } );
-
-                $( "fieldset#signin_menu" ).mouseup( function()
-                {
-                    return false
-                } );
-
-                $( document ).mouseup( function( e )
-                {
-                    if( $( e.target ).parent( "a.signin" ).length == 0 )
-                    {
-                        $( ".signin" ).removeClass( "menu-open" );
-                        $( "fieldset#signin_menu" ).hide();
-                    }
-                } );
-            } );
-
-            $( function()
-            {
-                $( '#forgot_username_link' ).tipsy( {gravity: 'w'} );
-            } );
-        }
-    },
-
-    createLoginForm: function()
-    {
-        var containerLoginForm = $( document.createElement( "fieldset" ) );
-        containerLoginForm.attr( {id:"signin_menu"} );
-        this.containerTools.append( containerLoginForm );
-
-        var labelLogin = $( document.createElement( "label" ) );
-        labelLogin.attr( {for:"login"} );
-        labelLogin.append( templateTexts["data.authentification.login"] );
-        var inputLogin = $( document.createElement( "input" ) );
-        inputLogin.attr( {id:"login", name:"login", tabIndex:"4", type:"text"} );
-        containerLoginForm.append( labelLogin );
-        containerLoginForm.append( inputLogin );
-
-        var labelPwd = $( document.createElement( "label" ) );
-        labelPwd.attr( {for:"pwd"} );
-        labelPwd.append( templateTexts["data.authentification.pwd"] );
-        var inputPwd = $( document.createElement( "input" ) );
-        inputPwd.attr( {id:"pwd", name:"pwd", tabIndex:"5", type:"password"} );
-        containerLoginForm.append( labelPwd );
-        containerLoginForm.append( inputPwd );
-
-        var inputSubmitP = $( document.createElement( "p" ) );
-        inputSubmitP.addClass( "remember" );
-        var inputSubmit = $( document.createElement( "input" ) );
-        inputSubmit.attr( {id:"signin_submit", value:templateTexts["data.authentification.sign"], tabIndex:"6", type:"submit"} );
-        inputSubmit.bind( "click", jQuery.proxy( this.onClickLogin, this ) );
-        inputSubmitP.append( inputSubmit );
-        containerLoginForm.append( inputSubmitP );
-
-        var inputForgotP = $( document.createElement( "p" ) );
-        inputForgotP.addClass( "forgot" );
-        var aForgot = $( document.createElement( "a" ) );
-        aForgot.attr( {id:"resend_password_link", href:"mailto:${webmaster}?subject=[MEGAPOLI] login"} );
-        aForgot.append( templateTexts["data.authentification.pwdForget"] );
-        inputForgotP.append( aForgot );
-        containerLoginForm.append( inputForgotP );
-
-        var inputForgotUNP = $( document.createElement( "p" ) );
-        inputForgotUNP.addClass( "username" );
-        var aForgot = $( document.createElement( "a" ) );
-        aForgot.attr( {id:"forgot_username_link", href:"mailto:${webmaster}?subject=[MEGAPOLI] password", title:templateTexts["data.authentification.loginForget.help"]} );
-        aForgot.append( templateTexts["data.authentification.loginForget"] );
-        inputForgotUNP.append( aForgot );
-        containerLoginForm.append( inputForgotUNP );
-
-        var divErrors = $( document.createElement( "div" ) );
-        divErrors.attr( {id:"errors", class:"containerErrors"} );
-        containerLoginForm.append( divErrors );
-    },
-
-    createMenuData: function()
-    {
-        this.containerMenuData.empty();
-
-        var ulData = $( document.createElement( "ul" ) );
-        this.containerMenuData.append( ulData );
-
-        var liExtract = $( document.createElement( "li" ) );
-        var aExtract = $( document.createElement( "a" ) );
-        aExtract.html( "<span>" + templateTexts["data.access.extract.short"] + "</span>" );
-        liExtract.append( aExtract );
-        ulData.append( liExtract );
-        var liDownload = $( document.createElement( "li" ) );
-        var aDownload = $( document.createElement( "a" ) );
-        aDownload.html( "<span>" + templateTexts["data.upload.short"] + "</span>" );
-        liDownload.append( aDownload );
-        ulData.append( liDownload );
-
-        if( getJSONUser() )
-        {
-            aExtract.attr( {href:"DataAccess.do"} );
-            aDownload.attr( {href:"PrepareTree.do"} );
-        }
-        else
-        {
-            aExtract.attr( {href:"project?methodName=viewLogin"} );
-            aDownload.attr( {href:"project?methodName=viewLogin"} );
-        }
-    },
-
-    createLeftSlides: function()
-    {
-        var contentSlideCredits = "resources/jsp/credits_fr.jsp";
-        var contentSlideMentions = "resources/jsp/mentions_fr.jsp";
-        var contentSlideInfos = "resources/jsp/informations_fr.jsp";
-
-        var contentButtonCredits = "<button class='big_blue_button' title='" + templateTexts["app.credits"] + "'><div class='big_blue_button_text'>C</div></button>";
-        var contentButtonMentions = "<button class='big_blue_button' title='" + templateTexts["app.mentions"] + "'><div class='big_blue_button_text'>M</div></button>";
-        var contentButtonInfos = "<button class='big_blue_button' title='" + templateTexts["app.infos"] + "'><div class='big_blue_button_text'>I</div></button>";
-
-        if( !this.isLanguageFr )
-        {
-            contentSlideCredits = "resources/jsp/credits_en.jsp";
-            contentSlideMentions = "resources/jsp/mentions_en.jsp";
-            contentSlideInfos = "resources/jsp/informations_en.jsp";
-        }
-        var divSlideCredits = new Slide( { contentId:"slideContentCredits", buttonId: "slideCredits", parent:$( "#creditSlide" ), isIndexToChange:true,
-            contentButton:contentButtonCredits , contentPageSlide:contentSlideCredits} );
-
-        var divSlideMentions = new Slide( { contentId:"slideContentMentions", buttonId: "slideMentions", parent:$( "#mentionSlide" ),specificButtonClass:"containerSlideButtonMentions", isIndexToChange:true,
-            contentButton:contentButtonMentions, contentPageSlide:contentSlideMentions} );
-
-        var divSlideInfos = new Slide( { contentId:"slideContentInfos", buttonId: "slideInfos", parent:$( "#infoSlide" ), specificButtonClass:"containerSlideButtonInfos", isIndexToChange:true,
-            contentButton:contentButtonInfos, contentPageSlide:contentSlideInfos} );
-    },
-
-    // REQUESTS ********************************************************
-    requestLogin: function()
-    {
-        // TODO : passer en crypter ces infos !!!!!
-        var login = $( "#login" ).val();
-        var pwd = $( "#pwd" ).val();
-        $.ajax( {
-            url: "project?methodName=login&login=" + login + "&pwd=" + pwd,
-            success:jQuery.proxy( this.onHandleLogin, this )
+            if( !getJSONUser() )
+                getLoginModule().showLogin( loginTexts["data.authentification.text"] );
+            else
+                document.location.href = getPath() + href;
         } );
-    },
-
-    requestLogout: function()
-    {
-        $.ajax( {
-            url: "project?methodName=logout",
-            success:jQuery.proxy( this.onHandleLogout, this )
-        } );
-    },
-
-    // HANDLES ********************************************************
-    onHandleLogin: function( result )
-    {
-        this.errors = jQuery.parseJSON( result ).errors;
-        setJSONUser( null != jQuery.parseJSON( result ).jSONPeople ? jQuery.parseJSON( result ).jSONPeople : false );
-        if( null == this.errors )
-            this.updateLogin();
-        else
-            displayLoginErrors( templateTexts[this.errors] );
-    },
-
-    onHandleLogout: function( result )
-    {
-        this.errors = jQuery.parseJSON( result ).errors;
-        if( null == this.errors )
-        {
-            setJSONUser( false );
-            this.updateLogin();
-        }
-        else
-            displayLoginErrors( templateTexts[this.errors] );
-    },
-
-    // EVENTS ********************************************************
-    onClickHome: function()
-    {
-        document.location.href = "index.jsp";
-    },
-
-    onClickLogin: function()
-    {
-        $( "#errors" ).hide();
-        this.requestLogin();
-    },
-
-    onClickLogout: function()
-    {
-        this.requestLogout();
-    },
-
-    onClickLanguage: function()
-    {
-        if( this.isLanguageFr )
-            document.location.href = this.path + "/English.do?requestUri=" + this.relativePageUri;
-        else
-            document.location.href = this.path + "/French.do?requestUri=" + this.relativePageUri;
-    },
-
-    onClickMail: function()
-    {
-        document.location.href = "mailto:" + this.webmaster + "?subject=[MEGAPOLI]";
-    },
-
-    /**
-     * This method display a small Ether logo if the screen is too small to contain the big one
-     */
-    updateLogoEther: function()
-    {
-        if( this.screenWidthLimit > innerWidth )
-        {
-            $( "#logoEther" ).hide();
-            $( "#linkLogoEther" ).hide();
-            $( "#smallLogoEther" ).show();
-        }
-        else
-        {
-            $( "#logoEther" ).show();
-            $( "#linkLogoEther" ).show();
-            $( "#smallLogoEther" ).hide();
-        }
-    },
-
-    updateLogin: function()
-    {
-        this.containerTools.empty();
-        this.createTools();
-        this.createMenuData();
     }
-} );
-
-/** *********************************************** **/
-/** ******************** LOGIN ******************** **/
-/** *********************************************** **/
-function displayLoginErrors( text )
-{
-    $( "#errors" ).show();
-    $( "#errors" ).html( text );
-}
-
-function showLogin( text )
-{
-    if( $( "fieldset#signin_menu" ) && $( ".signin" ) )
-    {
-        $( "fieldset#signin_menu" ).toggle();
-        $( ".signin" ).toggleClass( "menu-open" );
-        if( text )
-            displayLoginErrors( text );
-    }
-    else
-        alert( templateTexts["data.authentification.text"] );
-}
-
-function neededLogin( href )
-{
-    $( "#signin_menu" ).ready( function()
-    {
-        if( !getJSONUser() )
-            showLogin( templateTexts["data.authentification.text"] );
-        else
-            document.location.href = getPath() + href;
-    } );
-}
-
-/** *********************************************** **/
-/** ******************** USER ********************* **/
-/** *********************************************** **/
-function getJSONUser()
-{
-    return InterfaceTemplate.jSONUser;
-}
-
-function setJSONUser( user )
-{
-    InterfaceTemplate.jSONUser = user;
-}
-
-function getPath()
-{
-    return InterfaceTemplate.path;
-}
-
-function setPath( path )
-{
-    InterfaceTemplate.path = path;
-}
-
 </script>
Index: ether_megapoli/trunk/web/resources/templates/templateBackoffice.jsp
===================================================================
--- ether_megapoli/trunk/web/resources/templates/templateBackoffice.jsp	(revision 264)
+++ ether_megapoli/trunk/web/resources/templates/templateBackoffice.jsp	(revision 265)
@@ -21,4 +21,5 @@
     <ether:htmlCss cssFile="TwitterLogin/front"/>
     <ether:htmlCss cssFile="ether"/>
+    <ether:htmlCss cssFile="megapoli"/>
     <ether:htmlCss cssFile="backoffice"/>
 
@@ -29,4 +30,5 @@
     <ether:htmlJs jsFile="classesForJQuery/Button"/>
     <ether:htmlJs jsFile="classesForJQuery/ComplexButton"/>
+    <ether:htmlJs jsFile="classesForJQuery/LoginButton"/>
     <ether:htmlJs jsFile="apycom.com-4-steel-blue/menu"/>
     <ether:htmlJs jsFile="TwitterLogin/javascripts/jquery.tipsy"/>
@@ -40,10 +42,4 @@
 <BODY>
 
-<bean:define type="java.lang.String" id="lastModified" value="<%=Context.getLastModified(request, application)%>"/>
-<bean:define type="java.lang.String" id="webmaster" value="<%=Context.getWebmaster(request)%>"/>
-
-<bean:define id="upload" value="upload"/>
-<bean:define id="access" value="access"/>
-
 <%-- ************************************************************************************************************** --%>
 <%-- **************************************************** WRAPPER ************************************************* --%>
@@ -56,25 +52,5 @@
 
         <div id="tools" align="right">
-            <fieldset id="signin_menu">
-                <html:form action="/LogonAccess">
-                    <label for="username"><bean:message key="data.authentification.login"/></label>
-                    <input id="login" name="login" tabindex="4" type="text">
-
-                    <label for="password"><bean:message key="data.authentification.pwd"/></label>
-                    <input id="pwd" name="pwd" tabindex="5" type="password">
-
-                    <p class="remember">
-                        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
-                    </p>
-
-                    <p class="forgot">
-                        <a id="resend_password_link" href="mailto:${webmaster}?subject=[MEGAPOLI] password"><bean:message key="data.authentification.pwdForget"/></a>
-                    </p>
-
-                    <p class="forgot-username">
-                        <a id=forgot_username_link href="mailto:${webmaster}?subject=[MEGAPOLI] login" title='<bean:message key="data.authentification.loginForget.help"/>'><bean:message key="data.authentification.loginForget"/></a>
-                    </p>
-                </html:form>
-            </fieldset>
+            <div id="loginModule" align="right"></div>
         </div>
 
@@ -92,50 +68,5 @@
 
     <%-- ****************** MENU ****************** --%>
-    <div id="menu" class="containerMenu">
-        <ul class="menu">
-            <li>
-                <html:link page="/data?methodName=viewCatalogResume" paramName="access" paramId="source">
-                    <span><bean:message key="data.access"/></span>
-                </html:link>
-                <div>
-                    <ul>
-                        <li><html:link page="/JeuxAccess.do"><span><bean:message key="data.access.jeux"/></span></html:link></li>
-                        <li><html:link page="/ParametresAccess.do"><span><bean:message key="data.access.param"/></span></html:link></li>
-                        <li><html:link page="/CapteursAccess.do"><span><bean:message key="data.access.capt"/></span></html:link></li>
-                        <li><html:link page="/PlateformesAccess.do"><span><bean:message key="data.access.plat"/></span></html:link></li>
-                    </ul>
-                </div>
-            </li>
-
-            <li>
-                <html:link page="/data?methodName=viewDataResume">
-                    <span><bean:message key="app.data"/></span>
-                </html:link>
-                <div>
-                    <ul>
-                        <logic:notPresent name="SES_USER" scope="session">
-                            <li><html:link page="/InitLogonAccess.do" paramName="access" paramId="source"><span><bean:message key="data.access.extract.short"/></span></html:link></li>
-                            <li><html:link page="/InitLogonAccess.do" paramName="upload" paramId="source"><span><bean:message key="data.upload.short"/></span></html:link></li>
-                        </logic:notPresent>
-                        <logic:present name="SES_USER" scope="session">
-                            <li><html:link page="/DataAccess.do"><span><bean:message key="data.access.extract.short"/></span></html:link></li>
-                            <li><html:link page="/PrepareTree.do"><span><bean:message key="data.upload.short"/></span></html:link></li>
-                        </logic:present>
-                    </ul>
-                </div>
-            </li>
-
-            <li class="last">
-                <html:link page="/visualization?methodName=view"><span><bean:message key="all.visualization"/></span></html:link>
-                <div>
-                    <ul>
-                        <li><html:link page="/visualization?methodName=viewParametersByPlateform"><span><bean:message key="data.visualization"/></span></html:link></li>
-                        <li><html:link page="/visualization?methodName=viewInWork"><span><bean:message key="simulation.visualization"/></span></html:link></li>
-                    </ul>
-                </div>
-            </li>
-
-        </ul>
-    </div>
+    <div id="menuBO" class="containerMenu"></div>
 
     <%-- ****************** TITLE CONTENT ****************** --%>
@@ -152,6 +83,4 @@
     <div id="containerBottom" class="containerMegapoli containerBottom" align="right">
         &copy; 2010-2011 <html:link href="http://ether.ipsl.jussieu.fr" target="help">ETHER&nbsp;</html:link>/ CNRS
-        <%--<td align="center"><bean:message key="app.infonavig"/></td>--%>
-        <%--<td align="right"><i><bean:message key="app.lastModified"/> : <bean:write name="lastModified"/></i></td>--%>
     </div>
 
@@ -171,7 +100,19 @@
     templateTexts["app.en"] = '<bean:message key="app.en"/>';
     templateTexts["app.fr"] = '<bean:message key="app.fr"/>';
-    templateTexts["app.connexion"] = '<bean:message key="app.connexion"/>';
     templateTexts["data.upload.metadata.contact.mail"] = '<bean:message key="data.upload.metadata.contact.mail"/>';
     templateTexts["app.admin"] = '<bean:message key="app.admin"/>';
+
+    // Needed texts if you use the library LoginButton.js
+    var loginTexts = $A( "" );
+    loginTexts["app.connexion"] = '<bean:message key="app.connexion"/>';
+    loginTexts["data.authentification.login"] = '<bean:message key="data.authentification.login"/>';
+    loginTexts["data.authentification.pwd"] = '<bean:message key="data.authentification.pwd"/>';
+    loginTexts["data.authentification.sign"] = '<bean:message key="data.authentification.sign"/>';
+    loginTexts["data.authentification.pwdForget"] = '<bean:message key="data.authentification.pwdForget"/>';
+    loginTexts["data.authentification.loginForget.help"] = '<bean:message key="data.authentification.loginForget.help"/>';
+    loginTexts["data.authentification.loginForget"] = '<bean:message key="data.authentification.loginForget"/>';
+    loginTexts["errors.logon.notFound"] = "<bean:message key='errors.logon.notFound' arg0="<%=Context.getWebmaster( request )%>"/>";
+    loginTexts["errors.logon.failed"] = "<bean:message key='errors.logon.failed' arg0="<%=Context.getWebmaster( request )%>"/>";
+    loginTexts["app.admin"] = '<bean:message key="app.admin"/>';
 
     var interfaceTemplate = new InterfaceTemplate();
Index: ether_megapoli/trunk/web/resources/templates/templateMegapoli.jsp
===================================================================
--- ether_megapoli/trunk/web/resources/templates/templateMegapoli.jsp	(revision 264)
+++ ether_megapoli/trunk/web/resources/templates/templateMegapoli.jsp	(revision 265)
@@ -29,4 +29,5 @@
     <ether:htmlJs jsFile="classesForJQuery/Button"/>
     <ether:htmlJs jsFile="classesForJQuery/ComplexButton"/>
+    <ether:htmlJs jsFile="classesForJQuery/LoginButton"/>
     <ether:htmlJs jsFile="classesForJQuery/Slide"/>
     <ether:htmlJs jsFile="apycom.com-4-steel-blue/menu"/>
@@ -63,5 +64,7 @@
         <div id="title"></div>
 
-        <div id="tools" align="right"></div>
+        <div id="tools" align="right">
+            <div id="loginModule" align="right"></div>
+        </div>
 
     </div>
@@ -144,17 +147,5 @@
     templateTexts["app.en"] = '<bean:message key="app.en"/>';
     templateTexts["app.fr"] = '<bean:message key="app.fr"/>';
-    templateTexts["app.connexion"] = '<bean:message key="app.connexion"/>';
     templateTexts["data.upload.metadata.contact.mail"] = '<bean:message key="data.upload.metadata.contact.mail"/>';
-    templateTexts["app.admin"] = '<bean:message key="app.admin"/>';
-    templateTexts["data.authentification.login"] = '<bean:message key="data.authentification.login"/>';
-    templateTexts["data.authentification.pwd"] = '<bean:message key="data.authentification.pwd"/>';
-    templateTexts["data.authentification.sign"] = '<bean:message key="data.authentification.sign"/>';
-    templateTexts["data.authentification.pwdForget"] = '<bean:message key="data.authentification.pwdForget"/>';
-    templateTexts["data.authentification.loginForget.help"] = '<bean:message key="data.authentification.loginForget.help"/>';
-    templateTexts["data.authentification.loginForget"] = '<bean:message key="data.authentification.loginForget"/>';
-    templateTexts["errors.logon.notFound"] = "<bean:message key='errors.logon.notFound' arg0="<%=Context.getWebmaster( request )%>"/>";
-    templateTexts["errors.logon.failed"] = "<bean:message key='errors.logon.failed' arg0="<%=Context.getWebmaster( request )%>"/>";
-    templateTexts["data.authentification"] = "<bean:message key="data.authentification"/>";
-    templateTexts["data.authentification.text"] = "<bean:message key="data.authentification.text"/>";
     templateTexts["data.access.extract.short"] = '<bean:message key="data.access.extract.short"/>';
     templateTexts["data.upload.short"] = '<bean:message key="data.upload.short"/>';
@@ -163,4 +154,18 @@
     templateTexts["app.mentions"] = '<bean:message key="app.mentions"/>';
     templateTexts["app.infos"] = '<bean:message key="app.infos"/>';
+
+    // Needed texts if you use the library LoginButton.js
+    var loginTexts = $A( "" );
+    loginTexts["app.connexion"] = '<bean:message key="app.connexion"/>';
+    loginTexts["data.authentification.login"] = '<bean:message key="data.authentification.login"/>';
+    loginTexts["data.authentification.pwd"] = '<bean:message key="data.authentification.pwd"/>';
+    loginTexts["data.authentification.sign"] = '<bean:message key="data.authentification.sign"/>';
+    loginTexts["data.authentification.pwdForget"] = '<bean:message key="data.authentification.pwdForget"/>';
+    loginTexts["data.authentification.loginForget.help"] = '<bean:message key="data.authentification.loginForget.help"/>';
+    loginTexts["data.authentification.loginForget"] = '<bean:message key="data.authentification.loginForget"/>';
+    loginTexts["errors.logon.notFound"] = "<bean:message key='errors.logon.notFound' arg0="<%=Context.getWebmaster( request )%>"/>";
+    loginTexts["errors.logon.failed"] = "<bean:message key='errors.logon.failed' arg0="<%=Context.getWebmaster( request )%>"/>";
+    loginTexts["app.admin"] = '<bean:message key="app.admin"/>';
+    loginTexts["data.authentification.text"] = "<bean:message key="data.authentification.text"/>";
 
     var interfaceTemplate = new InterfaceTemplate();
Index: ether_megapoli/trunk/web/visualization/visu_parameter_by_pf-script.jsp
===================================================================
--- ether_megapoli/trunk/web/visualization/visu_parameter_by_pf-script.jsp	(revision 264)
+++ ether_megapoli/trunk/web/visualization/visu_parameter_by_pf-script.jsp	(revision 265)
@@ -325,5 +325,5 @@
         if( !getJSONUser() )
         // Method showLogin writen in megapoliHead.jsp
-            showLogin( templateTexts["data.authentification.text"] );
+            getLoginModule().showLogin( templateTexts["data.authentification.text"] );
         else
             this.requestDownload();
