[an error occurred while processing this directive]



<script>var SID = "est4rf0mb46g8romlt3vd8j0cf" ;</script>
<script>
$(function() {
	load();
});
</script>





<h1>Data Tools - SPLASH Scanning Radar Dual-PPI</h1>


<style type="text/css">


#media_icons {
float: left;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}

#orgs {
float: left;
width: 45%;
text-align: left;
padding: 0em 0.2em 0em 0em;
}

.product_dropdown {
    vertical-align: middle;
}

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
    right: -45px;
}

.dropbtn {
    background-color: #1e62ea;
    color: white;
    padding: 3px 10px 3px 10px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.dropdown-content {
    font-size: 12px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 135px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


.DataHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #003399;
font-weight: bold;
}


.SubHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #003399;
font-weight: bold;
}

#play, #stop, #reverse {
height: 30px;
width:  30px;
}




#Map1RadarTimeStamps,#Map2RadarTimeStamps  { 

width: 100%;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #003399;
font-weight: bold;

} 



#Map1LatestTimeStamp, #Map2LatestTimeStamp {

font-family: Arial, Helvetica, sans-serif;
width: 300px;
height: 35px;
font-size: 8pt;
color: #000000;
font-weight: bold;

}


#MapSynch1, #MapSynch2 { 

float:right;
font-size: 13pt;

}

/* the page footer */
#footer {
clear: both;
font-size: 80%;
background: #000066 url(/img/gradient.gif) top left repeat-y;
color: white;
padding: 1.0em 0.7em 0.6em 0.7em;
margin: 0em;
line-height: 1.3em;
width: 1200;
height: 4em;
border: none;

}

#footer a {
color: white;
}


#media_icons .fa {
margin: 0 8px;
}

/* a div containing policy-type links shown in the footer. */
#policies {
float: right;
width: 35%;
text-align: right;
}



#widgettable {

margin-left:80px; 
margin-right:80px;
}

#widgets { 

height:120px; 
height:127px; 

}


#tdslide1, #tdslide2,#tdslide3, #tdslide4 { 


border:0;
width:200px;
} 

#DownloadStatusID { 
font-size: 8pt;
}

#CalendarID { 
font-size: 9pt;
}

#ArchiveDateID {
margin-bottom: 4px;
}

#LoadArchiveDataID {
margin-bottom: 4px;
width:75px;
}

#ResetArchiveID {
margin-bottom: 4px;
width:75px;
}

</style>


<script>

	// run the currently selected effect
	function runEffect() {
		// get effect type from 

		// most effect types need no options passed by default
		// some effects have required parameters

		var options;

		// run the effect
		$( "#Map1LatestTimeStamp" ).css('color', 'red');
		$( "#Map2LatestTimeStamp" ).css('color', 'red');

		callback1();
		callback2();
	};

	function toggleCalInput(option) { 

		if ( option == "show") {

		 $('#CalendarID').show();

		}

		if ( option == "hide") {

		 $('#CalendarID').hide();

		} 

	} 


	function toggleDownloadStatus(option) {

		if ( option == "show") {

		 $('#DownloadStatusID').show();

		}

		if ( option == "hide") {

		 $('#DownloadStatusID').hide();

		}

	}

	//callback function to bring a hidden box back
	function callback1() {
		setTimeout(function() {
			$( "#Map1LatestTimeStamp" ).css( 'color', 'black');
		}, 5000 );
	};

	function callback2() {
		setTimeout(function() {
			$( "#Map2LatestTimeStamp" ).css( 'color', 'black');
		}, 5000 );
	};


        function loadOverlayMenu(MapNum) {

           document.getElementById("Map" + MapNum.toString() + "BaseKml").classList.toggle("show");
        }

        function toggleOverlay(OverlayID, MapNum) {

           var Overlay = document.getElementById(OverlayID);

           KmlUrl = Overlay.value;

           if (Overlay.checked == true) {

             loadKmlMapOverlay(KmlUrl, MapNum);
           }
           else {

             unLoadKmlMapOverlay(KmlUrl, MapNum);
           }
        }

        function loadKmlMapOverlay(KmlUrl, MapNum) {

           var kmlOptions = { preserveViewport: true,
                              map: Maps[MapNum]
                            };
           Key = 'Map' + MapNum.toString() + ':' + KmlUrl;

           KmlMapLayers[Key]  = new google.maps.KmlLayer(KmlUrl, kmlOptions);
           KmlMapLayers[Key].setMap(Maps[MapNum]);
        }


        function unLoadKmlMapOverlay(KmlUrl, MapNum) {

           Key = 'Map' + MapNum.toString() + ':' + KmlUrl;

           KmlMapLayers[Key].setMap(null);
           KmlMapLayers[Key] = null
        }

</script>



<script src="https://maps.googleapis.com/maps/api/js?client=gme-noaa&v=weekly&channel=OAR.ESRL.PSD.PSD2ScanRadar"
type="text/javascript"></script>

<link rel="stylesheet" href="/data/obs/src/development-bundle/themes/ui-lightness/jquery.ui.all.css">
<!-- script src="/data/obs/src/development-bundle/jquery-1.8.2.js"></script -->
<script src="/data/obs/src/development-bundle/ui/jquery.ui.core.js"></script>
<script src="/data/obs/src/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="/data/obs/src/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="/data/obs/src/development-bundle/ui/jquery.ui.slider.js"></script>
<script src="/data/obs/src/development-bundle/ui/jquery.ui.button.js"></script>
<script src="/data/obs/src/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script src="/data/obs/src/development-bundle/ui/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="/data/obs/src/development-bundle/themes/base/jquery-ui-timepicker-addon.css">
<script src="/data/obs/src/datetimepicker.js"></script>


<script type="text/javascript" src="/data/obs/src/ProgressBar.js"></script>

<script>
$(function() {


	$( "#slider" ).slider({
		value:-500,
		min: -1000,
		max: -10
	});


	$( "#Opacityslider" ).slider({
		value:50,
		min: 1,
		max: 100
	});



	 $( "#Opacityslider" ).slider({
		value:50,
		min: 1,
		max: 100,
		stop: function(event, ui) {
		 updateOpacity();
		}

	});


	var now = new Date();
	var now_utc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
	var CurrentDate = new Date();
	var BeginFileDate = new Date(1634234400000);


	$('#ArchiveDateID').datetimepicker({
		dateFormat: 'yy-mm-dd',
		defaultValue: CurrentDate.toCalendarString(),
		alwaysSetTime: 'true',
		minDateTime: BeginFileDate, 
		maxDateTime: now_utc
	
	});
//		$("#ArchiveDateID").datetimepicker();



//	$( "#Opacityslider" ).bind("changed", function(){ alert("Changed")});




});
</script>




<script>
$(function() {


	$( "#stepforward" ).button({
		text: false,
		icons: {
			primary: "ui-icon-arrowthick-1-e"
		}
	})


	 $( "#stepreverse" ).button({
		text: false,
		icons: {
			primary: "ui-icon-arrowthick-1-w"
		}
	})


	$( "#play" ).button({
		text: false,
		icons: {
			primary: "ui-icon-circle-triangle-e"
		}
	})


	$( "#stop").button({
		text: false,
		icons: {
			primary: "ui-icon-stop"
		}
	});

	$( "#reverse").button({
		text: false,
		icons: {
			primary: "ui-icon-circle-triangle-w"
		}
	});
});
</script>

<script>


if ( !Date.prototype.toCalendarString ) {

( function() {

function pad(number) {
    var r = String(number);
    if ( r.length === 1 ) {
	r = '0' + r;
    }
    return r;
}

Date.prototype.toCalendarString = function() {
    return this.getUTCFullYear()
	+ '-' + pad( this.getUTCMonth() + 1 )
	+ '-' + pad( this.getUTCDate() )
	+ ' ' + pad( this.getUTCHours() )
	+ ':' + pad( this.getUTCMinutes() );
};

}() );
}

if ( !Date.prototype.toISOString ) {

( function() {

function pad(number) {
    var r = String(number);
    if ( r.length === 1 ) {
	r = '0' + r;
    }
    return r;
}

Date.prototype.toISOString = function() {
    return this.getUTCFullYear()
	+ '-' + pad( this.getUTCMonth() + 1 )
	+ '-' + pad( this.getUTCDate() )
	+ 'T' + pad( this.getUTCHours() )
	+ ':' + pad( this.getUTCMinutes() )
	+ ':' + pad( this.getUTCSeconds() )
	+ '.' + String( (this.getUTCMilliseconds()/1000).toFixed(3) ).slice( 2, 5 )
	+ 'Z';
};

}() );
}

