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

<%@ 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.projectsPath = "resources/images/";
        this.projectsArray = [
            {id:"ETHER", img:"logo_Ether_50.jpg", top:"-16px", left:"125px"},
            {id:"NDACC", img:"logo_Ndacc_50.jpg", top:"1.66667px", left:"46.3334px"},
            {id:"ECCAD", img:"logo_ECCAD_50.gif", top:"39.3333px", left:"109.333px"},
            {id:"IASI", img:"logo_iasi_50.jpg", top:"-78.6667px", left:"77.6666px"},
            {id:"GOSAT", img:"logo_gosat_50.jpg", top:"-0.333328px", left:"200.667px"},
            {id:"IAGOS", img:"logo_Iagos_50.jpg", top:"36px", left:"138px"},
            {id:"TROPICO", img:"logo_tropico_50.jpg", top:"-74px", left:"45px"},
            {id:"MEGAPOLI", img:"logo_Megapoli_50.png", top:"-74.3333px", left:"15.3333px"},
            {id:"MIMOSA", img:"logo_mimosa_50.png", top:"-45.6667px", left:"76.3334px"},
            {id:"REPROBUS", img:"logo_reprobus_50.png", top:"-48px", left:"161.667px"},
            {id:"GEISA", img:"logo_geisa_50.jpg", top:"22px", left:"167.667px"},
            {id:"TAPAS", img:"logo_tapas_50.png", top:"58.3333px", left:"125px"},
            {id:"OUTREACH", img:"logo_acomida_50.jpg", top:"-77.3333px", left:"225px"},
            {id:"OMER7A", img:"logo_omer7A_50.jpg", top:"22.6667px", left:"76.3334px"},
            {id:"GIRAFE", img:"logo_girafe_50.JPG", top:"-79.6667px", left:"192.333px"},
            {id:"ARLETTY", img:"logo_arletty_50.jpg", top:"-79px", left:"161.667px"}
        ]
        this.selectedLogo = false;

        this.bindButtons();
        this.createDivs();
        this.animateMenuCircle();
        $( document ).ready( jQuery.proxy( function()
        {
            $( ".containerToDrag" ).draggable();
            this.bindMenuCircle();
        }, this ) );
    },


    // 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()
    {
        this.leftTopSlide = new DragSlide( {id:"leftTop", parent:this.parent, width:"150", height:"200", top:"140px", left:"53px",
            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
            title:"Main statistics", contentSlide:"leftTop"} );

        this.leftBottomSlide = new DragSlide( {id:"leftBottom", parent:this.parent, width:"430", height:"430", top:"140px", left:"230px",
            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
            title:"MEGAPOLI statistics", contentSlide:"leftBottom"} );

        this.middleSlide = new DragSlide( {id:"middle", parent:this.parent, width:"200", height:"300", top:"180px", left:"700px",
            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
            title:"TAPAS statistics", contentSlide:"middle"} );

        this.rightSlide = new DragSlide( {id:"right", parent:this.parent, width:"150", height:"200", top:"370px", left:"53px",
            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent",
            title:"Hop hop hop", contentSlide:"right"} );

    },

    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:" + (this.width - 7) + "px"} );
        divContainer.append( divTitle );
        var divContent = $( document.createElement( "div" ) );
        divContent.addClass( "containerStatisticsContent" );
        divContent.html( content );
        divContainer.append( divContent );
        return divContainer;
    },

    // 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

    },

    onClickLogo: function()
    {
        if( !this.selectedLogo )
            return;

        this.leftTopSlide.html( this.selectedLogo.id );
    },

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

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

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

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

    animateMenuCircle: function()
    {
        var menuSize = this.containerMenu.width();
        var nbLogosForSize = (this.projectsArray.length / 2) + 1;
        var divLogoSize = menuSize / nbLogosForSize;
        this.logoSize = divLogoSize - 5;

        var initTop = this.projectsArray[0].top;
        var initLeft = this.projectsArray[0].left;

        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
        {
            var divLogo = $( document.createElement( "div" ) );
            divLogo.addClass( "divLogo containerToDrag" );
            divLogo.attr( {id:logo.id, style:"position:absolute; top:" + initTop + "; left:" + initLeft} );
            divLogo.html( '<img id="img_' + logo.id + '"src="' + this.projectsPath + '' + logo.img + '" width="' + this.logoSize + 'px" height="' + this.logoSize + 'px"/>' );
            $( "#menuCircle" ).append( divLogo );
        }, this ) );

        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
        {
            $( "#" + logo.id ).animate( {
                top:logo.top,
                left:logo.left
            }, 5000, function()
            {
            } );
        }, this ) );
    },

    bindMenuCircle: function()
    {
        var gridimage;
        $( '.divLogo' ).mouseover(
                function()
                {
                    gridimage = $( this ).find( 'img' ); //Define target as a variable
                    gridimage.stop().animate( {width: 50, height:50}, 150 );
                } ).mouseout(
                jQuery.proxy( function( element )
                {
                    this.selectedLogo = element.currentTarget;
                    gridimage.stop().animate( {width: this.logoSize, height:this.logoSize}, 150 );
                }, this ) ).dblclick(
                jQuery.proxy( function()
                {
                    this.onClickLogo();
                }, this ) );
    }

} );

</script>