source: ether_megapoli/trunk/web/resources/jsp/megapoliHead.jsp @ 253

<%@ page import="com.medias.Context" %>

<script type="text/javascript">
var InterfaceTemplate = Class.create( {

    initialize: function()
    {
        /** *********** CONTAINERS *********** **/
        this.containerTitle = $( "#title" );
        this.containerTools = $( "#tools" );
        this.containerMenuData = $( "#menuData" );

        /** *********** VARIABLES *********** **/
        this.isLanguageFr = <%=Context.getLangue(request).equals( "fr" )%>;
        this.path = "<%=request.getContextPath()%>";
        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;

        /** ************ CREATE ************ **/
        this.createTitle();
        this.createTools();
        this.createMenuData();
        this.createLeftSlides();
    },

    // CREATES ********************************************************
    createTitle: function()
    {
        this.containerTitle.addClass( "containerTitle" );
        this.containerTitle.html( templateTexts["app.fulltitle"] );
    },

    createTools: function()
    {
        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 )} );

        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()
    {
        var containerLoginButton = $( "#button_login" );

        if( getJSONUser() )
        {
            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 divSlideCredits = new Slide( { contentId:"slideContentCredits", buttonId: "slideCredits", parent:$( "#creditSlide" ), isIndexToChange:true,
            contentButton:"<img src='resources/icons/man_credits.gif' width='50px' height='50px'/><br/>" , contentSlide:"CREDDDDIIITS"} );

        var divSlideMentions = new Slide( { contentId:"slideContentMentions", buttonId: "slideMentions", parent:$( "#mentionSlide" ),specificButtonClass:"containerSlideButtonMentions", isIndexToChange:true,
            contentButton:"<img src='resources/icons/man_mentions_2.png' width='50px' height='50px'/><br/>", contentSlide:"MENTIIIOOONNSS"} );

        var divSlideInfos = new Slide( { contentId:"slideContentInfos", buttonId: "slideInfos", parent:$( "#infoSlide" ), specificButtonClass:"containerSlideButtonInfos", isIndexToChange:true,
            contentButton:"<img src='resources/icons/man_info.gif' width='50px' height='50px'/>", contentSlide:"IINNFFFOOOOSSS"} );
    },

    // 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 )
        } );
    },

    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"] );
}

/** *********************************************** **/
/** ******************** USER ********************* **/
/** *********************************************** **/
function getJSONUser()
{
    return InterfaceTemplate.jSONUser;
}

function setJSONUser( user )
{
    InterfaceTemplate.jSONUser = user;
}
</script>