function convertTimeStamp(EpochTime) { 

var TimeObj = new Date(EpochTime * 1000); 

return TimeObj; 
} 

Object.keys = Object.keys || function(o) {
var result = [];
for(var name in o) {
if (o.hasOwnProperty(name))
  result.push(name);
}
return result;
};


</script> 



<script type="text/javascript">
//<![CDATA[

var CurrentDir = 'forward'; 
var AnimTimer; 
var UpdateFilesTimer; 
var SelLoopIndexLast = 0;
var KmlMapLayers = { 'Map1:https://psl.noaa.gov/data/obs/kml/CountyBoundaryCONUS.kmz': null,
                     'Map1:https://psl.noaa.gov/data/obs/kml/RangeRingsRjyV1.kmz': null,
                     'Map1:https://psl.noaa.gov/data/obs/kml/DrainageBasinsCA.kmz': null,
                     'Map2:https://psl.noaa.gov/data/obs/kml/CountyBoundaryCONUS.kmz': null,
                     'Map2:https://psl.noaa.gov/data/obs/kml/RangeRingsRjyV1.kmz': null,
                     'Map2:https://psl.noaa.gov/data/obs/kml/DrainageBasinsCA.kmz': null,
                    };

function RadarOverLay()
{
this.RadarDataFiles = []; 
}

var MapOverlays = {};

MapOverlays[1] = {}; 
MapOverlays[2] = {}; 

var ImgNum = {};

ImgNum[1] = 0;
ImgNum[2] = 0;

var RadarOverLays       = {};
var RadarDataFiles      = {};
var RadarDataCords      = {};
var RadarDataTimes      = {};
var RadarElevationAngle = {};
var CurrentRadarOptions = {}; 

CurrentRadarOptions[1] = "none";
CurrentRadarOptions[2] = "none";

var DropDownChange     = 0;
var LoopTime           = 30;          // Set default value to 30 minutes.  
var RealTimeMark       = "Realtime";  // Default to use realtime.  
var DownloadComplete   = "false"; 
var DownloadInProgress = "false"; 
var HasDownloaded      = "false"; 
var CurrentTimeDelta   = {};
CurrentTimeDelta[1]    = 90;
CurrentTimeDelta[2]    = 90;

var SelMap1LastID = "";
var SelMap2LastID = "";

var MasterTimeDelta = 15 * 60; 

var Maps = {}; 


// Set def value for RadarFileXmlUrl for loop timeer

var BaseWebPath            = 'https://psl.noaa.gov/data/obs/sitemap/ScanRadar/SPLASH/';
var BaseXmlPath            = 'https://psl.noaa.gov/data/obs/realtime/ScanningRadar/.web/';
var ArchiveXmlPath         = BaseWebPath + 'tmp/';
var MissingRadarFileName   = BaseWebPath + 'img/Blank.gif';
var RealtimeProductsUrl    = BaseXmlPath + 'ScanningRadarCurrentRealtimeProductsSplash' + LoopTime + '.xml';
var ArchiveProductsUrl     = BaseXmlPath + 'ScanningRadarCurrentArchiveProductsSplash.xml';
var HistoricalInventoryUrl = BaseXmlPath + 'HistoricalInventorySplash.html';
var MapMenuInit            = { 1 : [2,'true'], 2 : [4,'true'] };
var LoopDuration           = { Archive : [60], Realtime : [60] };

var count = 0;
var which  = 0;

function sleep(ms){
  var dt = new Date();
  dt.setTime(dt.getTime() + ms);
  while (new Date().getTime() < dt.getTime());
}

function load() {

  Maps[1] = new google.maps.Map(document.getElementById("MapDiv1"), {
  center: new google.maps.LatLng(39.0789, -107.5609),
  zoom: 8,
  overviewMapControl: 1,
  overviewMapControlOptions: {
  opened: 0 },
  mapTypeId: 'terrain',
  controlSize: 25
});


Maps[2] = new google.maps.Map(document.getElementById("MapDiv2"), {
center: new google.maps.LatLng(39.0789, -107.5609),
zoom: 8,
overviewMapControl: 1,
overviewMapControlOptions: {
opened: 0 },
mapTypeId: 'terrain',
controlSize: 25
});


pb ={};

pb[1] =  new progressBar();
pb[2] =  new progressBar();


Maps[1].controls[google.maps.ControlPosition.RIGHT].push(pb[1].getDiv());
Maps[2].controls[google.maps.ControlPosition.RIGHT].push(pb[2].getDiv());

SetSiteStatus();

var radioButtons = document.getElementsByName("RadioTime");
radioButtons[1].checked = 1;	

var select1 = document.querySelector('#Map1RadarType');
select1.addEventListener('change',function() { DropDownChange = 1; setRealTimeMark(); } );


var select2 = document.querySelector('#Map2RadarType');
select2.addEventListener('change',function() { DropDownChange = 2; setRealTimeMark(); } );


setRealTimeMark();

var LoopTimeID = document.getElementById('LoopTime');
LoopTimeID.options[0].selected= 'true'; 

document.getElementById("DownloadStatusID").innerHTML= "Loaded: 2023-01-01 07:00";

document.getElementById('ArchiveDateID').value = "2023-01-01 07:00";
}

function disableWidgets() {

  var SelMap1ID       = document.getElementById('Map1RadarType');
  var SelMap2ID       = document.getElementById('Map2RadarType');
  var LoopDropID      = document.getElementById('LoopTime');
  var RealTimeRadioID = document.getElementById('RealTimeID'); 
  var ArchiveRadioID  = document.getElementById('ArchiveTimeID');

  SelMap1ID.disabled       = true;
  SelMap2ID.disabled       = true;
  LoopDropID.disabled      = true;
  RealTimeRadioID.disabled = true;
  ArchiveRadioID.disabled  = true;
}

function enableWidgets() {

  var SelMap1ID       = document.getElementById('Map1RadarType');
  var SelMap2ID       = document.getElementById('Map2RadarType');
  var LoopDropID      = document.getElementById('LoopTime');
  var RealTimeRadioID = document.getElementById('RealTimeID'); 
  var ArchiveRadioID  = document.getElementById('ArchiveTimeID');

  SelMap1ID.disabled       = false;
  SelMap2ID.disabled       = false;
  LoopDropID.disabled      = false;

  // bring focus back to the last menu that was selected
  if(DropDownChange == 1) {

    SelMap1ID.focus();
  }
  else if(DropDownChange == 2) {

    SelMap2ID.focus();
  }
}

function updateLegend(MapNum) {

var img = document.createElement("IMG");

if (MapNum == 1 ) {

  var MenuSelIndex = document.getElementById("Map1RadarType").selectedIndex;
  var MenuOptions  = document.getElementById("Map1RadarType").options;

}

if (MapNum == 2) {

  var MenuSelIndex = document.getElementById("Map2RadarType").selectedIndex;
  var MenuOptions  = document.getElementById("Map2RadarType").options;

}

var MenuSelText = MenuOptions[MenuSelIndex].text;

if(MenuSelText.search('rain rate') >= 0) {

  img.src = "./img/RainRateLabelBar4.png";
}
else {

  if(MenuSelText.search('GJX') >= 0) {

    img.src = "./img/ScanningRadarLabelBar2.png";

  }
  else {

    img.src = "./img/ScanningRadarLabelBarCsu.png";
  }
}


if (MapNum == 1) {

 $('#Legend1').html(img);

}


if (MapNum == 2) {

 $('#Legend2').html(img);

}


}



function snapView(MapNum1, MapNum2) {

var MapCenter    = Maps[MapNum1].getCenter(); 
var ZoomLevel    = Maps[MapNum1].getZoom(); 

Maps[MapNum2].setCenter(MapCenter); 
Maps[MapNum2].setZoom(ZoomLevel); 

}




