fcstForecast = "<table cellspacing=\"2\" cellpadding=\"2\" border=\"1\">" + 
              "<tr>" + 
                "<td class=\"dataHead\" nowrap>" + 
	          "Variable:" + 
	        "</td>" + 
                "<td class=\"dataHead\" nowrap>" + 
	          "Domain:" + 
	        "</td>" + 
	        "<td class=\"dataHead\" nowrap>" + 
	          "Forecast at:" + 
	        "</td>" + 
	        "<td class=\"dataHead\" nowrap>" + 
	          "Depth at:" + 
	        "</td>" + 
              "</tr>" + 
              "<tr class='dataOdd'>" + 
                "<td nowrap>" + 
	          "<input type=\"radio\" id=\"imageType\" name=\"imageType\" value=\"temp\" onclick=\"imageTypeChange('temp')\" checked>Temperature&nbsp;" + 
	          "<input type=\"radio\" id=\"imageType\" name=\"imageType\" value=\"salinity\" onclick=\"imageTypeChange('salinity')\">Salinity&nbsp;" + 
	          "<input type=\"radio\" id=\"imageType\" name=\"imageType\" value=\"curr\" onclick=\"imageTypeChange('curr')\">Current&nbsp;" + 
	        "</td>" + 
                "<td nowrap>" + 
                  "<input type=\"radio\" id=\"domain\" name=\"domain\" value=\"PWS\" checked onclick=\"domainChange('PWS')\">PWS&nbsp;" + 
                  "<input type=\"radio\" id=\"domain\" name=\"domain\" value=\"HF\" onclick=\"domainChange('HF')\">PWS (small)&nbsp;" + 
                "</td>" + 
                "<td align=middle nowrap>" + 
                  "&nbsp;<select id=\"step\" name=\"step\" onChange=\"selectStep(this[this.selectedIndex].value)\">" + 
                    "<option value=\"mean\">24-hr mean</option>" + 
                    "<option selected value=\"0\">06 (Day 1)</option>" + 
                    "<option value=\"1\">07 (Day 1)</option>" + 
                    "<option value=\"2\">08 (Day 1)</option>" + 
                    "<option value=\"3\">09 (Day 1)</option>" + 
                    "<option value=\"4\">10 (Day 1)</option>" + 
                    "<option value=\"5\">11 (Day 1)</option>" + 
                    "<option value=\"6\">12 (Day 1)</option>" + 
                    "<option value=\"7\">13 (Day 1)</option>" + 
                    "<option value=\"8\">14 (Day 1)</option>" + 
                    "<option value=\"9\">15 (Day 1)</option>" + 
                    "<option value=\"10\">16 (Day 2)</option>" + 
                    "<option value=\"11\">17 (Day 2)</option>" + 
                    "<option value=\"12\">18 (Day 2)</option>" + 
                    "<option value=\"13\">19 (Day 2)</option>" + 
                    "<option value=\"14\">20 (Day 2)</option>" + 
                    "<option value=\"15\">21 (Day 2)</option>" + 
                    "<option value=\"16\">22 (Day 2)</option>" + 
                    "<option value=\"17\">23 (Day 2)</option>" + 
                    "<option value=\"18\">00 (Day 2)</option>" + 
                    "<option value=\"19\">01 (Day 2)</option>" + 
                    "<option value=\"20\">02 (Day 2)</option>" + 
                    "<option value=\"21\">03 (Day 2)</option>" + 
                    "<option value=\"22\">04 (Day 2)</option>" + 
                    "<option value=\"23\">05 (Day 2)</option>" + 
                    "<option value=\"24\">06 (Day 2)</option>" + 
                    "<option value=\"25\">07 (Day 2)</option>" + 
                    "<option value=\"26\">08 (Day 2)</option>" + 
                    "<option value=\"27\">09 (Day 2)</option>" + 
                    "<option value=\"28\">10 (Day 2)</option>" + 
                    "<option value=\"29\">11 (Day 2)</option>" + 
                    "<option value=\"30\">12 (Day 2)</option>" + 
                    "<option value=\"31\">13 (Day 2)</option>" + 
                    "<option value=\"32\">14 (Day 2)</option>" + 
                    "<option value=\"33\">15 (Day 2)</option>" + 
                    "<option value=\"34\">16 (Day 3)</option>" + 
                    "<option value=\"35\">17 (Day 3)</option>" + 
                    "<option value=\"36\">18 (Day 3)</option>" + 
                    "<option value=\"37\">19 (Day 3)</option>" + 
                    "<option value=\"38\">20 (Day 3)</option>" + 
                    "<option value=\"39\">21 (Day 3)</option>" + 
                    "<option value=\"40\">22 (Day 3)</option>" + 
                    "<option value=\"41\">23 (Day 3)</option>" + 
                    "<option value=\"42\">00 (Day 3)</option>" + 
                    "<option value=\"43\">01 (Day 3)</option>" + 
                    "<option value=\"44\">02 (Day 3)</option>" + 
                    "<option value=\"45\">03 (Day 3)</option>" + 
                    "<option value=\"46\">04 (Day 3)</option>" + 
                    "<option value=\"47\">05 (Day 3)</option>" + 
                    "<option value=\"48\">06 (Day 3)</option>" + 
                  "</select>" + 
                  "(GMT)&nbsp;" + 
                "</td>" + 
                "<td align=middle nowrap>" + 
                  "&nbsp;<select id=\"depth\" name=\"depth\" onChange=\"selectDepth(this[this.selectedIndex].value)\">" + 
                    "<option selected value=\"0\">0</option>" + 
                    "<option value=\"10\">10</option>" + 
                    "<option value=\"20\">20</option>" + 
                    "<option value=\"50\">50</option>" + 
                    "<option value=\"100\">100</option>" + 
                  "</select>" + 
                  "(m)&nbsp;" + 
    	        "</td>" + 
              "</tr>" + 
            "</table>" + 
          "</td>";

