source: ether_iasi/trunk/web/project/quicklook_script.jsp @ 768

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<script type="text/javascript">

    var InterfaceIasi = Class.create( {
        initialize: function()
        {
            /** *********** CONTAINERS *********** **/
            this.parent = $( "#pageWrapper" );
            this.containerSelect = $( "#containerSelect" );
            this.containerCalendar = $( "#containerCalendar" );
            this.containerQuickLookA = $( "#containerQuickLookA" );
            this.containerQuickLookB = $( "#containerQuickLookB" );
            this.containerResultA = $( "#containerResultA" );
            this.containerResultB = $( "#containerResultB" );
            this.containerErrors = $( "#errors" );

            /** *********** VARIABLES *********** **/


            this.createTools();
            this.getQuicklook();

        },


        // CREATES AND BINDS ********************************************************
        createTools: function()
        {
            this.createSelectSatellites();
            this.createSelectProjections();
            this.createSelectSpecies();
//            this.createSelectLevel();
            this.createCalendar();


            <%--var quickLookButton = new Button( {id:"quickLookButton", value:"<spring:message code="label.quicklook.button"/>", parent:this.containerSelect, className: "small", onClick:jQuery.proxy( this.onClickQuicklook, this )} );--%>
        },

        createSelectSatellites: function()
        {
            var div = $( document.createElement( "div" ) );
            div.html( '<spring:message code="label.satellite"/> :' );
            div.addClass( "selectTools" );
            this.containerSelect.append( div );

            var paramSelect = new Object();
            paramSelect.id = "selectSatellites";
            paramSelect.parent = div;
            this.selectSatellites = new Select( paramSelect );
            this.selectSatellites.add( "metopa", "MetOp-A", jQuery.proxy(this.getQuicklook, this ));
            this.selectSatellites.add( "metopb", "MetOp-B", jQuery.proxy(this.getQuicklook, this ));
            this.selectSatellites.add( "metopab", '<spring:message code="label.either"/>', jQuery.proxy(this.getQuicklook, this ));
            this.selectSatellites.selectFirst();
        },

        createSelectProjections: function()
        {
            var div = $( document.createElement( "div" ) );
            div.html( '<spring:message code="label.projection"/> :' );
            div.addClass( "selectTools" );
            this.containerSelect.append( div );

            var paramSelect = new Object();
            paramSelect.id = "selectProjections";
            paramSelect.parent = div;
            this.selectProjections = new Select( paramSelect );
            this.selectProjections.add( "global", '<spring:message code="label.globe"/>', jQuery.proxy(this.getQuicklook, this ));
            this.selectProjections.add( "europe", '<spring:message code="label.europe"/>', jQuery.proxy(this.getQuicklook, this ));
            this.selectProjections.add( "pn", '<spring:message code="label.pole.north"/>', jQuery.proxy(this.getQuicklook, this ));
            this.selectProjections.add( "ps", '<spring:message code="label.pole.south"/>', jQuery.proxy(this.getQuicklook, this ));
            this.selectProjections.selectFirst();
        },

        createSelectSpecies: function()
        {
            var div = $( document.createElement( "div" ) );
            div.html( '<spring:message code="label.species"/> :' );
            div.addClass( "selectTools" );
            this.containerSelect.append( div );

            var paramSelect = new Object();
            paramSelect.id = "selectSpecies";
            paramSelect.parent = div;
            this.selectSpecies = new Select( paramSelect );
            this.selectSpecies.add( "CO", 'CO', jQuery.proxy(this.getQuicklook, this ));
//            this.selectSpecies.add( "H2O", 'H2O', jQuery.proxy(this.getQuicklook, this ));
            this.selectSpecies.add( "SKT", '<spring:message code="label.surftemp"/>', jQuery.proxy(this.getQuicklook, this ));
            this.selectSpecies.selectFirst();
        },

        <%--createSelectLevel: function()--%>
        <%--{--%>
            <%--var div = $( document.createElement( "div" ) );--%>
            <%--div.html( '<spring:message code="label.level"/> :' );--%>
            <%--div.addClass( "selectTools" );--%>
            <%--this.containerSelect.append( div );--%>

            <%--var paramSelect = new Object();--%>
            <%--paramSelect.id = "selectLevel";--%>
            <%--paramSelect.parent = div;--%>
            <%--this.selectLevel = new Select( paramSelect );--%>
            <%--this.selectLevel.add( "1000", '1000', jQuery.proxy(this.getQuicklook, this ));--%>
            <%--this.selectLevel.add( "500", '500', jQuery.proxy(this.getQuicklook, this ));--%>
            <%--this.selectLevel.add( "10", '10', jQuery.proxy(this.getQuicklook, this ));--%>
            <%--this.selectLevel.selectFirst();--%>
        <%--},--%>

        createCalendar: function()
        {
            this.calendarFormat = "%Y-%m-%d";
            this.calendarConverter = new AnyTime.Converter( { format: this.calendarFormat } );

            AnyTime.picker( "beginDate", { format: this.calendarFormat, firstDOW: 1,
                labelTitle: '<spring:message code="label.titlecalendar"/> :' ,
                labelYear:  '<spring:message code="label.yearcalendar"/> :' ,
                labelMonth:  '<spring:message code="label.monthcalendar"/> :',
                labelDayOfMonth: '<spring:message code="label.daycalendar"/> :',

                methodToCall: jQuery.proxy( this.onClickBeginDate, this )
            } );

            $( "#beginDate" ).val( formatDate( removeDaysToDate( new Date(), 1 ), "%Y-%m-%d" ) );
            this.beginDate = this.calendarConverter.parse( $( "#beginDate" ).val() ).getTime();
        },

        // REQUESTS ********************************************************
        requestQuickLooksBySelectValues: function()
        {
            $.ajax( {
//                url: "project?methodName=getQuicklookByValues&satellite=" + this.selectSatellites.getValue() + "&projection=" + this.selectProjections.getValue() + "&species=" + this.selectSpecies.getValue() + "&level=" + this.selectLevel.getValue() + "&date=" + this.beginDate,
                url: "project?methodName=getQuicklookByValues&satellite=" + this.selectSatellites.getValue() + "&projection=" + this.selectProjections.getValue() + "&species=" + this.selectSpecies.getValue() + "&date=" + this.beginDate,
                success:jQuery.proxy( this.handleQuickLooksBySelectValues, this ),
                error: jQuery.proxy( this.showErrors, this )
            } );
        },


        // HANDLES ********************************************************
        handleQuickLooksBySelectValues: function( result )
        {

            var plotNameA = jQuery.parseJSON( result ).plotNameResultA;
            var plotNameB = jQuery.parseJSON( result ).plotNameResultB;
            var plotNameC = jQuery.parseJSON( result ).plotNameResultC;
            var plotNameD = jQuery.parseJSON( result ).plotNameResultD;
            var repDate =  jQuery.parseJSON( result ).plotRepResult;


            if( plotNameA && plotNameB )
            {
                this.containerResultA.html( "<center>MetOp-A</center><img src='resources/imgiasiA/" + repDate + "/" + plotNameA + "' width='430px' height='350px' onerror='javascript:displayNoImage()'><img src='resources/imgiasiA/" + repDate + "/"  + plotNameC + "' width='430px' height='350px'>" );
                this.containerResultB.html( "<center>MetOp-B</center><img src='resources/imgiasiB/" + repDate + "/" + plotNameB + "' width='430px' height='350px' onerror='javascript:displayNoImageB()'><img src='resources/imgiasiB/" + repDate + "/" + plotNameD + "' width='430px' height='350px'>" );
            }
            else
            {
                if( plotNameA )
                    this.containerResultA.html( "<center>MetOp-A</center><img src='resources/imgiasiA/" + repDate + "/" + plotNameA + "' width='430px' height='350px' onerror='javascript:displayNoImage()'><img src='resources/imgiasiA/" + repDate + "/" + plotNameC + "' width='430px' height='350px'>" );

                if( plotNameB )
                    this.containerResultA.html( "<center>MetOp-B</center><img src='resources/imgiasiB/" + repDate + "/" + plotNameB + "' width='430px' height='350px' onerror='javascript:displayNoImage()'><img src='resources/imgiasiB/" + repDate + "/" + plotNameD + "' width='430px' height='350px'>" );

            }

        },


        // EVENTS ********************************************************
        onClickBeginDate: function()
        {
            this.beginDate = this.calendarConverter.parse( $( "#beginDate" ).val() ).getTime();
            this.getQuicklook();
        },



        // OTHERS ********************************************************
        showErrors: function( result )
        {
            this.containerErrors.show();
            this.containerErrors.html( result );
        },

        getQuicklook: function()
        {
            this.containerResultA.empty();
            this.containerResultB.empty();
            this.requestQuickLooksBySelectValues();
        }


    } );

    function displayNoImage()
    {
        $( "#containerResultA" ).html( '<spring:message code="label.error"/>' );
    }
    function displayNoImageB()
    {
        $( "#containerResultB" ).html( '<spring:message code="label.error"/>' );
    }
</script>