function loadMap1RadarDataFiles(Radar, MapNumber) { 

   updateLegend(1);

  var RadarSiteID = Radar.options[Radar.selectedIndex].value;
  var RadarSiteName = Radar.options[Radar.selectedIndex].label;
  var CurrentMap1RadarSiteID = CurrentRadarOptions[1] + "1";
  var CurrentMap2RadarSiteID = CurrentRadarOptions[2] + "2" ;	  

	if ( CurrentRadarOptions[1] != "none") {

		if  (  RadarOverLays[CurrentMap1RadarSiteID]) { 

			clearTimeout(AnimTimer);
			clearTimeout(UpdateFilesTimer);			
			which = 0;
	
			for (i=0; i< RadarOverLays[CurrentMap1RadarSiteID].length; i++)  {

				RadarOverLays[CurrentMap1RadarSiteID][i].setMap(null);

			}

			delete RadarOverLays[CurrentMap1RadarSiteID]; 
			RadarDataTimes[CurrentMap1RadarSiteID]= [];
			RadarDataFiles[CurrentMap1RadarSiteID]= [];
			RadarDataCords[CurrentMap1RadarSiteID]= [];
			RadarElevationAngle[CurrentMap1RadarSiteID]= [];
   
		}

	}

 CurrentRadarOptions[1] = RadarSiteID;

 if ( RadarSiteID != "none") {

	var TimePatch = new Date();

	if (RealTimeMark == "Archive") {

	  if(DownloadComplete == 'true') { 

	    var RadarFileXmlUrlTimer = ArchiveXmlPath + "ScanningRadarFilesSplash" + LoopTime + SID + ".xml" + "?Time=" + TimePatch.getTime();
	  }
	  else {
		  
            var RadarFileXmlUrlTimer = BaseXmlPath + "ScanningRadarFilesSplash60_DEMO.xml?Time=1699040090138"

          }
	}
	else if (RealTimeMark == "Realtime")  
	 { 

	  var RadarFileXmlUrlTimer = BaseXmlPath + "ScanningRadarFilesSplash60_DEMO.xml?Time=1699040090138"

	}
	else {

          enableWidgets();

	  return false; 
	} 



	delete TimePatch;

	downloadUrl(RadarFileXmlUrlTimer, function(data) {

          try {
	    var xml = data.responseXML;
	    var RadarFiles = xml.documentElement.getElementsByTagName(RadarSiteID);
	    loadMap1RadarXmlFiles(xml, RadarFiles, RadarSiteID, RadarSiteName, MapNumber);
          }
          catch(err) {

            if(RealTimeMark == "Realtime" ) {

              // second try after a delay...

              sleep(500);

              downloadUrl(RadarFileXmlUrlTimer, function(data) {

                try {

                  var xml = data.responseXML;
                  var RadarFiles = xml.documentElement.getElementsByTagName(RadarSiteID);
                  loadMap1RadarXmlFiles(xml, RadarFiles, RadarSiteID, RadarSiteName, MapNumber);
                }
                catch(err) {

                  enableWidgets();

                  alert("A server error occurred.  Please try again.");
                }
              });
            }
          }
	});
 }
 else {

   enableWidgets();
 }

}




function loadMap2RadarDataFiles(Radar, MapNumber) {

 updateLegend(2);

 if (ImgNum[MapNumber] > 0) { 

	alert("Please wait for Map to finish loading"); 
	return false; 

  }


  var RadarSiteID   = Radar.options[Radar.selectedIndex].value;
  var RadarSiteName = Radar.options[Radar.selectedIndex].label;

  var CurrentMap2RadarSiteID = CurrentRadarOptions[2] + "2";
  
  var CurrentMap1RadarSiteID = CurrentRadarOptions[1] + "1";

  if ( CurrentRadarOptions[2] != "none") { 

	clearTimeout(UpdateFilesTimer);
		
		clearTimeout(AnimTimer);
		
		if  (  RadarOverLays[CurrentMap2RadarSiteID]) {

			for (i=0; i < RadarOverLays[CurrentMap2RadarSiteID].length; i++)  {

				RadarOverLays[CurrentMap2RadarSiteID][i].setMap(null);

			}

			delete RadarOverLays[CurrentMap2RadarSiteID];
			RadarDataTimes[CurrentMap2RadarSiteID]= [];
			RadarDataFiles[CurrentMap2RadarSiteID]= [];
			RadarDataCords[CurrentMap2RadarSiteID]= [];
			RadarElevationAngle[CurrentMap2RadarSiteID]= [];

			CurrentRadarOptions[2] = RadarSiteID;	

		} 

   }

if ( CurrentRadarOptions[1] != "none")      { 

	if ( RadarSiteID != "none") {

		CurrentRadarOptions[2] = RadarSiteID;	

		var RadarSiteID   = Radar.options[Radar.selectedIndex].value;

		var TimePatch = new Date();

		  if (RealTimeMark == "Archive") {

		    if(DownloadComplete == 'true' ) {

			RadarOverLays[CurrentMap1RadarSiteID][which].setOpacity(0);	

			var RadarFileXmlUrlTimer = ArchiveXmlPath + "ScanningRadarFilesSplash" + LoopTime + SID + ".xml" + "?Time=" + TimePatch.getTime();
		    }
		    else {

	                var RadarFileXmlUrlTimer = BaseXmlPath + "ScanningRadarFilesSplash60_DEMO.xml?Time=1699040090138"
	            }
		  }
		  else if (RealTimeMark == "Realtime")   {
			try {
				RadarOverLays[CurrentMap1RadarSiteID][which].setOpacity(0);	

	                        var RadarFileXmlUrlTimer = BaseXmlPath + "ScanningRadarFilesSplash60_DEMO.xml?Time=1699040090138"

			} catch(err) {
				console.log(err);
			}


		}
		else {
			return false;
		 }


		which = 0;
		delete TimePatch;

		downloadUrl(RadarFileXmlUrlTimer, function(data) {

                  try {

                    var xml = data.responseXML;
                    var RadarFiles = xml.documentElement.getElementsByTagName(RadarSiteID);
	  	    loadMap2RadarXmlFiles(xml, RadarFiles, RadarSiteID, RadarSiteName, MapNumber);
                  }
                  catch(err) {

                    if(RealTimeMark == "Realtime" ) {

                      // second try after a delay...

                      sleep(500);

                      downloadUrl(RadarFileXmlUrlTimer, function(data) {

                        try {

                          var xml = data.responseXML;
                          var RadarFiles = xml.documentElement.getElementsByTagName(RadarSiteID);
  	      	          loadMap2RadarXmlFiles(xml, RadarFiles, RadarSiteID, RadarSiteName, MapNumber);
                        }
                        catch(err) {

                          enableWidgets();

                          alert("A server error occurred.  Please try again.");
                        }
                      });
                    }
                  }
                });
	}
        else {

          enableWidgets();
        }
}
else { 

  enableWidgets();
} 
}


function loadMap2RadarXmlFiles(xml, RadarFiles, RadarSiteID, RadarSiteName, MapNumber) {

var MapRadarSiteID =  RadarSiteID + MapNumber;   

var Map1RadarSiteID = CurrentRadarOptions[1] + '1'; 

if ( CurrentRadarOptions[1] != "none") { 

for (i=0; i< RadarDataFiles[Map1RadarSiteID].length; i++)  {	 

	var MatchedFile = -1; 

	var PrevTimeDiff = MasterTimeDelta; 
	  
	for (j=0; j< RadarFiles.length; j++)  {

		var EpochTime =  RadarFiles[j].getAttribute("epochtime");

		TimeDiff   =    Math.abs(( EpochTime - RadarDataTimes[Map1RadarSiteID][i]));

		if (TimeDiff < MasterTimeDelta) {

			if (TimeDiff < PrevTimeDiff) { 

				MatchedFile = j;  
				PrevTimeDiff = TimeDiff; 
			}
		} 
	}

	if (MatchedFile >= 0) {

	var FileName =   RadarFiles[MatchedFile].getAttribute("name");
	var EpochTime =  RadarFiles[MatchedFile].getAttribute("epochtime");
	var LatLongBounds =  RadarFiles[MatchedFile].getAttribute("latlongbounds");
	var ElevationAngle =  RadarFiles[MatchedFile].getAttribute("angle");
		
	RadarDataFiles[MapRadarSiteID].push(FileName);
	RadarDataTimes[MapRadarSiteID].push(EpochTime);
	RadarDataCords[MapRadarSiteID].push(LatLongBounds);
	RadarElevationAngle[MapRadarSiteID].push(ElevationAngle);

	}

	if (MatchedFile < 0) {

	var FileName = MissingRadarFileName;
	var EpochTime = 10000;
	var LatLongBounds = "0,0,0,0";  
	var ElevationAngle = "Not Available";  

	RadarDataFiles[MapRadarSiteID].push(FileName);
	RadarDataTimes[MapRadarSiteID].push(EpochTime);
	RadarDataCords[MapRadarSiteID].push(LatLongBounds);
	RadarElevationAngle[MapRadarSiteID].push(ElevationAngle);
	
	}  
}

loadOverlaysMap2(RadarSiteID, RadarSiteName, MapNumber, RadarFiles.length);

updateLatestTimes();

if ( RealTimeMark == "Realtime" ) { 

//	checkForNewUpdates();    

}

}
else {

  enableWidgets();
}

}