function setForecast()
{
  var type = document.pwsform.selectedImageType.value;
  var domain = document.pwsform.selectedDomain.value;
  var depth = document.pwsform.selectedDepth.value;
  var step = document.pwsform.selectedStep.value;
  for (var j=0; j<document.pwsform.imageType.length; j++)
  {
    //alert(document.pwsform.imageType[j].value);
    if (document.pwsform.imageType[j].value == type)
      document.pwsform.imageType[j].checked = true;
  }
  for (var j=0; j<document.pwsform.domain.length; j++)
  {   
    //alert(document.pwsform.imageType[j].value);
    if (document.pwsform.domain[j].value == domain)
      document.pwsform.domain[j].checked = true;
  } 
  for (var k=0; k<document.pwsform.depth.length; k++)
  {   
    if (document.pwsform.depth[k].value == depth)
      document.pwsform.depth.selectedIndex = k;
  }   
  for (var n=0; n<document.pwsform.step.length; n++)
  {   
    if (document.pwsform.step[n].value == step)
      document.pwsform.step.selectedIndex = n;
  }
}

function domainChange(domain)
{
  //alert('domainChange()');
  var y     = document.pwsform.year.selectedIndex;
  var year  = document.pwsform.year[y].value;
  var m     = document.pwsform.month.selectedIndex;
  var month = document.pwsform.month[m].value;
  var day   = document.pwsform.selectedDay.value;
  var depth = document.pwsform.selectedDepth.value;
  var step  = document.pwsform.selectedStep.value;
  var type = document.pwsform.selectedImageType.value;
  document.pwsform.selectedDomain.value = domain;
  if (domain == 'PWS') domain = '';
  var filename = path + "/" + year + pad(month, 2) + pad(day,2) + '/pws_' + type + domain + pad(month, 2) + pad(day, 2) + '_' + step + '_' + depth + '.jpg';
  //alert('donainChange() - ' + filename);
  document.pwsform.filename.value = filename;
  var myImage = new Image();
  myImage.onerror = loadImage;
  myImage.onload  = assignImage;
  myImage.src = filename;
  return;
}

function imageTypeChange(type)
{
  //alert('imageTypeChange()');
  var path = '/myocean/PWS/data/images/fcst';
  var y     = document.pwsform.year.selectedIndex;
  var year  = document.pwsform.year[y].value;
  var m     = document.pwsform.month.selectedIndex;
  var month = document.pwsform.month[m].value;
  var day   = document.pwsform.selectedDay.value;
  var depth = document.pwsform.selectedDepth.value;
  var step  = document.pwsform.selectedStep.value;
  var domain = document.pwsform.selectedDomain.value;
  document.pwsform.selectedImageType.value = type;
  if (domain == 'PWS') domain = '';
  var filename = path + "/" + year + pad(month, 2) + pad(day,2) + '/pws_' + type + domain + pad(month, 2) + pad(day, 2) + '_' + step + '_' + depth + '.jpg';
  //alert('imageTypeChange() - ' + filename);
  document.pwsform.filename.value = filename;
  var myImage = new Image();
  myImage.onerror = loadImage;    //bad
  myImage.onload  = assignImage;  //good
  myImage.src = filename;
}

