You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cmda.apache.org by xi...@apache.org on 2015/10/29 23:56:32 UTC

[9/9] incubator-cmda git commit: Update ApacheCMDA-Frontend with KnowledgeGraph

Update ApacheCMDA-Frontend with KnowledgeGraph


Project: http://git-wip-us.apache.org/repos/asf/incubator-cmda/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cmda/commit/ca952ad9
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cmda/tree/ca952ad9
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cmda/diff/ca952ad9

Branch: refs/heads/master
Commit: ca952ad972ebdf543ee276d3a94a1578cc550b2c
Parents: aa50efa
Author: mingqi830 <mq...@andrew.cmu.edu>
Authored: Thu Oct 29 15:56:16 2015 -0700
Committer: mingqi830 <mq...@andrew.cmu.edu>
Committed: Thu Oct 29 15:56:16 2015 -0700

----------------------------------------------------------------------
 .../app/controllers/AnalyticsController.java    |    20 +
 .../app/views/climate/aboutProject.scala.html   |    17 -
 .../app/views/climate/aboutus.scala.html        |    17 -
 .../views/climate/addClimateServices.scala.html |    17 -
 .../app/views/climate/bugReporting.scala.html   |    16 -
 .../app/views/climate/bugs.scala.html           |    16 -
 .../views/climate/climateServices.scala.html    |    18 +-
 .../climate/conditionalSampling.scala.html      |  1143 +-
 .../climate/conditionalSampling2Var.scala.html  |   756 +-
 .../app/views/climate/correlationMap.scala.html |   464 +-
 .../app/views/climate/dataRecommend.scala.html  |    17 -
 .../app/views/climate/dataSetList.scala.html    |    17 -
 .../app/views/climate/datasetTime.scala.html    |    17 -
 .../app/views/climate/header.scala.html         |    44 +-
 .../app/views/climate/home.scala.html           |    17 -
 .../app/views/climate/knowledgeGraph.scala.html |   320 +
 .../app/views/climate/main.scala.html           |    19 +-
 .../climate/mostPopularServices.scala.html      |    17 -
 .../mostRecentlyAddedServices.scala.html        |    17 -
 .../climate/mostRecentlyUsedServices.scala.html |    17 -
 .../app/views/climate/oneService.scala.html     |    17 -
 .../app/views/climate/recommend.scala.html      |    17 -
 .../views/climate/regridAndDownload.scala.html  |   283 +-
 .../scatterAndHistogramTwoVariable.scala.html   |   880 +-
 .../app/views/climate/searchDataSet.scala.html  |    19 +-
 .../climate/searchGenerateWorkflow.scala.html   |    17 -
 .../views/climate/searchLogResult.scala.html    |    17 -
 .../climate/searchLogResultWorkflow.scala.html  |    17 -
 .../views/climate/searchServiceLog.scala.html   |    17 -
 .../app/views/climate/serviceLog.scala.html     |    17 -
 ...reeDVariableAerageVerticalProfile.scala.html |   532 +-
 .../climate/threeDVariableTwoDSlice.scala.html  |   537 +-
 .../climate/threeDVariableZonalMean.scala.html  |   537 +-
 .../app/views/climate/tutorial.scala.html       |    17 -
 .../views/climate/twoDVariableMap.scala.html    |   597 +-
 .../climate/twoDVariableTimeSeries.scala.html   |   478 +-
 ApacheCMDA-Frontend/conf/routes                 |   126 +-
 ApacheCMDA-Frontend/public/images/data.png      |   Bin 0 -> 78064 bytes
 .../public/javascripts/exampleUtil.js           |   126 +
 .../public/javascripts/googleAnalytics.js       |    12 +
 ApacheCMDA-Frontend/public/javascripts/vis.js   | 43387 +++++++++++++++++
 ApacheCMDA-Frontend/public/stylesheets/vis.css  |  1295 +
 42 files changed, 49464 insertions(+), 2467 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/controllers/AnalyticsController.java
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/controllers/AnalyticsController.java b/ApacheCMDA-Frontend/app/controllers/AnalyticsController.java
new file mode 100644
index 0000000..21e971d
--- /dev/null
+++ b/ApacheCMDA-Frontend/app/controllers/AnalyticsController.java
@@ -0,0 +1,20 @@
+package controllers;
+
+import play.data.Form;
+import play.mvc.Controller;
+import play.mvc.Result;
+import util.Constants;
+import util.APICall;
+import util.APICall.ResponseType;
+import views.html.climate.*;
+
+import com.fasterxml.jackson.databind.JsonNode;
+
+public class AnalyticsController extends Controller{
+	
+	public static Result getKnowledgeGraph() {
+		JsonNode response = APICall.callAPI("http://einstein.sv.cmu.edu:9035/analytics/getAllDatasetAndUserWithCount/json");
+		String resStr = response.toString();
+		return ok(knowledgeGraph.render(resStr));
+	}
+}

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/aboutProject.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/aboutProject.scala.html b/ApacheCMDA-Frontend/app/views/climate/aboutProject.scala.html
index b498dc3..9857fea 100644
--- a/ApacheCMDA-Frontend/app/views/climate/aboutProject.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/aboutProject.scala.html
@@ -1,20 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
- 
 @(message: String)
 
 @main("About Project") {

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/aboutus.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/aboutus.scala.html b/ApacheCMDA-Frontend/app/views/climate/aboutus.scala.html
index e5221ab..b45679a 100644
--- a/ApacheCMDA-Frontend/app/views/climate/aboutus.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/aboutus.scala.html
@@ -1,20 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
-
 @(message: String)
 
 @main("About Us") {

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/addClimateServices.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/addClimateServices.scala.html b/ApacheCMDA-Frontend/app/views/climate/addClimateServices.scala.html
index 9c7be00..0bf0c45 100644
--- a/ApacheCMDA-Frontend/app/views/climate/addClimateServices.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/addClimateServices.scala.html
@@ -1,20 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
-
 @(climateServiceForm: play.data.Form[metadata.ClimateService])
 @import helper._
 

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/bugReporting.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/bugReporting.scala.html b/ApacheCMDA-Frontend/app/views/climate/bugReporting.scala.html
index 363460c..312c172 100644
--- a/ApacheCMDA-Frontend/app/views/climate/bugReporting.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/bugReporting.scala.html
@@ -1,19 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
 
 @(bugReportForm: play.data.Form[BugReport])
 

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/bugs.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/bugs.scala.html b/ApacheCMDA-Frontend/app/views/climate/bugs.scala.html
index fd04769..3c6d574 100644
--- a/ApacheCMDA-Frontend/app/views/climate/bugs.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/bugs.scala.html
@@ -1,19 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
 
 @(bugReports: LinkedList[BugReport])
 

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/climateServices.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/climateServices.scala.html b/ApacheCMDA-Frontend/app/views/climate/climateServices.scala.html
index 8af110c..3fe95d3 100644
--- a/ApacheCMDA-Frontend/app/views/climate/climateServices.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/climateServices.scala.html
@@ -1,19 +1,3 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
 
 @(climateServices: List[metadata.ClimateService], climateServiceForm: play.data.Form[metadata.ClimateService])
 
@@ -23,7 +7,7 @@
 	<script src='@routes.Assets.at("javascripts/edit_button.js")'></script>
 	<script type="text/javascript">
 	$(document).ready(function(){
-
+		//alert($("#url").text());
 	});
 	</script>
 }

http://git-wip-us.apache.org/repos/asf/incubator-cmda/blob/ca952ad9/ApacheCMDA-Frontend/app/views/climate/conditionalSampling.scala.html
----------------------------------------------------------------------
diff --git a/ApacheCMDA-Frontend/app/views/climate/conditionalSampling.scala.html b/ApacheCMDA-Frontend/app/views/climate/conditionalSampling.scala.html
index fe2ab7d..69d9a67 100644
--- a/ApacheCMDA-Frontend/app/views/climate/conditionalSampling.scala.html
+++ b/ApacheCMDA-Frontend/app/views/climate/conditionalSampling.scala.html
@@ -1,37 +1,25 @@
-@*******************************************************************************
- * Licensed to the Apache Software Foundation (ASF) under one or more		   *
- * contributor license agreements.  See the NOTICE file distributed with	   *
- * this work for additional information regarding copyright ownership.         *
- * The ASF licenses this file to You under the Apache License, Version 2.0     *
- * (the "License"); you may not use this file except in compliance with        *
- * the License.  You may obtain a copy of the License at                       *
- *                                                                             *
- *    http://www.apache.org/licenses/LICENSE-2.0                               *
- *																			   *
- * Unless required by applicable law or agreed to in writing, software         *
- * distributed under the License is distributed on an "AS IS" BASIS,           *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    *
- * See the License for the specific language governing permissions and         *
- * limitations under the License.											   *
- *******************************************************************************@ 
-
-@(parameters: metadata.ConditionalSampling) @import helper._
+@(parameters: metadata.ConditionalSampling)
+
+@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">
+	<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">
+	
 	var Response = null;
     var variable1 = "";
     var variable2 = "";
+
+
+    // called on load or reload
     window.onload = function() {
       select_all_months();
       changeDataSource1();
@@ -42,9 +30,12 @@
       select_var1(1);
       changeVariableName2();
       select_var1(2);
+      // no data to download yet
+      //disable_download_button();
       var z=document.getElementById("download_data");
       z.disabled=false;
       setDefault();
+      
       $('#pres1').val("N/A");
       $('#pres2').val("N/A");
       $('#t0').val($('#startYearMonth').text());
@@ -100,8 +91,11 @@
       $('#Image').html('<img src="'+imageUrl+'" width=680 />');
       $('#data_url').html($('#dataURL').text());
       $('#Response').html($('serviceResponseText').text());
+      
+    
     function changeDataSource1(){
     	var dataSource = $('#dataSourceP').text();
+     	//dataSource = "NASA_QuikSCAT";
      	var x = document.getElementById("data1");
      	if(dataSource == "cccma_canesm2" ){
      		x.options[0].selected=true;
@@ -181,9 +175,11 @@
      	else if(dataSource == "ecmwf_interim" ){
      		x.options[25].selected=true;
      	}
+        //$('#data option:contains('+dataSource+')').prop({selected: true});
     }
     function changeDataSource2(){
     	var dataSource = $('#dataSourceE').text();
+     	//dataSource = "NASA_QuikSCAT";
      	var x = document.getElementById("data2");
      	if(dataSource == "cccma_canesm2" ){
      		x.options[0].selected=true;
@@ -263,6 +259,7 @@
      	else if(dataSource == "ecmwf_interim" ){
      		x.options[25].selected=true;
      	}
+        //$('#data option:contains('+dataSource+')').prop({selected: true});
     }
     function changeVariableName1(){
     	var var_string = $('#variableNameP').text();
@@ -412,6 +409,8 @@
     	}
     }
     }
+
+    // select all months in the checkboxes
     function select_all_months()
     {
         document.getElementById('Jan').checked = true;
@@ -427,6 +426,8 @@
         document.getElementById('Nov').checked = true;
         document.getElementById('Dec').checked = true;
     }
+
+    // see if no month is selected
     function no_month_check()
     {
         if (document.getElementById('Jan').checked == false &&
@@ -441,11 +442,14 @@
            document.getElementById('Oct').checked == false &&
            document.getElementById('Nov').checked == false &&
            document.getElementById('Dec').checked == false) {
+           // alert("No month check!");
            return true;
           }
         else
            return false;
     }
+
+    // unselect all months in the checkboxes
     function reset_months()
     {
         document.getElementById('Jan').checked = false;
@@ -461,8 +465,11 @@
         document.getElementById('Nov').checked = false;
         document.getElementById('Dec').checked = false;
     }
+
+    // disable customized input text boxes
     function setDefault()
     {
+       // alert("in setDefault() ... ");
        x=document.getElementById("min1");
        y=document.getElementById("max1");
        z=document.getElementById("bins1");
@@ -473,8 +480,11 @@
        z.value = "N/A";
        z.disabled=true;
     }
+
+    // enable customized input text boxes
     function setCustomized()
     {
+       // alert("in setCustomized() ... ");
        x=document.getElementById("min1");
        y=document.getElementById("max1");
        z=document.getElementById("bins1");
@@ -485,25 +495,34 @@
        z.value = "";
        z.disabled=false;
     }
+
+    // disable download data button
     function disable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=false;
     }
+
+    // enable download data button
     function enable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=false;
     }