function loadMap1RadarXmlFiles(xml, RadarFiles, RadarSiteID, RadarSiteName, MapNumber) { 

var MapRadarSiteID = RadarSiteID + MapNumber; 

for (i=0; i< RadarFiles.length; i++)  {

var FileName =   RadarFiles[i].getAttribute("name");
var EpochTime =  RadarFiles[i].getAttribute("epochtime");      
var LatLongBounds =  RadarFiles[i].getAttribute("latlongbounds");      
var ElevationAngle =  RadarFiles[i].getAttribute("angle");

var FullFileName = FileName

 RadarDataFiles[MapRadarSiteID].push(FullFileName);
 RadarDataTimes[MapRadarSiteID].push( EpochTime);
 RadarDataCords[MapRadarSiteID].push( LatLongBounds);
 RadarElevationAngle[MapRadarSiteID].push(ElevationAngle);  

}

loadOverlaysMap1(RadarSiteID, RadarSiteName, MapNumber)

}



function calculateTimeDelta(RadarFiles, MapNumber) { 

  var PrevTimeDelta = 0; 
  var Count = 0; 
  var TotalTimeDelta = 0; 

  for (i=0; i< RadarFiles.length; i++)  {

    var EpochTime =  RadarFiles[i].getAttribute("epochtime");      

    var TimeDelta = (Math.abs(PrevTimeDelta - EpochTime) );

    if  (TimeDelta < 1000) {

	TotalTimeDelta += TimeDelta
	Count += 1; 
    } 

    PrevTimeDelta = EpochTime;  	
  } 

  if (Count > 0) { 

    var AvgTimeDelta = (TotalTimeDelta / Count); 

    CurrentTimeDelta[MapNumber] = AvgTimeDelta	
  } 

  if (CurrentTimeDelta[1] > CurrentTimeDelta[2]) {

    MasterTimeDelta = CurrentTimeDelta[1];  
  }
  else { 

    MasterTimeDelta = CurrentTimeDelta[2];  
  }   
}	 


function updateRadarFiles(xml, Map1RadarFiles, Map2RadarFiles) { 

RadarSiteID1        = CurrentRadarOptions[1];
RadarSiteID2        = CurrentRadarOptions[2];

Map1RadarSiteID = RadarSiteID1 + '1'; 
Map2RadarSiteID = RadarSiteID2 + '2'; 


if (CurrentRadarOptions[1] != 'none' &&  CurrentRadarOptions[2] != 'none') {

for (i=0; i< Map1RadarFiles.length; i++)  {

     var Map1FileName =  Map1RadarFiles[i].getAttribute("name");
     var Map1EpochTime = Map1RadarFiles[i].getAttribute("epochtime");
     var Map1LatLongBounds = Map1RadarFiles[i].getAttribute("latlongbounds");
     var Map1ElevationAngle = Map1RadarFiles[i].getAttribute("angle");
     var PrevTimeDiff = MasterTimeDelta;

    if (Map1EpochTime > RadarDataTimes[Map1RadarSiteID][ RadarDataTimes[Map1RadarSiteID].length - 1] ) {

		clearTimeout(AnimTimer)

		MatchedFile = -1; 

		for (j=0; j < Map2RadarFiles.length; j++)  { 

			var Map2FileName =   Map2RadarFiles[j].getAttribute("name");
			var Map2EpochTime =  Map2RadarFiles[j].getAttribute("epochtime");
			var Map2LatLongBounds =  Map2RadarFiles[j].getAttribute("latlongbounds");
			var Map2ElevationAngle =  Map2RadarFiles[j].getAttribute("angle");

			TimeDiff   =    Math.abs( Map2EpochTime - Map1EpochTime);

			if (TimeDiff < MasterTimeDelta) {

				if (TimeDiff < PrevTimeDiff) {

					MatchedFile = j;
					PrevTimeDiff = TimeDiff;
				}

			}
		}

		if (MatchedFile >= 0) {

			var Map2FileName =   Map2RadarFiles[MatchedFile].getAttribute("name");
			var Map2EpochTime =  Map2RadarFiles[MatchedFile].getAttribute("epochtime");
			var Map2LatLongBounds =  Map2RadarFiles[MatchedFile].getAttribute("latlongbounds");
			var Map2ElevationAngle =  Map2RadarFiles[MatchedFile].getAttribute("angle");

		}

		if (MatchedFile < 0) {

			var Map2FileName = MissingRadarFileName;
			var Map2EpochTime = 10000;

		 }


		RadarDataTimes[Map1RadarSiteID].shift();
		RadarDataFiles[Map1RadarSiteID].shift();
		RadarDataCords[Map1RadarSiteID].shift();
		RadarElevationAngle[Map1RadarSiteID].shift();

		RadarDataFiles[Map1RadarSiteID].push(Map1FileName);
		RadarDataTimes[Map1RadarSiteID].push(Map1EpochTime);
		RadarDataCords[Map1RadarSiteID].push(Map1LatLongBounds);
		RadarElevationAngle[Map1RadarSiteID].push(Map1ElevationAngle);


		RadarDataTimes[Map2RadarSiteID].shift();
		RadarDataFiles[Map2RadarSiteID].shift();
		RadarDataCords[Map2RadarSiteID].shift();
		RadarElevationAngle[Map2RadarSiteID].shift();

		RadarDataFiles[Map2RadarSiteID].push(Map2FileName);
		RadarDataTimes[Map2RadarSiteID].push(Map2EpochTime);
		RadarDataCords[Map2RadarSiteID].push(Map2LatLongBounds);
		RadarElevationAngle[Map2RadarSiteID].push(Map2ElevationAngle);

		Map1ArrSize =  (RadarDataFiles[Map1RadarSiteID].length - 1 );
		Map2ArrSize =  (RadarDataFiles[Map2RadarSiteID].length - 1 );
	
		RadarOverLays[Map1RadarSiteID][which].setOpacity(0);
		RadarOverLays[Map2RadarSiteID][which].setOpacity(0);
	
		RadarOverLays[Map1RadarSiteID].shift();	
		RadarOverLays[Map2RadarSiteID].shift();	


		var Bounds =  RadarDataCords[Map1RadarSiteID][Map1ArrSize].split(","); 
			
		var swBound = new google.maps.LatLng(Bounds[1], Bounds[3]);

		var neBound = new google.maps.LatLng(Bounds[0], Bounds[2]);

		var MapBounds = new google.maps.LatLngBounds(swBound, neBound);

		var srcImage = RadarDataFiles[Map1RadarSiteID][Map1ArrSize];
	
		var Map1OverLaysArrSize = (RadarOverLays[Map1RadarSiteID].length );  	

		RadarOverLays[Map1RadarSiteID][Map1OverLaysArrSize] =   new google.maps.GroundOverlay(
		srcImage,
		MapBounds, {opacity: 0.0 });

		RadarOverLays[Map1RadarSiteID][Map1OverLaysArrSize].setMap(Maps[1]);



		var Bounds =  RadarDataCords[Map2RadarSiteID][Map2ArrSize].split(",");

		var swBound = new google.maps.LatLng(Bounds[1], Bounds[3]);

		var neBound = new google.maps.LatLng(Bounds[0], Bounds[2]);

		var MapBounds = new google.maps.LatLngBounds(swBound, neBound);

		var srcImage = RadarDataFiles[Map2RadarSiteID][Map2ArrSize];

		var Map2OverLaysArrSize = (RadarOverLays[Map2RadarSiteID].length );

		RadarOverLays[Map2RadarSiteID][Map2OverLaysArrSize] =   new google.maps.GroundOverlay(
		srcImage,
		MapBounds, {opacity: 0.0 });

		RadarOverLays[Map2RadarSiteID][Map2OverLaysArrSize].setMap(Maps[2]);

		runEffect();

		RadarOverLays[Map1RadarSiteID][which].setOpacity(0);
		RadarOverLays[Map2RadarSiteID][which].setOpacity(0);

		var Map1ArrSize =  (RadarDataTimes[Map1RadarSiteID].length - 1 );
		var Map2ArrSize =  (RadarDataTimes[Map2RadarSiteID].length - 1 );

		var Map1TimeObj = convertTimeStamp(RadarDataTimes[Map1RadarSiteID][Map1ArrSize]);
		var Map2TimeObj = convertTimeStamp(RadarDataTimes[Map2RadarSiteID][Map2ArrSize]);


		updateLatestTimes();


		writeTimeStamps(Map1RadarSiteID,  RadarOverLays[Map1RadarSiteID].length, which)
		writeTimeStamps(Map2RadarSiteID,  RadarOverLays[Map2RadarSiteID].length, which)

		runEffect();

		// Shift array on screen to next element.

		var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);


		if ((CurrentDir == "stop") || (CurrentDir == "stepback") || (CurrentDir == "stepforward")  ) { 
		
			   RadarOverLays[Map1RadarSiteID][which].setOpacity(OpacityValue);
			   RadarOverLays[Map2RadarSiteID][which].setOpacity(OpacityValue);


		}
		else { 

			changeDirection(CurrentDir);
		} 	
	}
}
}
}