function selectDepth(depth)
{   
  //alert('selectDepth');
  //var d = document.pwsform.depth.selectedIndex-0;
  //var value = document.pwsform.depth[d].value;
  document.pwsform.selectedDepth.value = depth;
  var type = document.pwsform.selectedImageType.value;
  imageTypeChange(type);
} 
  
function selectStep(step)
{ 
  //alert('selectStep');
  //var s = document.pwsform.step.selectedIndex-0;
  //var value = document.pwsform.step[s].value;
  document.pwsform.selectedStep.value = step;
  var type = document.pwsform.selectedImageType.value;
  imageTypeChange(type);
} 
    
function domainChange(domain)
{   
  //alert('domainChange()');
  document.pwsform.selectedDomain.value = domain;
  var type = document.pwsform.selectedImageType.value;
  imageTypeChange(type);
} 

function loadImage()
{
  //alert('loadImage()');
  var filename = 'images/noimage.gif';
  //alert('loadImage() - ' + filename);
  var tablehtml = "<table>";
  tablehtml += "<tr>";
  tablehtml += "<td>";
  tablehtml += "<input type=\"button\" id=\"fcdownload\" name=\"fcdownload\" style=\"background-color:#C0C0C0\" value=\"Download Forecast Data\" disabled>";
  tablehtml += "</td>";
  tablehtml += "<td width=\"100%\" align=right>";
  tablehtml += "<input type=\"button\" id=\"animate\" name=\"animate\" style=\"background-color:#C0C0C0\" value=\"Animation\" disabled>";
  tablehtml += "</td>";
  tablehtml += "</tr>";
  tablehtml += "</table>";
  setInnerHTML('abutton',tablehtml);
  setImage('scbimage', 'visible', filename);
}

function assignImage()
{
  //alert('assignImage()');
  var filename = document.pwsform.filename.value;
  //alert('assignImage() - ' + filename);
  var tablehtml = "<table>";
  tablehtml += "<tr>";
  tablehtml += "<td>";
  tablehtml += "<input type=\"button\" id=\"fcdownload\" name=\"fcdownload\" style=\"background-color:#C0C0C0\" value=\"Download Forecast Data\"  onclick=\"downloadForecastData()\">";
  tablehtml += "</td>";
  tablehtml += "<td width=\"100%\" align=right>";
  tablehtml += "<input type=\"button\" id=\"animate\" name=\"animate\" style=\"background-color:#C0C0C0\" value=\"Animation\" onclick=\"showForecastAnimation()\">";
  tablehtml += "</td>";
  tablehtml += "</tr>";
  tablehtml += "</table>";
  setInnerHTML('abutton',tablehtml);
  setImage('scbimage', 'visible', filename);
  //setForecast();
}

function showForecastAnimation()
{
  var y     = document.pwsform.year.selectedIndex;
  var year  = document.pwsform.year[y].value;
  var m     = document.pwsform.month.selectedIndex;
  var month = document.pwsform.month[m].value;
  var day   = document.pwsform.selectedDay.value;

  var domain = document.pwsform.selectedDomain.value;
  var level = document.pwsform.selectedDepth.value;
  var type = document.pwsform.selectedImageType.value;

  if (type == 'temp')
    type = 'Temperature';
  else if (type == 'salinity')
    type = 'Salinity';
  else if (type == 'curr')
    type = 'Current';

  var url = '/cgi-bin/PWS.cgi?type=ROMS&date=' + year + pad(month,2) + pad(day,2) +
            '&level=' + level + '&var=' + type + '&domain=' + domain.toUpperCase();
  //alert(url);
  romsanimationWindow=open(url,'romsanimationWindow','resizable=yes,width=620,height=600,scrollbars=yes,menubar=yes,toolbar=yes');
  if (romsanimationWindow.opener == null)
    romsanimationWindow.opener = self;
  else
    romsanimationWindow.focus();
}

function downloadForecastData()
{
  var y     = document.pwsform.year.selectedIndex;
  var year  = document.pwsform.year[y].value;
  var m     = document.pwsform.month.selectedIndex;
  var month = document.pwsform.month[m].value;
  var day   = document.pwsform.selectedDay.value;

  var fname = '/myocean/PWS/data/fcst/pws_fcst_' + year +  pad(month,2) +  pad(day,2) + '06.nc';
  httpDownload(fname);
}

