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

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

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

    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.createLogin();
        this.createTools();
        this.createMenuData();
        jQuery.proxy( this.createLeftSlides(), this );
        this.updateLoginOrLogout();
    },

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

    createTools: function()
    {
        var backofficeButton = new Button( {value:templateTexts["app.backoffice"], parent:this.containerTools, id:"button_bo", className: "blue_button", classNameText:"blue_button_text", title : templateTexts["app.backoffice.help"], onClick:jQuery.proxy( this.onClickBO, this )} );
        backofficeButton.hide();

        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", isNeededInscription:true, callbackInscription:jQuery.proxy( this.onClickInscription, this ), anotherOnClickLogin:this.updateLoginOrLogout, anotherOnClickLogout:this.updateLoginOrLogout } );
        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" ) );
        liExtract.append('<a onclick=\'javascript:neededLogin("/DataAccess.do")\'><span>' + templateTexts["data.access.extract.short"] + '</span></a>');
        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;
    },

    onClickBO: function()
    {
        document.location.href = this.path + "/backoffice";
    },

    onClickMail: function()
    {
        document.location.href = "mailto:" + this.webmaster + "?subject=[MEGAPOLI]";
    },

    onClickInscription: function()
    {
        var dataProtocol = "resources/jsp/dataProtocol_fr.jsp";
        if( !this.isLanguageFr )
            dataProtocol = "resources/jsp/dataProtocol_en.jsp";

        var $dialog = $( '<div></div>' )
                .load( dataProtocol )
                .dialog( {
                             autoOpen: false,
                             title: loginTexts["login.inscription"],
                             height: 700,
                             width: 600
                         } );
        $dialog.dialog( 'open' );

        // TODO : see with $dialog.ready() to manage buttons
    },

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

    updateLoginOrLogout: function()
    {
        if( "<%=UserRole.ADMINISTRATOR%>" == getJSONUserRole() )
            $( "#button_bo" ).show();
        else
            $( "#button_bo" ).hide();
    }

} );

/** ******************************* **/
/** *********** ACCOUNT *********** **/
/** ******************************* **/
function onClickAcceptDataProtocol()
{
    if( '' == $( "#lastName" ).val() || '' == $( "#email" ).val() || '' == $( "#password" ).val() )
    {
        showErrorAccount( null, templateTexts["login.dataProtocolFields"] );
        return;
    }

    if( $( "#checkboxUser" ).attr( 'checked' ) )
        createAccount();
    else
        showErrorAccount( null, templateTexts["login.dataProtocolAccept"] );
}

function createAccount()
{
    var parametersUrl = "name=" + $( "#lastName" ).val() + "&firstName=" + $( "#firstName" ).val() + "&email=" + $( "#email" ).val() + "&pwd=" + $( "#password" ).val();
    var request = $.ajax( {
        url: "project?methodName=createAccount&" + parametersUrl,
        success:handleCreateAccount,
        error: showErrorAccount
    } );
}

function handleCreateAccount()
{
    $( "#infosAccount" ).hide();
    $( "#infosAccount" ).removeClass( "containerErrors" );
    $( "#infosAccount" ).addClass( "containerInfos" );
    $( "#infosAccount" ).html( templateTexts["login.dataProtocol.account"] );
    $( "#infosAccount" ).show();
}

function showErrorAccount( result, text )
{
    $( "#infosAccount" ).hide();
    $( "#infosAccount" ).removeClass( "containerInfos" );
    $( "#infosAccount" ).addClass( "containerErrors" );
    if( null != result )
        $( "#infosAccount" ).html( templateTexts[result.responseText] );
    else
        $( "#infosAccount" ).html( text );

    $( "#infosAccount" ).show();
}
</script>