function updateLatestTimes() { 


var RadarSiteID1        = CurrentRadarOptions[1];
var RadarSiteID2        = CurrentRadarOptions[2];

var Map1RadarSiteID = RadarSiteID1 + '1';
var Map2RadarSiteID = RadarSiteID2 + '2';

var Map1ArrSize =  (RadarDataTimes[Map1RadarSiteID].length );
var Map2ArrSize =  (RadarDataTimes[Map2RadarSiteID].length );

var Map1TimeObj = convertTimeStamp(RadarDataTimes[Map1RadarSiteID][Map1ArrSize]);
var Map2TimeObj = convertTimeStamp(RadarDataTimes[Map2RadarSiteID][Map2ArrSize]);


var Map1TimeString = "";
var Map2TimeString = "";

var BeginFileDate = new Date(1634234400000);

for (var i = Map1ArrSize; i > 1; i-- ) { 

    var Map1TimeObj = convertTimeStamp(RadarDataTimes[Map1RadarSiteID][i])  

    if (Map1TimeObj > BeginFileDate ) {

	Map1TimeString = Map1TimeObj.toUTCString()
	break; 

    } else {

	 Map1TimeString = "Not Available"

    }

} 


for (var i = Map2ArrSize; i > 1; i-- ) { 

    var Map2TimeObj = convertTimeStamp(RadarDataTimes[Map2RadarSiteID][i])

    if (Map2TimeObj > BeginFileDate ) {

	Map2TimeString = Map2TimeObj.toUTCString()
	break;

    } else {

	 Map2TimeString = "Not Available"

    }

}


var Map1LatestTS = document.getElementById("Map1LatestTimeStamp");

var Map1Output =  "Latest Time: " + Map1TimeString;

Map1LatestTS.innerHTML =  Map1Output;

var Map2LatestTS = document.getElementById("Map2LatestTimeStamp");

var Map2Output =  "Latest Time: " +  Map2TimeString;

Map2LatestTS.innerHTML =  Map2Output;



}





function checkForNewUpdates() { 


if ( CurrentRadarOptions[1] != 'none' && CurrentRadarOptions[2] != 'none') { 
		
        // set the most recent site status
        SetSiteStatus();

	var TimePatch = new Date();

	var RadarFileXmlUrlTimer = BaseXmlPath + 'ScanningRadarFilesSplash' + LoopTime + '.xml?Time=' + TimePatch.getTime();
	delete TimePatch;

	downloadUrl(RadarFileXmlUrlTimer, function(data) {

	var xml = data.responseXML;
	var Map1RadarFiles = xml.documentElement.getElementsByTagName(CurrentRadarOptions[1]);
	var Map2RadarFiles = xml.documentElement.getElementsByTagName(CurrentRadarOptions[2]);

	updateRadarFiles(xml, Map1RadarFiles, Map2RadarFiles);

	});

	
	if (RealTimeMark == "Realtime" ) {

		UpdateFilesTimer = setTimeout(function(){checkForNewUpdates();  }, 30000);
	} 
}


}





function downloadUrl(url, callback) {

//var request = window.ActiveXObject ?
//  new ActiveXObject('Microsoft.XMLHTTP') :
//  new XMLHttpRequest;

var request = new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == XMLHttpRequest.DONE) {
  request.onreadystatechange = doNothing;
  callback(request, request.status);
}

};

request.open('GET', url, true);
request.send(null);
}



function doNothing() {}




function updateOpacity() { 

var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);

Keys = Object.keys(RadarOverLays);

	for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(OpacityValue);

	} 

}



function changeDirection(Direction)  { 


if ((Direction == 'stop') || (Direction == 'stepforward') || (Direction == 'stepback'))   {

clearTimeout(AnimTimer);
CurrentDir = Direction;
}



if (CurrentRadarOptions[1] == 'none' ) {


   alert("Please choose a radar product for Map 1");

   return false; 
} 



if (CurrentRadarOptions[2] == 'none' ) {


   alert("Please choose a radar product for Map 2");

   return false;
}



if (Direction == 'forward')  { 

clearTimeout(AnimTimer);
forward();

}		


if (Direction == 'reverse')   {

clearTimeout(AnimTimer);
reverse();

}




if (Direction == 'stepforward')   {

stepForward();

}



if (Direction == 'stepback')   {

stepReverse();

}

CurrentDir = Direction;


}




Object.keys = Object.keys || function(o) {
var result = [];
for(var name in o) {
if (o.hasOwnProperty(name))
  result.push(name);
}
return result;
};







function forward() {

var Speed =  Math.abs($( "#slider" ).slider( "value" ));
var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);


Keys = Object.keys(RadarOverLays);


if( which < ( RadarOverLays[Keys[0]].length - 1)){


	RadarTime = ""; 

		// loop through the keys in RadarOverlays (e.g.  key = kpix, kmux, kdax, etc) 
	for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(0);
						
		}
		which++
		
	for (var key in RadarOverLays)  {
		
		RadarOverLays[key][which].setOpacity(OpacityValue);
		
		var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)


	}

 if ( which == RadarOverLays[Keys[0]].length - 1) {

	AnimTimer = setTimeout(forward,1250);

 }
else { 

	AnimTimer = setTimeout(forward,Speed);
}  

	
}
else {
	 for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(0);

		}
	which =  0;

	for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(OpacityValue);

		var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)

		


	 } 

AnimTimer = setTimeout(forward,Speed);
}

}




function writeTimeStamps(RadarSiteID, Length, which) { 

		MapNumber = RadarSiteID.substring(4,5)

		TimeObj = convertTimeStamp(RadarDataTimes[RadarSiteID][which]);

		var TimeString = ""; 

		var BeginFileDate = new Date(1634234400000);

		if (TimeObj > BeginFileDate ) { 

			TimeString = TimeObj.toUTCString()   

		} else {

			TimeString = "Not Available"

		} 

		 var Map1RadarTS = document.getElementById("Map1RadarTimeStamps");
		 var Map2RadarTS = document.getElementById("Map2RadarTimeStamps");

		if (MapNumber == 1) {

			 RadarTime = "Number:  " + (which + 1) + "/" +  Length + "<br> Time: " + TimeString  + "<br> Beam Elevation: " + RadarElevationAngle[RadarSiteID][which] + " degrees"

			 Map1RadarTS.innerHTML =  RadarTime;

		}


		  if (MapNumber == 2) {

			RadarTime = "Number:  " + (which + 1) + "/" +  Length + "<br> Time: " + TimeString  + "<br> Beam Elevation: " + RadarElevationAngle[RadarSiteID][which] + " degrees"

			Map2RadarTS.innerHTML =  RadarTime;

		}

} 




function reverse() {


var RadarTS = document.getElementById("RadarTimeStamps");

var Speed =  Math.abs($( "#slider" ).slider( "value" ));
var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);

Length = Object.keys(RadarDataFiles).length;

Keys = Object.keys(RadarOverLays);


     // This is assuming that all radar arrays have equal number of images

if( which > 0 ){


	RadarTime = "";

		// loop through the keys in RadarOverlays (e.g.  key = kpix, kmux, kdax, etc)
	for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(0);

		}
		which--

	for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(OpacityValue);

		MapNumber = key.substring(4,5)

		TimeObj = convertTimeStamp(RadarDataTimes[key][which]);
	
		var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)



	}

  if ( which == 0) {

	AnimTimer = setTimeout(reverse,1250);

 }
else {

	AnimTimer = setTimeout(reverse,Speed);
}

}
else {

	 for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(0);
		}
	which = RadarOverLays[Keys[0]].length - 1;
	for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(OpacityValue);


		 var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)




	}

AnimTimer = setTimeout(reverse,Speed);
}

}





function stepForward() {

clearTimeout(AnimTimer);

CurrentDir = 'stop'; 

var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);

Keys = Object.keys(RadarOverLays);


