ApacheCMDA-Frontend/app/views/climate/correlationMap.scala.html - incubator-retired-cmda - Git at Google

 @(parameters: metadata.CorrelationMap)

 @import helper._

 <link rel="stylesheet"
 	href='@routes.Assets.at("stylesheets/livefitler.css")'>

 @scripts = {
 	<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
 	<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
 	<script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
 	<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js'></script>
 	<script type="text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script>
 	<script type="text/javascript" src='@routes.Assets.at("javascripts/xmisc.js")'></script>
 	<script type="text/javascript" src='@routes.Assets.at("html/js2/dataList2.js")'></script>
 	<script type="text/javascript" src='@routes.Assets.at("html/js2/varList.js")'></script>
 	<script type="text/javascript" src='@routes.Assets.at("html/js2/common.js")'></script>

 	<script type="text/javascript">

 	var Response = null;
     var variable1 = "";
     var variable2 = "";


     // called on load or reload
     window.onload = function() {

     	put_data(1);
     	changeDataSource1();
         put_data(2);
         changeDataSource2();
         put_var(1);
         changeVariableName1();
         put_var(2);
         changeVariableName2();


         enable_download_button();


         $('#t0').val($('#startYearMonth').text());
         $('#t1').val($('#endYearMonth').text());

         if($('#pressureLevel1').text() == "-9999"){
         	disable_pres1(1);
         }else{
         	$('#pres1').val($('#pressureLevel1').text());
         }

         if($('#pressureLevel2').text() == "-9999"){
         	disable_pres1(2);
         }else{
         	$('#pres2').val($('#pressureLevel2').text());
         }

         $('#lat0').val($('#startLat').text());
         $('#lat1').val($('#endLat').text());

         $('#lon0').val($('#startLon').text());
         $('#lon1').val($('#endLon').text());

         $('#laggedTime').html($('#executionLaggedTime').text());

         $('#purpose').html($('#executionPurpose').text());
         $('#data_url').html($('#dataURL').text());
         $('#Response').html($('#serviceResponseText').text());

     }

  // disable pressure level box for 2D var
     function disable_pres1(ID)
     {
       var x;
       x=document.getElementById("pres"+ID);
       x.value = "N/A";
       x.disabled=true;
     }

     // enable pressure level box for 3D var
     function enable_pres1(ID)
     {
       var x;
       x=document.getElementById("pres"+ID);
       x.value = "500";
       x.disabled=false;
     }

     function changeDataSource1() {
     	var dataSource = $('#dataSource1').text();

 	    var x = document.getElementById("data1");

 	    if(dataSource == "gfdl_esm2g" ){
      		x.options[0].selected=true;
      	}
      	else if(dataSource == "giss_e2-h" ){
      		x.options[1].selected=true;
      	}
      	else if(dataSource == "giss_e2-r" ){
      		x.options[2].selected=true;
      	}
      	else if(dataSource == "ncar_cam5" ){
      		x.options[3].selected=true;
      	}
      	else if(dataSource == "ncc_noresm" ){
      		x.options[4].selected=true;
      	}
      	else if(dataSource == "ukmo_hadgem2-es" ){
      		x.options[5].selected=true;
      	}
      	else if(dataSource == "cccma_canam4" ){
      		x.options[6].selected=true;
      	}
      	else if(dataSource == "csiro_mk3.6" ){
      		x.options[7].selected=true;
      	}
      	else if(dataSource == "gfdl_cm3" ){
      		x.options[8].selected=true;
      	}
      	else if(dataSource == "ipsl_cm5a-lr" ){
      		x.options[9].selected=true;
      	}
      	else if(dataSource == "miroc_miroc5" ){
      		x.options[10].selected=true;
      	}
      	else if(dataSource == "ukmo_hadgem2-a" ){
      		x.options[11].selected=true;
      	}
      	else if(dataSource == "nasa_grace" ){
      		x.options[12].selected=true;
      	}
      	else if(dataSource == "nasa_modis" ){
      		x.options[13].selected=true;
      	}
      	else if(dataSource == "nasa_amsre" ){
      		x.options[14].selected=true;
      	}
      	else if(dataSource == "nasa_trmm" ){
      		x.options[15].selected=true;
      	}
      	else if(dataSource == "nasa_gpcp" ){
      		x.options[16].selected=true;
      	}
      	else if(dataSource == "nasa_quikscat" ){
      		x.options[17].selected=true;
      	}
      	else if(dataSource == "nasa_aviso" ){
      		x.options[18].selected=true;
      	}
      	else if(dataSource == "noaa_nodc" ){
      		x.options[19].selected=true;
      	}
      	else if(dataSource == "nasa_ceres" ){
      		x.options[20].selected=true;
      	}
      	else if(dataSource == "nasa_airs" ){
      		x.options[21].selected=true;
      	}
      	else if(dataSource == "nasa_mls" ){
      		x.options[22].selected=true;
      	}
      	else if(dataSource == "nasa_argo" ){
      		x.options[23].selected=true;
      	}
      	else if(dataSource == "ecmwf_interim" ){
      		x.options[24].selected=true;
      	}
     }

     function changeDataSource2() {
     	var dataSource = $('#dataSource2').text();
 	    //dataSource = "NASA_QuikSCAT";
 	    var x = document.getElementById("data2");
 	    if(dataSource == "gfdl_esm2g" ){
      		x.options[0].selected=true;
      	}
      	else if(dataSource == "giss_e2-h" ){
      		x.options[1].selected=true;
      	}
      	else if(dataSource == "giss_e2-r" ){
      		x.options[2].selected=true;
      	}
      	else if(dataSource == "ncar_cam5" ){
      		x.options[3].selected=true;
      	}
      	else if(dataSource == "ncc_noresm" ){
      		x.options[4].selected=true;
      	}
      	else if(dataSource == "ukmo_hadgem2-es" ){
      		x.options[5].selected=true;
      	}
      	else if(dataSource == "cccma_canam4" ){
      		x.options[6].selected=true;
      	}
      	else if(dataSource == "csiro_mk3.6" ){
      		x.options[7].selected=true;
      	}
      	else if(dataSource == "gfdl_cm3" ){
      		x.options[8].selected=true;
      	}
      	else if(dataSource == "ipsl_cm5a-lr" ){
      		x.options[9].selected=true;
      	}
      	else if(dataSource == "miroc_miroc5" ){
      		x.options[10].selected=true;
      	}
      	else if(dataSource == "ukmo_hadgem2-a" ){
      		x.options[11].selected=true;
      	}
      	else if(dataSource == "nasa_grace" ){ //////////////////////////////////
      		x.options[12].selected=true;
      	}
      	else if(dataSource == "nasa_modis" ){
      		x.options[13].selected=true;
      	}
      	else if(dataSource == "nasa_amsre" ){
      		x.options[14].selected=true;
      	}
      	else if(dataSource == "nasa_trmm" ){
      		x.options[15].selected=true;
      	}
      	else if(dataSource == "nasa_gpcp" ){
      		x.options[16].selected=true;
      	}
      	else if(dataSource == "nasa_quikscat" ){
      		x.options[17].selected=true;
      	}
      	else if(dataSource == "nasa_aviso" ){
      		x.options[18].selected=true;
      	}
      	else if(dataSource == "noaa_nodc" ){
      		x.options[19].selected=true;
      	}
      	else if(dataSource == "nasa_ceres" ){
      		x.options[20].selected=true;
      	}
      	else if(dataSource == "nasa_airs" ){
      		x.options[21].selected=true;
      	}
      	else if(dataSource == "nasa_mls" ){
      		x.options[22].selected=true;
      	}
      	else if(dataSource == "nasa_argo" ){
      		x.options[23].selected=true;
      	}
      	else if(dataSource == "ecmwf_interim" ){
      		x.options[24].selected=true;
      	}
     }


     function changeVariableName1(){
         var var_string = $('#variableName1').text();
         var data_string = $('#dataSource1').text();
         data_string = data_string.replace("_", "/").toUpperCase();


         var varList2 = dataList[data_string][1];
         var x = document.getElementById("var1");

         for (var i=0; i<varList2.length; i++) {
       	  var k = varList2[i];

             if (k == var_string) {
             	x.options[i].selected=true;
             	break;
             }
         }
     }

     function changeVariableName2(){
         var var_string = $('#variableName2').text();
         var data_string = $('#dataSource2').text();
         data_string = data_string.replace("_", "/").toUpperCase();


         var varList2 = dataList[data_string][1];
         var x = document.getElementById("var2");

         for (var i=0; i<varList2.length; i++) {
       	  var k = varList2[i];

             if (k == var_string) {
             	x.options[i].selected=true;
             	break;
             }
         }
     }

     function disable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=true;
     }

     // enable download data button
     function enable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=false;
     }

     // disable pressure level box for 2D var
     function disable_pres1(ID)
     {
       var x;
       x=document.getElementById("pres"+ID);
       x.value = "N/A";
       x.disabled=true;
     }

     // enable pressure level box for 3D var
     function enable_pres1(ID)
     {
       var x;
       x=document.getElementById("pres"+ID);
       x.value = "500";
       x.disabled=false;
     }

     function put_data(ID){
       var list1=document.getElementById("data"+ID);

       for(var key in dataList) {
         if (key.slice(0,5)==="group") {
           var og = document.createElement("OPTGROUP");
           og.setAttribute('label', dataList[key][0]);
           list1.add(og);
         } else {
           og.appendChild(new Option(key,key));
         }
       }
     }

     function put_var(ID) {
       var list1=document.getElementById("var"+ID);
       for (var i=list1.length-1; i>=0; i--) {
       list1.remove(i);
       }

       data_string =  document.getElementById("data"+ID).value;
       var varList2 = dataList[data_string][1];
       for (var i=0; i<varList2.length; i++) {
         var k = varList2[i];
         list1.add(new Option(varList[k][0],k));
       }

     }

     //
     function select_var1(ID)
     {
       var var_string = $("#var"+ID).val();

       // alert("var_string: " + var_string)

       if (varList[var_string][2]===3) {
         enable_pres1(ID);
       } else {
         disable_pres1(ID);
       }

       //alert("variable1: " + var_string);

       var var_string1 = $("#var"+1).val();
       var var_string2 = $("#var"+2).val();
       var data_string1 = $("#data"+1).val();
       var data_string2 = $("#data"+2).val();

       var sTime = Math.max( Number(dataList[data_string1][2][var_string1][0]),
                             Number(dataList[data_string2][2][var_string2][0]) );
       var eTime = Math.min( Number(dataList[data_string1][2][var_string1][1]),
                             Number(dataList[data_string2][2][var_string2][1]) );

       $("#startYear").html("start year-month: (earliest:" + sTime + ")");
       $("#endYear").html("end year-month: (latest:" + eTime + ")");
     }

     $(document).ready(function(){

       $("#download_data").click(function(event) {
         var durl = $("#data_url").val();
         // alert(durl);
         window.location.assign(durl);
       });


       $("#correlationMap").click(function(event) {
         // alert('****** inside correlationMap()!');
         Response = null;

         // no data to download yet
         disable_download_button();

         $("#Response").html("Calculating ...");
         $("#data_url").html("Calculating ...");
         $("#Image").html("");

         // sample url: http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?model1=ukmo_hadgem2-a&var1=ts&pres1=200&model2=ukmo_hadgem2-a&var2=clt&pres2=200&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29
         // form url string
         // var url = "http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?";
         var url = "http://" + window.location.hostname + ":9002/svc/correlationMap?";
         // alert("url: " + url);

         var d1 = $("#data1").val();
         var model1 = d1.replace("/", "_");
         model1 = model1.toLowerCase();

         var arglist = "";
         arglist = arglist.concat("model1=");
         arglist = arglist.concat(model1);

         // alert("arglist: " + arglist);

         var variable1 = $("#var1").val();
         arglist = arglist.concat("&var1=");
         arglist = arglist.concat(variable1);

         // alert("arglist: " + arglist);

         var pres1 = $("#pres1").val();
         if (isNaN(Number(pres1))) { pres1 = "-9999"; }
         arglist = arglist.concat("&pres1=");
         arglist = arglist.concat(pres1);

         var d2 = $("#data2").val();
         var model2 = d2.replace("/", "_");
         model2 = model2.toLowerCase();

         arglist = arglist.concat("&model2=");
         arglist = arglist.concat(model2);

         // alert("arglist: " + arglist);

         var variable2 = $("#var2").val();
         arglist = arglist.concat("&var2=");
         arglist = arglist.concat(variable2);

         // alert("arglist: " + arglist);

         var pres2 = $("#pres2").val();
         if (isNaN(Number(pres2))) { pres2 = "-9999"; }
         arglist = arglist.concat("&pres2=");
         arglist = arglist.concat(pres2);

         var laggedTime = $("#laggedTime").val();
         arglist = arglist.concat("&laggedTime=");
         arglist = arglist.concat(laggedTime);

         var t0 = $("#t0").val();
         var t1 = $("#t1").val();

         t0 = t0.replace("-", "");
         t1 = t1.replace("-", "");

         arglist = arglist.concat("&start_time=");
         arglist = arglist.concat(t0);

         arglist = arglist.concat("&end_time=");
         arglist = arglist.concat(t1);

         // alert("arglist: " + arglist);

         var lon0 = $("#lon0").val();
         var lon1 = $("#lon1").val();
         var lat0 = $("#lat0").val();
         var lat1 = $("#lat1").val();

         arglist = arglist.concat("&lon1=");
         arglist = arglist.concat(lon0);

         arglist = arglist.concat("&lon2=");
         arglist = arglist.concat(lon1);

         arglist = arglist.concat("&lat1=");
         arglist = arglist.concat(lat0);

         arglist = arglist.concat("&lat2=");
         arglist = arglist.concat(lat1);

         // alert("arglist: " + arglist);

         var purpose = $("#purpose").val();
         arglist = arglist.concat("&purpose=");
         arglist = arglist.concat(purpose);

         // url = url + encodeURIComponent(arglist);
         url = url + encodeURI(arglist);
         // url = url + arglist;
         // alert("url: " + url);

         var urlTimeBounds = "http://" + window.location.hostname + ":9002/svc/two_time_bounds?";
         var arglistTB = "";
         arglistTB = arglistTB.concat("serviceType=");
         arglistTB = arglistTB.concat("2");
         arglistTB = arglistTB.concat("&source1=");
         arglistTB = arglistTB.concat(d1);
         arglistTB = arglistTB.concat("&var1=");
         arglistTB = arglistTB.concat(variable1);
         arglistTB = arglistTB.concat("&source2=");
         arglistTB = arglistTB.concat(d2);
         arglistTB = arglistTB.concat("&var2=");
         arglistTB = arglistTB.concat(variable2);
         urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);

         $.ajax({
             type: "GET",
             url: urlTimeBounds,
             dataType: "json",
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
                 // alert("data: " + data);
                 if (data.success == false) {
                     // alert(data.error);
                     Response = null;
                     var text = JSON.stringify(data, null, 4);
                     text = "Error in backend: <br>" + text;
                     $("#Response").html(text);
                     $("#data_url").html(text);
                     return;
                 }
                 var text = JSON.stringify(data, null, 4);
                 // alert("text: " + text);
                 // $("#Response").html("<pre>"+text+"</pre>");
                 // $("#Response").html(text);

                 var tb1 = data.time_bounds1;
                 var bds1 = String(tb1).split(",");
                 // alert("tb1: " + tb1);
                 // alert("bds1: " + bds1);
                 var lowerT1 = parseInt(bds1[0]);
                 // alert("inside ajax, lowerT1: " + lowerT1);
                 var upperT1 = parseInt(bds1[1]);
                 // alert("upperT1: " + upperT1);

                 var tb2 = data.time_bounds2;
                 var bds2 = String(tb2).split(",");
                 // alert("tb2: " + tb2);
                 // alert("bds2: " + bds2);
                 var lowerT2 = parseInt(bds2[0]);
                 // alert("inside ajax, lowerT2: " + lowerT2);
                 var upperT2 = parseInt(bds2[1]);
                 // alert("upperT2: " + upperT2);

                 var t0I = parseInt(t0);
                 var t1I = parseInt(t1);
                 // alert("t0: " + t0I);
                 // alert("t1: " + t1I);

                 var lowerT, upperT;
                 // compute the intersection of the two data bounds
                 if (lowerT1 == 0  || upperT1 == 0){ // no data-1
                   alert("We do not have data for the data-1 source and variable configuration.");
                   alert(urlTimeBounds);
                   return;
                 }
                 else if (lowerT2 == 0  || upperT2 == 0){ // no data-2
                   alert("We do not have data for the data-2 source and variable configuration.");
                   return;
                 }
                 else if (lowerT2 > upperT1 || lowerT1 > upperT2) { // no intersection
                   alert("The two data sets/vars do not have a common time range.");
                   return;
                 }
                 else { // compute intersection
                   if (lowerT1 > lowerT2) { // pick bigger lower time bound
                     lowerT = lowerT1;
                   }
                   else {
                     lowerT = lowerT2;
                   }

                   if (upperT1 > upperT2) { // pick smaller upper time bound
                     upperT = upperT2;
                   }
                   else {
                     upperT = upperT1;
                   }
                 }
                 // alert("lowerT: " + lowerT);
                 // alert("upperT: " + upperT);

                 if (t0I < lowerT && t1I < lowerT ||
                     t0I > upperT && t1I > upperT) {
                   alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"].");
                   return;
                 }

                 if (t0I < lowerT && t1I <= upperT) {
                   alert("Your start year-month is out of bound. It has to be in or later than " + lowerT +
                         ". We will use the range ["+lowerT+", "+t1I+"] for you.");
                 }

                 if (t1I > upperT && t0I >= lowerT) {
                   alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT +
                         ". We will use the range ["+t0I+", "+upperT+"] for you.");
                 }

                 if (t0I < lowerT && t1I > upperT ) {
                   alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT +
                         ", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you.");
                 }
             },
             error: function(xhr, textStatus, errorThrown) {
 		$("#Response").html("error!");
 		$("#data_url").html("error!");
                 // alert("xhr.status: "+xhr.status);
                 // alert("error status: "+textStatus);
             },
             complete: function(xhr, textStatus) {
                 //alert("complete status: "+textStatus);
             }
         });


         $.ajax({
             type: "GET",
             url: url,
             dataType: "json",
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
                 // alert("data: " + data);
                 // alert(url);
                 if (data.success == false) {
                     // alert(data.error);
                     Response = null;
                     var text = JSON.stringify(data, null, 4);

                     if (text.indexOf("No Data") != -1) {
                       $("#Image").html("No Data");
                       $("#Response").html("No Data");
                       $("#data_url").html("No Data");
                       return;
                     }

                     text = "Error in backend: <br>" + text;
                     // $("#Response").html("<span style='color:red'>" + text + "</span>");
                     $("#Response").html(text);
                     $("#data_url").html(text);

                     return;
                 }
                 var text = JSON.stringify(data, null, 4);
                 // alert(text);
                 // $("#Response").html("<pre>"+text+"</pre>");
                 $("#Response").html(text);

                 var html = "<img src='" + data.url + "?" + new Date().getTime() + "' width='820'/>";
                 // alert(html);
                 $("#Image").html(html);

                 // post dataUrl to textarea and enable download button
                 $("#data_url").html(data.dataUrl);
                 enable_download_button();
             },
             error: function(xhr, textStatus, errorThrown) {
                 $("#Response").html("error!");
                 $("#data_url").html("error!");
                 // alert("xhr.status: "+xhr.status);
                 // alert("error status: "+textStatus);
             },
             complete: function(xhr, textStatus) {
                 //alert("complete status: "+textStatus);
             }
         });

       });
     });
   </script>
 } @main("Parameters of ConfId", scripts){ @flash_message()
 <p>
 <div id="dataSource1" style="display: none;">@parameters.getSource1()</div>
 <div id="dataSource2" style="display: none;">@parameters.getSource2()</div>
 <div id="variableName1" style="display: none;">@parameters.getVariableName1()</div>
 <div id="variableName2" style="display: none;">@parameters.getVariableName2()</div>
 <div id="startYearMonth" style="display: none;">@parameters.getStartYear()</div>
 <div id="endYearMonth" style="display: none;">@parameters.getEndYear()</div>
 <div id="pressureLevel1" style="display: none;">@parameters.getPressureLevel1()</div>
 <div id="pressureLevel2" style="display: none;">@parameters.getPressureLevel2()</div>
 <div id="startLat" style="display: none;">@parameters.getStartLat()</div>
 <div id="endLat" style="display: none;">@parameters.getEndLat()</div>
 <div id="startLon" style="display: none;">@parameters.getStartLon()</div>
 <div id="endLon" style="display: none;">@parameters.getEndLon()</div>
 <div id="laggedT" style="display: none;">@parameters.getLaggedTime()</div>
 <div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div>
 <div id="dataURL" style="display: none;">@parameters.getDataURL()</div>
 <div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div>


 <table border="1">

 <tr>
 <td colspan="4">
 <center>
 <b>Service: Time-Lagged Correlation Map of Two Variables</b><br><br>
 This service generates a time-lagged correlation map between two specified variables.
 <br>The two variables can be either a two-dimensional variable or a slice of a three-dimensional variable at a specific pressure level. <br><br>
 </center>
 </td>
 </tr>

 <tr>
 <td colspan="2">
 <center>
 data1[t-lag]
 </center>
 </td>

 <td colspan="2">
 <center>
 data2[t]
 </center>
 </td>
 </tr>

 <tr>
 <td>source:</td>
 <td><select name="data1", id="data1" onchange="put_var(1); select_var1(1)">
 </select></td>

 <td>source:</td>
 <td><select name="data2", id="data2" onchange="put_var(2); select_var1(2)">
 </select></td>

 </tr>

 <tr>

 <td>variable name:</td><td><select name="var1", id="var1" onchange="select_var1(1)">
 </select>
 </td>

 <td>variable name:</td><td><select name="var2", id="var2" onchange="select_var1(2)">
 </select>

 </td>

 </tr>

 <tr>

 <td>
 atmosphere pressure level (hPa) <br> or ocean pressure level (dbar)
 </td>
 <td>
 <input id="pres1" value="@parameters.getPressureLevel1()" alt="pressure"/>
 </td>

 <td>
 atmosphere pressure level (hPa) <br> or ocean pressure level (dbar)
 </td>
 <td>
 <input id="pres2" value="@parameters.getPressureLevel2()" alt="pressure"/>
 </td>

 </tr>

 <tr>
 </tr>

 <tr>
 <td id=startYear>start year-month:</td><td><input id="t0" value="@parameters.getStartYear()" alt="start"/></td>
 <td id=endYear>end year-month:</td><td><input id="t1" value="@parameters.getEndYear()" alt="end"/></td>
 </tr>


 <tr>
 <td>start lat (deg):</td><td><input id="lat0" value="@parameters.getStartLat()"/></td>
 <td>end lat (deg):</td><td><input id="lat1" value="@parameters.getEndLat()"/></td>
 </tr>

 <tr>
 <td>start lon (deg):</td><td><input id="lon0" value="@parameters.getStartLon()"/></td>
 <td>end lon (deg):</td><td><input id="lon1" value="@parameters.getEndLon()"/></td>
 </tr>

 <tr>
 <td></td>
 <td colspan="2"><center>lag (month):<input id="laggedTime" value="@parameters.getLaggedTime()"/></center></td><td></td></tr>
 </tr>

 <tr>
 <td colspan="1">
 Execution purpose
 </td>
 <td colspan="3">
 <form>
 <textarea name="purpose" id="purpose" rows="4" cols="50">@parameters.getExecutionPurpose()</textarea>
 </form>
 </td>
 </tr>
 <tr>

 <tr>
 <td colspan="2" align="center"><input id="correlationMap" type="submit" value="            Run Again            " style="height:28px"/></td>
 <form>
 <td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/>
 </td>
 </form>

 </tr>

 <tr>
 <td colspan="4">
 <div id="Image"><img src="@parameters.getImage()" width=680 /></div>
 </td>
 </tr>

 <tr>
 <td colspan="4" align="center">
 <textarea readonly id="data_url" cols="130" rows="2">@parameters.getDataURL()</textarea>
 </td>
 </tr>

 <tr>
 <td colspan="4" align="center">
 <textarea id="Response" cols="130" rows="6">@parameters.getServiceResponseText()</textarea>
 </td>
 </tr>

 </table>
 }
	@(parameters: metadata.CorrelationMap)

	@import helper._

	<link rel="stylesheet"
	href='@routes.Assets.at("stylesheets/livefitler.css")'>

	@scripts = {
	<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
	<script src='@routes.Assets.at("javascripts/livefilter.js")'></script>
	<script type="text/javascript" src='@routes.Assets.at("javascripts/jquery-1.9.0.min.js")'></script>
	<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js'></script>
	<script type="text/javascript" src='@routes.Assets.at("javascripts/json2.js")'></script>
	<script type="text/javascript" src='@routes.Assets.at("javascripts/xmisc.js")'></script>
	<script type="text/javascript" src='@routes.Assets.at("html/js2/dataList2.js")'></script>
	<script type="text/javascript" src='@routes.Assets.at("html/js2/varList.js")'></script>
	<script type="text/javascript" src='@routes.Assets.at("html/js2/common.js")'></script>

	<script type="text/javascript">

	var Response = null;
	var variable1 = "";
	var variable2 = "";


	// called on load or reload
	window.onload = function() {

	put_data(1);
	changeDataSource1();
	put_data(2);
	changeDataSource2();
	put_var(1);
	changeVariableName1();
	put_var(2);
	changeVariableName2();


	enable_download_button();


	$('#t0').val($('#startYearMonth').text());
	$('#t1').val($('#endYearMonth').text());

	if($('#pressureLevel1').text() == "-9999"){
	disable_pres1(1);
	}else{
	$('#pres1').val($('#pressureLevel1').text());
	}

	if($('#pressureLevel2').text() == "-9999"){
	disable_pres1(2);
	}else{
	$('#pres2').val($('#pressureLevel2').text());
	}

	$('#lat0').val($('#startLat').text());
	$('#lat1').val($('#endLat').text());

	$('#lon0').val($('#startLon').text());
	$('#lon1').val($('#endLon').text());

	$('#laggedTime').html($('#executionLaggedTime').text());

	$('#purpose').html($('#executionPurpose').text());
	$('#data_url').html($('#dataURL').text());
	$('#Response').html($('#serviceResponseText').text());

	}

	// disable pressure level box for 2D var
	function disable_pres1(ID)
	{
	var x;
	x=document.getElementById("pres"+ID);
	x.value = "N/A";
	x.disabled=true;
	}

	// enable pressure level box for 3D var
	function enable_pres1(ID)
	{
	var x;
	x=document.getElementById("pres"+ID);
	x.value = "500";
	x.disabled=false;
	}

	function changeDataSource1() {
	var dataSource = $('#dataSource1').text();

	var x = document.getElementById("data1");

	if(dataSource == "gfdl_esm2g" ){
	x.options[0].selected=true;
	}
	else if(dataSource == "giss_e2-h" ){
	x.options[1].selected=true;
	}
	else if(dataSource == "giss_e2-r" ){
	x.options[2].selected=true;
	}
	else if(dataSource == "ncar_cam5" ){
	x.options[3].selected=true;
	}
	else if(dataSource == "ncc_noresm" ){
	x.options[4].selected=true;
	}
	else if(dataSource == "ukmo_hadgem2-es" ){
	x.options[5].selected=true;
	}
	else if(dataSource == "cccma_canam4" ){
	x.options[6].selected=true;
	}
	else if(dataSource == "csiro_mk3.6" ){
	x.options[7].selected=true;
	}
	else if(dataSource == "gfdl_cm3" ){
	x.options[8].selected=true;
	}
	else if(dataSource == "ipsl_cm5a-lr" ){
	x.options[9].selected=true;
	}
	else if(dataSource == "miroc_miroc5" ){
	x.options[10].selected=true;
	}
	else if(dataSource == "ukmo_hadgem2-a" ){
	x.options[11].selected=true;
	}
	else if(dataSource == "nasa_grace" ){
	x.options[12].selected=true;
	}
	else if(dataSource == "nasa_modis" ){
	x.options[13].selected=true;
	}
	else if(dataSource == "nasa_amsre" ){
	x.options[14].selected=true;
	}
	else if(dataSource == "nasa_trmm" ){
	x.options[15].selected=true;
	}
	else if(dataSource == "nasa_gpcp" ){
	x.options[16].selected=true;
	}
	else if(dataSource == "nasa_quikscat" ){
	x.options[17].selected=true;
	}
	else if(dataSource == "nasa_aviso" ){
	x.options[18].selected=true;
	}
	else if(dataSource == "noaa_nodc" ){
	x.options[19].selected=true;
	}
	else if(dataSource == "nasa_ceres" ){
	x.options[20].selected=true;
	}
	else if(dataSource == "nasa_airs" ){
	x.options[21].selected=true;
	}
	else if(dataSource == "nasa_mls" ){
	x.options[22].selected=true;
	}
	else if(dataSource == "nasa_argo" ){
	x.options[23].selected=true;
	}
	else if(dataSource == "ecmwf_interim" ){
	x.options[24].selected=true;
	}
	}

	function changeDataSource2() {
	var dataSource = $('#dataSource2').text();
	//dataSource = "NASA_QuikSCAT";
	var x = document.getElementById("data2");
	if(dataSource == "gfdl_esm2g" ){
	x.options[0].selected=true;
	}
	else if(dataSource == "giss_e2-h" ){
	x.options[1].selected=true;
	}
	else if(dataSource == "giss_e2-r" ){
	x.options[2].selected=true;
	}
	else if(dataSource == "ncar_cam5" ){
	x.options[3].selected=true;
	}
	else if(dataSource == "ncc_noresm" ){
	x.options[4].selected=true;
	}
	else if(dataSource == "ukmo_hadgem2-es" ){
	x.options[5].selected=true;
	}
	else if(dataSource == "cccma_canam4" ){
	x.options[6].selected=true;
	}
	else if(dataSource == "csiro_mk3.6" ){
	x.options[7].selected=true;
	}
	else if(dataSource == "gfdl_cm3" ){
	x.options[8].selected=true;
	}
	else if(dataSource == "ipsl_cm5a-lr" ){
	x.options[9].selected=true;
	}
	else if(dataSource == "miroc_miroc5" ){
	x.options[10].selected=true;
	}
	else if(dataSource == "ukmo_hadgem2-a" ){
	x.options[11].selected=true;
	}
	else if(dataSource == "nasa_grace" ){ //////////////////////////////////
	x.options[12].selected=true;
	}
	else if(dataSource == "nasa_modis" ){
	x.options[13].selected=true;
	}
	else if(dataSource == "nasa_amsre" ){
	x.options[14].selected=true;
	}
	else if(dataSource == "nasa_trmm" ){
	x.options[15].selected=true;
	}
	else if(dataSource == "nasa_gpcp" ){
	x.options[16].selected=true;
	}
	else if(dataSource == "nasa_quikscat" ){
	x.options[17].selected=true;
	}
	else if(dataSource == "nasa_aviso" ){
	x.options[18].selected=true;
	}
	else if(dataSource == "noaa_nodc" ){
	x.options[19].selected=true;
	}
	else if(dataSource == "nasa_ceres" ){
	x.options[20].selected=true;
	}
	else if(dataSource == "nasa_airs" ){
	x.options[21].selected=true;
	}
	else if(dataSource == "nasa_mls" ){
	x.options[22].selected=true;
	}
	else if(dataSource == "nasa_argo" ){
	x.options[23].selected=true;
	}
	else if(dataSource == "ecmwf_interim" ){
	x.options[24].selected=true;
	}
	}



	function changeVariableName1(){
	var var_string = $('#variableName1').text();
	var data_string = $('#dataSource1').text();
	data_string = data_string.replace("_", "/").toUpperCase();


	var varList2 = dataList[data_string][1];
	var x = document.getElementById("var1");

	for (var i=0; i<varList2.length; i++) {
	var k = varList2[i];

	if (k == var_string) {
	x.options[i].selected=true;
	break;
	}
	}
	}

	function changeVariableName2(){
	var var_string = $('#variableName2').text();
	var data_string = $('#dataSource2').text();
	data_string = data_string.replace("_", "/").toUpperCase();


	var varList2 = dataList[data_string][1];
	var x = document.getElementById("var2");

	for (var i=0; i<varList2.length; i++) {
	var k = varList2[i];

	if (k == var_string) {
	x.options[i].selected=true;
	break;
	}
	}
	}

	function disable_download_button()
	{
	var x=document.getElementById("download_data");
	x.disabled=true;
	}

	// enable download data button
	function enable_download_button()
	{
	var x=document.getElementById("download_data");
	x.disabled=false;
	}

	// disable pressure level box for 2D var
	function disable_pres1(ID)
	{
	var x;
	x=document.getElementById("pres"+ID);
	x.value = "N/A";
	x.disabled=true;
	}

	// enable pressure level box for 3D var
	function enable_pres1(ID)
	{
	var x;
	x=document.getElementById("pres"+ID);
	x.value = "500";
	x.disabled=false;
	}

	function put_data(ID){
	var list1=document.getElementById("data"+ID);

	for(var key in dataList) {
	if (key.slice(0,5)==="group") {
	var og = document.createElement("OPTGROUP");
	og.setAttribute('label', dataList[key][0]);
	list1.add(og);
	} else {
	og.appendChild(new Option(key,key));
	}
	}
	}

	function put_var(ID) {
	var list1=document.getElementById("var"+ID);
	for (var i=list1.length-1; i>=0; i--) {
	list1.remove(i);
	}

	data_string = document.getElementById("data"+ID).value;
	var varList2 = dataList[data_string][1];
	for (var i=0; i<varList2.length; i++) {
	var k = varList2[i];
	list1.add(new Option(varList[k][0],k));
	}

	}

	//
	function select_var1(ID)
	{
	var var_string = $("#var"+ID).val();

	// alert("var_string: " + var_string)

	if (varList[var_string][2]===3) {
	enable_pres1(ID);
	} else {
	disable_pres1(ID);
	}

	//alert("variable1: " + var_string);

	var var_string1 = $("#var"+1).val();
	var var_string2 = $("#var"+2).val();
	var data_string1 = $("#data"+1).val();
	var data_string2 = $("#data"+2).val();

	var sTime = Math.max( Number(dataList[data_string1][2][var_string1][0]),
	Number(dataList[data_string2][2][var_string2][0]) );
	var eTime = Math.min( Number(dataList[data_string1][2][var_string1][1]),
	Number(dataList[data_string2][2][var_string2][1]) );

	$("#startYear").html("start year-month: (earliest:" + sTime + ")");
	$("#endYear").html("end year-month: (latest:" + eTime + ")");
	}

	$(document).ready(function(){

	$("#download_data").click(function(event) {
	var durl = $("#data_url").val();
	// alert(durl);
	window.location.assign(durl);
	});


	$("#correlationMap").click(function(event) {
	// alert('****** inside correlationMap()!');
	Response = null;

	// no data to download yet
	disable_download_button();

	$("#Response").html("Calculating ...");
	$("#data_url").html("Calculating ...");
	$("#Image").html("");

	// sample url: http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?model1=ukmo_hadgem2-a&var1=ts&pres1=200&model2=ukmo_hadgem2-a&var2=clt&pres2=200&start_time=199001&end_time=199512&lon1=0&lon2=100&lat1=-29&lat2=29
	// form url string
	// var url = "http://cmacws.jpl.nasa.gov:8090/svc/scatterPlot2V?";
	var url = "http://" + window.location.hostname + ":9002/svc/correlationMap?";
	// alert("url: " + url);

	var d1 = $("#data1").val();
	var model1 = d1.replace("/", "_");
	model1 = model1.toLowerCase();

	var arglist = "";
	arglist = arglist.concat("model1=");
	arglist = arglist.concat(model1);

	// alert("arglist: " + arglist);

	var variable1 = $("#var1").val();
	arglist = arglist.concat("&var1=");
	arglist = arglist.concat(variable1);

	// alert("arglist: " + arglist);

	var pres1 = $("#pres1").val();
	if (isNaN(Number(pres1))) { pres1 = "-9999"; }
	arglist = arglist.concat("&pres1=");
	arglist = arglist.concat(pres1);

	var d2 = $("#data2").val();
	var model2 = d2.replace("/", "_");
	model2 = model2.toLowerCase();

	arglist = arglist.concat("&model2=");
	arglist = arglist.concat(model2);

	// alert("arglist: " + arglist);

	var variable2 = $("#var2").val();
	arglist = arglist.concat("&var2=");
	arglist = arglist.concat(variable2);

	// alert("arglist: " + arglist);

	var pres2 = $("#pres2").val();
	if (isNaN(Number(pres2))) { pres2 = "-9999"; }
	arglist = arglist.concat("&pres2=");
	arglist = arglist.concat(pres2);

	var laggedTime = $("#laggedTime").val();
	arglist = arglist.concat("&laggedTime=");
	arglist = arglist.concat(laggedTime);

	var t0 = $("#t0").val();
	var t1 = $("#t1").val();

	t0 = t0.replace("-", "");
	t1 = t1.replace("-", "");

	arglist = arglist.concat("&start_time=");
	arglist = arglist.concat(t0);

	arglist = arglist.concat("&end_time=");
	arglist = arglist.concat(t1);

	// alert("arglist: " + arglist);

	var lon0 = $("#lon0").val();
	var lon1 = $("#lon1").val();
	var lat0 = $("#lat0").val();
	var lat1 = $("#lat1").val();

	arglist = arglist.concat("&lon1=");
	arglist = arglist.concat(lon0);

	arglist = arglist.concat("&lon2=");
	arglist = arglist.concat(lon1);

	arglist = arglist.concat("&lat1=");
	arglist = arglist.concat(lat0);

	arglist = arglist.concat("&lat2=");
	arglist = arglist.concat(lat1);

	// alert("arglist: " + arglist);

	var purpose = $("#purpose").val();
	arglist = arglist.concat("&purpose=");
	arglist = arglist.concat(purpose);

	// url = url + encodeURIComponent(arglist);
	url = url + encodeURI(arglist);
	// url = url + arglist;
	// alert("url: " + url);

	var urlTimeBounds = "http://" + window.location.hostname + ":9002/svc/two_time_bounds?";
	var arglistTB = "";
	arglistTB = arglistTB.concat("serviceType=");
	arglistTB = arglistTB.concat("2");
	arglistTB = arglistTB.concat("&source1=");
	arglistTB = arglistTB.concat(d1);
	arglistTB = arglistTB.concat("&var1=");
	arglistTB = arglistTB.concat(variable1);
	arglistTB = arglistTB.concat("&source2=");
	arglistTB = arglistTB.concat(d2);
	arglistTB = arglistTB.concat("&var2=");
	arglistTB = arglistTB.concat(variable2);
	urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);

	$.ajax({
	type: "GET",
	url: urlTimeBounds,
	dataType: "json",
	data: null,
	success: function(data, textStatus, xhr) {
	Response = data;
	// alert("data: " + data);
	if (data.success == false) {
	// alert(data.error);
	Response = null;
	var text = JSON.stringify(data, null, 4);
	text = "Error in backend: <br>" + text;
	$("#Response").html(text);
	$("#data_url").html(text);
	return;
	}
	var text = JSON.stringify(data, null, 4);
	// alert("text: " + text);
	// $("#Response").html("<pre>"+text+"</pre>");
	// $("#Response").html(text);

	var tb1 = data.time_bounds1;
	var bds1 = String(tb1).split(",");
	// alert("tb1: " + tb1);
	// alert("bds1: " + bds1);
	var lowerT1 = parseInt(bds1[0]);
	// alert("inside ajax, lowerT1: " + lowerT1);
	var upperT1 = parseInt(bds1[1]);
	// alert("upperT1: " + upperT1);

	var tb2 = data.time_bounds2;
	var bds2 = String(tb2).split(",");
	// alert("tb2: " + tb2);
	// alert("bds2: " + bds2);
	var lowerT2 = parseInt(bds2[0]);
	// alert("inside ajax, lowerT2: " + lowerT2);
	var upperT2 = parseInt(bds2[1]);
	// alert("upperT2: " + upperT2);

	var t0I = parseInt(t0);
	var t1I = parseInt(t1);
	// alert("t0: " + t0I);
	// alert("t1: " + t1I);

	var lowerT, upperT;
	// compute the intersection of the two data bounds
	if (lowerT1 == 0 \|\| upperT1 == 0){ // no data-1
	alert("We do not have data for the data-1 source and variable configuration.");
	alert(urlTimeBounds);
	return;
	}
	else if (lowerT2 == 0 \|\| upperT2 == 0){ // no data-2
	alert("We do not have data for the data-2 source and variable configuration.");
	return;
	}
	else if (lowerT2 > upperT1 \|\| lowerT1 > upperT2) { // no intersection
	alert("The two data sets/vars do not have a common time range.");
	return;
	}
	else { // compute intersection
	if (lowerT1 > lowerT2) { // pick bigger lower time bound
	lowerT = lowerT1;
	}
	else {
	lowerT = lowerT2;
	}

	if (upperT1 > upperT2) { // pick smaller upper time bound
	upperT = upperT2;
	}
	else {
	upperT = upperT1;
	}
	}
	// alert("lowerT: " + lowerT);
	// alert("upperT: " + upperT);

	if (t0I < lowerT && t1I < lowerT \|\|
	t0I > upperT && t1I > upperT) {
	alert("We do not have data that span your time range. Try the range inside ["+lowerT+", "+upperT+"].");
	return;
	}

	if (t0I < lowerT && t1I <= upperT) {
	alert("Your start year-month is out of bound. It has to be in or later than " + lowerT +
	". We will use the range ["+lowerT+", "+t1I+"] for you.");
	}

	if (t1I > upperT && t0I >= lowerT) {
	alert("Your end year-month is out of bound. It has to be in or earlier than " + upperT +
	". We will use the range ["+t0I+", "+upperT+"] for you.");
	}

	if (t0I < lowerT && t1I > upperT ) {
	alert("Both of your start and end year-months are out of bounds. They have to be in or earlier than " + upperT +
	", and in or later than " + lowerT + ". We will use the range ["+lowerT+", "+upperT+"] for you.");
	}
	},
	error: function(xhr, textStatus, errorThrown) {
	$("#Response").html("error!");
	$("#data_url").html("error!");
	// alert("xhr.status: "+xhr.status);
	// alert("error status: "+textStatus);
	},
	complete: function(xhr, textStatus) {
	//alert("complete status: "+textStatus);
	}
	});


	$.ajax({
	type: "GET",
	url: url,
	dataType: "json",
	data: null,
	success: function(data, textStatus, xhr) {
	Response = data;
	// alert("data: " + data);
	// alert(url);
	if (data.success == false) {
	// alert(data.error);
	Response = null;
	var text = JSON.stringify(data, null, 4);

	if (text.indexOf("No Data") != -1) {
	$("#Image").html("No Data");
	$("#Response").html("No Data");
	$("#data_url").html("No Data");
	return;
	}

	text = "Error in backend: <br>" + text;
	// $("#Response").html("<span style='color:red'>" + text + "</span>");
	$("#Response").html(text);
	$("#data_url").html(text);

	return;
	}
	var text = JSON.stringify(data, null, 4);
	// alert(text);
	// $("#Response").html("<pre>"+text+"</pre>");
	$("#Response").html(text);

	var html = "<img src='" + data.url + "?" + new Date().getTime() + "' width='820'/>";
	// alert(html);
	$("#Image").html(html);

	// post dataUrl to textarea and enable download button
	$("#data_url").html(data.dataUrl);
	enable_download_button();
	},
	error: function(xhr, textStatus, errorThrown) {
	$("#Response").html("error!");
	$("#data_url").html("error!");
	// alert("xhr.status: "+xhr.status);
	// alert("error status: "+textStatus);
	},
	complete: function(xhr, textStatus) {
	//alert("complete status: "+textStatus);
	}
	});

	});
	});
	</script>
	} @main("Parameters of ConfId", scripts){ @flash_message()
	<p>
	<div id="dataSource1" style="display: none;">@parameters.getSource1()</div>
	<div id="dataSource2" style="display: none;">@parameters.getSource2()</div>
	<div id="variableName1" style="display: none;">@parameters.getVariableName1()</div>
	<div id="variableName2" style="display: none;">@parameters.getVariableName2()</div>
	<div id="startYearMonth" style="display: none;">@parameters.getStartYear()</div>
	<div id="endYearMonth" style="display: none;">@parameters.getEndYear()</div>
	<div id="pressureLevel1" style="display: none;">@parameters.getPressureLevel1()</div>
	<div id="pressureLevel2" style="display: none;">@parameters.getPressureLevel2()</div>
	<div id="startLat" style="display: none;">@parameters.getStartLat()</div>
	<div id="endLat" style="display: none;">@parameters.getEndLat()</div>
	<div id="startLon" style="display: none;">@parameters.getStartLon()</div>
	<div id="endLon" style="display: none;">@parameters.getEndLon()</div>
	<div id="laggedT" style="display: none;">@parameters.getLaggedTime()</div>
	<div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div>
	<div id="dataURL" style="display: none;">@parameters.getDataURL()</div>
	<div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div>


	<table border="1">

	<tr>
	<td colspan="4">
	<center>
	<b>Service: Time-Lagged Correlation Map of Two Variables</b><br><br>
	This service generates a time-lagged correlation map between two specified variables.
	<br>The two variables can be either a two-dimensional variable or a slice of a three-dimensional variable at a specific pressure level. <br><br>
	</center>
	</td>
	</tr>

	<tr>
	<td colspan="2">
	<center>
	data1[t-lag]
	</center>
	</td>

	<td colspan="2">
	<center>
	data2[t]
	</center>
	</td>
	</tr>

	<tr>
	<td>source:</td>
	<td><select name="data1", id="data1" onchange="put_var(1); select_var1(1)">
	</select></td>

	<td>source:</td>
	<td><select name="data2", id="data2" onchange="put_var(2); select_var1(2)">
	</select></td>

	</tr>

	<tr>

	<td>variable name:</td><td><select name="var1", id="var1" onchange="select_var1(1)">
	</select>
	</td>

	<td>variable name:</td><td><select name="var2", id="var2" onchange="select_var1(2)">
	</select>

	</td>

	</tr>

	<tr>

	<td>
	atmosphere pressure level (hPa) <br> or ocean pressure level (dbar)
	</td>
	<td>
	<input id="pres1" value="@parameters.getPressureLevel1()" alt="pressure"/>
	</td>

	<td>
	atmosphere pressure level (hPa) <br> or ocean pressure level (dbar)
	</td>
	<td>
	<input id="pres2" value="@parameters.getPressureLevel2()" alt="pressure"/>
	</td>

	</tr>

	<tr>
	</tr>

	<tr>
	<td id=startYear>start year-month:</td><td><input id="t0" value="@parameters.getStartYear()" alt="start"/></td>
	<td id=endYear>end year-month:</td><td><input id="t1" value="@parameters.getEndYear()" alt="end"/></td>
	</tr>


	<tr>
	<td>start lat (deg):</td><td><input id="lat0" value="@parameters.getStartLat()"/></td>
	<td>end lat (deg):</td><td><input id="lat1" value="@parameters.getEndLat()"/></td>
	</tr>

	<tr>
	<td>start lon (deg):</td><td><input id="lon0" value="@parameters.getStartLon()"/></td>
	<td>end lon (deg):</td><td><input id="lon1" value="@parameters.getEndLon()"/></td>
	</tr>

	<tr>
	<td></td>
	<td colspan="2"><center>lag (month):<input id="laggedTime" value="@parameters.getLaggedTime()"/></center></td><td></td></tr>
	</tr>

	<tr>
	<td colspan="1">
	Execution purpose
	</td>
	<td colspan="3">
	<form>
	<textarea name="purpose" id="purpose" rows="4" cols="50">@parameters.getExecutionPurpose()</textarea>
	</form>
	</td>
	</tr>
	<tr>

	<tr>
	<td colspan="2" align="center"><input id="correlationMap" type="submit" value=" Run Again " style="height:28px"/></td>
	<form>
	<td colspan="2" align="center"><input id="download_data" type="button" value="Download Data" style="height:28px"/>
	</td>
	</form>

	</tr>

	<tr>
	<td colspan="4">
	<div id="Image"><img src="@parameters.getImage()" width=680 /></div>
	</td>
	</tr>

	<tr>
	<td colspan="4" align="center">
	<textarea readonly id="data_url" cols="130" rows="2">@parameters.getDataURL()</textarea>
	</td>
	</tr>

	<tr>
	<td colspan="4" align="center">
	<textarea id="Response" cols="130" rows="6">@parameters.getServiceResponseText()</textarea>
	</td>
	</tr>

	</table>
	}