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

<%@ 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:"logo_Ether_50", img:"logo_Ether_50.jpg", top:"-16px", left:"125px"},
            {id:"logo_Ndacc_50", img:"logo_Ndacc_50.jpg", top:"1.66667px", left:"46.3334px"},
            {id:"logo_ECCAD_50", img:"logo_ECCAD_50.gif", top:"39.3333px", left:"109.333px"},
            {id:"logo_iasi_50", img:"logo_iasi_50.jpg", top:"-78.6667px", left:"77.6666px"},
            {id:"logo_gosat_50", img:"logo_gosat_50.jpg", top:"-0.333328px", left:"200.667px"},
            {id:"logo_Iagos_50", img:"logo_Iagos_50.jpg", top:"36px", left:"138px"},
            {id:"logo_tropico_50", img:"logo_tropico_50.jpg", top:"-74px", left:"45px"},
            {id:"logo_Megapoli_50", img:"logo_Megapoli_50.png", top:"-74.3333px", left:"15.3333px"},
            {id:"logo_mimosa_50", img:"logo_mimosa_50.png", top:"-45.6667px", left:"76.3334px"},
            {id:"logo_reprobus_50", img:"logo_reprobus_50.png", top:"-48px", left:"161.667px"},
            {id:"logo_geisa_50", img:"logo_geisa_50.jpg", top:"22px", left:"167.667px"},
            {id:"logo_tapas_50", img:"logo_tapas_50.png", top:"58.3333px", left:"125px"},
            {id:"logo_acomida_50", img:"logo_acomida_50.jpg", top:"-77.3333px", left:"225px"},
            {id:"logo_omer7A_50", img:"logo_omer7A_50.jpg", top:"22.6667px", left:"76.3334px"},
            {id:"logo_girafe_50", img:"logo_girafe_50.JPG", top:"-79.6667px", left:"192.333px"},
            {id:"logo_arletty_50", img:"logo_arletty_50.jpg", top:"-79px", left:"161.667px"}
        ]

        this.bindButtons();
        this.createDivs();
        this.animateMenuCircle();
        $( ".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", "140", "53", "Main statistics", "div1" );
        this.parent.append( div1 );
        var div2 = this.createDiv( "div2", "430", "430", "140", "230", "MEGAPOLI Statistics", "div2" );
        this.parent.append( div2 );
        var div3 = this.createDiv( "div3", "200", "300", "180", "700", "TAPAS Statistics", "div3" );
        this.parent.append( div3 );
        var div4 = this.createDiv( "div4", "150", "200", "370", "53", "Hop hop hop", "div4" );
        this.parent.append( div4 );
    },

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

    createCircleMenuOld: 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 containerToDrag" );
            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 containerToDrag" );
                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'
        }, 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;
        var 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="' + logoSize + 'px" height="' + 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 ) );
    }
} );

</script>