if( which < ( RadarOverLays[Keys[0]].length - 1)){


	RadarTime = "";

		// loop through the keys in RadarOverlays (e.g.  key = kpix, kmux, kdax, etc)
	for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(0);

		}
	
		which++;   

	for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(OpacityValue);

		  var Length = RadarOverLays[Keys[0]].length;

		  writeTimeStamps(key, Length, which)


	}

}
else {
	 for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(0);

		}

		 which = 0; 

	for (var key in RadarOverLays)  {

		 RadarOverLays[key][which].setOpacity(OpacityValue);


		var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)



	 }

}

}






function stepReverse() {

clearTimeout(AnimTimer);

CurrentDir = 'stop';

var RadarTS = document.getElementById("RadarTimeStamps");

Length = Object.keys(RadarDataFiles).length;

var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);


Keys = Object.keys(RadarOverLays);

     // This is assuming that all radar arrays have equal number of images

if( which > 0 ){

	RadarTime = "";

		// loop through the keys in RadarOverlays (e.g.  key = kpix, kmux, kdax, etc)
	for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(0);

		}
	
	which--

	for (var key in RadarOverLays)  {

		RadarOverLays[key][which].setOpacity(OpacityValue);


		var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)




       }

}
else {

	 for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(0);
		}
	which = RadarOverLays[Keys[0]].length - 1;
	for (var key in RadarOverLays)  {
		RadarOverLays[key][which].setOpacity(OpacityValue);


		var Length = RadarOverLays[Keys[0]].length;

		writeTimeStamps(key, Length, which)



	}

}

}


function setLoopTime(SelectObj) { 

SetSiteStatus();

SelLoopIndexLast = SelectObj.selectedIndex;

LoopTime = SelectObj.options[SelectObj.selectedIndex].value;

//if ( CurrentRadarOptions[1] != "none"  && CurrentRadarOptions[2] != "none") {
//
//  clearTimeout(AnimTimer);
//  clearTimeout(UpdateFilesTimer);
//  which = 0;
//
//  var SelMap1ID = document.getElementById('Map1RadarType');
//  var SelMap2ID = document.getElementById('Map2RadarType');
//
//  loadMap1RadarDataFiles(SelMap1ID, 1);	
//
//} 

setRealTimeMark();
}


function setRealTimeMark() { 

  var radioButtons = document.getElementsByName("RadioTime");
  var SelMap1ID    = document.getElementById('Map1RadarType');
  var SelMap2ID    = document.getElementById('Map2RadarType');
  var SelLoopID    = document.getElementById('LoopTime');

  var LabelMap1 = '';
  var LabelMap2 = '';

  if(SelMap1ID.selectedIndex > 0) {

    LabelMap1 = SelMap1ID.options[SelMap1ID.selectedIndex].label;
  }

  if(SelMap2ID.selectedIndex > 0) {

    LabelMap2 = SelMap2ID.options[SelMap2ID.selectedIndex].label;
  }

  for (var x = 0; x < radioButtons.length; x ++) {

    if (radioButtons[x].checked == 1) {

  	RealTimeMark = radioButtons[x].value;  		

    }
  }

  SelLoopID.options.length = 0;

  for (var i = 0; i < LoopDuration[RealTimeMark].length; i ++) {

    SelLoopID.options[SelLoopID.options.length] = new Option(LoopDuration[RealTimeMark][i]);
  }

  if (RealTimeMark == "Archive") {

    disableWidgets();

    clearMapRadar(CurrentRadarOptions[1], 1);
    clearMapRadar(CurrentRadarOptions[2], 2);

    SelLoopID.options[0].selected= 'true';
    LoopTime = SelLoopID.options[0].value;

    toggleCalInput("show"); 
    toggleDownloadStatus("show")	

    $('#RealtimeStatus1ID').hide();

    $('#HistoricalInventoryID').show();

    document.getElementById("DownloadStatusID").innerHTML = 'Waiting for Load Data...'

    CreateProductMenu(ArchiveProductsUrl, SelMap2ID, 2, SelMap2ID.value,LabelMap2,'historical');
    CreateProductMenu(ArchiveProductsUrl, SelMap1ID, 1, SelMap1ID.value,LabelMap1,'historical');
  }
  else { 

    disableWidgets();

    SelLoopID.options[SelLoopIndexLast].selected= 'true';
    LoopTime = SelLoopID.options[SelLoopIndexLast].value;

    RealtimeProductsUrl = ArchiveProductsUrl;

    toggleCalInput("show"); 	
    toggleDownloadStatus("show")

    $('#RealtimeStatus1ID').hide();
    $('#HistoricalInventoryID').show();

    CreateProductMenu(RealtimeProductsUrl, SelMap2ID, 2, SelMap2ID.value,LabelMap2,'realtime');
    CreateProductMenu(RealtimeProductsUrl, SelMap1ID, 1, SelMap1ID.value,LabelMap1,'realtime');
  }
} 


function CreateProductMenu(ProductUrl,MenuID, MapNumber, SelMap,LabelMap,Mode,QcInput) {

  MenuID.options.length = 0;

  MenuID.options[MenuID.options.length] = new Option("-","none");

  downloadUrl(ProductUrl, function(data) {

    var xml = data.responseXML;

    var ProdID = xml.documentElement.getElementsByTagName('*');

    var MenuMatch = 'false';

    for (i = 0; i < ProdID.length; i++) {

      ProdLabel = ProdID[i].getAttribute('label');

      MenuID.options[MenuID.options.length] = new Option(ProdLabel,ProdID[i].tagName);

      var MapID = ProdID[i].tagName + MapNumber;

      if (!(MapID in RadarDataFiles)) {

        RadarDataFiles[MapID]      = [];
        RadarDataCords[MapID]      = [];
        RadarDataTimes[MapID]      = [];
        RadarElevationAngle[MapID] = [];
      }

      if(ProdID[i].tagName == SelMap) {

        MenuID.value = SelMap;
        MenuMatch = 'true';
      }
    }

    // set default products on initialization
    if(MapMenuInit[MapNumber][1] == 'true') {

      if(MapMenuInit[MapNumber][0] < MenuID.options.length) {

        var MenuIDIndex = MapMenuInit[MapNumber][0];
      }
      else {

        if(MenuID.options.length >= 1) {

          var MenuIDIndex = 1;
        }
        else {

          var MenuIDIndex = 0;
        }
      }

      CurrentRadarOptions[MapNumber] = MenuID.options[MenuIDIndex].value; 
      MenuID.value = MenuID.options[MenuIDIndex].value;
      MapMenuInit[MapNumber][1] = 'false';
      MenuMatch = 'true';
    }

    if(MenuMatch == 'false') {

      if(LabelMap.length > 0) {

        alert('\n' + LabelMap + ' is not available in ' +
              Mode + ' mode\n\nChoose a different radar ' +
              'product for Map ' + MapNumber);
      }
      else {

        if (RealTimeMark == "Realtime") {

          alert('\nAn empty radar product option has been selected\n' +
                '\nChoose a different radar product for Map ' + MapNumber);
        }
      }
      enableWidgets();
    }

    if(MapNumber == 1) {

      loadMap1RadarDataFiles(MenuID, MapNumber);
    }  
  });
}

