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

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

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

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

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

   <title>Conditional Sampling 2 Var</title>

   <script>

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

     var naValue = "-999999";

     // called on load or reload
     window.onload = function() {
       var str1 = data_block_str(1, 3, "Physical Variable (sampled variable)",
           "range", "500,800");
       document.getElementById("dataBlock1").innerHTML = str1;

       str1 = data_block_str(2, 3, "Environmental Variable 1 (sampling variable)",
           "", "500");
       document.getElementById("dataBlock2").innerHTML = str1;

       str1 = data_block_str(3, 3, "Environmental Variable 2 (sampling variable)",
           "", "500");
       document.getElementById("dataBlock3").innerHTML = str1;

       put_data(1);
       put_data(2);
       put_data(3);
       put_var(1);
       put_var(2);
       put_var(3);
       select_var(1);
       select_var(2);
       select_var(3);
       time_range3();
       fillMonth();

       disable_download_button();

       select_all_months();
       setDefault(1);
       setDefault(2);
     }

     // disable customized input text boxes
     function setDefault(ID)
     {
        // alert("in setDefault() ... ");
        var x=document.getElementById("min"+ID);
        var y=document.getElementById("max"+ID);
        var z=document.getElementById("bins"+ID);
        x.value = "N/A";
        x.disabled=true;
        y.value = "N/A";
        y.disabled=true;
        z.value = "N/A";
        z.disabled=true;
     }

     // enable customized input text boxes
     function setCustomized(ID)
     {
        // alert("in setCustomized() ... ");
        var x=document.getElementById("min"+ID);
        var y=document.getElementById("max"+ID);
        var z=document.getElementById("bins"+ID);
        x.value = "";
        x.disabled=false;
        y.value = "";
        y.disabled=false;
        z.value = "";
        z.disabled=false;
     }

     $(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:8090/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:8090/svc/conditionalSamp?";
         var url = "http://" + window.location.hostname + ":9002/svc/conditionalSampling2Var?";
         // alert("url: " + url);

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

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

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

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

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


         var 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 pres12 = parse_pres(press_range);

         var pres1;
         var pres2;
         if (pres12 === naValue) {
           pres1 = naValue;
           pres2 = naValue;
         } else {
           split12 = pres12.split(",");
           if (split12.length != 2) {
             alert("pressure level range needs to be two values separated by comma.");
             return;
           } else {
             pres1 = split12[0];
             pres2 = split12[1];

             // when variable is the 3D Ocean Salinity or Ocean Temperature
             if (variable1 == 'ot' || variable1 == 'os') {
               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;  // convert from hPa on GUI
               pres2 = pres2 * 100;  // convert from hPa on GUI
             }
           }
         }
         //alert("pres1, pres2: " + pres1 + ", " + pres2);

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

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

         var month_str = getMonthStr();
         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 variable2 = $("#var2").val();
         arglist = arglist.concat("&var2=");
         arglist = arglist.concat(variable2);

         var d3 = $("#data3").val();
         var model3 = d3.replace("/", "_");
         model3 = model3.toLowerCase();

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

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

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

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

         var plev1 = $("#pres2").val();
         plev1 = parse_pres(plev1);

         if (plev1>0) {
           // when variable is the 3D Ocean Salinity or Ocean Temperature
           if (variable2 == 'ot' || variable2 == 'os') {
             plev1 = plev1 * 10000;  // convert from dbar on GUI
           }
           // when variable2 is 3D atmosphere var
           else {
             plev1 = plev1 * 100;  // convert from hPa on GUI
           }
         }

         arglist = arglist.concat("&env_var_plev1=");
         arglist = arglist.concat(plev1);

         var plev2 = $("#pres3").val();
         plev2 = parse_pres(plev2);
         if (plev2>0) {
           // when variable is the 3D Ocean Salinity or Ocean Temperature
           if (variable3 == 'ot' || variable3 == 'os') {
             plev2 = plev2 * 10000;  // convert from dbar on GUI
           }
           // when variable2 is 3D atmosphere var
           else {
             plev2 = plev2 * 100;  // convert from hPa on GUI
           }
         }

         arglist = arglist.concat("&env_var_plev2=");
         arglist = arglist.concat(plev2);

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

         var binstate1 = document.getElementById('radioDef1').checked;

         var binMin1, binMax1, numBins1;

         if (binstate1 == true) { // default
           binMin1 = naValue;
           binMax1 = naValue;
           numBins1 = naValue;
         }
         else { // customized
           binMin1 = $("#min1").val();
           binMax1 = $("#max1").val();
           numBins1 = $("#bins1").val();
         }

         arglist = arglist.concat("&bin_min1=");
         arglist = arglist.concat(binMin1);
         arglist = arglist.concat("&bin_max1=");
         arglist = arglist.concat(binMax1);
         arglist = arglist.concat("&bin_n1=");
         arglist = arglist.concat(numBins1);

         var binstate2 = document.getElementById('radioDef2').checked;

         var binMin2, binMax2, numBins2;

         if (binstate2 == true) { // default
           binMin2 = naValue;
           binMax2 = naValue;
           numBins2 = naValue;
         }
         else { // customized
           binMin2 = $("#min2").val();
           binMax2 = $("#max2").val();
           numBins2 = $("#bins2").val();
         }

         arglist = arglist.concat("&bin_min2=");
         arglist = arglist.concat(binMin2);
         arglist = arglist.concat("&bin_max2=");
         arglist = arglist.concat(binMax2);
         arglist = arglist.concat("&bin_n2=");
         arglist = arglist.concat(numBins2);

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

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

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

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

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

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

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

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

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

                 var lowerT, upperT;
                 // compute the intersection of the two data bounds

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

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

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

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

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

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


         $.ajax({
             type: "GET",
             url: url,
             dataType: "json",
             data: null,
             success: function(data, textStatus, xhr) {
                 Response = data;
                 // alert("data: " + data);
                 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>

 </head>

 <body>
 <div class="container-fluid">
 <div class="row center1">
 <div class="col-sm-8 col-sm-offset-2 col-xs-12 color-head">
 <h3>Service: Conditional Sampling with Two Variables</h3>
 This service sorts one variable called sampled variable by the
 values of two variables called sampling variables and displays the
 averaged value of the sampled variable in color as a function of the
 bin value of the two sampling variables in X-Y axis. There are
 overlaid contours which show the number of samples in each of the
 two sampling variable bin.
 </div> <!-- col-sm -->
 <div class="col-sm-offset-2">
 </div> <!-- col-sm -->
 </div> <!-- row center1 -->

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

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

   <div class="row row1">
     <div class="col-sm-4 right1">
       sampling variable binning specification:
     </div>
     <div class="col-sm-8 left1">
       default: <input onclick="setDefault(1)" type="radio" name="default1" value="" id="radioDef1" checked>
       customized: <input onclick="setCustomized(1)" type="radio" name="default1" value="" id="radioCus1">
     </div>
   </div>

   <div class="row">
     <div class="col-sm-4 right1">
     </div>
     <div class="col-sm-8 left1">
       Min: <input id="min1" value="" alt="" size=3/>
       Max: <input id="max1" value="" alt="" size=3/>
       number of bins: <input id="bins1" value="" alt="" size=3/>
     </div>
   </div>
 </div> <!-- col level0 -->

 <div class="col-sm-12 col-lg-12 level0 color0">
   <div id="dataBlock3">
   </div>

   <div class="row">
     <div class="col-sm-4 right1">
       sampling variable binning specification:
     </div>
     <div class="col-sm-8 left1">
       default: <input onclick="setDefault(2)" type="radio" name="default2" value="" id="radioDef2" checked>
       customized: <input onclick="setCustomized(2)" type="radio" name="default2" value="" id="radioCus2">
     </div>
   </div>

   <div class="row">
     <div class="col-sm-4 right1">
     </div>
     <div class="col-sm-8 left1">
       Min: <input id="min2" value="" alt="" size=3/>
       Max: <input id="max2" value="" alt="" size=3/>
       number of bins: <input id="bins2" value="" alt="" size=3/>
     </div>
   </div>
 </div> <!-- col level0 -->

 </div> <!-- row level0 -->

 <div class="color3">
 <div class="row center1 subtitle1" >
 Data Subsetting
 </div> <!-- row -->
 <div class="row">
   <div class="col-sm-4 right1">
     <div id="monthSelect0"></div>
   </div>
   <div class="col-sm-8 left1">
     <div id="monthSelect"></div>
   </div>
 </div> <!-- row -->

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

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

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

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

 <div class="color2">
 <div class="row">
   <div class="col-sm-12 center1 subtitle1">
     Display Options:
   </div>
 </div>

 <div class="row">
   <div class="col-sm-6 right1">
         X-axis (sampling variable) scale:
   </div>
   <div class="col-sm-6 left1">
         <form><input type="radio" name="scale1" value="linear" id="radioXLin" checked>linear
         <input type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic
         </form>
   </div>
 </div> <!-- row -->

 <div class="row">
   <div class="col-sm-6 right1">
         y-axis (sampling variable or pressure) scale:
   </div>
   <div class="col-sm-6 left1">
         <form><input type="radio" name="scale1" value="linear" id="radioYLin" checked>linear
         <input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic
         </form>
   </div>
 </div> <!-- row -->

 <div class="row">
   <div class="col-sm-6 right1">
         z-axis (color) scale:
   </div>
   <div class="col-sm-6 left1">
         <form><input type="radio" name="scale1" value="linear" id="radioZLin" checked>linear
         <input type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic
         </form>
   </div>
 </div> <!-- row -->
 </div> <!-- color2 -->

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

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

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

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

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

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

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

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

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

	<title>Conditional Sampling 2 Var</title>

	<script>

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

	var naValue = "-999999";

	// called on load or reload
	window.onload = function() {
	var str1 = data_block_str(1, 3, "Physical Variable (sampled variable)",
	"range", "500,800");
	document.getElementById("dataBlock1").innerHTML = str1;

	str1 = data_block_str(2, 3, "Environmental Variable 1 (sampling variable)",
	"", "500");
	document.getElementById("dataBlock2").innerHTML = str1;

	str1 = data_block_str(3, 3, "Environmental Variable 2 (sampling variable)",
	"", "500");
	document.getElementById("dataBlock3").innerHTML = str1;

	put_data(1);
	put_data(2);
	put_data(3);
	put_var(1);
	put_var(2);
	put_var(3);
	select_var(1);
	select_var(2);
	select_var(3);
	time_range3();
	fillMonth();

	disable_download_button();

	select_all_months();
	setDefault(1);
	setDefault(2);
	}

	// disable customized input text boxes
	function setDefault(ID)
	{
	// alert("in setDefault() ... ");
	var x=document.getElementById("min"+ID);
	var y=document.getElementById("max"+ID);
	var z=document.getElementById("bins"+ID);
	x.value = "N/A";
	x.disabled=true;
	y.value = "N/A";
	y.disabled=true;
	z.value = "N/A";
	z.disabled=true;
	}

	// enable customized input text boxes
	function setCustomized(ID)
	{
	// alert("in setCustomized() ... ");
	var x=document.getElementById("min"+ID);
	var y=document.getElementById("max"+ID);
	var z=document.getElementById("bins"+ID);
	x.value = "";
	x.disabled=false;
	y.value = "";
	y.disabled=false;
	z.value = "";
	z.disabled=false;
	}

	$(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:8090/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:8090/svc/conditionalSamp?";
	var url = "http://" + window.location.hostname + ":9002/svc/conditionalSampling2Var?";
	// alert("url: " + url);

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

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

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

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

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


	var 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 pres12 = parse_pres(press_range);

	var pres1;
	var pres2;
	if (pres12 === naValue) {
	pres1 = naValue;
	pres2 = naValue;
	} else {
	split12 = pres12.split(",");
	if (split12.length != 2) {
	alert("pressure level range needs to be two values separated by comma.");
	return;
	} else {
	pres1 = split12[0];
	pres2 = split12[1];

	// when variable is the 3D Ocean Salinity or Ocean Temperature
	if (variable1 == 'ot' \|\| variable1 == 'os') {
	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; // convert from hPa on GUI
	pres2 = pres2 * 100; // convert from hPa on GUI
	}
	}
	}
	//alert("pres1, pres2: " + pres1 + ", " + pres2);

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

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

	var month_str = getMonthStr();
	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 variable2 = $("#var2").val();
	arglist = arglist.concat("&var2=");
	arglist = arglist.concat(variable2);

	var d3 = $("#data3").val();
	var model3 = d3.replace("/", "_");
	model3 = model3.toLowerCase();

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

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

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

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

	var plev1 = $("#pres2").val();
	plev1 = parse_pres(plev1);

	if (plev1>0) {
	// when variable is the 3D Ocean Salinity or Ocean Temperature
	if (variable2 == 'ot' \|\| variable2 == 'os') {
	plev1 = plev1 * 10000; // convert from dbar on GUI
	}
	// when variable2 is 3D atmosphere var
	else {
	plev1 = plev1 * 100; // convert from hPa on GUI
	}
	}

	arglist = arglist.concat("&env_var_plev1=");
	arglist = arglist.concat(plev1);

	var plev2 = $("#pres3").val();
	plev2 = parse_pres(plev2);
	if (plev2>0) {
	// when variable is the 3D Ocean Salinity or Ocean Temperature
	if (variable3 == 'ot' \|\| variable3 == 'os') {
	plev2 = plev2 * 10000; // convert from dbar on GUI
	}
	// when variable2 is 3D atmosphere var
	else {
	plev2 = plev2 * 100; // convert from hPa on GUI
	}
	}

	arglist = arglist.concat("&env_var_plev2=");
	arglist = arglist.concat(plev2);

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

	var binstate1 = document.getElementById('radioDef1').checked;

	var binMin1, binMax1, numBins1;

	if (binstate1 == true) { // default
	binMin1 = naValue;
	binMax1 = naValue;
	numBins1 = naValue;
	}
	else { // customized
	binMin1 = $("#min1").val();
	binMax1 = $("#max1").val();
	numBins1 = $("#bins1").val();
	}

	arglist = arglist.concat("&bin_min1=");
	arglist = arglist.concat(binMin1);
	arglist = arglist.concat("&bin_max1=");
	arglist = arglist.concat(binMax1);
	arglist = arglist.concat("&bin_n1=");
	arglist = arglist.concat(numBins1);

	var binstate2 = document.getElementById('radioDef2').checked;

	var binMin2, binMax2, numBins2;

	if (binstate2 == true) { // default
	binMin2 = naValue;
	binMax2 = naValue;
	numBins2 = naValue;
	}
	else { // customized
	binMin2 = $("#min2").val();
	binMax2 = $("#max2").val();
	numBins2 = $("#bins2").val();
	}

	arglist = arglist.concat("&bin_min2=");
	arglist = arglist.concat(binMin2);
	arglist = arglist.concat("&bin_max2=");
	arglist = arglist.concat(binMax2);
	arglist = arglist.concat("&bin_n2=");
	arglist = arglist.concat(numBins2);

	// 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 = xvalue1 + yvalue2 + zvalue*4;
	// alert("dispOpt: " + dispOpt);
	var dispOptString = dispOpt.toString();

	arglist = arglist.concat("&displayOpt=");
	arglist = arglist.concat(dispOptString);

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

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

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

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

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

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

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

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

	var lowerT, upperT;
	// compute the intersection of the two data bounds

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

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

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

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

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

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


	$.ajax({
	type: "GET",
	url: url,
	dataType: "json",
	data: null,
	success: function(data, textStatus, xhr) {
	Response = data;
	// alert("data: " + data);
	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>

	</head>

	<body>
	<div class="container-fluid">
	<div class="row center1">
	<div class="col-sm-8 col-sm-offset-2 col-xs-12 color-head">
	<h3>Service: Conditional Sampling with Two Variables</h3>
	This service sorts one variable called sampled variable by the
	values of two variables called sampling variables and displays the
	averaged value of the sampled variable in color as a function of the
	bin value of the two sampling variables in X-Y axis. There are
	overlaid contours which show the number of samples in each of the
	two sampling variable bin.
	</div> <!-- col-sm -->
	<div class="col-sm-offset-2">
	</div> <!-- col-sm -->
	</div> <!-- row center1 -->

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

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

	<div class="row row1">
	<div class="col-sm-4 right1">
	sampling variable binning specification:
	</div>
	<div class="col-sm-8 left1">
	default: <input onclick="setDefault(1)" type="radio" name="default1" value="" id="radioDef1" checked>
	customized: <input onclick="setCustomized(1)" type="radio" name="default1" value="" id="radioCus1">
	</div>
	</div>

	<div class="row">
	<div class="col-sm-4 right1">
	</div>
	<div class="col-sm-8 left1">
	Min: <input id="min1" value="" alt="" size=3/>
	Max: <input id="max1" value="" alt="" size=3/>
	number of bins: <input id="bins1" value="" alt="" size=3/>
	</div>
	</div>
	</div> <!-- col level0 -->

	<div class="col-sm-12 col-lg-12 level0 color0">
	<div id="dataBlock3">
	</div>

	<div class="row">
	<div class="col-sm-4 right1">
	sampling variable binning specification:
	</div>
	<div class="col-sm-8 left1">
	default: <input onclick="setDefault(2)" type="radio" name="default2" value="" id="radioDef2" checked>
	customized: <input onclick="setCustomized(2)" type="radio" name="default2" value="" id="radioCus2">
	</div>
	</div>

	<div class="row">
	<div class="col-sm-4 right1">
	</div>
	<div class="col-sm-8 left1">
	Min: <input id="min2" value="" alt="" size=3/>
	Max: <input id="max2" value="" alt="" size=3/>
	number of bins: <input id="bins2" value="" alt="" size=3/>
	</div>
	</div>
	</div> <!-- col level0 -->

	</div> <!-- row level0 -->

	<div class="color3">
	<div class="row center1 subtitle1" >
	Data Subsetting
	</div> <!-- row -->
	<div class="row">
	<div class="col-sm-4 right1">
	<div id="monthSelect0"></div>
	</div>
	<div class="col-sm-8 left1">
	<div id="monthSelect"></div>
	</div>
	</div> <!-- row -->

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

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

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

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

	<div class="color2">
	<div class="row">
	<div class="col-sm-12 center1 subtitle1">
	Display Options:
	</div>
	</div>

	<div class="row">
	<div class="col-sm-6 right1">
	X-axis (sampling variable) scale:
	</div>
	<div class="col-sm-6 left1">
	<form><input type="radio" name="scale1" value="linear" id="radioXLin" checked>linear
	<input type="radio" name="scale1" value="logarithmic" id="radioXLog">logarithmic
	</form>
	</div>
	</div> <!-- row -->

	<div class="row">
	<div class="col-sm-6 right1">
	y-axis (sampling variable or pressure) scale:
	</div>
	<div class="col-sm-6 left1">
	<form><input type="radio" name="scale1" value="linear" id="radioYLin" checked>linear
	<input type="radio" name="scale1" value="logarithmic" id="radioYLog">logarithmic
	</form>
	</div>
	</div> <!-- row -->

	<div class="row">
	<div class="col-sm-6 right1">
	z-axis (color) scale:
	</div>
	<div class="col-sm-6 left1">
	<form><input type="radio" name="scale1" value="linear" id="radioZLin" checked>linear
	<input type="radio" name="scale1" value="logarithmic" id="radioZLog">logarithmic
	</form>
	</div>
	</div> <!-- row -->
	</div> <!-- color2 -->

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

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

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

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

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

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