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

Last change on this file since 596 was 596, checked in by vmipsl, 12 years ago

wijmo (linechart, barchart), credits, mentions
File size: 16.5 KB
Line 
1<%@ page import="com.ether.WebHelper" %>
2<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
3
4<script type="text/javascript">
5
6var InterfaceStatistics = Class.create( {
7    initialize: function()
8    {
9        /** *********** CONTAINERS *********** **/
10        this.parent = $( "#containerMiddle" );
11        this.containerMenu = $( "#menuCircle" );
12
13        /** *********** VARIABLES *********** **/
14        this.language = '<spring:message code="language"/>';
15        this.webmaster = "<%=WebHelper.getProperty(request, "mail.webmaster")%>";
16        this.projectsPath = "resources/images/";
17        this.projectsArray = [
18            {id:"ETHER", img:"logo_Ether_50.jpg", top:"-16px", left:"125px"},
19            {id:"NDACC", img:"logo_Ndacc_50.jpg", top:"1.66667px", left:"46.3334px"},
20            {id:"ECCAD", img:"logo_ECCAD_50.gif", top:"39.3333px", left:"109.333px"},
21            {id:"IASI", img:"logo_iasi_50.jpg", top:"-78.6667px", left:"77.6666px"},
22            {id:"GOSAT", img:"logo_gosat_50.jpg", top:"-0.333328px", left:"200.667px"},
23            {id:"IAGOS", img:"logo_Iagos_50.jpg", top:"36px", left:"138px"},
24            {id:"TROPICO", img:"logo_tropico_50.jpg", top:"-74px", left:"45px"},
25            {id:"MEGAPOLI", img:"logo_Megapoli_50.png", top:"-74.3333px", left:"15.3333px"},
26            {id:"MIMOSA", img:"logo_mimosa_50.png", top:"-45.6667px", left:"76.3334px"},
27            {id:"REPROBUS", img:"logo_reprobus_50.png", top:"-48px", left:"161.667px"},
28            {id:"GEISA", img:"logo_geisa_50.jpg", top:"22px", left:"167.667px"},
29            {id:"TAPAS", img:"logo_tapas_50.png", top:"58.3333px", left:"125px"},
30            {id:"OUTREACH", img:"logo_acomida_50.jpg", top:"-77.3333px", left:"225px"},
31            {id:"OMER7A", img:"logo_omer7A_50.jpg", top:"22.6667px", left:"76.3334px"},
32            {id:"GIRAFE", img:"logo_girafe_50.JPG", top:"-79.6667px", left:"192.333px"},
33            {id:"ARLETTY", img:"logo_arletty_50.jpg", top:"-79px", left:"161.667px"}
34        ];
35        this.widthInitLogin = $( "#login_bg" ).width();
36        this.widthInitMentionsOrCredits = $( "#mentions" ).width();
37
38        this.bindButtons();
39        this.createDraggableSlides();
40        this.createMenuCircle();
41
42        $( document ).ready( jQuery.proxy( function()
43        {
44            $( ".containerToDrag" ).draggable();
45            // Menu
46            this.animateMenuCircle();
47            this.bindMenuCircle();
48            // Slides
49            this.onClickHelp();
50            this.selectedLogo = $( "#ETHER" )[0];
51            this.onClickLogo();
52//            this.hideHelp();
53        }, this ) );
54    },
55
56
57    // CREATES AND BINDS ********************************************************
58    bindButtons: function()
59    {
60        $( "#home_button" ).bind( "dblclick", this.onClickHome );
61        $( "#language_button" ).bind( "dblclick", jQuery.proxy( this.onClickLanguage, this ) );
62        $( "#mail_button" ).bind( "dblclick", this.onClickMail );
63        $( "#login_button" ).bind( "dblclick", jQuery.proxy( this.onClickLogin, this ) );
64        $( "#help" ).bind( "click", jQuery.proxy( this.onClickHelp, this ) );
65        $( "#credits" ).bind( "dblclick", jQuery.proxy( this.onClickCredits, this ) );
66        $( "#mentions" ).bind( "dblclick", jQuery.proxy( this.onClickMentions, this ) );
67    },
68
69    createMenuCircle: function()
70    {
71        var menuSize = this.containerMenu.width();
72        var nbLogosForSize = (this.projectsArray.length / 2) + 1;
73        var divLogoSize = menuSize / nbLogosForSize;
74        this.logoSize = divLogoSize - 5;
75
76        var initTop = this.projectsArray[0].top;
77        var initLeft = this.projectsArray[0].left;
78
79        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
80        {
81            var divLogo = $( document.createElement( "div" ) );
82            divLogo.addClass( "divLogo containerToDrag" );
83            divLogo.attr( {id:logo.id, style:"position:absolute; top:" + initTop + "; left:" + initLeft} );
84            divLogo.html( '<img id="img_' + logo.id + '"src="' + this.projectsPath + '' + logo.img + '" width="' + this.logoSize + 'px" height="' + this.logoSize + 'px"/>' );
85            $( "#menuCircle" ).append( divLogo );
86        }, this ) );
87    },
88
89    createDraggableSlides: function()
90    {
91        this.leftTopSlide = new DragSlide( {id:"leftTop", parent:this.parent, width:"170", height:"200", top:"140px", left:"53px",
92            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
93
94        this.leftMiddleSlide = new DragSlide( {id:"leftMiddleSlide", parent:this.parent, width:"170", height:"100", top:"355px", left:"53px",
95            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
96        this.leftMiddleSlide.setTitle( '<spring:message code="statistics.data"/>' );
97
98        this.leftBottomSlide = new DragSlide( {id:"leftBottomSlide", parent:this.parent, width:"170", height:"100", top:"470px", left:"53px",
99            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
100        this.leftBottomSlide.setTitle( '<spring:message code="statistics.duration"/>' );
101
102        this.middleSlide = new DragSlide( {id:"middle", parent:this.parent, width:"430", height:"430", top:"140px", left:"245px",
103            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
104        this.middleSlide.setTitle( '<spring:message code="statistics.evolution"/>' );
105
106        this.rightSlide = new DragSlide( {id:"right", parent:this.parent, width:"200", height:"300", top:"180px", left:"698px",
107            specificClass:"containerStatistics", specificTitleClass:"containerStatisticsTitle", specificContentClass:"containerStatisticsContent"} );
108
109        var linechart = $( document.createElement( "div" ) );
110        linechart.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
111        linechart.attr( {id:"wijlinechart"} );
112        this.middleSlide.getDivContent().append( linechart );
113
114        var barchart = $( document.createElement( "div" ) );
115        barchart.addClass( "ui-widget ui-widget-content ui-corner-all statisticsEther" );
116        barchart.attr( {id:"wijbarchart"} );
117        this.middleSlide.getDivContent().append( barchart );
118
119        this.createLinechart();
120//        this.createBarchart();
121    },
122
123    // REQUESTS ********************************************************
124    requestChangeLocale: function()
125    {
126        $.ajax( {
127            url: "project?methodName=setLocale&language=<spring:message code="label.language.value.to.switch"/>",
128            success:function()
129            {
130                location.reload();
131            }
132        } );
133    },
134
135    // HANDLES ******************************************************** = retours ajax
136    handleCreateXML: function( result )
137    {
138        this.loadingRequest.hide();
139        //this.loadingRequest.display();
140
141        var res = jQuery.parseJSON( result ).result;
142        alert( res );
143    },
144
145
146    // EVENTS ********************************************************
147    onClickHome: function()
148    {
149        location.reload();
150    },
151
152    onClickLanguage: function()
153    {
154        this.requestChangeLocale();
155    },
156
157    onClickMail: function()
158    {
159        document.location.href = "mailto:" + this.webmaster + "?subject=[STATISTICS]";
160    },
161
162    onClickLogin: function()
163    {
164        if( this.widthInitLogin == $( "#login_bg" ).width() )
165            this.enlargeLogin();
166        else
167            this.reduceLogin();
168    },
169
170    onClickMentions: function()
171    {
172        if( this.widthInitMentionsOrCredits == $( "#mentions" ).width() )
173            this.enlargeCreditsOrMentions( $( "#mentions" ), $( "#mentions_bg" ), $( "#mentions_text" ), $( "#mentions_title" ), "project/mentions_" + this.language + ".jsp" );
174        else
175            this.reduceCreditsOrMentions( $( "#mentions" ), $( "#mentions_bg" ), $( "#mentions_text" ), $( "#mentions_title" ), "project/mentions_" + this.language + ".jsp" );
176    },
177
178    onClickCredits: function()
179    {
180        if( this.widthInitMentionsOrCredits == $( "#credits" ).width() )
181            this.enlargeCreditsOrMentions( $( "#credits" ), $( "#credits_bg" ), $( "#credits_text" ), $( "#credits_title" ), "project/credits_" + this.language + ".jsp" );
182        else
183            this.reduceCreditsOrMentions( $( "#credits" ), $( "#credits_bg" ), $( "#credits_text" ), $( "#credits_title" ), "project/credits_" + this.language + ".jsp" );
184    },
185
186    onClickHelp: function()
187    {
188        this.rightSlide.setTitle( '<spring:message code="label.help"/>' );
189        this.rightSlide.setContent( "<spring:message code='label.help.content'/>" );
190        var backHelpButton = new Button( {value:"<spring:message code="label.display.actions"/>", parent:this.rightSlide.getDivContent(), className: "small positive back_button", onClick:jQuery.proxy( this.changeRightSlide, this )} );
191    },
192
193    onClickButtonLogin: function()
194    {
195        // TODO reduce cloud
196
197    },
198
199    onClickLogo: function()
200    {
201        if( !this.selectedLogo )
202            return;
203
204        this.changeLeftTopSlide();
205        this.changeLeftMiddleSlide();
206        this.changeLeftBottomSlide();
207    },
208
209    // OTHERS ********************************************************
210    reduceLogin: function()
211    {
212        $( "#login" ).css( { zIndex:0 } );
213        $( "#login_text" ).css( "visibility", "hidden" );
214        $( "#login_bg" ).animate( {
215            opacity: 1,
216            height:'60px',
217            width:'78px',
218            zIndex:'0'
219        }, 2000, function()
220        {
221        } );
222
223        $( "#login_button" ).animate( {
224            top:'16px',
225            left: '20px'
226        }, 2000, function()
227        {
228        } );
229    },
230
231    enlargeLogin: function()
232    {
233        $( "#login" ).css( { zIndex:1 } );
234        $( "#login_bg" ).animate( {
235            opacity: 0.45,
236            height:'500px',
237            width:'500px'
238        }, 2000, function()
239        {
240            $( "#login_text" ).css( "visibility", "visible" );
241        } );
242
243        $( "#login_button" ).animate( {
244            top:'82px',
245            left: '155px'
246        }, 2000, function()
247        {
248        } );
249    },
250
251    reduceCreditsOrMentions: function( div, div_bg, div_text, div_title )
252    {
253        div.css( { zIndex:0 } );
254        div_text.css( "visibility", "hidden" );
255        div.animate( {
256            left: '+=500',
257            top: '+=500'
258        }, 2000, function()
259        {
260        } );
261        div_bg.animate( {
262            opacity: 1,
263            height:'42px',
264            width:'59px',
265            zIndex:'0'
266        }, 2000, function()
267        {
268            div_title.css( "visibility", "visible" );
269        } );
270    },
271
272    enlargeCreditsOrMentions: function( div, div_bg, div_text, div_title, pageToLoad )
273    {
274        div_title.css( "visibility", "hidden" );
275        div.css( { zIndex:1 } );
276        div.animate( {
277            left: '-=500',
278            top: '-=500'
279        }, 2000, function()
280        {
281        } );
282
283        div_bg.animate( {
284            opacity: 0.95,
285            height:'500px',
286            width:'500px'
287        }, 2000, function()
288        {
289            div_text.css( "visibility", "visible" );
290            div_text.load( pageToLoad );
291        } );
292    },
293
294    animateMenuCircle: function()
295    {
296        jQuery.each( this.projectsArray, jQuery.proxy( function( i, logo )
297        {
298            $( "#" + logo.id ).animate( {
299                top:logo.top,
300                left:logo.left
301            }, 5000, function()
302            {
303            } );
304        }, this ) );
305    },
306
307    bindMenuCircle: function()
308    {
309        var gridimage;
310        $( '.divLogo' ).mouseover(
311                function()
312                {
313                    gridimage = $( this ).find( 'img' ); //Define target as a variable
314                    gridimage.stop().animate( {width: 50, height:50}, 150 );
315                } ).mouseout(
316                jQuery.proxy( function( element )
317                {
318                    this.selectedLogo = element.currentTarget;
319                    gridimage.stop().animate( {width: this.logoSize, height:this.logoSize}, 150 );
320                }, this ) ).dblclick(
321                jQuery.proxy( function()
322                {
323                    this.onClickLogo();
324                }, this ) );
325    },
326
327//    hideHelp: function()
328//    {
329//        this.rightSlide.getDivContent().animate(
330//        {
331//            opacity: 0
332//        }, 10000, jQuery.proxy( function()
333//        {
334//            this.changeRightSlide();
335//            this.rightSlide.getDivContent().attr( {style:"opacity:1"} );
336//        }, this ) );
337//    },
338//
339    changeLeftTopSlide: function()
340    {
341        this.leftTopSlide.setTitle( this.selectedLogo.id + ' <spring:message code="title"/>' );
342        this.leftTopSlide.setContent(
343                "<spring:message code="statistics.online"/> : 2006/05/08<BR/>" +
344                        "<span class='text1'><spring:message code="statistics.since"/> : 2009/05/08<BR/></span>" +
345                        "<spring:message code="statistics.user.registered"/> : 1500<BR/>" +
346                        "<spring:message code="statistics.user.connected"/> : 17<BR/>" +
347                        "<spring:message code="statistics.visit"/> : 150<BR/>" +
348                        "<spring:message code="statistics.email"/> : 15<BR/>" );
349    },
350
351    changeLeftMiddleSlide: function()
352    {
353        this.leftMiddleSlide.setContent( "<spring:message code="statistics.data.download"/> : 15001<BR/><spring:message code="statistics.data.download.size"/> : 50To<BR/>" );
354    },
355
356    changeLeftBottomSlide: function()
357    {
358        this.leftBottomSlide.setContent( "<spring:message code="statistics.duration.total"/> : 15001''<BR/><spring:message code="statistics.duration.average"/> : 50''<BR/>" );
359    },
360
361    changeRightSlide: function()
362    {
363        this.rightSlide.setTitle( '<spring:message code="label.actions"/>' );
364        this.rightSlide.setContent( "pouif" );
365    },
366
367    // STATISTICS ********************************************************
368    createBarchart: function()
369    {
370        $( "#wijbarchart" ).wijbarchart( {
371            axis: {
372                y: {
373                    text: "Total Hardware"
374                },
375                x: {
376                    text: "",
377                    labels: {
378                        style: {
379                            rotation: -45
380                        }
381                    }
382                }
383            },
384            hint: {
385                content: function ()
386                {
387                    return this.data.label + '\n ' + this.y + '';
388                }
389            },
390            header: {
391                text: "Console Wars"
392            },
393            seriesList: [
394                {
395                    label: "US",
396                    legendEntry: true,
397                    data: { x: ['PS3', 'XBOX360', 'Wii'], y: [12.35, 21.50, 30.56] }
398                }
399            ],
400            seriesStyles: [
401                {
402                    fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8
403                }
404            ],
405            seriesHoverStyles: [
406                {
407                    "stroke-width": "1.5", opacity: 1
408                }
409            ]
410        } );
411    },
412
413    createLinechart: function()
414    {
415        var xArray = ["2010-10", "2010-11", "2010-12", "2011-01", "2011-02"];
416        var yArray = [0, 10, 30, 50, 100];
417        $( "#wijlinechart" ).wijlinechart( {
418            height: 200,
419            width: 400,
420            axis: {
421                y: {
422                    origin: 0
423                }
424            },
425            showChartLabels: false,
426            header: {
427                text: "<spring:message code="statistics.evolution.visit"/>"
428            },
429            hint: {
430                content: function ()
431                {
432                    return this.data.lineSeries.label + '\n' + this.x + '\n' + this.y + '';
433                },
434                contentStyle: { "font-size": 10 },
435                offsetY: -10
436            },
437            legend: {
438                visible: false
439            },
440            seriesList: [
441                {
442                    label: "<spring:message code="statistics.visit"/>",
443                    legendEntry: true,
444                    data: {
445                        x: xArray,
446                        y: yArray
447                    },
448                    markers: {
449                        visible: true,
450                        type: "circle"
451                    }
452                }
453            ]
454        } );
455    }
456
457} );
458
459</script>
Note: See TracBrowser for help on using the repository browser.