function loadArchiveData() {

disableWidgets();

if ( DownloadInProgress == "true"  )  {

  alert("Please wait for current download to finish");

  enableWidgets();

  return false;

}


var EndTime = document.getElementById('ArchiveDateID').value;


if (EndTime.length != 16)  {

  alert("Please enter valid time format:  YYYY-MM-DD HH:MM");

  enableWidgets();

  return false; 
} 

var CurrentDate = new Date();
var BeginFileDate = new Date(1634234400000);


if (EndTime > CurrentDate) {

  alert("Please select a time less the current time")

  enableWidgets();

  return false; 
} 

var Year  =  EndTime.slice(0,4)
var Month =  EndTime.slice(5,7)
var Day   =  EndTime.slice(8,10)
var Hour  =  EndTime.slice(11,13)
var Min   =  EndTime.slice(14,16)
	    
UserDate = new Date(Date.UTC(parseInt(Year),parseInt(Month) - 1,parseInt(Day),parseInt(Hour),parseInt(Min)));

if (UserDate < BeginFileDate) {

  alert("Historical data begins after Oct-14-2021 18:00 UTC")

  enableWidgets();

  return false; 
}

if (CurrentRadarOptions[1] == "none")  { 

  alert("Please choose a radar products for Map1");

  enableWidgets();

  return false; 

}

if (CurrentRadarOptions[2] == "none")  { 

  alert("Please choose a radar product for Map2");

  enableWidgets();

  return false; 

}

var SelMap1ID = document.getElementById('Map1RadarType');
var SelMap2ID = document.getElementById('Map2RadarType');

if(SelMap1ID.value == 'none') {

  alert('\nAn empty radar product option has been selected\n' +
        '\nChoose a different radar product for Map1');

  enableWidgets();

  return false; 
}

if(SelMap2ID.value == 'none') {

  alert('\nAn empty radar product option has been selected\n' +
        '\nChoose a different radar product for Map2');

  enableWidgets();

  return false;
}

clearTimeout(AnimTimer);
clearTimeout(UpdateFilesTimer);

which = 0;

var Map1LatestTS = document.getElementById("Map1LatestTimeStamp");
var Map2LatestTS = document.getElementById("Map2LatestTimeStamp");
var Map1RadarTS = document.getElementById("Map1RadarTimeStamps");
var Map2RadarTS = document.getElementById("Map2RadarTimeStamps");

Map2LatestTS.innerHTML =  "";
Map1LatestTS.innerHTML =  "";
Map1RadarTS.innerHTML =  "";
Map2RadarTS.innerHTML =  "";

var TimeString = Year + Month + Day + Hour + Min; 

var TimePatch = new Date();

var ArchiveUrlLink =  BaseWebPath + "GetArchiveData.php?Date=" + TimeString +"&SID=" + SID  + "&Time=" + TimePatch.getTime();

     delete TimePatch;

     document.getElementById("DownloadStatusID").innerHTML= "Downloading...please wait";

     toggleDownloadStatus("show");

     DownloadInProgress = "true"; 

     $("#LoadArchiveDataID").attr("disabled", "disabled");

     downloadUrl(ArchiveUrlLink, function(data) {

	var xml =  data.responseXML;
	var RequestNode = xml.documentElement.getElementsByTagName("request");
	var RequestCounter =  RequestNode[0].getAttribute("number");
			
	if ((RequestCounter) > 50 ) {
			
		alert("Exceeded number of requests. Please try again later."); 
			
                document.getElementById("DownloadStatusID").innerHTML= "Exceeded number of requests";

		}
		else {  

                document.getElementById("DownloadStatusID").innerHTML= "Loaded: " + EndTime;
		DownloadComplete = "true"; 			
		HasDownloaded = "true"; 			
		loadMap1RadarDataFiles(SelMap1ID,1); 
			
		}

		DownloadInProgress = "false";
		$("#LoadArchiveDataID").removeAttr("disabled");


//		setTimeout(function(){ toggleDownloadStatus("hide");  }, 5000);
	


        });


}








function clearMapRadar(RadarSiteID, MapNumber) { 

    if (RadarSiteID != 'none') { 

    	var MapRadarSiteID = RadarSiteID + MapNumber;

        if(typeof RadarOverLays[MapRadarSiteID] !== 'undefined') {

    	  for (i=0; i< RadarOverLays[MapRadarSiteID].length; i++)  {

            RadarOverLays[MapRadarSiteID][i].setMap(null);
          }
        }

    	RadarOverLays[MapRadarSiteID]       = [];
    	RadarDataTimes[MapRadarSiteID]      = [];
    	RadarDataFiles[MapRadarSiteID]      = [];
    	RadarDataCords[MapRadarSiteID]      = [];
    	RadarElevationAngle[MapRadarSiteID] = [];

	CurrentRadarOptions[MapNumber] != 'none'; 

        var MapRadarTS = document.getElementById('Map' + MapNumber + 'RadarTimeStamps');

        MapRadarTS.innerHTML = '';

        var MapLatestTS = document.getElementById('Map' + MapNumber + 'LatestTimeStamp');

        MapLatestTS.innerHTML = '';
   }

}






function loadOverlaysMap1(RadarSiteID, RadarSiteName, MapNumber) {

	     var MapRadarSiteID = RadarSiteID + MapNumber;  

	     if (RadarDataFiles[MapRadarSiteID].length > 0) {
	  
             RadarOverLays[MapRadarSiteID] = []; 

       	     pb[MapNumber].start(RadarDataFiles[MapRadarSiteID].length);
	   
	     loadRadarData(RadarSiteID, MapNumber);    

	     }
	     else { 

             var AlertMssg = "\nNo data available for " + RadarSiteName + "\n\nPlease choose a different radar product for Map1 or a different time";
	     alert(AlertMssg);
	   
	    // CurrentRadarOptions[2] = CurrentRadarOptions[1] = 'none';  
//	     var SelMap1ID = document.getElementById('Map1RadarType');
//           var SelMap2ID = document.getElementById('Map2RadarType');

//	     SelMap1ID.options[0].selected= 'true';
//           SelMap2ID.options[0].selected= 'true';

             RadarDataTimes[MapRadarSiteID]= [];
             RadarDataFiles[MapRadarSiteID]= [];
             RadarDataCords[MapRadarSiteID]= [];
             RadarElevationAngle[MapRadarSiteID]= [];
				    
             enableWidgets();
	    } 	
}
       	






function loadOverlaysMap2(RadarSiteID, RadarSiteName, MapNumber, NumFiles) {

             var MapRadarSiteID = RadarSiteID + MapNumber;

             if (NumFiles && (RadarDataFiles[MapRadarSiteID].length > 0)) {

             RadarOverLays[MapRadarSiteID] = [];
             pb[MapNumber].start(RadarDataFiles[MapRadarSiteID].length);

             loadRadarData(RadarSiteID, MapNumber);

             }
             else {

             var AlertMssg = "\nNo data available for " + RadarSiteName + "\n\nPlease choose a different radar product for Map2 or a different time";
             alert(AlertMssg);

//             CurrentRadarOptions[2] = 'none';

//             var SelMap2ID = document.getElementById('Map2RadarType');

//             SelMap2ID.options[0].selected= 'true';

             enableWidgets();
            }

}






function loadRadarData(RadarSiteID, MapNumber) {

	   
	    var MapRadarSiteID = RadarSiteID + MapNumber;  

	    if (ImgNum[MapNumber] <  RadarDataFiles[MapRadarSiteID].length) { 
	
 	   		var Bounds =  RadarDataCords[MapRadarSiteID][ImgNum[MapNumber]].split(",");

                        var swBound = new google.maps.LatLng(Bounds[1], Bounds[3]);

                        var neBound = new google.maps.LatLng(Bounds[0], Bounds[2]);

                        var MapBounds = new google.maps.LatLngBounds(swBound, neBound);

                        var srcImage = RadarDataFiles[MapRadarSiteID][ImgNum[MapNumber]];

                        RadarOverLays[MapRadarSiteID][ImgNum[MapNumber]] =   new google.maps.GroundOverlay(
                        srcImage,
                        MapBounds, {opacity: 0.0 });

	            	RadarOverLays[MapRadarSiteID][ImgNum[MapNumber]].setMap(Maps[MapNumber]);

		  	pb[MapNumber].updateBar(1);

     		 	setTimeout(function(){loadRadarData(RadarSiteID, MapNumber );  }, 10);

			ImgNum[MapNumber]++;
	    }
	
           else { 

                ImgNum[MapNumber] = 0;
      	        pb[MapNumber].hide();

		// Auto load Map 2

	    	if (MapNumber == 1) {

                        var SelMap2ID = document.getElementById('Map2RadarType');
                        loadMap2RadarDataFiles(SelMap2ID, 2);

           	}

		// Check current animation state and set it. 		

		 if (MapNumber == 2) {

		    var RadarSiteID1 = CurrentRadarOptions[1];
     		    var RadarSiteID2 = CurrentRadarOptions[2];

		    var Map1RadarSiteID = RadarSiteID1 + '1';
		    var Map2RadarSiteID = RadarSiteID2 + '2';
		
                    var Map1ArrSize = (RadarDataTimes[Map1RadarSiteID].length - 1 );
                    var Map2ArrSize = (RadarDataTimes[Map2RadarSiteID].length - 1 );

                    var Map1TimeObj = convertTimeStamp(RadarDataTimes[Map1RadarSiteID][Map1ArrSize]);
                    var Map2TimeObj = convertTimeStamp(RadarDataTimes[Map2RadarSiteID][Map2ArrSize]);

                    updateLatestTimes();

                    // Shift array on screen to next element.

                    var Map1RadarTS = document.getElementById("Map1RadarTimeStamps");
                    var Map2RadarTS = document.getElementById("Map2RadarTimeStamps");

                    var OpacityValue =  Math.abs($( "#Opacityslider" ).slider( "value" ) / 100);

                    var Map1TimeObj = convertTimeStamp(RadarDataTimes[Map1RadarSiteID][which]);
                    var Map2TimeObj = convertTimeStamp(RadarDataTimes[Map2RadarSiteID][which]);

		    writeTimeStamps(Map1RadarSiteID,  RadarOverLays[Map1RadarSiteID].length, which)
                    writeTimeStamps(Map2RadarSiteID,  RadarOverLays[Map2RadarSiteID].length, which)

                    RadarOverLays[Map1RadarSiteID][which].setOpacity(OpacityValue);
                    RadarOverLays[Map2RadarSiteID][which].setOpacity(OpacityValue);
			
                    changeDirection(CurrentDir);

                    enableWidgets();
		} 
	  } 
}

