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

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> -->
   <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
   <script type="text/javascript" src="js/jquery.flot.min.js"></script>
   <script type="text/javascript" src="js/json2.js"></script>
   <script type="text/javascript" src="js/xmisc.js"></script>
   <script type="text/javascript">

     var Response = null;
     var variable = "";

     // called on load or reload
     window.onload = function() {
       select_all_months();
       select_data();
       select_var();
       // no data to download yet
       disable_download_button();
     }


     // disable download data button
     function disable_download_button()
     {
       var x=document.getElementById("download_data");
       x.disabled=true;
     }


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


     // select all months in the checkboxes
     function select_all_months()
     {
         document.getElementById('Jan').checked = true;
         document.getElementById('Feb').checked = true;
         document.getElementById('Mar').checked = true;
         document.getElementById('Apr').checked = true;
         document.getElementById('May').checked = true;
         document.getElementById('Jun').checked = true;
         document.getElementById('Jul').checked = true;
         document.getElementById('Aug').checked = true;
         document.getElementById('Sep').checked = true;
         document.getElementById('Oct').checked = true;
         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 &&
            document.getElementById('Feb').checked == false &&
            document.getElementById('Mar').checked == false &&
            document.getElementById('Apr').checked == false &&
            document.getElementById('May').checked == false &&
            document.getElementById('Jun').checked == false &&
            document.getElementById('Jul').checked == false &&
            document.getElementById('Aug').checked == false &&
            document.getElementById('Sep').checked == false &&
            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;
         document.getElementById('Feb').checked = false;
         document.getElementById('Mar').checked = false;
         document.getElementById('Apr').checked = false;
         document.getElementById('May').checked = false;
         document.getElementById('Jun').checked = false;
         document.getElementById('Jul').checked = false;
         document.getElementById('Aug').checked = false;
         document.getElementById('Sep').checked = false;
         document.getElementById('Oct').checked = false;
         document.getElementById('Nov').checked = false;
         document.getElementById('Dec').checked = false;
     }

     // enable all vars in dropdown menu
     function reset_vars()
     {
       var x=document.getElementById("var");

       x.options[0].disabled=false;
       x.options[1].disabled=false;
       x.options[2].disabled=false;
       x.options[3].disabled=false;
       x.options[4].disabled=false;
       x.options[5].disabled=false;
       x.options[6].disabled=false;
       x.options[7].disabled=false;
     }

     // form variable string based on "var" dropdown selection
     function select_var()
     {
       var var_string = $("#var").val();

       // disable the download button because of this change
       disable_download_button();

       if (var_string == "Air Temperature")
         variable = "ta";
       else if (var_string == "Specific Humidity")
         variable = "hus";
       else if (var_string == "Cloud Ice Water Content")
         variable = "cli";
       else if (var_string == "Cloud Liquid Water Content")
         variable = "clw";
       else if (var_string == "Ocean Temperature")
         variable = "ot";
       else if (var_string == "Ocean Salinity")
         variable = "os";
       else if (var_string == "Vertical Wind Velocity")
         variable = "wap";
       else if (var_string == "Relative Humidity")
         variable = "hur";

       // alert("variable: " + variable)
     }

     // set up "var" dropdown based status of "data" dropdown
     function select_data()
     {
       var data_string = $("#data").val();
       var x=document.getElementById("var");

       // disable the download button because of this change
       disable_download_button();

       // enable all options in "var" dropdown first
       reset_vars();

       // alert(data_string);

       // disable corresponding "var" options
       if (data_string == "NASA/AIRS") {
         x.options[0].selected=true;
         //x.options[1].selected=true;
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].disabled=true;
         x.options[5].disabled=true;
         x.options[6].disabled=true;
         x.options[7].disabled=true;
       }
       else if (data_string == "NASA/MLS") {
         x.options[0].selected=true;
         //x.options[1].selected=true;
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].disabled=true;
         x.options[5].disabled=true;
         x.options[6].disabled=true;
         x.options[7].disabled=true;
       }
       else if (data_string == "ARGO/ARGO") {
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].selected=true;
         //x.options[5].selected=true;
         x.options[6].disabled=true;
         x.options[7].disabled=true;
       }
       else if (data_string == "ECMWF/interim") {
         x.options[0].disabled=true;
         x.options[1].disabled=true;
         x.options[2].disabled=true;
         x.options[3].disabled=true;
         x.options[4].disabled=true;
         x.options[5].disabled=true;
         //x.options[6].disabled=true;
         //x.options[7].disabled=true;
         x.options[6].selected=true;
       }
       else {
         x.options[0].selected=true;
         //x.options[1].selected=true;
         //x.options[2].selected=true;
         //x.options[3].selected=true;
         x.options[4].disabled=true;
         x.options[5].disabled=true;
       }

       // form variable string
       select_var();
     }

     // 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);
       });


       $("#threedvarzonalmean").click(function(event) {
 	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/threeDimZonalMean?model=ukmo_hadgem2-a&var=ts&start_time=199001&end_time=199512&lat1=-29&lat2=29&pres1=90&pres2=20months=1,2,4,5,6,10,12

         // form url string
         var url = "http://" + window.location.hostname + ":9002/svc/threeDimZonalMean?";
         // alert(url);

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

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

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

         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 lat0 = $("#lat0").val();
         var lat1 = $("#lat1").val();

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

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

         var pres = $("#pres").val();
         var splitty = pres.split(',');
         if (splitty.length != 2) {
           alert("pressure level range needs to be two values separated by comma.");
           return;
         }
         else {
           pres1 = splitty[0];
           pres2 = splitty[1];

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

           // when variable is the 3D Ocean Salinity or Ocean Temperature
           if (variable == 'ot' || variable == 'os') {
             pres1 = pres1 * 10000;  // convert from dbar on GUI
             pres2 = pres2 * 10000;  // convert from dbar on GUI
           }
           // when variable is 2D
           else {
             pres1 = pres1 * 100;  // convert from hPa on GUI
             pres2 = pres2 * 100;  // convert from hPa on GUI
           }
         }

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

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

         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);

         arglist = arglist.concat("&scale=");
         var y = document.getElementById("radioLin").checked;
         var yval;
         var z = document.getElementById("radioLin2").checked;
         var zval;
         // alert(y);
         if (y == true)
           yval = 0;
         else
           yval = 2;

         if (z == true)
           zval = 0;
         else
           zval = 4;

         var scale1 =  yval + zval;
         var scale1_str =  scale1.toString();

         arglist = arglist.concat(scale1_str);

         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/time_bounds?";
         var arglistTB = "";
         arglistTB = arglistTB.concat("serviceType=");
         arglistTB = arglistTB.concat("1");
         arglistTB = arglistTB.concat("&source=");
         arglistTB = arglistTB.concat(d1);
         arglistTB = arglistTB.concat("&var=");
         arglistTB = arglistTB.concat(variable);
         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 tb = data.time_bounds;
                 var bds = String(tb).split(",");
                 // alert("tb: " + tb);
                 // alert("bds: " + bds);
                 var lowerT = parseInt(bds[0]);
                 var upperT = parseInt(bds[1]);
                 // alert("lowerT: " + lowerT);
                 // alert("upperT: " + upperT);
                 var t0I = parseInt(t0);
                 var t1I = parseInt(t1);
                 // alert("t0: " + t0I);
                 // alert("t1: " + t1I);

                 if ( lowerT == 0 && upperT ==0 ) {
                   alert("We do not have data for this source and variable configuration.");
                   return;
                 }

                 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);
                 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 html1 = "<img src='"+data.url+"' width='680'/>";
                 // alert(html1);
                 $("#Image").html(html1);

                 // 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>

 <p>

 <table border="1" WIDTH="800">

 <tr>
 <td colspan="4">
 <center>
 <b>Service: 3-D Variable Zonal Mean</b> <br><br>
 This service generates a contour plot of zonal-mean vertical profiles of a 3-dimensional variable. <br>
 Select a data source, a variable name, a time range, and a pressure range below.<br><br>

 </center>
 </td>
 </tr>

 <tr>
 <td>data source:</td><td><select name="data", id="data" onchange="select_data()">
 <optgroup label="Observation">
 <option selected="NASA/AIRS">NASA/AIRS</option>
 <option>NASA/MLS</option>
 <option>ARGO/ARGO</option>
 </optgroup>
 <optgroup label="Model: Historical">
 <option>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="Reanalysis">
 <option>ECMWF/interim</option>
 </select></td>

 <td>variable name:</td><td><select name="var", id="var" onchange="select_var()">
 <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>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>
 atmosphere pressure range (hPa) <br> or ocean pressure range (dbar):
 </td>
 <td><input id="pres" value="200,900" alt="pressure"/></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 colspan="1">
 pressure level scale:
 </td>
 <td colspan="1">
 <form> <input type="radio" name="scale1" value="linear" id="radioLin">linear
 <input type="radio" name="scale1" value="logarithmic" id="radioLog" checked>logarithmic
 </form>
 </td>
 <td colspan="1">
 color scale:
 </td>
 <td colspan="1">
 <form> <input type="radio" name="scale2" value="linear" id="radioLin2" checked>linear
 <input type="radio" name="scale2" value="logarithmic" id="radioLog2">logarithmic
 </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="threedvarzonalmean" type="submit" value="            Get  Plot            " 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="89" rows="2">Data URL Here</textarea>
 </td>
 </tr>
 <tr>
 <td colspan="4" align="center">
 <textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea>
 </td>
 </tr>
 </p>

 </table>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> -->
	<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.flot.min.js"></script>
	<script type="text/javascript" src="js/json2.js"></script>
	<script type="text/javascript" src="js/xmisc.js"></script>
	<script type="text/javascript">

	var Response = null;
	var variable = "";

	// called on load or reload
	window.onload = function() {
	select_all_months();
	select_data();
	select_var();
	// no data to download yet
	disable_download_button();
	}


	// disable download data button
	function disable_download_button()
	{
	var x=document.getElementById("download_data");
	x.disabled=true;
	}


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


	// select all months in the checkboxes
	function select_all_months()
	{
	document.getElementById('Jan').checked = true;
	document.getElementById('Feb').checked = true;
	document.getElementById('Mar').checked = true;
	document.getElementById('Apr').checked = true;
	document.getElementById('May').checked = true;
	document.getElementById('Jun').checked = true;
	document.getElementById('Jul').checked = true;
	document.getElementById('Aug').checked = true;
	document.getElementById('Sep').checked = true;
	document.getElementById('Oct').checked = true;
	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 &&
	document.getElementById('Feb').checked == false &&
	document.getElementById('Mar').checked == false &&
	document.getElementById('Apr').checked == false &&
	document.getElementById('May').checked == false &&
	document.getElementById('Jun').checked == false &&
	document.getElementById('Jul').checked == false &&
	document.getElementById('Aug').checked == false &&
	document.getElementById('Sep').checked == false &&
	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;
	document.getElementById('Feb').checked = false;
	document.getElementById('Mar').checked = false;
	document.getElementById('Apr').checked = false;
	document.getElementById('May').checked = false;
	document.getElementById('Jun').checked = false;
	document.getElementById('Jul').checked = false;
	document.getElementById('Aug').checked = false;
	document.getElementById('Sep').checked = false;
	document.getElementById('Oct').checked = false;
	document.getElementById('Nov').checked = false;
	document.getElementById('Dec').checked = false;
	}

	// enable all vars in dropdown menu
	function reset_vars()
	{
	var x=document.getElementById("var");

	x.options[0].disabled=false;
	x.options[1].disabled=false;
	x.options[2].disabled=false;
	x.options[3].disabled=false;
	x.options[4].disabled=false;
	x.options[5].disabled=false;
	x.options[6].disabled=false;
	x.options[7].disabled=false;
	}

	// form variable string based on "var" dropdown selection
	function select_var()
	{
	var var_string = $("#var").val();

	// disable the download button because of this change
	disable_download_button();

	if (var_string == "Air Temperature")
	variable = "ta";
	else if (var_string == "Specific Humidity")
	variable = "hus";
	else if (var_string == "Cloud Ice Water Content")
	variable = "cli";
	else if (var_string == "Cloud Liquid Water Content")
	variable = "clw";
	else if (var_string == "Ocean Temperature")
	variable = "ot";
	else if (var_string == "Ocean Salinity")
	variable = "os";
	else if (var_string == "Vertical Wind Velocity")
	variable = "wap";
	else if (var_string == "Relative Humidity")
	variable = "hur";

	// alert("variable: " + variable)
	}

	// set up "var" dropdown based status of "data" dropdown
	function select_data()
	{
	var data_string = $("#data").val();
	var x=document.getElementById("var");

	// disable the download button because of this change
	disable_download_button();

	// enable all options in "var" dropdown first
	reset_vars();

	// alert(data_string);

	// disable corresponding "var" options
	if (data_string == "NASA/AIRS") {
	x.options[0].selected=true;
	//x.options[1].selected=true;
	x.options[2].disabled=true;
	x.options[3].disabled=true;
	x.options[4].disabled=true;
	x.options[5].disabled=true;
	x.options[6].disabled=true;
	x.options[7].disabled=true;
	}
	else if (data_string == "NASA/MLS") {
	x.options[0].selected=true;
	//x.options[1].selected=true;
	x.options[2].disabled=true;
	x.options[3].disabled=true;
	x.options[4].disabled=true;
	x.options[5].disabled=true;
	x.options[6].disabled=true;
	x.options[7].disabled=true;
	}
	else if (data_string == "ARGO/ARGO") {
	x.options[0].disabled=true;
	x.options[1].disabled=true;
	x.options[2].disabled=true;
	x.options[3].disabled=true;
	x.options[4].selected=true;
	//x.options[5].selected=true;
	x.options[6].disabled=true;
	x.options[7].disabled=true;
	}
	else if (data_string == "ECMWF/interim") {
	x.options[0].disabled=true;
	x.options[1].disabled=true;
	x.options[2].disabled=true;
	x.options[3].disabled=true;
	x.options[4].disabled=true;
	x.options[5].disabled=true;
	//x.options[6].disabled=true;
	//x.options[7].disabled=true;
	x.options[6].selected=true;
	}
	else {
	x.options[0].selected=true;
	//x.options[1].selected=true;
	//x.options[2].selected=true;
	//x.options[3].selected=true;
	x.options[4].disabled=true;
	x.options[5].disabled=true;
	}

	// form variable string
	select_var();
	}

	// 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);
	});


	$("#threedvarzonalmean").click(function(event) {
	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/threeDimZonalMean?model=ukmo_hadgem2-a&var=ts&start_time=199001&end_time=199512&lat1=-29&lat2=29&pres1=90&pres2=20months=1,2,4,5,6,10,12

	// form url string
	var url = "http://" + window.location.hostname + ":9002/svc/threeDimZonalMean?";
	// alert(url);

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

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

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

	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 lat0 = $("#lat0").val();
	var lat1 = $("#lat1").val();

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

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

	var pres = $("#pres").val();
	var splitty = pres.split(',');
	if (splitty.length != 2) {
	alert("pressure level range needs to be two values separated by comma.");
	return;
	}
	else {
	pres1 = splitty[0];
	pres2 = splitty[1];

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

	// when variable is the 3D Ocean Salinity or Ocean Temperature
	if (variable == 'ot' \|\| variable == 'os') {
	pres1 = pres1 * 10000; // convert from dbar on GUI
	pres2 = pres2 * 10000; // convert from dbar on GUI
	}
	// when variable is 2D
	else {
	pres1 = pres1 * 100; // convert from hPa on GUI
	pres2 = pres2 * 100; // convert from hPa on GUI
	}
	}

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

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

	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);

	arglist = arglist.concat("&scale=");
	var y = document.getElementById("radioLin").checked;
	var yval;
	var z = document.getElementById("radioLin2").checked;
	var zval;
	// alert(y);
	if (y == true)
	yval = 0;
	else
	yval = 2;

	if (z == true)
	zval = 0;
	else
	zval = 4;

	var scale1 = yval + zval;
	var scale1_str = scale1.toString();

	arglist = arglist.concat(scale1_str);

	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/time_bounds?";
	var arglistTB = "";
	arglistTB = arglistTB.concat("serviceType=");
	arglistTB = arglistTB.concat("1");
	arglistTB = arglistTB.concat("&source=");
	arglistTB = arglistTB.concat(d1);
	arglistTB = arglistTB.concat("&var=");
	arglistTB = arglistTB.concat(variable);
	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 tb = data.time_bounds;
	var bds = String(tb).split(",");
	// alert("tb: " + tb);
	// alert("bds: " + bds);
	var lowerT = parseInt(bds[0]);
	var upperT = parseInt(bds[1]);
	// alert("lowerT: " + lowerT);
	// alert("upperT: " + upperT);
	var t0I = parseInt(t0);
	var t1I = parseInt(t1);
	// alert("t0: " + t0I);
	// alert("t1: " + t1I);

	if ( lowerT == 0 && upperT ==0 ) {
	alert("We do not have data for this source and variable configuration.");
	return;
	}

	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);
	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 html1 = "<img src='"+data.url+"' width='680'/>";
	// alert(html1);
	$("#Image").html(html1);

	// 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>

	<p>

	<table border="1" WIDTH="800">

	<tr>
	<td colspan="4">
	<center>
	<b>Service: 3-D Variable Zonal Mean</b> <br><br>
	This service generates a contour plot of zonal-mean vertical profiles of a 3-dimensional variable. <br>
	Select a data source, a variable name, a time range, and a pressure range below.<br><br>

	</center>
	</td>
	</tr>

	<tr>
	<td>data source:</td><td><select name="data", id="data" onchange="select_data()">
	<optgroup label="Observation">
	<option selected="NASA/AIRS">NASA/AIRS</option>
	<option>NASA/MLS</option>
	<option>ARGO/ARGO</option>
	</optgroup>
	<optgroup label="Model: Historical">
	<option>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="Reanalysis">
	<option>ECMWF/interim</option>
	</select></td>

	<td>variable name:</td><td><select name="var", id="var" onchange="select_var()">
	<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>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>
	atmosphere pressure range (hPa) <br> or ocean pressure range (dbar):
	</td>
	<td><input id="pres" value="200,900" alt="pressure"/></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 colspan="1">
	pressure level scale:
	</td>
	<td colspan="1">
	<form> <input type="radio" name="scale1" value="linear" id="radioLin">linear
	<input type="radio" name="scale1" value="logarithmic" id="radioLog" checked>logarithmic
	</form>
	</td>
	<td colspan="1">
	color scale:
	</td>
	<td colspan="1">
	<form> <input type="radio" name="scale2" value="linear" id="radioLin2" checked>linear
	<input type="radio" name="scale2" value="logarithmic" id="radioLog2">logarithmic
	</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="threedvarzonalmean" type="submit" value=" Get Plot " 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="89" rows="2">Data URL Here</textarea>
	</td>
	</tr>
	<tr>
	<td colspan="4" align="center">
	<textarea readonly id="Response" cols="89" rows="6">Service Response Text Here</textarea>
	</td>
	</tr>
	</p>

	</table>

	</body>
	</html>