source: ether_statistics/web/project/statistics-script.jsp @ 591

<%@ page import="com.ether.WebHelper" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<script type="text/javascript">

var InterfaceStatistics = Class.create( {
    initialize: function()
    {
        /** *********** CONTAINERS *********** **/
        this.parent = $( "#containerMiddle" );
        this.containerMenu = $( "#menuCircle" );

        /** *********** VARIABLES *********** **/
        this.language = '<spring:message code="language"/>';
        this.webmaster = "<%=WebHelper.getProperty(request, "mail.webmaster")%>";
        this.projectsArray = ["logo_Ether_50.jpg", "logo_Ndacc_50.jpg", "logo_ECCAD_50.gif", "logo_iasi_50.jpg", "logo_gosat_50.jpg", "logo_Iagos_50.jpg", "logo_tropico_50.jpg", "logo_Megapoli_50.png", "logo_mimosa_50.png", "logo_reprobus_50.png", "logo_geisa_50.jpg", "logo_tapas_50.png", "logo_acomida_50.jpg", "logo_omer7A_50.jpg", "logo_girafe_50.JPG", "logo_arletty_50.jpg"];
        this.projectsPath = "resources/images/";

        this.bindButtons();
        this.createDivs();
        this.createCircleMenu();
        $( ".containerToDrag" ).draggable();
    },


    // CREATES AND BINDS ********************************************************
    bindButtons: function()
    {
        $( "#home_button" ).bind( "dblclick", this.onClickHome );
        $( "#language_button" ).bind( "dblclick", jQuery.proxy( this.onClickLanguage, this ) );
        $( "#mail_button" ).bind( "dblclick", this.onClickMail );
        $( "#login_button" ).bind( "dblclick", jQuery.proxy( this.onClickLogin, this ) );
    },

    createDivs: function()
    {
        var div1 = this.createDiv( "div1", "150", "200", "200", "100", "Main statistics", "content" );
        this.parent.append( div1 );
        var div2 = this.createDiv( "div2", "250", "200", "150", "300", "MEGAPOLI Statistics", "content" );
        this.parent.append( div2 );
        var div3 = this.createDiv( "div3", "150", "200", "300", "600", "TAPAS Statistics", "content" );
        this.parent.append( div3 );
    },

    createDiv: function( id, width, height, top, left, title, content )
    {
        var divContainer = $( document.createElement( "div" ) );
        divContainer.addClass( "containerStatistics containerToDrag" );
        divContainer.attr( {id:id, style:"width:" + width + "px; height:" + height + "px; top:" + top + "px; left:" + left + "px"} );
        var divTitle = $( document.createElement( "div" ) );
        divTitle.addClass( "containerStatisticsTitle" );
        divTitle.html( title );
        divTitle.attr( {style:"width:" + (width - 7) + "px"} );
        divContainer.append( divTitle );
        var divContent = $( document.createElement( "div" ) );
        divContent.addClass( "containerStatisticsContent" );
        divContent.html( content );
        divContainer.append( divContent );
        return divContainer;
    },

    createCircleMenu: function()
    {
        var menuSize = this.containerMenu.width();
        var nbLogosForSize = (this.projectsArray.length / 2) + 1;
        var divLogoSize = menuSize / nbLogosForSize;
        var logoSize = divLogoSize - 5;
        var stepLeft = 0;
        var stepTop = this.createTopLevels( nbLogosForSize - 1 );
        for( var i = 0; i < this.projectsArray.length; i++ )
        {
            var left = stepLeft * divLogoSize;
            var top = menuSize / 2 - stepTop[stepLeft] * divLogoSize;
            var divLogo = $( document.createElement( "div" ) );
            divLogo.html( '<img id="img_' + this.projectsArray[i] + '"src="' + this.projectsPath + '' + this.projectsArray[i] + '" width="' + logoSize + 'px" height="' + logoSize + 'px"/>' );
            divLogo.addClass( "divLogo" );
            divLogo.attr( {id:this.projectsArray[i], style:"position:absolute; top:" + top + "px; left:" + left + "px"} );
            this.containerMenu.append( divLogo );

            if( 0 != i && (this.projectsArray.length - 1) != i )
            {
                top = menuSize / 2 + stepTop[stepLeft] * divLogoSize;
                i++;
                var divLogo2 = $( document.createElement( "div" ) );
                divLogo2.html( '<img id="img_' + this.projectsArray[i] + '"src="' + this.projectsPath + '' + this.projectsArray[i] + '" width="' + logoSize + 'px" height="' + logoSize + 'px"/>' );
                divLogo2.addClass( "divLogo" );
                divLogo2.attr( {id:this.projectsArray[i], style:"position:absolute; top:" + top + "px; left:" + left + "px"} );
                this.containerMenu.append( divLogo2 );
            }
            stepLeft++;
        }

//        $( ".divLogo" ).hover( function()
//        {
//            $( this )[0].firstChild.width = "50px";
//            $( "#img_logo_mimosa_50.png" ).animate( {
//                opacity: 1,
//                width:'50px'
//            }, 5000, function()
//            {
//            } );

//            $("#img_logo_mimosa_50.png").stop(false, false).animate({width:'50px'}, 600);
//            $( "#img_" + $( this )[0].id ).width( "50px" );
//        } );
    },

    createTopLevels: function( nb )
    {
        var topLevels = [];
        var level = 0;
        for( var i = 0; i <= (nb / 2); i++ )
        {
            topLevels[i] = level;
            topLevels[nb - i] = level;
            level++;
        }
        return topLevels;
    },

    // REQUESTS ********************************************************
    requestChangeLocale: function()
    {
        $.ajax( {
            url: "project?methodName=setLocale&language=<spring:message code="label.language.value.to.switch"/>",
            success:function()
            {
                location.reload();
            }
        } );
    },

    // HANDLES ******************************************************** = retours ajax
    handleCreateXML: function( result )
    {
        this.loadingRequest.hide();
        //this.loadingRequest.display();

        var res = jQuery.parseJSON( result ).result;
        alert( res );
    },


    // EVENTS ********************************************************
    onClickHome: function()
    {
        location.reload();
    },

    onClickLanguage: function()
    {
        this.requestChangeLocale();
    },

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

    onClickLogin: function()
    {
        if( 88 == $( "#login_bg" ).width() )
            this.enlargeLogin();
        else
            this.reduceLogin();
    },

    onClickButtonLogin: function()
    {
        // TODO reduce cloud

    },

    // OTHERS ********************************************************
    reduceLogin: function()
    {
        $( "#login_text" ).css( "visibility", "hidden" );
        $( "#login_bg" ).animate( {
            opacity: 1,
            height:'60px',
            width:'78px'
        }, 5000, function()
        {
        } );

        $( "#login_button" ).animate( {
            top:'16px',
            left: '20px'
        }, 5000, function()
        {
        } );
    },

    enlargeLogin: function()
    {
        $( "#login_bg" ).animate( {
            opacity: 0.45,
            height:'500px',
            width:'500px'
        }, 5000, function()
        {
            $( "#login_text" ).css( "visibility", "visible" );
        } );

        $( "#login_button" ).animate( {
            top:'82px',
            left: '155px'
        }, 5000, function()
        {
        } );
    }

} );

</script>