+
+
+    // disable all vars1 in dropdown menu
     function unset_vars1(ID)
     {
       var x;
+
       if (ID == 1) {
         x=document.getElementById("var1");
       }
       else if (ID == 2) {
         x=document.getElementById("var2");
       }
+
       x.options[0].disabled=true;
       x.options[1].disabled=true;
       x.options[2].disabled=true;
@@ -538,6 +557,9 @@
       x.options[31].disabled=true;
       x.options[32].disabled=true;
     }
+
+
+    // disable pressure level box for 2D var
     function disable_pres1(ID)
     {
       var x;
@@ -547,9 +569,12 @@
       else if (ID == 2) {
         x=document.getElementById("pres2");
       }
+
       x.value = "N/A";
       x.disabled=true;
     }
+
+    // enable pressure level box for 3D var
     function enable_pres1(ID)
     {
       var x;
@@ -561,26 +586,37 @@
         x=document.getElementById("pres2");
         x.value = "500";
       }
+
       x.disabled=false;
     }
+
+    // form variable1 or variable2 string based on "var" dropdown selection
     function select_var1(ID)
     {
       var var_string;
+
       if (ID == 1) {
         var_string = $("#var1").val();
       }
       else if (ID == 2) {
         var_string = $("#var2").val();
       }
+
+      // alert("var_string: " + var_string)
+
+      // disable the download button because of this change  
       disable_download_button();  
+  
       if (var_string == "Total Cloud Fraction") { 
         if (ID == 1) {
-          variable1 = "clt";  
+          variable1 = "clt";  // a 2D var
         }
         else if (ID == 2) {
-          variable2 = "clt";  
+          variable2 = "clt";  // a 2D var
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
+        // alert("variable1: " + variable1)
       }
       else if (var_string == "Surface Temperature") {
         if (ID == 1) {
@@ -589,6 +625,7 @@
         else if (ID == 2) {
           variable2 = "ts";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Sea Surface Temperature") { 
@@ -598,6 +635,7 @@
         else if (ID == 2) {
           variable2 = "tos";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Precipitation Flux") { 
@@ -607,6 +645,7 @@
         else if (ID == 2) {
           variable2 = "pr";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Eastward Near-Surface Wind") { 
@@ -616,6 +655,7 @@
         else if (ID == 2) {
           variable2 = "uas";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Northward Near-Surface Wind") {  
@@ -625,6 +665,7 @@
         else if (ID == 2) {
           variable2 = "vas";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Near-Surface Wind Speed") { 
@@ -634,6 +675,7 @@
         else if (ID == 2) {
           variable2 = "sfcWind";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Sea Surface Height") { 
@@ -643,6 +685,7 @@
         else if (ID == 2) {
           variable2 = "zos";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Leaf Area Index") { 
@@ -652,6 +695,7 @@
         else if (ID == 2) {
           variable2 = "lai";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Equivalent Water Height Over Land") {
@@ -661,6 +705,7 @@
         else if (ID == 2) {
           variable2 = "zl";  
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Equivalent Water Height Over Ocean") {
@@ -670,6 +715,7 @@
         else if (ID == 2) {
           variable2 = "zo";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Ocean Heat Content Anomaly within 700 m Depth") {
@@ -679,6 +725,7 @@
         else if (ID == 2) {
           variable2 = "ohc700";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Ocean Heat Content Anomaly within 2000 m Depth") {
@@ -688,6 +735,7 @@
         else if (ID == 2) {
           variable2 = "ohc2000";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Downwelling Longwave Radiation") {
@@ -697,6 +745,7 @@
         else if (ID == 2) {
           variable2 = "rlds";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Downwelling Shortwave Radiation") {
@@ -706,6 +755,7 @@
         else if (ID == 2) {
           variable2 = "rsds";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Upwelling Longwave Radiation") {
@@ -715,6 +765,7 @@
         else if (ID == 2) {
           variable2 = "rlus";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Upwelling Shortwave Radiation") {
@@ -724,6 +775,7 @@
         else if (ID == 2) {
           variable2 = "rsus";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Downwelling Clear-Sky Longwave Radiation") {
@@ -733,6 +785,7 @@
         else if (ID == 2) {
           variable2 = "rldscs";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Downwelling Clear-Sky Shortwave Radiation") {
@@ -742,6 +795,7 @@
         else if (ID == 2) {
           variable2 = "rsdscs";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Surface Upwelling Clear-Sky Shortwave Radiation") {
@@ -751,6 +805,7 @@
         else if (ID == 2) {
           variable2 = "rsuscs";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "TOA Incident Shortwave Radiation") {
@@ -760,6 +815,7 @@
         else if (ID == 2) {
           variable2 = "rsdt";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "TOA Outgoing Clear-Sky Longwave Radiation") {
@@ -769,6 +825,7 @@
         else if (ID == 2) {
           variable2 = "rlutcs";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "TOA Outgoing Longwave Radiation") {
@@ -778,6 +835,7 @@
         else if (ID == 2) {
           variable2 = "rlut";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "TOA Outgoing Clear-Sky Shortwave Radiation") {
@@ -787,6 +845,7 @@
         else if (ID == 2) {
           variable2 = "rsutcs";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "TOA Outgoing Shortwave Radiation") {
@@ -796,6 +855,7 @@
         else if (ID == 2) {
           variable2 = "rsut";
         }
+        // disable pressure level box for 2D var
         disable_pres1(ID);
       }
       else if (var_string == "Air Temperature") {
@@ -805,6 +865,7 @@
         else if (ID == 2) {
           variable2 = "ta";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Specific Humidity") {
@@ -814,6 +875,7 @@
         else if (ID == 2) {
           variable2 = "hus";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Cloud Ice Water Content") {
@@ -823,6 +885,7 @@
         else if (ID == 2) {
           variable2 = "cli";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Cloud Liquid Water Content") {
@@ -832,6 +895,7 @@
         else if (ID == 2) {
           variable2 = "clw";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Ocean Temperature") {
@@ -841,6 +905,7 @@
         else if (ID == 2) {
           variable2 = "ot";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Ocean Salinity") {
@@ -850,6 +915,7 @@
         else if (ID == 2) {
           variable2 = "os";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Vertical Wind Velocity") {
@@ -859,6 +925,7 @@
         else if (ID == 2) {
           variable2 = "wap";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
       else if (var_string == "Relative Humidity") {
@@ -868,13 +935,20 @@
         else if (ID == 2) {
           variable2 = "hur";
         }
+        // enable pressure level box for 3D var
         enable_pres1(ID);
       }
+
+      // alert("variable1: " + variable1)
     }
+
+
+    // set up "var1" dropdown based status of "data1" dropdown
     function select_data1(ID)
     {
       var data_string;
       var x;
+
       if (ID == 1) {
         data_string = $("#data1").val();
         x = document.getElementById("var1");
@@ -883,64 +957,106 @@
         data_string = $("#data2").val();
         x = document.getElementById("var2");
       }
+
+      // alert(ID);
+      // alert(data_string);
+
+      // disable the download button because of this change
       disable_download_button();
+
+      // disable corresponding "var" options
       if (data_string == "NASA/AMSRE") {
-        unset_vars1(ID); 
+
+        unset_vars1(ID); // disable all options in "var" dropdown first
+
         x.options[3].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[3].disabled=false;
+
       }
       else if (data_string == "NASA/MODIS") {
+
         unset_vars1(ID);
+
         x.options[1].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[1].disabled=false;
         x.options[8].disabled=false;
+
       }
       else if (data_string == "NASA/TRMM") {
+
         unset_vars1(ID);
+
         x.options[0].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[0].disabled=false;
+
       }
       else if (data_string == "NASA/GPCP") {
+
         unset_vars1(ID);
+
         x.options[0].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[0].disabled=false;
+
       }
       else if (data_string == "NASA/QuikSCAT") {
+
         unset_vars1(ID);
+
         x.options[4].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[4].disabled=false;
         x.options[5].disabled=false;
         x.options[6].disabled=false;
+
       }
       else if (data_string == "NASA/AVISO") {
+
         unset_vars1(ID);
+
         x.options[7].selected=true;
-        disable_pres1(); 
+        disable_pres1(); // the selected one is 2D
+
         x.options[7].disabled=false;
+
       }
       else if (data_string == "NASA/GRACE") {
+
         unset_vars1(ID);
+
         x.options[9].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[9].disabled=false;
         x.options[10].disabled=false;
+
       }
       else if (data_string == "NOAA/NODC") {
+
         unset_vars1(ID);
+
         x.options[11].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[11].disabled=false;
         x.options[12].disabled=false;
+
       }
       else if (data_string == "NASA/CERES") {
+
         unset_vars1(ID);
+
         x.options[13].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[13].disabled=false;
         x.options[14].disabled=false;
         x.options[15].disabled=false;
@@ -953,38 +1069,65 @@
         x.options[22].disabled=false;
         x.options[23].disabled=false;
         x.options[24].disabled=false;
+        // The following 6 commented out
+        // per request by Benyang
+        // x.options[25].disabled=false;
+        // x.options[26].disabled=false;
+        // x.options[27].disabled=false;
+        // x.options[28].disabled=false;
+        // x.options[29].disabled=false;
+        // x.options[30].disabled=false;
+
       }
       else if (data_string == "NASA/AIRS") {
+
         unset_vars1(ID);
+
         x.options[25].selected=true;
-        enable_pres1(ID); 
+        enable_pres1(ID); // the selected one is 3D
+
         x.options[25].disabled=false;
         x.options[26].disabled=false;
+
       }
       else if (data_string == "NASA/MLS") {
+
         unset_vars1(ID);
+
         x.options[25].selected=true;
-        enable_pres1(ID); 
+        enable_pres1(ID); // the selected one is 3D
+
         x.options[25].disabled=false;
         x.options[26].disabled=false;
+
       }
       else if (data_string == "ARGO/ARGO") {
+
         unset_vars1(ID);
+
         x.options[29].selected=true;
-        enable_pres1(ID); 
+        enable_pres1(ID); // the selected one is 3D
+
         x.options[29].disabled=false;
         x.options[30].disabled=false;
+
+        // alert("in ARGO ...");
+        // alert(data_string);
       }
       else if (data_string == "CCCMA/CANAM4") {
+
         unset_vars1(ID);
+
         x.options[0].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[0].disabled=false;
         x.options[1].disabled=false;
         x.options[2].disabled=false;
         x.options[4].disabled=false;
         x.options[5].disabled=false;
         x.options[6].disabled=false;
+
         x.options[13].disabled=false;
         x.options[14].disabled=false;
         x.options[15].disabled=false;
@@ -1001,17 +1144,22 @@
         x.options[26].disabled=false;
         x.options[27].disabled=false;
         x.options[28].disabled=false;
+
       }
       else if (data_string == "CSIRO/MK3.6") {
+
         unset_vars1(ID);
+
         x.options[0].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[0].disabled=false;
         x.options[1].disabled=false;
         x.options[2].disabled=false;
         x.options[4].disabled=false;
         x.options[5].disabled=false;
         x.options[6].disabled=false;
+
         x.options[13].disabled=false;
         x.options[14].disabled=false;
         x.options[15].disabled=false;
@@ -1030,7 +1178,9 @@
         x.options[28].disabled=false;
         x.options[31].disabled=false;
         x.options[32].disabled=false;
+
       }
+
       else if (data_string == "CCCMA/CANESM2" || data_string == "GFDL/ESM2G" ||
                data_string == "GISS/E2-H" || data_string == "GISS/E2-R" ||
                data_string == "NCAR/CAM5" || data_string == "NCC/NORESM" ||
@@ -1038,9 +1188,12 @@
                data_string == "GFDL/CM3" || data_string == "IPSL/CM5A-LR" ||
                data_string == "MIROC/MIROC5" || data_string == "UKMO/HadGEM2-A"
               ) {
+
         unset_vars1(ID);
+
         x.options[0].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[0].disabled=false;
         x.options[1].disabled=false;
         x.options[2].disabled=false;
@@ -1050,6 +1203,7 @@
         x.options[6].disabled=false;
         x.options[7].disabled=false;
         x.options[8].disabled=false;
+
         x.options[13].disabled=false;
         x.options[14].disabled=false;
         x.options[15].disabled=false;
@@ -1068,102 +1222,168 @@
         x.options[28].disabled=false;
         x.options[31].disabled=false;
         x.options[32].disabled=false;
+
       }
       else if (data_string == "ECMWF/interim") {
         unset_vars1(ID);
+ 
         x.options[3].selected=true;
-        disable_pres1(ID); 
+        disable_pres1(ID); // the selected one is 2D
+
         x.options[3].disabled=false;
         x.options[31].disabled=false;
         x.options[32].disabled=false;
       }
+
+      // form variable string
       select_var1(ID);
     }
+
+    // select checkboxes based on "months" dropdown
     function select_months()
     {
       var s1=document.getElementById("months");
+      // alert(s1.selectedIndex);
+      // alert(s1.options[s1.selectedIndex].value);
+
+      // disable the download button because of this change
       disable_download_button();
+
+      // "select none"
       if (s1.selectedIndex == 1) {
         reset_months();
       }
+      // "select all"
       if (s1.selectedIndex == 0) {
         select_all_months();
       }
+      // "summer"
       if (s1.selectedIndex == 2) {
         reset_months();
         document.getElementById('Jun').checked = true;
         document.getElementById('Jul').checked = true;
         document.getElementById('Aug').checked = true;
       }
+      // "autumn"
       if (s1.selectedIndex == 3) {
         reset_months();
         document.getElementById('Sep').checked = true;
         document.getElementById('Oct').checked = true;
         document.getElementById('Nov').checked = true;
       }
+      // "winter"
       if (s1.selectedIndex == 4) {
         reset_months();
         document.getElementById('Dec').checked = true;
         document.getElementById('Jan').checked = true;
         document.getElementById('Feb').checked = true;
       }
+      // "spring"
       if (s1.selectedIndex == 5) {
         reset_months();
         document.getElementById('Mar').checked = true;
         document.getElementById('Apr').checked = true;
         document.getElementById('May').checked = true;
       }
+
     }
+
+
     $(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);
       });
+
+
       $("#conditionalSamp").click(function(event) {
+        // alert('****** inside conditionalSamp()!');
         Response = null;
+
+        // no data to download yet
         disable_download_button();
+
+        // flag error if no month box is checked
         if (no_month_check()) {
+           // $("#Response").html("<span style='color:red'>Error: please check at least one month.</span>");
            $("#Response").html("Error: please check at least one month.");
            $("#Image").html("");
            return;
         }
+
         $("#Response").html("Calculating ...");
         $("#data_url").html("Calculating ...");
         $("#Image").html("");
+
+        // sample url: http://cmacws.jpl.nasa.gov:9002/svc/conditionalSampling?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:9002/svc/conditionalSamp?";
         var url = "http://" + window.location.hostname + ":9002/svc/conditionalSampling?";
+        // 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 v1 = $("#var1").val();
         arglist = arglist.concat("&var1=");
         arglist = arglist.concat(variable1);
+
+        // alert("arglist: " + arglist);
+
+
         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);
+
         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 press_range = $("#pres1").val();
+        // alert("press_range: " + press_range);
         var pres1;
         var pres2;
         if (press_range != 'N/A') {
+          // split the range into two pressures
           var splitty = press_range.split(",");
           if (splitty.length != 2) {
             alert("pressure level range needs to be two values separated by comma.");
@@ -1172,13 +1392,17 @@
           else {
             pres1 = splitty[0];
             pres2 = splitty[1];
+            // alert("variable1: " + variable1);
+         
+            // when variable is the 3D Ocean Salinity or Ocean Temperature
             if (variable1 == 'ot' || variable1 == 'os') {
-              pres1 = pres1 * 10000;  
-              pres2 = pres2 * 10000;  
+              pres1 = pres1 * 10000;  // convert from dbar on GUI
+              pres2 = pres2 * 10000;  // convert from dbar on GUI
             } 
+            // when variable2 is 3D atmosphere var
             else {
-              pres1 = pres1 * 100;  
-              pres2 = pres2 * 100;  
+              pres1 = pres1 * 100;  // convert from hPa on GUI
+              pres2 = pres2 * 100;  // convert from hPa on GUI
             }
           }
         }
@@ -1186,115 +1410,188 @@
           pres1 = "-1";
           pres2 = "-1";
         }
+
         arglist = arglist.concat("&pres1=");
         arglist = arglist.concat(pres1);
         arglist = arglist.concat("&pres2=");
         arglist = arglist.concat(pres2);
+
+        // alert("arglist: " + arglist);
+
+
         var s1 = document.getElementById('months');
+
+        // get months checked by client
         var month_str = "";
+
         var mm = document.getElementById('Jan');
         if (mm.checked == true)
           month_str = month_str.concat(",1");
+
         var mm = document.getElementById('Feb');
         if (mm.checked == true)
           month_str = month_str.concat(",2");
+
         var mm = document.getElementById('Mar');
         if (mm.checked == true)
           month_str = month_str.concat(",3");
+
         var mm = document.getElementById('Apr');
         if (mm.checked == true)
           month_str = month_str.concat(",4");
+
         var mm = document.getElementById('May');
         if (mm.checked == true)
           month_str = month_str.concat(",5");
           var mm = document.getElementById('Jun');
         if (mm.checked == true)
           month_str = month_str.concat(",6");
+
         var mm = document.getElementById('Jul');
         if (mm.checked == true)
           month_str = month_str.concat(",7");
+
         var mm = document.getElementById('Aug');
         if (mm.checked == true)
           month_str = month_str.concat(",8");
+
         var mm = document.getElementById('Sep');
         if (mm.checked == true)
           month_str = month_str.concat(",9");
+
         var mm = document.getElementById('Oct');
         if (mm.checked == true)
           month_str = month_str.concat(",10");
+
         var mm = document.getElementById('Nov');
         if (mm.checked == true)
           month_str = month_str.concat(",11");
+
         var mm = document.getElementById('Dec');
         if (mm.checked == true)
           month_str = month_str.concat(",12");
+
+        // remove the leading ','
         month_str = month_str.substr(1);
+        // alert(month_str);
+
         arglist = arglist.concat("&months=");
         arglist = arglist.concat(month_str);
+
+        // alert("arglist: " + arglist);
+
+
+
+
+
+
         var d2 = $("#data2").val();
         var model2 = d2.replace("/", "_");
         model2 = model2.toLowerCase();
+
         arglist = arglist.concat("&model2=");
         arglist = arglist.concat(model2);
+
+        // alert("arglist: " + arglist);
+
         var v2 = $("#var2").val();
         arglist = arglist.concat("&var2=");
         arglist = arglist.concat(variable2);
+
+        // alert("arglist: " + arglist);
+
         var plev = $("#pres2").val();
         if (plev == "N/A")
           plev = "-1";
+
+        // when variable is the 3D Ocean Salinity or Ocean Temperature
         if (variable2 == 'ot' || variable2 == 'os') {
-          plev = plev * 10000;  
+          plev = plev * 10000;  // convert from dbar on GUI
         } 
+        // when variable2 is 3D atmosphere var
         else {
-          plev = plev * 100;  
+          plev = plev * 100;  // convert from hPa on GUI
         }
+
+
         arglist = arglist.concat("&env_var_plev=");
         arglist = arglist.concat(plev);
+
+        // alert("arglist: " + arglist);
+
         var binstate = document.getElementById('radioDef').checked;
+
         var binMin, binMax, numBins;
-        if (binstate == true) { 
+
+        if (binstate == true) { // default
           binMin = "-1";
           binMax = "-1";
           numBins = "-1";
         }
-        else { 
+        else { // customized
           binMin = $("#min1").val();
           binMax = $("#max1").val();
           numBins = $("#bins1").val();
         }
+
         arglist = arglist.concat("&bin_min=");
         arglist = arglist.concat(binMin);
         arglist = arglist.concat("&bin_max=");
         arglist = arglist.concat(binMax);
         arglist = arglist.concat("&bin_n=");
         arglist = arglist.concat(numBins);
+
+        // alert("arglist: " + arglist);
+
         var xstate = document.getElementById('radioXLin').checked;
         var xvalue;
+
         if (xstate == true)
           xvalue = 0;
         else
           xvalue = 1;
+
+        // alert("xvalue: " + xvalue);
+
         var ystate = document.getElementById('radioYLin').checked;
         var yvalue;
+
         if (ystate == true)
           yvalue = 0;
         else
           yvalue = 1;
+
+        // alert("yvalue: " + yvalue);
+
         var zstate = document.getElementById('radioZLin').checked;
         var zvalue;
+
         if (zstate == true)
           zvalue = 0;
         else
           zvalue = 1;
+
+        // alert("zvalue: " + zvalue);
+
         var dispOpt;
         dispOpt = xvalue*1 + yvalue*2 + zvalue*4;
+        // alert("dispOpt: " + dispOpt);
         var dispOptString = dispOpt.toString();
+
         arglist = arglist.concat("&displayOpt=");
         arglist = arglist.concat(dispOptString);
+
+        // 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=");
@@ -1308,6 +1605,8 @@
         arglistTB = arglistTB.concat("&var2=");
         arglistTB = arglistTB.concat(variable2);
         urlTimeBounds = urlTimeBounds + encodeURI(arglistTB);
+        //alert("urlTimeBounds: " + urlTimeBounds);
+
         $.ajax({
             type: "GET",
             url: urlTimeBounds,
@@ -1315,7 +1614,9 @@
             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; 
@@ -1324,56 +1625,82 @@
                     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;
-                if (lowerT1 == 0  || upperT1 == 0){ 
+                // 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.");
                   return;
                 }
-                else if (lowerT2 == 0  || upperT2 == 0){ 
+                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) { 
+                else if (lowerT2 > upperT1 || lowerT1 > upperT2) { // no intersection
                   alert("The two data sets/vars do not have a common time range.");
                   return;
                 }
-                else { 
-                  if (lowerT1 > lowerT2) { 
+                else { // compute intersection
+                  if (lowerT1 > lowerT2) { // pick bigger lower time bound
                     lowerT = lowerT1;
                   }
                   else {
                     lowerT = lowerT2;
                   }
-                  if (upperT1 > upperT2) { 
+
+                  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.");
@@ -1382,10 +1709,15 @@
             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,
@@ -1393,33 +1725,53 @@
             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("<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+"' 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>
+  }
+  
+  @main("Parameters of ConfId", scripts){
+	
+	@flash_message()   
+	 
+    <p>
 <div id="dataSourceP" style="display: none;">@parameters.getDataSourceP()</div>
 <div id="variableNameP" style="display: none;">@parameters.getVariableNameP()</div>
 <div id="pressureRangeP" style="display: none;">@parameters.getPressureRangeP()</div>
@@ -1428,7 +1780,7 @@
 <div id="pressureRangeE" style="display: none;">@parameters.getPressureRangeE()</div>
 <div id="startYearMonth" style="display: none;">@parameters.getStartYearMonth()</div>
 <div id="endYearMonth" style="display: none;">@parameters.getEndYearMonth()</div>
-<div id="selectMonths" style="display: none;">@parameters.getSelectMonths()</div>
+<div id="selectMonths" style="display: none;" >@parameters.getSelectMonths()</div>
 <div id="monthsPara" style="display: none;">@parameters.getMonth()</div>
 <div id="startLat" style="display: none;">@parameters.getStartLat()</div>
 <div id="endLat" style="display: none;">@parameters.getEndLat()</div>
@@ -1437,7 +1789,7 @@
 <div id="div_X" style="display: none;">@parameters.getX()</div>
 <div id="div_Y" style="display: none;">@parameters.getY()</div>
 <div id="div_Z" style="display: none;">@parameters.getZ()</div>
-<div id="binMin" style="display: none;">@parameters.getBin_min()</div>
+<div id="binMin" style="display: none;" >@parameters.getBin_min()</div>
 <div id="binMax" style="display: none;">@parameters.getBin_max()</div>
 <div id="binNum" style="display: none;">@parameters.getBin_n()</div>
 <div id="executionPurpose" style="display: none;">@parameters.getExecutionPurpose()</div>
@@ -1445,317 +1797,352 @@
 <div id="dataURL" style="display: none;">@parameters.getDataURL()</div>
 <div id="serviceResponseText" style="display: none;">@parameters.getServiceResponseText()</div>
 <table border="1" align="center">
-	<tr>
-		<td colspan="4">
-			<center>
-				<b>Service: Conditional Sampling with One Variable</b><br>
-				<br> This service sorts one variable by the values of another
-				variable (environmental condition, e.g. SST) and displays the
-				averaged value of the first variable as a function of the bin value
-				of the second variable. If the first variable is a two-dimensional
-				variable, the plot will be a X-Y plot. If the first variable is a
-				three-dimensional variable, the plot will be a colored profile
-				image. <br>
-				<br>
-			</center>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2">
-			<center>Physical Variable (sampled variable)</center>
-		</td>
-		<td colspan="2">
-			<center>Environmental Variable (sampling variable)</center>
-		</td>
-	</tr>
-	<tr>
-		<td>source:</td>
-		<td><select name="data1" , id="data1" onchange="select_data1(1)">
-				<optgroup label="Model: Historical">
-					<option selected="CCCMA/CANESM2">CCCMA/CANESM2</option>
-					<option>GFDL/ESM2G</option>
-					<option>GISS/E2-H</option>
-					<option>GISS/E2-R</option>
-					<option>NCAR/CAM5</option>
-					<option>NCC/NORESM</option>
-					<option>UKMO/HadGEM2-ES</option>
-				</optgroup>
-				<optgroup label="Model: AMIP">
-					<option>CCCMA/CANAM4</option>
-					<option>CSIRO/MK3.6</option>
-					<option>GFDL/CM3</option>
-					<option>IPSL/CM5A-LR</option>
-					<option>MIROC/MIROC5</option>
-					<option>UKMO/HadGEM2-A</option>
-				</optgroup>
-				<optgroup label="Observation">
-					<option>NASA/MODIS</option>
-					<option>NASA/AMSRE</option>
-					<option>NASA/TRMM</option>
-					<option>NASA/GPCP</option>
-					<option>NASA/QuikSCAT</option>
-					<option>NASA/AVISO</option>
-					<option>NASA/GRACE</option>
-					<option>NOAA/NODC</option>
-					<option>NASA/CERES</option>
-					<option>NASA/AIRS</option>
-					<option>NASA/MLS</option>
-					<option>ARGO/ARGO</option>
-				</optgroup>
-				<optgroup label="Reanalysis">
-					<option>ECMWF/interim</option>
-				</optgroup>
-		</select></td>
-		<td>source:</td>
-		<td><select name="data2" , id="data2" onchange="select_data1(2)">
-				<optgroup label="Model: Historical">
-					<option selected="CCCMA/CANESM2">CCCMA/CANESM2</option>
-					<option>GFDL/ESM2G</option>
-					<option>GISS/E2-H</option>
-					<option>GISS/E2-R</option>
-					<option>NCAR/CAM5</option>
-					<option>NCC/NORESM</option>
-					<option>UKMO/HadGEM2-ES</option>
-				</optgroup>
-				<optgroup label="Model: AMIP">
-					<option>CCCMA/CANAM4</option>
-					<option>CSIRO/MK3.6</option>
-					<option>GFDL/CM3</option>
-					<option>IPSL/CM5A-LR</option>
-					<option>MIROC/MIROC5</option>
-					<option>UKMO/HadGEM2-A</option>
-				</optgroup>
-				<optgroup label="Observation">
-					<option>NASA/MODIS</option>
-					<option>NASA/AMSRE</option>
-					<option>NASA/TRMM</option>
-					<option>NASA/GPCP</option>
-					<option>NASA/QuikSCAT</option>
-					<option>NASA/AVISO</option>
-					<option>NASA/GRACE</option>
-					<option>NOAA/NODC</option>
-					<option>NASA/CERES</option>
-					<option>NASA/AIRS</option>
-					<option>NASA/MLS</option>
-					<option>ARGO/ARGO</option>
-				</optgroup>
-				<optgroup label="Reanalysis">
-					<option>ECMWF/interim</option>
-				</optgroup>
-		</select></td>
-	</tr>
-	<tr>
-		<td>variable name:</td>
-		<td><select name="var1" , id="var1" onchange="select_var1(1)">
-				<option>Precipitation Flux</option>
-				<option>Total Cloud Fraction</option>
-				<option>Surface Temperature</option>
-				<option>Sea Surface Temperature</option>
-				<option>Eastward Near-Surface Wind</option>
-				<option>Northward Near-Surface Wind</option>
-				<option>Near-Surface Wind Speed</option>
-				<option>Sea Surface Height</option>
-				<option>Leaf Area Index</option>
-				<option>Equivalent Water Height Over Land</option>
-				<option>Equivalent Water Height Over Ocean</option>
-				<option>Ocean Heat Content Anomaly within 700 m Depth</option>
-				<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
-				<option>Surface Downwelling Longwave Radiation</option>
-				<option>Surface Downwelling Shortwave Radiation</option>
-				<option>Surface Upwelling Longwave Radiation</option>
-				<option>Surface Upwelling Shortwave Radiation</option>
-				<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
-				<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
-				<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
-				<option>TOA Incident Shortwave Radiation</option>
-				<option>TOA Outgoing Longwave Radiation</option>
-				<option>TOA Outgoing Shortwave Radiation</option>
-				<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
-				<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
-				<option>Air Temperature</option>
-				<option>Specific Humidity</option>
-				<option>Cloud Ice Water Content</option>
-				<option>Cloud Liquid Water Content</option>
-				<option>Ocean Temperature</option>
-				<option>Ocean Salinity</option>
-				<option>Vertical Wind Velocity</option>
-				<option>Relative Humidity</option>
-		</select></td>
-		<td>variable name:</td>
-		<td><select name="var2" , id="var2" onchange="select_var1(2)">
-				<option>Precipitation Flux</option>
-				<option>Total Cloud Fraction</option>
-				<option>Surface Temperature</option>
-				<option>Sea Surface Temperature</option>
-				<option>Eastward Near-Surface Wind</option>
-				<option>Northward Near-Surface Wind</option>
-				<option>Near-Surface Wind Speed</option>
-				<option>Sea Surface Height</option>
-				<option>Leaf Area Index</option>
-				<option>Equivalent Water Height Over Land</option>
-				<option>Equivalent Water Height Over Ocean</option>
-				<option>Ocean Heat Content Anomaly within 700 m Depth</option>
-				<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
-				<option>Surface Downwelling Longwave Radiation</option>
-				<option>Surface Downwelling Shortwave Radiation</option>
-				<option>Surface Upwelling Longwave Radiation</option>
-				<option>Surface Upwelling Shortwave Radiation</option>
-				<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
-				<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
-				<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
-				<option>TOA Incident Shortwave Radiation</option>
-				<option>TOA Outgoing Longwave Radiation</option>
-				<option>TOA Outgoing Shortwave Radiation</option>
-				<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
-				<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
-				<option>Air Temperature</option>
-				<option>Specific Humidity</option>
-				<option>Cloud Ice Water Content</option>
-				<option>Cloud Liquid Water Content</option>
-				<option>Ocean Temperature</option>
-				<option>Ocean Salinity</option>
-				<option>Vertical Wind Velocity</option>
-				<option>Relative Humidity</option>
-		</select></td>
-	</tr>
-	<tr>
-		<td>atmosphere pressure range (hPa) <br> or ocean pressure
-			range (dbar):
-		</td>
-		<td><input id="pres1" value="200, 900" alt="pressure" /></td>
-		<td>atmosphere pressure level (hPa) <br> or ocean pressure
-			level (dbar):
-		</td>
-		<td><input id="pres2" value="500" alt="pressure" /></td>
-	</tr>
-	<tr>
-	</tr>
-	<tr>
-		<td>start year-month:</td>
-		<td><input id="t0" value="2004-01" alt="start" /></td>
-		<td>end year-month:</td>
-		<td><input id="t1" value="2004-12" alt="end" /></td>
-	</tr>
-	<tr>
-		<td>select months:</td>
-		<td><select name="months" id="months" onchange="select_months()">
-				<option id="all">select all</option>
-				<option id="none">select none</option>
-				<option id="summer">Summer:Jun-Jul-Aug</option>
-				<option id="autum">Autumn:Sep-Oct-Nov</option>
-				<option id="winter">Winter:Dec-Jan-Feb</option>
-				<option id="spring">Spring:Mar-Apr-May</option>
-		</select></td>
-		<td></td>
-		<td>
-	</tr>
-	<tr>
-		<td><label><input type="checkbox" name="option1" id="Jan"
-				value="Jan" /> Jan<br></label> <label><input type="checkbox"
-				name="option1" id="Feb" value="Feb" /> Feb<br></label> <label><input
-				type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Apr"
-				value="Apr" /> Apr<br></label> <label><input type="checkbox"
-				name="option1" id="May" value="May" /> May<br></label> <label><input
-				type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Jul"
-				value="Jul" /> Jul<br></label> <label><input type="checkbox"
-				name="option1" id="Aug" value="Aug" /> Aug<br></label> <label><input
-				type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label>
-		</td>
-		<td><label><input type="checkbox" name="option1" id="Oct"
-				value="Oct" /> Oct<br></label> <label><input type="checkbox"
-				name="option1" id="Nov" value="Nov" /> Nov<br></label> <label><input
-				type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label>
-		</td>
-	</tr>
-	<tr>
-		<td>start lat (deg):</td>
-		<td><input id="lat0" value="-90" /></td>
-		<td>end lat (deg):</td>
-		<td><input id="lat1" value="90" /></td>
-	</tr>
-	<tr>
-		<td>start lon (deg):</td>
-		<td><input id="lon0" value="0" /></td>
-		<td>end lon (deg):</td>
-		<td><input id="lon1" value="360" /></td>
-	</tr>
-	<tr>
-		<td colspan="1" rowspan="3">display option:</td>
-		<td colspan="3">
-			<form>
-				X-axis (sampling variable) scale: <input type="radio" name="scale1"
-					value="linear" id="radioXLin" checked>linear <input
-					type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="3">
-			<form>
-				Y-axis (sampled variable or pressure) scale: <input type="radio"
-					name="scale1" value="linear" id="radioYLin" checked>linear
-				<input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic
-			</form>
-	</tr>
-	<tr>
-		<td colspan="3">
-			<form>
-				Z-axis (color) scale: <input type="radio" name="scale1"
-					value="linear" id="radioZLin" checked>linear <input
-					type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="1" rowspan="2">sampling variable binning
-			specification:</td>
-		<td colspan="3">
-			<form>
-				default: <input onclick="setDefault()" type="radio" name="default1"
-					value="" id="radioDef" checked>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="3">customized: <input onclick="setCustomized()"
-			type="radio" name="default1" value="" id="radioCus"> Min: <input
-			id="min1" value="" alt="" /> Max: <input id="max1" value="" alt="" />
-			number of bins: <input id="bins1" value="" alt="" />
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="1">Execution purpose</td>
-		<td colspan="3">
-			<form>
-				<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
-			</form>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2" align="center"><input id="conditionalSamp"
-			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">Image Here</div>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="4" align="center"><textarea readonly id="data_url"
-				cols="150" rows="2">Data URL Here</textarea></td>
-	</tr>
-	<tr>
-		<td colspan="4" align="center"><textarea id="Response" cols="150"
-				rows="6">Service Response Text Here</textarea></td>
-	</tr>
+
+<tr>
+<td colspan="4">
+<center>
+<b>Service: Conditional Sampling with One Variable</b><br><br>
+This service sorts one variable by the values of another variable (environmental condition, e.g. SST) 
+and displays the averaged value of the first variable as a function of the bin value of the second variable.
+If the first variable is a two-dimensional variable, the plot will be a X-Y plot. 
+If the first variable is a three-dimensional variable, the plot will be a colored profile image. <br><br> 
+</center>
+</td>
+</tr>
+
+<tr>
+<td colspan="2">
+<center>
+Physical Variable (sampled variable)
+</center>
+</td>
+
+<td colspan="2">
+<center>
+Environmental Variable (sampling variable)
+</center>
+</td>
+</tr>
+
+<tr>
+<td>source:</td><td><select name="data1", id="data1" onchange="select_data1(1)">
+<optgroup label="Model: Historical">
+<option selected="CCCMA/CANESM2">CCCMA/CANESM2</option>
+<option>GFDL/ESM2G</option>
+<option>GISS/E2-H</option>
+<option>GISS/E2-R</option>
+<option>NCAR/CAM5</option>
+<option>NCC/NORESM</option>
+<option>UKMO/HadGEM2-ES</option>
+</optgroup>
+<optgroup label="Model: AMIP">
+<option>CCCMA/CANAM4</option>
+<option>CSIRO/MK3.6</option>
+<option>GFDL/CM3</option>
+<option>IPSL/CM5A-LR</option>
+<option>MIROC/MIROC5</option>
+<option>UKMO/HadGEM2-A</option>
+</optgroup>
+<!-- <option>NASA/obs4MIPs</option>  -->
+<optgroup label="Observation">
+<option>NASA/MODIS</option>
+<option>NASA/AMSRE</option>
+<option>NASA/TRMM</option>
+<option>NASA/GPCP</option>
+<option>NASA/QuikSCAT</option>
+<option>NASA/AVISO</option>
+<option>NASA/GRACE</option>
+<option>NOAA/NODC</option>
+<option>NASA/CERES</option>
+<option>NASA/AIRS</option>
+<option>NASA/MLS</option>
+<option>ARGO/ARGO</option>
+</optgroup>
+<optgroup label="Reanalysis">
+<option>ECMWF/interim</option>
+</optgroup>
+</select></td>
+
+<td>source:</td><td><select name="data2", id="data2" onchange="select_data1(2)">
+<optgroup label="Model: Historical">
+<option selected="CCCMA/CANESM2">CCCMA/CANESM2</option>
+<option>GFDL/ESM2G</option>
+<option>GISS/E2-H</option>
+<option>GISS/E2-R</option>
+<option>NCAR/CAM5</option>
+<option>NCC/NORESM</option>
+<option>UKMO/HadGEM2-ES</option>
+</optgroup>
+<optgroup label="Model: AMIP">
+<option>CCCMA/CANAM4</option>
+<option>CSIRO/MK3.6</option>
+<option>GFDL/CM3</option>
+<option>IPSL/CM5A-LR</option>
+<option>MIROC/MIROC5</option>
+<option>UKMO/HadGEM2-A</option>
+</optgroup>
+<!-- <option>NASA/obs4MIPs</option>  -->
+<optgroup label="Observation">
+<option>NASA/MODIS</option>
+<option>NASA/AMSRE</option>
+<option>NASA/TRMM</option>
+<option>NASA/GPCP</option>
+<option>NASA/QuikSCAT</option>
+<option>NASA/AVISO</option>
+<option>NASA/GRACE</option>
+<option>NOAA/NODC</option>
+<option>NASA/CERES</option>
+<option>NASA/AIRS</option>
+<option>NASA/MLS</option>
+<option>ARGO/ARGO</option>
+</optgroup>
+<optgroup label="Reanalysis">
+<option>ECMWF/interim</option>
+</optgroup>
+</select></td>
+
+</tr>
+
+<tr>
+
+<td>variable name:</td><td><select name="var1", id="var1" onchange="select_var1(1)">
+<option>Precipitation Flux</option>
+<option>Total Cloud Fraction</option>
+<option>Surface Temperature</option>
+<option>Sea Surface Temperature</option>
+<option>Eastward Near-Surface Wind</option>
+<option>Northward Near-Surface Wind</option>
+<option>Near-Surface Wind Speed</option>
+<option>Sea Surface Height</option>
+<option>Leaf Area Index</option>
+<option>Equivalent Water Height Over Land</option>
+<option>Equivalent Water Height Over Ocean</option>
+<option>Ocean Heat Content Anomaly within 700 m Depth</option>
+<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
+<option>Surface Downwelling Longwave Radiation</option>
+<option>Surface Downwelling Shortwave Radiation</option>
+<option>Surface Upwelling Longwave Radiation</option>
+<option>Surface Upwelling Shortwave Radiation</option>
+<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
+<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
+<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
+<option>TOA Incident Shortwave Radiation</option>
+<option>TOA Outgoing Longwave Radiation</option>
+<option>TOA Outgoing Shortwave Radiation</option>
+<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
+<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
+<option>Air Temperature</option>
+<option>Specific Humidity</option>
+<option>Cloud Ice Water Content</option>
+<option>Cloud Liquid Water Content</option>
+<option>Ocean Temperature</option>
+<option>Ocean Salinity</option>
+<option>Vertical Wind Velocity</option>
+<option>Relative Humidity</option>
+</select>
+</td>
+
+
+<td>variable name:</td><td><select name="var2", id="var2" onchange="select_var1(2)">
+<option>Precipitation Flux</option>
+<option>Total Cloud Fraction</option>
+<option>Surface Temperature</option>
+<option>Sea Surface Temperature</option>
+<option>Eastward Near-Surface Wind</option>
+<option>Northward Near-Surface Wind</option>
+<option>Near-Surface Wind Speed</option>
+<option>Sea Surface Height</option>
+<option>Leaf Area Index</option>
+<option>Equivalent Water Height Over Land</option>
+<option>Equivalent Water Height Over Ocean</option>
+<option>Ocean Heat Content Anomaly within 700 m Depth</option>
+<option>Ocean Heat Content Anomaly within 2000 m Depth</option>
+<option>Surface Downwelling Longwave Radiation</option>
+<option>Surface Downwelling Shortwave Radiation</option>
+<option>Surface Upwelling Longwave Radiation</option>
+<option>Surface Upwelling Shortwave Radiation</option>
+<option>Surface Downwelling Clear-Sky Longwave Radiation</option>
+<option>Surface Downwelling Clear-Sky Shortwave Radiation</option>
+<option>Surface Upwelling Clear-Sky Shortwave Radiation</option>
+<option>TOA Incident Shortwave Radiation</option>
+<option>TOA Outgoing Longwave Radiation</option>
+<option>TOA Outgoing Shortwave Radiation</option>
+<option>TOA Outgoing Clear-Sky Longwave Radiation</option>
+<option>TOA Outgoing Clear-Sky Shortwave Radiation</option>
+<option>Air Temperature</option>
+<option>Specific Humidity</option>
+<option>Cloud Ice Water Content</option>
+<option>Cloud Liquid Water Content</option>
+<option>Ocean Temperature</option>
+<option>Ocean Salinity</option>
+<option>Vertical Wind Velocity</option>
+<option>Relative Humidity</option>
+</select>
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+atmosphere pressure range (hPa) <br> or ocean pressure range (dbar):
+</td>
+<td>
+<input id="pres1" value="200, 900" alt="pressure"/>
+</td>
+
+<td>
+atmosphere pressure level (hPa) <br> or ocean pressure level (dbar):
+</td>
+<td>
+<input id="pres2" value="500" alt="pressure"/>
+</td>
+
+</tr>
+
+<tr>
+</tr>
+
+<tr>
+<td>start year-month:</td><td><input id="t0" value="2004-01" alt="start"/></td>
+<td>end year-month:</td><td><input id="t1" value="2004-12" alt="end"/></td>
+</tr>
+
+
+<tr>
+<td>select months:</td>
+<td><select name="months" id="months" onchange="select_months()">
+<option id="all">select all</option>
+<option id="none">select none</option>
+<option id="summer">Summer:Jun-Jul-Aug</option>
+<option id="autum">Autumn:Sep-Oct-Nov</option>
+<option id="winter">Winter:Dec-Jan-Feb</option>
+<option id="spring">Spring:Mar-Apr-May</option> </select>
+</td>
+<td>
+</td>
+<td>
+</tr>
+
+<tr>
+<td>
+<label><input type="checkbox" name="option1" id="Jan" value="Jan" /> Jan<br></label>
+<label><input type="checkbox" name="option1" id="Feb" value="Feb" /> Feb<br></label>
+<label><input type="checkbox" name="option1" id="Mar" value="Mar" /> Mar<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Apr" value="Apr" /> Apr<br></label>
+<label><input type="checkbox" name="option1" id="May" value="May" /> May<br></label>
+<label><input type="checkbox" name="option1" id="Jun" value="Jun" /> Jun<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Jul" value="Jul" /> Jul<br></label>
+<label><input type="checkbox" name="option1" id="Aug" value="Aug" /> Aug<br></label>
+<label><input type="checkbox" name="option1" id="Sep" value="Sep" /> Sep<br></label>
+</td>
+<td>
+<label><input type="checkbox" name="option1" id="Oct" value="Oct" /> Oct<br></label>
+<label><input type="checkbox" name="option1" id="Nov" value="Nov" /> Nov<br></label>
+<label><input type="checkbox" name="option1" id="Dec" value="Dec" /> Dec<br></label>
+</td>
+</tr>
+
+
+<tr>
+<td>start lat (deg):</td><td><input id="lat0" value="-90"/></td>
+<td>end lat (deg):</td><td><input id="lat1" value="90"/></td>
+</tr>
+
+<tr>
+<td>start lon (deg):</td><td><input id="lon0" value="0"/></td>
+<td>end lon (deg):</td><td><input id="lon1" value="360"/></td>
+</tr>
+
+
+<tr>
+<td colspan="1" rowspan="3">
+display option:
+</td>
+<td colspan="3">
+<form>X-axis (sampling variable) scale: <input type="radio" name="scale1" value="linear" id="radioXLin" checked>linear
+<input type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic
+</form>
+</td>
+</tr>
+
+<tr>
+<td colspan="3">
+<form>Y-axis (sampled variable or pressure) scale: <input type="radio" name="scale1" value="linear" id="radioYLin" checked>linear
+<input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic
+</form>
+</tr>
+
+<tr>
+<td colspan="3">
+<form>Z-axis (color) scale: <input type="radio" name="scale1" value="linear" id="radioZLin" checked>linear
+<input type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic
+</form>
+</td>
+</tr>
+
+
+<tr>
+<td colspan="1" rowspan="2">
+sampling variable binning specification:
+</td>
+<td colspan="3">
+<form>default: <input onclick="setDefault()" type="radio" name="default1" value="" id="radioDef" checked>
+</td>
+</tr>
+<tr>
+<td colspan="3">
+customized: <input onclick="setCustomized()" type="radio" name="default1" value="" id="radioCus">
+Min: <input id="min1" value="" alt=""/> 
+Max: <input id="max1" value="" alt=""/>
+number of bins: <input id="bins1" value="" alt=""/>
+</form> 
+</td>
+
+</tr>
+
+<tr>
+<td colspan="1">
+Execution purpose
+</td>
+<td colspan="3">
+<form>
+<textarea name="purpose" id="purpose" rows="4" cols="50"> </textarea>
+</form>
+</td>
+</tr>
+
+
+<tr>
+<td colspan="2" align="center"><input id="conditionalSamp" 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">Image Here</div>
+</td>
+</tr>
+
+<tr>
+<td colspan="4" align="center">
+<textarea readonly id="data_url" cols="150" rows="2">Data URL Here</textarea>
+</td>
+</tr>
+
+<tr>
+<td colspan="4" align="center">
+<textarea id="Response" cols="150" rows="6">Service Response Text Here</textarea>
+</td>
+</tr>
+
 </table>
-}
+}
\ No newline at end of file