/* Script pwpf.js
Goal is to control visualization of KML overlays on PWPF Google Maps interface.
This will include probabilistic forecasts of snow and ice.
Log:
M. Klein 07/09/2013 Creation.
*/
// Incorporate July 2013 changes to Google Maps.
google.maps.visualRefresh = true;
// Set starting variables, mainly for the map center and the minimum zoom level
var map;
var minZoomLevel = 4;
var pwpfkml;
var mapCenter = new google.maps.LatLng(37.00, -96.00);
// Set initial map options below. Not allowing Streetview and setting the initial display to a terrain map.
var mapOptions = {
center: mapCenter,
zoom: 4,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// Set custom styles for the Google Map - turn off labels for the country names
var styles = [
{
featureType: "administrative.country",
elementType: "labels.text",
stylers: [
{ visibility: "off" }
]
}
];
// When display changes from one day or threshold to the next, make sure that the display does not reset to
// the full U.S. Keep display area the same and let user change as they wish.
var pwpfkmlOptions = {
preserveViewport: true
};
// Global variable to represent the opacity of the KML being viewed.
var opacity;
var mouse_opt = "on";
/**************************** PAGE SETUP INFO ******************************************
* The page essentially has two sections; one where the user can choose a certain threshold...the other where
* they can choose a time period (usually a certain day)
* Multiple
tags with different ids are written to separate out the options. For thresholds:
* - the main div is "txx" where xx is 01,02,04,08, etc...
* - the individual tabs are "tdp_xx where p is 1,2,3 (representing the day). xx is 01,02,04,08, etc...
*
* For forecast days/time periods:
* - the main div is fpd024, fpd048, fpd072 representing the forecast day
* - the individual tabs are "tdp_fpd024, tdp_fpd048, etc... where p represents the threshold number
* e.g. p=1 is t01 for 24-hour snow, p=2 is t02, p=3 is t04 and so on.
*/
/****************************** FUNCTION select_parameter **************************************************************************
*
* This function is called at body onload and whenever a user changes the radio button selection
* Arguments sent to this function:
* -- viewing_option: Either 'thold' or 'fhr'. 'thold' is sent at initial onload and if user selections an accumulation threshold
* 'fhr' is sent if user selects a forecast day to view all thresholds.
* -- whichload: Determines whether this function is called when the page initially loads OR if it's called using the radio
* buttons on the page.
* -- ptype: Precipitation type. Either 'snow' or 'icez'
* -- fcstpd: The forecast length, Either 24 or 48 hour probabilities or accumulations.
* -- inittime: The initial full date and model cycle being displayed.
*
* The function calls function "show_tab", sending the following information:
* -- ID of the div block that will be displayed (the rollover tab)
* -- The forecast hour (currently, 24, 48, or 72 hours)
* -- ID of the rollover tab whose background color will change
* -- Indication if this is the initial page load
* -- ptype: Precipitation type. Either 'snow' or 'icez'
* -- inittime: The initial full date and model cycle being displayed.
* -- fcstpd: The forecast length, Either 24 or 48 hour probabilities or accumulations.
* -- opacity: The level of opacity displaying (0-100 in 20% increments)
* -- method: Whether users select the tab via mouseover or click.
*/
function select_parameter(viewing_option, whichload, ptype, fcstpd, inittime) {
// Set 3 array variables based on whether the ptype is snow or ice...and whether we are looking at 24- or 48-hour totals.
if (ptype == "snow" ) {
if ( fcstpd == "24" ) {
var accums = new Array("01","02","04","06","08","12","18");
var thold_divs = new Array("t01","t02","t04","t06","t08","t12","t18");
} else {
var accums = new Array("02","04","08","12","18", "24","30");
var thold_divs = new Array("t02","t04","t08","t12","t18", "t24","t30");
}
document.selector.ptype_choice[0].checked=true;
document.selector.ptype_choice[1].checked=false;
} else {
if ( fcstpd == "24" ) {
var accums = new Array("01","10","25","50");
var thold_divs = new Array("t01","t10","t25","t50");
} else {
var accums = new Array("10","25","50","100");
var thold_divs = new Array("t10","t25","t50","t100");
}
document.selector.ptype_choice[0].checked=false;
document.selector.ptype_choice[1].checked=true;
}
if ( fcstpd == "24" ) {
var lastpd = 9;
var fhr_divs = new Array("fpd024","fpd030","fpd036","fpd042","fpd048","fpd054","fpd060","fpd066","fpd072");
var fhrs = new Array("024","030","036","042","048","054","060","066","072");
var init_fhr = "024";
var init_td_id = 'td1_01';
var init_tnum = 't01';
document.selector.duration_choice[0].checked = true;
} else if ( fcstpd == "48" ) {
var lastpd = 5;
var fhr_divs = new Array("fpd048","fpd054","fpd060","fpd066","fpd072");
var fhrs = new Array("048","054","060","066","072");
var init_fhr = "048";
if (ptype == "snow" ) {
var init_td_id = 'td1_02';
var init_tnum = 't02';
} else {
var init_td_id = 'td1_10';
var init_tnum = 't10';
}
document.selector.duration_choice[1].checked = true;
} else {
var lastpd = 1;
var fhr_divs = new Array("fpd072");
var fhrs = new Array("072");
var init_fhr = "072";
if (ptype == "snow" ) {
var init_td_id = 'td1_02';
var init_tnum = 't02';
} else {
var init_td_id = 'td1_10';
var init_tnum = 't10';
}
document.selector.duration_choice[2].checked = true;
}
document.selector.product_choice[0].checked=true;
// Disable the percentiles button.
document.selector.product_choice[1].disabled=true;
// Get opacity level from radio buttons.
for (var i=0; i < document.change_opacity.opacity_choice.length; i++) {
if (document.change_opacity.opacity_choice[i].checked) {
var opac = document.change_opacity.opacity_choice[i].value;
}
}
if (fcstpd == "24" || fcstpd == "48") {
// Get whether we are accessing via mouseover or click.
var opt = document.mouseover_status.mouse_over.selectedIndex;
mouse_opt = document.mouseover_status.mouse_over.options[opt].value;
if ( mouse_opt == "on" ) {
var way = "mouseover";
} else {
var way = "click";
}
}
//----------------------------------------------------------------------------------------
// On initial body onload...call function to show Day 1 prob snow >= 1 inch by default
if (whichload == "initload") {
var opac = 60;
if (fcstpd == "24" || fcstpd == "48") {
document.mouseover_status.mouse_over.selectedIndex = 0;
}
show_tab(init_td_id, init_fhr, init_tnum, ptype, inittime, fcstpd, 'initload', opac, 'mouseover');
/* -------------------------------------------------------------------------------------------------------------------
* If NOT the initial load of the page, the following will run if the user picks an accumulation amount under
* "Viewing Options" (1", 2", 4", etc...)
*/
} else if (viewing_option == "thold") {
// Find which threshold was chosen
for (var i=0; i < document.threshold_select.threshold_choice.length; i++) {
if (document.threshold_select.threshold_choice[i].checked) {
var selindex = document.threshold_select.threshold_choice[i].value;
}
}
if (fcstpd != 72) {
// Find which time period is being displayed. When user changes threshold, we want the day to remain constant.
// We will do this by determining the text color of the column. If it's "blue", then that period is active.
/* CASE 1: User is currently on a threshold and selects a different threshold
This case will *NOT* work if the user is currently viewing all thresholds for a
given day. See case #2 below.
*/
var idfound = "no";
for (i=1; i<=lastpd; i++) {
for (cnt=0; cnt
td1_01, td2_01, td3_01 (i.e. td[day]_[threshold])
For time pds --> td1_fpd024, td2_fpd024 (i.e. td[threshold_counter]_fpd[024,048,072]
tnumid -- For thresholds --> t01,t02, etc (i.e. t[threshold])
For time pds --> fpd024, fpd048, (i.e. fpd[fhr])
*/
function show_tab(tdid, fcsthr, tnumid, preciptype, fullddatecycle, fcstlength, whichload, opacity, method) {
if (mouse_opt == "off" && method == "mouseover") {
return;
}
if ( whichload == "initload" ) {
if (fcstlength != 72) {
document.hour_select.reset();
}
document.threshold_select.reset();
document.change_opacity.reset();
}
// tnumid will be t01,t02, etc... if thresholds chosen under "Viewing options".
// tnumid will be fpd024,fpd048, etc... if a day/period is chosen under "Viewing options"
var viewtype = tnumid.substring(0,1);
var fhr = "f" + fcsthr;
if (preciptype == "snow" ) {
selindex = tnumid.substring(1,3);
var ptype_fname = "snow";
if (fcstlength == 24) {
var accums = new Array("01","02","04","06","08","12","18");
var thold_divs = new Array("t01","t02","t04","t06","t08","t12","t18");
} else {
var accums = new Array("02","04","08","12","18", "24","30");
var thold_divs = new Array("t02","t04","t08","t12","t18", "t24","t30");
}
if (viewtype == "t" ) {
thold = tnumid.substring(1,3);
} else {
var thold_active_id = tdid.substring(2,3);
var tptr = thold_active_id - 1;
thold = accums[tptr];
}
var gm_linkthold = thold;
} else {
selindex = tnumid.substring(1,4);
var ptype_fname = "icez";
if (fcstlength == 24) {
var accums = new Array("01","10","25","50");
var thold_divs = new Array("t01","t10","t25","t50");
} else {
var accums = new Array("10","25","50","100");
var thold_divs = new Array("t10","t25","t50","t100");
}
if (viewtype == "t" ) {
thold = tnumid.substring(1,4);
} else {
var thold_active_id = tdid.substring(2,3);
var tptr = thold_active_id - 1;
thold = accums[tptr];
}
if (thold != 100) {
var gm_linkthold = "." + thold;
} else {
var gm_linkthold = "1.0";
}
}
if (fcstlength == 24) {
var lastpd = 9;
var fhr_divs = new Array("fpd024","fpd030","fpd036","fpd042","fpd048","fpd054","fpd060","fpd066","fpd072");
var fpd_fname = 24;
} else if (fcstlength == 48) {
var lastpd = 5;
var fhr_divs = new Array("fpd048","fpd054","fpd060","fpd066","fpd072");
var fpd_fname = 48;
} else {
var lastpd = 1;
var fhr_divs = new Array("fpd072");
var fpd_fname = 72;
}
// Initialize all ids for the thresholds (t01, t02, t04, etc...) to display --> none.
for (cnt=0; cnt ids for the days/periods (fpd024,fpd048,fpd072) to display --> none.
for (cnt=0; cnt attributes (change text color and background color.
document.getElementById(tnumid).style.display = "block";
document.getElementById(tdid).style.backgroundColor="#C0E0EE";
document.getElementById(tdid).style.color="blue";
} else {
document.getElementById(tnumid).style.display = "block";
document.getElementById(tdid).style.backgroundColor="#0A2390";
document.getElementById(tdid).style.color="white";
}
// If a Day is chosen, make sure to clear all radio button selections.
// If a threshold is chosen, make sure to clear all the Day options.
if (viewtype == "f" ) {
document.threshold_select.reset();
document.threshold_select.threshold_choice[0].checked = false;
} else if (fcstlength != 72 ) {
document.hour_select.reset();
document.hour_select.hour_choice[0].checked = false;
}
/* IF PARAMETER CHOSEN IS A "THRESHOLD" (Also the default on initial page load)
* The following sets display characteristics of the chosen valid period rollover label for a given threshold
* For 24-hour PWPF, there'll be 3 periods, for the 48-hour, only 2
*/
// Initialize the color of all tab text to white (these are the rollover tabs).
// if (viewtype == "t") {
//for (i=1; i<= lastpd; i++) {
// for (cnt=1; cnt elements is
colored blue. ONLY that id is active.
*/
var td_id = "none";
// Below works if current viewing option show times across the top tabs.
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=thold_divs.length; cnt++) {
ptr_thold = cnt - 1;
selected_id = "td" + i + "_" + accums[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
if ( td_id == "none" ) {
for (i=1; i<= lastpd; i++) {
for (cnt=1; cnt<=thold_divs.length; cnt++) {
ptr_thold = i - 1;
selected_id = "td" + cnt + "_" + fhr_divs[ptr_thold];
color = document.getElementById(selected_id).style.color;
if (color == "blue") {
td_id = selected_id;
break;
}
}
}
}
var fpdpos = td_id.indexOf("fpd");
if (fpdpos > 0 ) {
var fhr = td_id.substring(7,10);
var tnum_id = td_id.substring(4,10);
} else {
var fhrindx = td_id.substring(2,3) - 1;
var fhr = fhrs[fhrindx];
var tnum_id = thold_divs[fhrindx];
}
// Get the onmouseover string, split it into an array using the comma
// then get elements 1 and 2 for "fhr" and "tnum_id"
//var showstr = document.getElementById(td_id).getAttribute('onmouseover');
//var strarray = showstr.split(",");
//var fhr_temp = strarray[1];
//var fhr = fhr_temp.replace(/'/g, '');
//var tnum_temp = strarray[2];
//var tnum_id = tnum_temp.replace(/'/g, '');
show_tab(td_id, fhr, tnum_id, ptype, inittime, fcstpd, 'inpage', selected_opacity, method);
}
/********************************* CHANGEMAP() ********************************************************
* Function to be used if we have the radio button/drop down interface. Will change the
* page to the appropriate one selected
*/
function changemap() {
for (var i=0; i < document.selector.ptype_choice.length; i++) {
if (document.selector.ptype_choice[i].checked) {
var selected_ptype = document.selector.ptype_choice[i].value;
}
}
for (var i=0; i < document.selector.product_choice.length; i++) {
if (document.selector.product_choice[i].checked) {
var selected_product = document.selector.product_choice[i].value;
}
}
for (var i=0; i < document.selector.duration_choice.length; i++) {
if (document.selector.duration_choice[i].checked) {
var selhour = document.selector.duration_choice[i].value;
}
}
var underscore = selhour.indexOf("_");
var hour = selhour.substring(underscore + 1, underscore + 3);
var url = "http://origin.wpc.ncep.noaa.gov/pwpf/pwpf_gm/new_wwd_prob.php?ftype=" + selected_product + "&fpd=" + hour + "&ptype=" + selected_ptype;
window.location.assign(url);
}
function switch_mouseover() {
var opt = document.mouseover_status.mouse_over.selectedIndex;
mouse_opt = document.mouseover_status.mouse_over.options[opt].value;
}