function SetSiteStatus() {

    var SiteStatusUrl = BaseXmlPath + "ScanningRadarFilesStatusSplash" + LoopTime + ".xml";

    downloadUrl(SiteStatusUrl, function(data) {

      var xml = data.responseXML;

      var Site = xml.documentElement.getElementsByTagName('*');

      for (i = 0; i < Site.length; i++) {

        var ElementID = Site[i].tagName + 'StatusImage';

        try {

          var ImageStatus = document.getElementById(ElementID);

          ImageStatus.src = Site[i].getAttribute('status');
        }
        catch(err) {
        }
      }
    });
}

function resetArchive() {

var SelMap1ID    = document.getElementById('Map1RadarType');
var SelMap2ID    = document.getElementById('Map2RadarType');

SelMap1ID.value = 'none';
SelMap2ID.value = 'none';

SelMap1ID.selectedIndex = 0;
SelMap2ID.selectedIndex = 0;

DownloadComplete = 'false';

document.getElementById('ArchiveDateID').value = '';

setRealTimeMark();

}
  </script>



<table border=1 id="map_table" style="min-width: 1200px;">

<tr>
	<td width="25%">
	<div id="Map1RadarTimeStamps"></div>
	</td> 

	<td width="25%">
        <div id="Map1LatestTimeStamp"></div>
        </td>

	<td width="25%">
	<div id="Map2RadarTimeStamps"></div>
	</td>

	<td width="25%">
	<div id="Map2LatestTimeStamp"></div>
	</td>
</tr>

<tr>

	<td id="widgets" colspan="4"> 
	<table id="widgettable" border=0>
	<tr>
	        <td id="tdslide1">

		<center> 
        	<button type"input" id="stepreverse"  value="stepreverse"  name="stepReverse" title="Step Back" onclick="changeDirection('stepback')"> </button>
        	<button type"input" id="reverse"  value="reverse"  name="RadarReflReverse"  title="Play Reverse" onclick="changeDirection('reverse')"> </button>
        	<button type"input" id="stop"  value="stop"  name="RadarReflStop"  title="Stop" onclick="changeDirection('stop')"> </button>
        	<button type"input" id="play"  value="play"  name="RadarRefl"  title="Play Forward" onclick="changeDirection('forward')"> </button>
        	<button type"input" id="stepforward"  value="stepforward"  name="stepForward"  title="Step Forward" onclick="changeDirection('stepforward')"> </button>
		<br> 	
		
		
		<center> 
        	Animation Speed        
        	<table width=225>
        	<tr>
		<td width=50 align="right">
                	Slow
                	</td>
                	<td>
                	<div id="slider"> </div>
                	</td>
                	<td width=50 align="left">
                	Fast
                	</td>
        	</tr>
        	</table>
		<center> 
	
		</td>
        	<td id="tdslide2">
		<center>
		Image Opacity
        	<table width=200>
        		<tr>
                	<td width=50 align="right">
                	0%
                	</td>
                	<td>
                	<div id="Opacityslider"> </div>
                	</td>
                	<td width=50 align="left">
                	100%
                	</td>
        		</tr>
        	</table>
       	 	</center> 
	 	</td>


         	<td id="tdslide3">
         	<center>
  
                Looptime (minutes)
		<br>
		<select id="LoopTime" onchange="setLoopTime(this);"/>
        	</select>

         	</center>
         	</td>

	
                <td id="tdslide4">
                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspData Source
                  <br>
                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                  <input type="radio" id="RealTimeID" name="RadioTime" value="Realtime" onclick="setRealTimeMark();" >&nbspRealtime<br>
                  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                  <input type="radio" id="ArchiveTimeID" name="RadioTime" value="Archive" onclick="setRealTimeMark();" >&nbspHistorical
                </td>

                <td id="CalendarID">
	          End Time (UTC):
                  <input id="ArchiveDateID" name="ArchiveDate" type="text" style="width: 102px"></a>
                  <input type="button" id="LoadArchiveDataID" value="Load Data" name="LoadArchiveData" onclick="loadArchiveData();"><br>
                  <input type="button" id="ResetArchiveID" value="Clear Data" name="ResetArchive" onclick="resetArchive();">
                  <br>

		  <div id="DownloadStatusID"> </div> 
                </td>

                <td id="RealtimeStatus1ID">
                  &nbsp&nbsp&nbsp&nbsp&nbspRealtime Status
                  <br>
                  &nbsp&nbsp&nbsp&nbsp&nbsp<img id="gjxStatusImage" src="/data/obs/datadisplay/img/WhiteDot.png"  align=bottom> GJX 
                  &nbsp&nbsp&nbsp&nbsp&nbsp<img id="rjyStatusImage" src="/data/obs/datadisplay/img/WhiteDot.png"  align=bottom> RJY</br>
                </td>

                <td id="HistoricalInventoryID">

                  <a href onclick="window.open(HistoricalInventoryUrl, 'Historical Inventory', 'scrollbars=1, width=310, height=500');  return false;">Historical Inventory</a>                  

                </td>

        	</td>


	</tr>
	</table>



	
</tr>




<tr>

	<td colspan="2" height=30>

	&nbspMap1 PPI Scans:&nbsp&nbsp

    	<select id="Map1RadarType" class="product_dropdown"/>
    	</select>

        <div class="dropdown">
        <button onclick="loadOverlayMenu(1)" class="dropbtn">Overlays</button>
        <div id="Map1BaseKml" class="dropdown-content">
          &nbsp<input type="checkbox" id="CONUS_CountiesMap1" onclick="toggleOverlay('CONUS_CountiesMap1',1)" value="https://psl.noaa.gov/data/obs/kml/CountyBoundaryCONUS.kmz"> Counties<br>
          &nbsp<input type="checkbox" id="RangeRings1" onclick="toggleOverlay('RangeRings1',1)" value="https://psl.noaa.gov/data/obs/kml/RangeRingsRjyV1.kmz"> RJY Range Rings<br>
        </div>
        </div>
      
        &nbsp
 
        <div class="dropdown">
        <button onclick="snapView(2,1)" class="dropbtn">Match Map2 View</button>
        </div>
 
	</td>

	<td colspan="2">

	&nbspMap2 PPI Scans:&nbsp&nbsp 

    	<select id="Map2RadarType" class="product_dropdown"/>
    	</select>

        <div class="dropdown">
        <button onclick="loadOverlayMenu(2)" class="dropbtn">Overlays</button>
        <div id="Map2BaseKml" class="dropdown-content">
          &nbsp<input type="checkbox" id="CONUS_CountiesMap2" onclick="toggleOverlay('CONUS_CountiesMap2',2)" value="https://psl.noaa.gov/data/obs/kml/CountyBoundaryCONUS.kmz"> Counties<br>
          &nbsp<input type="checkbox" id="RangeRings2" onclick="toggleOverlay('RangeRings2',2)" value="https://psl.noaa.gov/data/obs/kml/RangeRingsRjyV1.kmz"> RJY Range Rings<br>
        </div>
        </div>
        
        &nbsp
 
        <div class="dropdown">
        <button onclick="snapView(1,2)" class="dropbtn">Match Map1 View</button>
        </div>

	</td>

</tr>

<tr>
     <td colspan="2">

        <div id="MapDiv1" style="width: 100%; height: 600px"></div>
     </td>

    <td colspan="2">  
     <div id="MapDiv2" style="width: 100%; height: 600px"></div>
    </td>
</tr>

<tr>
    <td colspan="2">
       <center>
       <div id="Legend1" style="width: 100%;"></div>
       </center>
     </td>
     <td colspan="2">
       <center>
       <div id="Legend2" style="width:100%;"></div>
       </center>
     </td>
</tr>

</table>


[an error occurred while processing this directive]