public/html/correlationMap.html - incubator-retired-cmda - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">

   <!-- for Bootstrap -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

   <!-- still needed? -->
   <script src="js/jquery.flot.min.js"></script>
   <script src="js/json2.js"></script>
   <script src="js/xmisc.js"></script>

   <!-- cmac related -->
   <link rel="stylesheet" href="common.css">
   <script src='js2/dataList2.js'></script>
   <script src='js2/varList.js'></script>
   <script src='js2/common.js'></script>

   <title>correlationMap Service</title>

   <script>

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

     var naValue = "-999999";

     // called on load or reload
     window.onload = function() {
       var str1 = data_block_str(1, 2, "Variable 1",
           "", "500");
       document.getElementById("dataBlock1").innerHTML = str1;

       str1 = data_block_str(2, 2, "Variable 2",
           "", "500");
       document.getElementById("dataBlock2").innerHTML = str1;

       put_data(1);
       put_data(2);
       put_var(1);
       put_var(2);
       select_var(1);
       select_var(2);
       time_range2();
       //fillMonth();

       disable_download_button();

       // select_all_months();
     }

     $(document).ready(function(){

       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });


       $("#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);
         // alert("urlTimeBounds: " + urlTimeBounds);

         $.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>
 </head>

 <body>
 <div class="container-fluid">
 <div class="row center1">
 <div class="col-sm-8 col-sm-offset-2 col-xs-12 color-head">
 <h3>Service: Time-Lagged Correlation Map of Two Variables</h3>
 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.
 </div> <!-- col-sm -->
 <div class="col-sm-offset-2">
 </div> <!-- col-sm -->
 </div> <!-- row center1 -->

 <div class="row level0">
 <div class="col-sm-12 col-lg-6 level0 color0">
   <div id="dataBlock1">
   </div>
 </div> <!-- col level0 -->

 <div class="col-sm-12 col-lg-6 level0 color1">
   <div id="dataBlock2">
   </div>
 </div> <!-- col level0 -->

 <div class="color3">
 <div class="row center1 subtitle1" >
 Data Subsetting
 </div> <!-- row -->

 <div class="row">
   <div class="col-sm-4 right1">
     <div id=startYear>start year-month:</div>
   </div>
   <div class="col-sm-2 left1">
     <input id="t0" value="2004-01" alt="start"/>
   </div>

   <div class="col-sm-4 right1">
     <div id=endYear>end year-month:</div>
   </div>
   <div class="col-sm-2 left1">
     <input id="t1" value="2004-12" alt="start"/>
   </div>
 </div> <!-- row -->

 <div class="row">
   <div class="col-sm-4 right1">
     start lon (deg):
   </div>
   <div class="col-sm-2 left1">
     <input id="lon0" value="0"/>
   </div>
   <div class="col-sm-4 right1">
     end lon (deg):
   </div>
   <div class="col-sm-2 left1">
     <input id="lon1" value="360"/>
   </div>
 </div> <!-- row -->

 <div class="row">
   <div class="col-sm-4 right1">
     start lat (deg):
   </div>
   <div class="col-sm-2 left1">
     <input id="lat0" value="-90"/>
   </div>
   <div class="col-sm-4 right1">
     end lat (deg):
   </div>
   <div class="col-sm-2 left1">
     <input id="lat1" value="90"/>
   </div>
 </div> <!-- row -->
 </div> <!-- color3 -->

 <div class="color2">
 <div class="row">
   <div class="col-sm-4 right1">
     lag (month):
   </div>
   <div class="col-sm-8 left1">
     <input id="laggedTime" value="0"/>
   </div>
 </div>
 </div> <!-- color2 -->

 <div class="color3">
 <div class="row">
   <div class="col-sm-4 right1">
     Execution purpose:
   </div> <!-- col -->
   <div class="col-sm-8 left1">
     <form>
     <textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
     </form>
   </div> <!-- col -->
 </div> <!-- row -->
 </div> <!-- color2 -->

 <div class="color4">
 <div class="row ">
   <div class="col-sm-6 center1">
     <input id="correlationMap" type="submit" value="            Get  Plot            " style="height:28px"/>
   </div>
   <div class="col-sm-6 center1">
     <form>
       <input id="download_data" type="button" value="Download Data" style="height:28px"/>
     </form>
   </div>
 </div> <!-- row -->
 </div> <!-- color -->

 <div class="row" center1>
   <div class="col-sm-12 center1">
     <div id="Image">Image Here</div>
   </div>
 </div> <!-- row -->

 <div class="row" >
   <div class="col-sm-12 center1">
     <textarea readonly id="data_url" cols="150" rows="2">Data URL Here</textarea>
   </div>
 </div> <!-- row -->

 <div class="row" center1>
   <div class="col-sm-12 center1">
     <textarea id="Response" cols="150" rows="6">Service Response Text Here</textarea>
   </div>
 </div> <!-- row -->

 </div> <!-- container -->
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<!-- for Bootstrap -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

	<!-- still needed? -->
	<script src="js/jquery.flot.min.js"></script>
	<script src="js/json2.js"></script>
	<script src="js/xmisc.js"></script>

	<!-- cmac related -->
	<link rel="stylesheet" href="common.css">
	<script src='js2/dataList2.js'></script>
	<script src='js2/varList.js'></script>
	<script src='js2/common.js'></script>

	<title>correlationMap Service</title>

	<script>

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

	var naValue = "-999999";

	// called on load or reload
	window.onload = function() {
	var str1 = data_block_str(1, 2, "Variable 1",
	"", "500");
	document.getElementById("dataBlock1").innerHTML = str1;

	str1 = data_block_str(2, 2, "Variable 2",
	"", "500");
	document.getElementById("dataBlock2").innerHTML = str1;

	put_data(1);
	put_data(2);
	put_var(1);
	put_var(2);
	select_var(1);
	select_var(2);
	time_range2();
	//fillMonth();

	disable_download_button();

	// select_all_months();
	}

	$(document).ready(function(){

	$("a").click(function(event){
	alert("As you can see, the link no longer took you to jquery.com");
	event.preventDefault();
	});


	$("#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);
	// alert("urlTimeBounds: " + urlTimeBounds);

	$.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>
	</head>

	<body>
	<div class="container-fluid">
	<div class="row center1">
	<div class="col-sm-8 col-sm-offset-2 col-xs-12 color-head">
	<h3>Service: Time-Lagged Correlation Map of Two Variables</h3>
	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.
	</div> <!-- col-sm -->
	<div class="col-sm-offset-2">
	</div> <!-- col-sm -->
	</div> <!-- row center1 -->

	<div class="row level0">
	<div class="col-sm-12 col-lg-6 level0 color0">
	<div id="dataBlock1">
	</div>
	</div> <!-- col level0 -->

	<div class="col-sm-12 col-lg-6 level0 color1">
	<div id="dataBlock2">
	</div>
	</div> <!-- col level0 -->

	<div class="color3">
	<div class="row center1 subtitle1" >
	Data Subsetting
	</div> <!-- row -->

	<div class="row">
	<div class="col-sm-4 right1">
	<div id=startYear>start year-month:</div>
	</div>
	<div class="col-sm-2 left1">
	<input id="t0" value="2004-01" alt="start"/>
	</div>

	<div class="col-sm-4 right1">
	<div id=endYear>end year-month:</div>
	</div>
	<div class="col-sm-2 left1">
	<input id="t1" value="2004-12" alt="start"/>
	</div>
	</div> <!-- row -->

	<div class="row">
	<div class="col-sm-4 right1">
	start lon (deg):
	</div>
	<div class="col-sm-2 left1">
	<input id="lon0" value="0"/>
	</div>
	<div class="col-sm-4 right1">
	end lon (deg):
	</div>
	<div class="col-sm-2 left1">
	<input id="lon1" value="360"/>
	</div>
	</div> <!-- row -->

	<div class="row">
	<div class="col-sm-4 right1">
	start lat (deg):
	</div>
	<div class="col-sm-2 left1">
	<input id="lat0" value="-90"/>
	</div>
	<div class="col-sm-4 right1">
	end lat (deg):
	</div>
	<div class="col-sm-2 left1">
	<input id="lat1" value="90"/>
	</div>
	</div> <!-- row -->
	</div> <!-- color3 -->

	<div class="color2">
	<div class="row">
	<div class="col-sm-4 right1">
	lag (month):
	</div>
	<div class="col-sm-8 left1">
	<input id="laggedTime" value="0"/>
	</div>
	</div>
	</div> <!-- color2 -->

	<div class="color3">
	<div class="row">
	<div class="col-sm-4 right1">
	Execution purpose:
	</div> <!-- col -->
	<div class="col-sm-8 left1">
	<form>
	<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
	</form>
	</div> <!-- col -->
	</div> <!-- row -->
	</div> <!-- color2 -->

	<div class="color4">
	<div class="row ">
	<div class="col-sm-6 center1">
	<input id="correlationMap" type="submit" value=" Get Plot " style="height:28px"/>
	</div>
	<div class="col-sm-6 center1">
	<form>
	<input id="download_data" type="button" value="Download Data" style="height:28px"/>
	</form>
	</div>
	</div> <!-- row -->
	</div> <!-- color -->

	<div class="row" center1>
	<div class="col-sm-12 center1">
	<div id="Image">Image Here</div>
	</div>
	</div> <!-- row -->

	<div class="row" >
	<div class="col-sm-12 center1">
	<textarea readonly id="data_url" cols="150" rows="2">Data URL Here</textarea>
	</div>
	</div> <!-- row -->

	<div class="row" center1>
	<div class="col-sm-12 center1">
	<textarea id="Response" cols="150" rows="6">Service Response Text Here</textarea>
	</div>
	</div> <!-- row -->

	</div> <!-- container -->
	</body>
	</html>