reorganize for build system

dist/scripts/TimerWorker.js

@@ -0,0 +1,66 @@
+var _TimerInfos = [];
+
+var TimerElasped = function (Id)
+{
+    var TimerInfo = _TimerInfos[Id];
+
+    if (!TimerInfo)
+    {
+        return;
+    }
+
+    this.postMessage({
+        Action: "ELASPED",
+        Id: TimerInfo.Id,
+        RunOnce: TimerInfo.RunOnce,
+    });
+};
+
+this.onmessage = function (e)
+{
+    var Message = e.data;
+
+    switch (Message.Action)
+    {
+        case "START":
+            var TimerInfo = {
+                Id: Message.Id,
+                RunOnce: Message.RunOnce,
+                TimeOut: Message.TimeOut,
+            };
+
+            _TimerInfos[Message.Id] = TimerInfo;
+
+            if (Message.RunOnce == true)
+            {
+                TimerInfo.TimerId = setTimeout(TimerElasped, Message.TimeOut, Message.Id);
+            }
+            else
+            {
+                TimerInfo.TimerId = setInterval(TimerElasped, Message.TimeOut, Message.Id);
+            }
+
+            break;
+
+        case "STOP":
+            var TimerInfo = _TimerInfos[Message.Id];
+
+            if (!TimerInfo)
+            {
+                return;
+            }
+
+            if (TimerInfo.RunOnce == true)
+            {
+                clearTimeout(TimerInfo.TimerId);
+                delete _TimerInfos[Message.Id];
+            }
+            else
+            {
+                clearInterval(TimerInfo.TimerId);
+                delete _TimerInfos[Message.Id];
+            }
+
+            break;
+    }
+}

dist/scripts/data/states.js

@@ -0,0 +1,60 @@
+// eslint-disable-next-line no-unused-vars
+const states = (() => {
+	const stateList = {
+		'Arizona': 'AZ',
+		'Alabama': 'AL',
+		'Alaska': 'AK',
+		'Arkansas': 'AR',
+		'California': 'CA',
+		'Colorado': 'CO',
+		'Connecticut': 'CT',
+		'Delaware': 'DE',
+		'Florida': 'FL',
+		'Georgia': 'GA',
+		'Hawaii': 'HI',
+		'Idaho': 'ID',
+		'Illinois': 'IL',
+		'Indiana': 'IN',
+		'Iowa': 'IA',
+		'Kansas': 'KS',
+		'Kentucky': 'KY',
+		'Louisiana': 'LA',
+		'Maine': 'ME',
+		'Maryland': 'MD',
+		'Massachusetts': 'MA',
+		'Michigan': 'MI',
+		'Minnesota': 'MN',
+		'Mississippi': 'MS',
+		'Missouri': 'MO',
+		'Montana': 'MT',
+		'Nebraska': 'NE',
+		'Nevada': 'NV',
+		'New Hampshire': 'NH',
+		'New Jersey': 'NJ',
+		'New Mexico': 'NM',
+		'New York': 'NY',
+		'North Carolina': 'NC',
+		'North Dakota': 'ND',
+		'Ohio': 'OH',
+		'Oklahoma': 'OK',
+		'Oregon': 'OR',
+		'Pennsylvania': 'PA',
+		'Rhode Island': 'RI',
+		'South Carolina': 'SC',
+		'South Dakota': 'SD',
+		'Tennessee': 'TN',
+		'Texas': 'TX',
+		'Utah': 'UT',
+		'Vermont': 'VT',
+		'Virginia': 'VA',
+		'Washington': 'WA',
+		'West Virginia': 'WV',
+		'Wisconsin': 'WI',
+		'Wyoming': 'WY',
+	};
+
+	return {
+		getTwoDigitCode: (stateFullName) => stateList[stateFullName],
+	};
+})();
+

dist/scripts/index.js

@@ -0,0 +1,956 @@
+/* globals NoSleep, states */
+let frmGetLatLng;
+let txtAddress;
+let btnClearQuery;
+let btnGetGps;
+
+let divTwc;
+let divTwcTop;
+let divTwcMiddle;
+let divTwcBottom;
+let divTwcLeft;
+let divTwcRight;
+let divTwcNavContainer;
+let iframeTwc;
+
+let spanLastRefresh;
+let chkAutoRefresh;
+let spanRefreshCountDown;
+
+let spanCity;
+let spanState;
+let spanStationId;
+let spanRadarId;
+let spanZoneId;
+
+let frmScrollText;
+let chkScrollText;
+let txtScrollText;
+
+let _AutoSelectQuery = false;
+let _TwcDataUrl = '';
+let _IsPlaying = false;
+
+let _NoSleep = new NoSleep();
+
+let _LastUpdate = null;
+let _AutoRefreshIntervalId = null;
+let _AutoRefreshIntervalMs = 500;
+let _AutoRefreshTotalIntervalMs = 600000; // 10 min.
+let _AutoRefreshCountMs = 0;
+
+let _FullScreenOverride = false;
+
+let _WindowHeight = 0;
+let _WindowWidth = 0;
+
+let latLon;
+
+let _canvasIds = [
+	'canvasProgress',
+	'canvasCurrentWeather',
+	'canvasLatestObservations',
+	'canvasTravelForecast',
+	'canvasRegionalForecast1',
+	'canvasRegionalForecast2',
+	'canvasRegionalObservations',
+	'canvasLocalForecast',
+	'canvasExtendedForecast1',
+	'canvasExtendedForecast2',
+	'canvasAlmanac',
+	'canvasAlmanacTides',
+	'canvasOutlook',
+	'canvasMarineForecast',
+	'canvasAirQuality',
+	'canvasLocalRadar',
+	'canvasHazards',
+];
+
+const FullScreenResize = () => {
+	const iframeDoc = $(iframeTwc[0].contentWindow.document);
+	const WindowWidth = $(window).width();
+	const WindowHeight = $(window).height();
+	const inFullScreen = InFullScreen();
+	let NewWidth;
+	let NewHeight;
+	let IFrameWidth;
+	let IFrameHeight;
+	let LeftWidth;
+	let RightWidth;
+	let TopHeight;
+	let BottomHeight;
+	let Offset;
+
+	if (inFullScreen) {
+		if ((WindowWidth / WindowHeight) >= 1.583333333333333) {
+			NewHeight = WindowHeight + 'px';
+			NewWidth = '';
+			divTwcTop.hide();
+			divTwcBottom.hide();
+			divTwcLeft.show();
+			divTwcRight.show();
+
+			divTwcMiddle.attr('style', 'width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+
+			LeftWidth = ((WindowWidth - (WindowHeight * 1.33333333333333333333)) / 2);
+			if (LeftWidth < 60) {
+				LeftWidth = 60;
+			}
+			divTwcLeft.attr('style', 'width:' + LeftWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+			divTwcLeft.css('visibility', 'visible');
+
+			RightWidth = ((WindowWidth - (WindowHeight * 1.33333333333333333333)) / 2);
+			if (RightWidth < 60) {
+				RightWidth = 60;
+			}
+			divTwcRight.attr('style', 'width:' + RightWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+			divTwcRight.css('visibility', 'visible');
+
+			IFrameWidth = WindowWidth - LeftWidth - RightWidth;
+			NewWidth = IFrameWidth + 'px';
+			iframeTwc.attr('style', 'width:' + IFrameWidth + 'px; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+
+		} else {
+			NewHeight = '';
+			NewWidth = WindowWidth + 'px';
+			divTwcTop.show();
+			divTwcBottom.show();
+			divTwcLeft.hide();
+			divTwcRight.hide();
+			Offset = 0;
+
+			TopHeight = ((WindowHeight - ((WindowWidth - Offset) * 0.75)) / 2);
+			if (TopHeight < 0) {
+				TopHeight = 0;
+			}
+			divTwcTop.attr('style', 'width:100%; height:' + TopHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+
+			BottomHeight = ((WindowHeight - ((WindowWidth - Offset) * 0.75)) / 2);
+			if (BottomHeight < 30) {
+				BottomHeight = 30;
+			}
+			divTwcBottom.attr('style', 'width:100%; height:' + BottomHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+			divTwcBottom.css('visibility', 'visible');
+
+			IFrameHeight = WindowHeight - TopHeight - BottomHeight;
+			NewHeight = IFrameHeight + 'px';
+			iframeTwc.attr('style', 'width:100%; height:' + IFrameHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+			divTwcMiddle.attr('style', 'width:100%; height:' + IFrameHeight + 'px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+		}
+	}
+
+	if (!inFullScreen) {
+		NewHeight = '';
+		NewWidth = '';
+		divTwcTop.hide();
+		divTwcBottom.hide();
+		divTwcLeft.hide();
+		divTwcRight.hide();
+
+		divTwc.attr('style', '');
+		divTwcMiddle.attr('style', '');
+		iframeTwc.attr('style', '');
+
+		$(window).off('resize', FullScreenResize);
+	}
+
+	$(_canvasIds).each(function () {
+		const canvas = iframeDoc.find('#' + this.toString());
+		canvas.css('width', NewWidth);
+		canvas.css('height', NewHeight);
+	});
+
+	if (inFullScreen) {
+		$('body').css('overflow', 'hidden');
+		$('.ToggleFullScreen').val('Exit Full Screen');
+
+		if (!GetFullScreenElement()) {
+			EnterFullScreen();
+		}
+	} else {
+		$('body').css('overflow', '');
+		$('.ToggleFullScreen').val('Full Screen');
+	}
+
+	divTwcNavContainer.show();
+};
+
+const _lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
+const _unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
+
+const OnFullScreen = () => {
+	if (InFullScreen()) {
+		divTwc.attr('style', 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;');
+		FullScreenResize();
+
+		$(window).on('resize', FullScreenResize);
+		//FullScreenResize();
+
+		if (_lockOrientation) try { _lockOrientation('landscape-primary'); } catch (ex) { console.log('Unable to lock screen orientation.'); }
+	} else {
+		divTwc.attr('style', '');
+		divTwcMiddle.attr('style', '');
+		iframeTwc.attr('style', '');
+
+		$(window).off('resize', FullScreenResize);
+		FullScreenResize();
+
+		if (_unlockOrientation) try { _unlockOrientation(); } catch (ex) { console.log('Unable to unlock screen orientation.'); }
+	}
+};
+
+const InFullScreen = () => ((_FullScreenOverride) || (GetFullScreenElement()) || (window.innerHeight === screen.height) || (window.innerHeight === (screen.height - 1)));
+
+const GetFullScreenElement = () => {
+	if (_FullScreenOverride) return document.body;
+	return (document.fullScreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+};
+
+const btnFullScreen_click = () => {
+
+	if (!InFullScreen()) {
+		EnterFullScreen();
+	} else {
+		ExitFullscreen();
+	}
+
+	if (_IsPlaying) {
+		_NoSleep.enable();
+	} else {
+		_NoSleep.disable();
+	}
+
+	UpdateFullScreenNavigate();
+
+	return false;
+};
+
+const EnterFullScreen = () => {
+	const element = document.body;
+
+	// Supports most browsers and their versions.
+	const requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
+
+	if (requestMethod) {
+		// Native full screen.
+		requestMethod.call(element, { navigationUI: 'hide' }); // https://bugs.chromium.org/p/chromium/issues/detail?id=933436#c7
+	} else {
+		// iOS doesn't support FullScreen API.
+		window.scrollTo(0, 0);
+		_FullScreenOverride = true;
+		$(window).resize();
+	}
+
+	UpdateFullScreenNavigate();
+};
+
+const ExitFullscreen = () => {
+	// exit full-screen
+
+	if (_FullScreenOverride) {
+		_FullScreenOverride = false;
+		$(window).resize();
+	}
+
+	if (document.exitFullscreen) {
+		// Chrome 71 broke this if the user pressed F11 to enter full screen mode.
+		document.exitFullscreen();
+	} else if (document.webkitExitFullscreen) {
+		document.webkitExitFullscreen();
+	} else if (document.mozCancelFullScreen) {
+		document.mozCancelFullScreen();
+	} else if (document.msExitFullscreen) {
+		document.msExitFullscreen();
+	}
+};
+
+const btnNavigateMenu_click = () => {
+	postMessage('navButton', 'menu');
+	UpdateFullScreenNavigate();
+	return false;
+};
+
+const LoadTwcData = () => {
+	txtAddress.blur();
+	StopAutoRefreshTimer();
+	_LastUpdate = null;
+	AssignLastUpdate();
+
+	postMessage('latLon', latLon);
+
+	iframeTwc.off('load');
+	FullScreenResize();
+
+	if (chkScrollText.is(':checked')) {
+		postMessage('assignScrollText', txtScrollText.val());
+	}
+
+	postMessage('units', $('input[type=\'radio\'][name=\'radUnits\']:checked').val());
+
+
+	if (_IsPlaying) postMessage('navButton', 'playToggle');
+
+	$(iframeTwc[0].contentWindow.document).on('mousemove', document_mousemove);
+	$(iframeTwc[0].contentWindow.document).on('mousedown', document_mousemove);
+	$(iframeTwc[0].contentWindow.document).on('keydown', document_keydown);
+
+	const SwipeCallBack = (event, direction) => {
+		switch (direction) {
+		case 'left':
+			btnNavigateNext_click();
+			break;
+
+		case 'right':
+		default:
+			btnNavigatePrevious_click();
+			break;
+		}
+	};
+
+	$(iframeTwc[0].contentWindow.document).swipe({
+		//Generic swipe handler for all directions
+		swipeRight: SwipeCallBack,
+		swipeLeft: SwipeCallBack,
+	});
+};
+
+const AssignLastUpdate = () => {
+	let LastUpdate = '(None)';
+
+	if (_LastUpdate) {
+		switch ($('input[type=\'radio\'][name=\'radUnits\']:checked').val()) {
+		case 'ENGLISH':
+			LastUpdate = _LastUpdate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' });
+			break;
+		default:
+			LastUpdate = _LastUpdate.toLocaleString('en-GB', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', timeZoneName: 'short' });
+			break;
+		}
+	}
+
+	spanLastRefresh.html(LastUpdate);
+
+	if (_LastUpdate && chkAutoRefresh.is(':checked')) StartAutoRefreshTimer();
+};
+
+const btnNavigateRefresh_click = () => {
+	LoadTwcData(_TwcDataUrl);
+	UpdateFullScreenNavigate();
+
+	return false;
+};
+
+const btnNavigateNext_click = () => {
+	postMessage('navButton', 'next');
+	UpdateFullScreenNavigate();
+
+	return false;
+};
+
+const btnNavigatePrevious_click = () => {
+	postMessage('navButton', 'previous');
+	UpdateFullScreenNavigate();
+
+	return false;
+};
+
+const window_resize = () => {
+	const $window = $(window);
+
+	if ($window.height() === _WindowHeight || $window.width() === _WindowWidth) return;
+
+	_WindowHeight = $window.height();
+	_WindowWidth = $window.width();
+
+	try {
+		postMessage('navButton', 'reset');
+	} catch (ex) {
+		console.log(ex);
+	}
+
+	UpdateFullScreenNavigate();
+};
+
+let _NavigateFadeIntervalId = null;
+
+const UpdateFullScreenNavigate = () => {
+	$(document.activeElement).blur();
+
+	$('body').removeClass('HideCursor');
+	$(iframeTwc[0].contentWindow.document).find('body').removeClass('HideCursor');
+	divTwcLeft.fadeIn2();
+	divTwcRight.fadeIn2();
+	divTwcBottom.fadeIn2();
+
+	if (_NavigateFadeIntervalId) {
+		window.clearTimeout(_NavigateFadeIntervalId);
+		_NavigateFadeIntervalId = null;
+	}
+
+	_NavigateFadeIntervalId = window.setTimeout(() => {
+		//console.log("window_mousemove: TimeOut");
+		if (InFullScreen()) {
+			$('body').addClass('HideCursor');
+			$(iframeTwc[0].contentWindow.document).find('body').addClass('HideCursor');
+
+			divTwcLeft.fadeOut2();
+			divTwcRight.fadeOut2();
+			divTwcBottom.fadeOut2();
+		}
+
+	}, 2000);
+};
+
+const document_mousemove = (e) => {
+	if (InFullScreen() && (e.originalEvent.movementX === 0 && e.originalEvent.movementY === 0 && e.originalEvent.buttons === 0)) return;
+	UpdateFullScreenNavigate();
+};
+
+const document_keydown = (e) => {
+
+	const code = (e.keyCode || e.which);
+
+	if (InFullScreen() || document.activeElement === document.body) {
+		switch (code) {
+		case 32: // Space
+			btnNavigatePlay_click();
+			return false;
+
+		case 39: // Right Arrow
+		case 34: // Page Down
+			btnNavigateNext_click();
+			return false;
+
+		case 37: // Left Arrow
+		case 33: // Page Up
+			btnNavigatePrevious_click();
+			return false;
+
+		case 36: // Home
+			btnNavigateMenu_click();
+			return false;
+
+		case 48: // Restart
+			btnNavigateRefresh_click();
+			return false;
+
+		case 70: // F
+			btnFullScreen_click();
+			return false;
+
+		default:
+		}
+	}
+};
+
+$.fn.fadeIn2 = function () {
+	const _self = this;
+	let opacity = 0.0;
+	let IntervalId = null;
+
+	if (_self.css('opacity') !== '0') return;
+
+	_self.css('visibility', 'visible');
+	_self.css('opacity', '0.0');
+
+	IntervalId = window.setInterval(() => {
+		opacity += 0.1;
+		opacity = Math.round2(opacity, 1);
+		_self.css('opacity', opacity.toString());
+
+		if (opacity === 1.0) {
+			//_self.css("visibility", "");
+			_self.css('visibility', 'visible');
+			window.clearInterval(IntervalId);
+		}
+	}, 50);
+
+	return _self;
+};
+
+$.fn.fadeOut2 = function () {
+	const _self = this;
+	let opacity = 1.0;
+	let IntervalId = null;
+
+	if (_self.css('opacity') !== '1')  return;
+
+	_self.css('visibility', 'visible');
+	_self.css('opacity', '1.0');
+
+	IntervalId = window.setInterval(() => {
+		opacity -= 0.2;
+		opacity = Math.round2(opacity, 1);
+		_self.css('opacity', opacity.toString());
+
+		if (opacity === 0) {
+			_self.css('visibility', 'hidden');
+			window.clearInterval(IntervalId);
+		}
+	}, 50);
+
+	return _self;
+};
+
+Math.round2 = (value, decimals) => Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+
+const btnNavigatePlay_click = () => {
+	postMessage('navButton', 'playToggle');
+	UpdateFullScreenNavigate();
+
+	return false;
+};
+
+$(() => {
+	_WindowHeight = $(window).height();
+	_WindowWidth = $(window).width();
+
+	frmGetLatLng = $('#frmGetLatLng');
+	txtAddress = $('#txtAddress');
+	btnGetLatLng = $('#btnGetLatLng');
+	btnClearQuery = $('#btnClearQuery');
+	btnGetGps = $('#btnGetGps');
+
+	divLat = $('#divLat');
+	spanLat = $('#spanLat');
+	divLng = $('#divLng');
+	spanLng = $('#spanLng');
+
+	iframeTwc = $('#iframeTwc');
+	btnFullScreen = $('#btnFullScreen');
+	divTwc = $('#divTwc');
+	divTwcTop = $('#divTwcTop');
+	divTwcMiddle = $('#divTwcMiddle');
+	divTwcBottom = $('#divTwcBottom');
+	divTwcLeft = $('#divTwcLeft');
+	divTwcRight = $('#divTwcRight');
+	divTwcNav = $('#divTwcNav');
+	divTwcNavContainer = $('#divTwcNavContainer');
+
+	frmScrollText = $('#frmScrollText');
+	chkScrollText = $('#chkScrollText');
+	txtScrollText = $('#txtScrollText');
+	btnScrollText = $('#btnScrollText');
+
+	frmScrollText.on('submit', frmScrollText_submit);
+	txtScrollText.on('focus', function () {
+		txtScrollText.select();
+	});
+	chkScrollText.on('change', chkScrollText_change);
+
+	txtAddress.on('focus', function () {
+		txtAddress.select();
+	});
+
+	txtAddress.focus();
+
+	$('.NavigateMenu').on('click', btnNavigateMenu_click);
+	$('.NavigateRefresh').on('click', btnNavigateRefresh_click);
+	$('.NavigateNext').on('click', btnNavigateNext_click);
+	$('.NavigatePrevious').on('click', btnNavigatePrevious_click);
+	$('.NavigatePlay').on('click', btnNavigatePlay_click);
+
+	$(btnGetGps).on('click', btnGetGps_click);
+
+	$(window).on('resize', OnFullScreen);
+	$(window).on('resize', window_resize);
+	$(document).on('mousemove', document_mousemove);
+	$(document).on('mousedown', document_mousemove);
+	divTwc.on('mousedown', document_mousemove);
+	$(document).on('keydown', document_keydown);
+	document.addEventListener('touchmove', e => { if (_FullScreenOverride) e.preventDefault(); });
+	$('.ToggleFullScreen').on('click', btnFullScreen_click);
+	FullScreenResize();
+
+	// listen for messages (from iframe) and handle accordingly
+	window.addEventListener('message', messageHandler, false);
+
+	const categories = [
+		'Land Features',
+		'Bay', 'Channel', 'Cove', 'Dam', 'Delta', 'Gulf', 'Lagoon', 'Lake', 'Ocean', 'Reef', 'Reservoir', 'Sea', 'Sound', 'Strait', 'Waterfall', 'Wharf', // Water Features
+		'Amusement Park', 'Historical Monument', 'Landmark', 'Tourist Attraction', 'Zoo', // POI/Arts and Entertainment
+		'College', // POI/Education
+		'Beach', 'Campground', 'Golf Course', 'Harbor', 'Nature Reserve', 'Other Parks and Outdoors', 'Park', 'Racetrack',
+		'Scenic Overlook', 'Ski Resort', 'Sports Center', 'Sports Field', 'Wildlife Reserve', // POI/Parks and Outdoors
+		'Airport', 'Ferry', 'Marina', 'Pier', 'Port', 'Resort', // POI/Travel
+		'Postal', 'Populated Place',
+	];
+	const cats = categories.join(',');
+
+	const overrides = {
+		'08736, Manasquan, New Jersey, USA': { x: -74.037, y: 40.1128 },
+		'32899, Orlando, Florida, USA': { x: -80.6774, y: 28.6143 },
+		'97003, Beaverton, Oregon, USA': { x: -122.8752489, y: 45.5050916 },
+		'99734, Prudhoe Bay, Alaska, USA': { x: -148.3372, y: 70.2552 },
+		'Guam, Oceania': { x: 144.74, y: 13.46 },
+		'Andover, Maine, United States': { x: -70.7525, y: 44.634167 },
+		'Bear Creek, Pennsylvania, United States': { x: -75.772809, y: 41.204074 },
+		'Bear Creek Village, Pennsylvania, United States': { x: -75.772809, y: 41.204074 },
+		'New York City, New York, United States': { x: -74.0059, y: 40.7142 },
+		'Pinnacles National Monument, San Benito County,California, United States': { x: -121.147278, y: 36.47075 },
+		'Pinnacles National Park, CA-146, Paicines, California': { x: -121.147278, y: 36.47075 },
+		'Welcome, Maryland, United States': { x: -77.081212, y: 38.4692469 },
+		'Tampa, Florida, United States (City)': { x: -82.5329, y: 27.9756 },
+		'San Francisco, California, United States': { x: -122.3758, y: 37.6188 },
+	};
+
+	const roundToPlaces = function (num, decimals) {
+		var n = Math.pow(10, decimals);
+		return Math.round((n * num).toFixed(decimals)) / n;
+	};
+
+	const doRedirectToGeometry = (geom) => {
+		latLon = {lat:roundToPlaces(geom.y, 4), lon:roundToPlaces(geom.x, 4)};
+		LoadTwcData();
+		// Save the query
+		localStorage.setItem('TwcQuery', txtAddress.val());
+	};
+
+	let PreviousSeggestionValue = null;
+	let PreviousSeggestion = null;
+	const OnSelect = (suggestion) => {
+		let request;
+
+		// Do not auto get the same city twice.
+		if (PreviousSeggestionValue === suggestion.value)  return;
+		PreviousSeggestionValue = suggestion.value;
+		PreviousSeggestion = suggestion;
+
+		if (overrides[suggestion.value]) {
+			doRedirectToGeometry(overrides[suggestion.value]);
+		} else {
+			request = $.ajax({
+				url: location.protocol + '//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find',
+				data: {
+					text: suggestion.value,
+					magicKey: suggestion.data,
+					f: 'json',
+				},
+				jsonp: 'callback',
+				dataType: 'jsonp',
+			});
+			request.done((data) => {
+				const loc = data.locations[0];
+				if (loc) {
+					doRedirectToGeometry(loc.feature.geometry);
+				} else {
+					alert('An unexpected error occurred. Please try a different search string.');
+				}
+			});
+		}
+	};
+
+	$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({
+		serviceUrl: location.protocol + '//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
+		deferRequestBy: 300,
+		paramName: 'text',
+		params: {
+			f: 'json',
+			countryCode: 'USA', //'USA,PRI,VIR,GUM,ASM',
+			category: cats,
+			maxSuggestions: 10,
+		},
+		dataType: 'jsonp',
+		transformResult: (response) => {
+			if (_AutoSelectQuery) {
+				_AutoSelectQuery = false;
+				window.setTimeout(() => {
+					$(ac.suggestionsContainer.children[0]).click();
+				}, 1);
+			}
+
+			return {
+				suggestions: $.map(response.suggestions, function (i) {
+					return {
+						value: i.text,
+						data: i.magicKey,
+					};
+				}),
+			};
+		},
+		minChars: 3,
+		showNoSuggestionNotice: true,
+		noSuggestionNotice: 'No results found. Please try a different search string.',
+		onSelect: OnSelect,
+		width: 490,
+	});
+
+	const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete();
+	frmGetLatLng.submit(function () {
+		if (ac.suggestions[0]) {
+			$(ac.suggestionsContainer.children[0]).click();
+			return false;
+		}
+		if (PreviousSeggestion) {
+			PreviousSeggestionValue = null;
+			OnSelect(PreviousSeggestion);
+		}
+
+		return false;
+	});
+
+	// Auto load the previous query
+	const TwcQuery = localStorage.getItem('TwcQuery');
+	if (TwcQuery) {
+		_AutoSelectQuery = true;
+		txtAddress.val(TwcQuery);
+		txtAddress.blur();
+		txtAddress.focus();
+	}
+
+	const TwcPlay = localStorage.getItem('TwcPlay');
+	if (!TwcPlay || TwcPlay === 'true') {
+		_IsPlaying = true;
+	}
+
+	const TwcScrollText = localStorage.getItem('TwcScrollText');
+	if (TwcScrollText) {
+		txtScrollText.val(TwcScrollText);
+	}
+	const TwcScrollTextChecked = localStorage.getItem('TwcScrollTextChecked');
+	if (TwcScrollTextChecked && TwcScrollTextChecked === 'true') {
+		chkScrollText.prop('checked', 'checked');
+	} else {
+		chkScrollText.prop('checked', '');
+	}
+
+	btnClearQuery.on('click', () => {
+		spanCity.text('');
+		spanState.text('');
+		spanStationId.text('');
+		spanRadarId.text('');
+		spanZoneId.text('');
+
+		chkScrollText.prop('checked', '');
+		txtScrollText.val('');
+		localStorage.removeItem('TwcScrollText');
+		localStorage.removeItem('TwcScrollTextChecked');
+
+		chkAutoRefresh.prop('checked', 'checked');
+		localStorage.removeItem('TwcAutoRefresh');
+
+		$('#radEnglish').prop('checked', 'checked');
+		localStorage.removeItem('TwcUnits');
+
+		TwcCallBack({ Status: 'ISPLAYING', Value: false });
+		localStorage.removeItem('TwcPlay');
+		_IsPlaying = true;
+
+		localStorage.removeItem('TwcQuery');
+		PreviousSeggestionValue = null;
+		PreviousSeggestion = null;
+
+		LoadTwcData('');
+	});
+
+	const TwcUnits = localStorage.getItem('TwcUnits');
+	if (!TwcUnits || TwcUnits === 'ENGLISH') {
+		$('#radEnglish').prop('checked', 'checked');
+	} else if (TwcUnits === 'METRIC') {
+		$('#radMetric').prop('checked', 'checked');
+	}
+
+	$('input[type=\'radio\'][name=\'radUnits\']').on('change', (e) => {
+		const Units = $(e.target).val();
+		e;
+		localStorage.setItem('TwcUnits', Units);
+		AssignLastUpdate();
+		postMessage('units', Units);
+	});
+
+
+	divRefresh = $('#divRefresh');
+	spanLastRefresh = $('#spanLastRefresh');
+	chkAutoRefresh = $('#chkAutoRefresh');
+	lblRefreshCountDown = $('#lblRefreshCountDown');
+	spanRefreshCountDown = $('#spanRefreshCountDown');
+
+	chkAutoRefresh.on('change', (e) => {
+		const Checked = $(e.target).is(':checked');
+
+		if (_LastUpdate) {
+			if (Checked) {
+				StartAutoRefreshTimer();
+			} else {
+				StopAutoRefreshTimer();
+			}
+		}
+
+		localStorage.setItem('TwcAutoRefresh', Checked);
+	});
+
+	const TwcAutoRefresh = localStorage.getItem('TwcAutoRefresh');
+	if (!TwcAutoRefresh || TwcAutoRefresh === 'true') {
+		chkAutoRefresh.prop('checked', 'checked');
+	} else {
+		chkAutoRefresh.prop('checked', '');
+	}
+
+	spanCity = $('#spanCity');
+	spanState = $('#spanState');
+	spanStationId = $('#spanStationId');
+	spanRadarId = $('#spanRadarId');
+	spanZoneId = $('#spanZoneId');
+
+
+});
+// read and dispatch an event from the iframe
+const messageHandler = (event) => {
+	// test for trust
+	if (!event.isTrusted) return;
+	// get the data
+	const data = JSON.parse(event.data);
+
+	// dispatch event
+	if (!data.type) return;
+	switch (data.type) {
+	case 'loaded':
+		_LastUpdate = new Date();
+		AssignLastUpdate();
+		break;
+
+	case 'weatherParameters':
+		populateWeatherParameters(data.message);
+		break;
+
+	case 'isPlaying':
+		_IsPlaying = data.message;
+		localStorage.setItem('TwcPlay', _IsPlaying);
+
+		if (_IsPlaying) {
+			_NoSleep.enable();
+
+			$('img[src=\'images/nav/ic_play_arrow_white_24dp_1x.png\']').attr('title', 'Pause');
+			$('img[src=\'images/nav/ic_play_arrow_white_24dp_1x.png\']').attr('src', 'images/nav/ic_pause_white_24dp_1x.png');
+			$('img[src=\'images/nav/ic_play_arrow_white_24dp_2x.png\']').attr('title', 'Pause');
+			$('img[src=\'images/nav/ic_play_arrow_white_24dp_2x.png\']').attr('src', 'images/nav/ic_pause_white_24dp_2x.png');
+		} else {
+			_NoSleep.disable();
+
+			$('img[src=\'images/nav/ic_pause_white_24dp_1x.png\']').attr('title', 'Play');
+			$('img[src=\'images/nav/ic_pause_white_24dp_1x.png\']').attr('src', 'images/nav/ic_play_arrow_white_24dp_1x.png');
+			$('img[src=\'images/nav/ic_pause_white_24dp_2x.png\']').attr('title', 'Play');
+			$('img[src=\'images/nav/ic_pause_white_24dp_2x.png\']').attr('src', 'images/nav/ic_play_arrow_white_24dp_2x.png');
+		}
+		break;
+
+
+	default:
+		console.error(`Unknown event '${data.eventType}`);
+	}
+};
+
+// post a message to the iframe
+const postMessage = (type, message = {}) => {
+	const iframeWindow = document.getElementById('iframeTwc').contentWindow;
+	iframeWindow.postMessage(JSON.stringify({type, message}, window.location.origin));
+};
+
+const StartAutoRefreshTimer = () => {
+	// Esnure that any previous timer has already stopped.
+	//StopAutoRefreshTimer();
+	if (_AutoRefreshIntervalId) {
+		// Timer is already running.
+		return;
+	}
+
+	// Reset the time elapsed.
+	_AutoRefreshCountMs = 0;
+
+	const AutoRefreshTimer = () => {
+		// Increment the total time elapsed.
+		_AutoRefreshCountMs += _AutoRefreshIntervalMs;
+
+		// Display the count down.
+		let RemainingMs = (_AutoRefreshTotalIntervalMs - _AutoRefreshCountMs);
+		if (RemainingMs < 0) {
+			RemainingMs = 0;
+		}
+		const dt = new Date(RemainingMs);
+		spanRefreshCountDown.html((dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes()) + ':' + (dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds()));
+
+		// Time has elapsed.
+		if (_AutoRefreshCountMs >= _AutoRefreshTotalIntervalMs) LoadTwcData(_TwcDataUrl);
+	};
+	_AutoRefreshIntervalId = window.setInterval(AutoRefreshTimer, _AutoRefreshIntervalMs);
+	AutoRefreshTimer();
+};
+const StopAutoRefreshTimer = () => {
+	if (_AutoRefreshIntervalId) {
+		window.clearInterval(_AutoRefreshIntervalId);
+		spanRefreshCountDown.html('--:--');
+		_AutoRefreshIntervalId = null;
+	}
+};
+
+const btnGetGps_click = () => {
+	if (!navigator.geolocation) return;
+
+	const CurrentPosition = (position) => {
+		const latitude = position.coords.latitude;
+		const longitude = position.coords.longitude;
+
+		console.log('Latitude: ' + latitude + '; Longitude: ' + longitude);
+
+		//http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?location=-72.971293%2C+40.850043&f=pjson
+		const request = $.ajax({
+			url: location.protocol + '//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode',
+			data: {
+				location: longitude + ',' + latitude,
+				distance: 1000, // Find location upto 1 KM.
+				f: 'json',
+			},
+			jsonp: 'callback',
+			dataType: 'jsonp',
+		});
+		request.done((data) => {
+			console.log(data);
+
+			const ZipCode = data.address.Postal;
+			const City = data.address.City;
+			const State = states.getStateTwoDigitCode(data.address.Region);
+			const Country = data.address.CountryCode;
+			const TwcQuery = `${ZipCode}, ${City}, ${State}, ${Country}`;
+
+			txtAddress.val(TwcQuery);
+			txtAddress.blur();
+			txtAddress.focus();
+
+			// Save the query
+			localStorage.setItem('TwcQuery', TwcQuery);
+
+		});
+
+	};
+
+	navigator.geolocation.getCurrentPosition(CurrentPosition);
+};
+
+const populateWeatherParameters = (weatherParameters) => {
+	spanCity.text(weatherParameters.city + ', ');
+	spanState.text(weatherParameters.state);
+	spanStationId.text(weatherParameters.stationId);
+	spanRadarId.text(weatherParameters.radarId);
+	spanZoneId.text(weatherParameters.zoneId);
+};
+
+const frmScrollText_submit = () => {
+	chkScrollText_change();
+
+	return false;
+};
+
+const chkScrollText_change = () => {
+	txtScrollText.blur();
+
+	let ScrollText = txtScrollText.val();
+	localStorage.setItem('TwcScrollText', ScrollText);
+
+	const ScrollTextChecked = chkScrollText.is(':checked');
+	localStorage.setItem('TwcScrollTextChecked', ScrollTextChecked);
+
+	if (chkScrollText.is(':checked') === false) {
+		ScrollText = '';
+	}
+	postMessage('assignScrollText', ScrollText);
+};

dist/scripts/timer.js

@@ -0,0 +1,94 @@
+if (window.Worker)
+{
+    var _TimerWorkCallBacks = [];
+    var _TimerIds = 0;
+
+    var _TimerWorker = new window.Worker("scripts/TimerWorker.js");
+    _TimerWorker.onmessage = function (e)
+    {
+        var Message = e.data;
+
+        switch (Message.Action)
+        {
+            case "ELASPED":
+                var TimerWorkCallBack = _TimerWorkCallBacks[Message.Id];
+
+                if (!TimerWorkCallBack)
+                {
+                    return;
+                }
+
+                var Window = TimerWorkCallBack.Window;
+                var CallBack = TimerWorkCallBack.CallBack;
+                var Arguments = TimerWorkCallBack.Arguments;
+
+                if (typeof (CallBack) === 'string')
+                {
+                    CallBack = new Function(CallBack);
+                }
+                if (typeof (CallBack) === 'function')
+                {
+                    CallBack.apply(Window, Arguments);
+                }
+
+                if (Message.RunOnce == true)
+                {
+                    _clearIntervalWorker(Message.Id);
+                }
+                break;
+        }
+    };
+
+    window.setIntervalWorker = function (CallBack, TimeOut, Arguments)
+    {
+        Arguments = Array.prototype.slice.call(arguments).slice(2);
+        return _setIntervalWorker(false, CallBack, TimeOut, Arguments, window);
+    };
+    window.setTimeoutWorker = function (CallBack, TimeOut, Arguments)
+    {
+        Arguments = Array.prototype.slice.call(arguments).slice(2);
+        return _setIntervalWorker(true, CallBack, TimeOut, Arguments, window);
+    };
+    var _setIntervalWorker = function (RunOnce, CallBack, TimeOut, Arguments, Window)
+    {
+        var Id = ++_TimerIds;
+
+        _TimerWorkCallBacks[Id] = {
+            CallBack: CallBack,
+            Arguments: Arguments,
+            Window: Window,
+        };
+
+        _TimerWorker.postMessage({
+            Action: "START",
+            RunOnce: RunOnce,
+            Id: Id,
+            TimeOut: TimeOut,
+        });
+
+        return Id;
+    };
+
+    window.clearIntervalWorker = function (Id)
+    {
+        _clearIntervalWorker(Id);
+    };
+    window.clearTimeoutWorker = function (Id)
+    {
+        _clearIntervalWorker(Id);
+    };
+    var _clearIntervalWorker = function (Id)
+    {
+        if (!Id)
+        {
+            return;
+        }
+
+        _TimerWorker.postMessage({
+            Action: "STOP",
+            Id: Id,
+        });
+
+        delete _TimerWorkCallBacks[Id];
+    };
+}

dist/scripts/vendor/nosleep.min.js

@@ -0,0 +1,2 @@
+// NoSleep.min.js v0.5.0 - git.io/vfn01 - Rich Tibbett - MIT license
+!function(A){function e(A,e,o){var t=document.createElement("source");t.src=o,t.type="video/"+e,A.appendChild(t)}var o={Android:/Android/gi.test(navigator.userAgent),iOS:/AppleWebKit/.test(navigator.userAgent)&&/Mobile\/\w+/.test(navigator.userAgent)},t={WebM:"data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8oEEQvOBCEKCQAR3ZWJtQoeBAkKFgQIYU4BnQI0VSalmQCgq17FAAw9CQE2AQAZ3aGFtbXlXQUAGd2hhbW15RIlACECPQAAAAAAAFlSua0AxrkAu14EBY8WBAZyBACK1nEADdW5khkAFVl9WUDglhohAA1ZQOIOBAeBABrCBCLqBCB9DtnVAIueBAKNAHIEAAIAwAQCdASoIAAgAAUAmJaQAA3AA/vz0AAA=",MP4:"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAG21kYXQAAAGzABAHAAABthADAowdbb9/AAAC6W1vb3YAAABsbXZoZAAAAAB8JbCAfCWwgAAAA+gAAAAAAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIVdHJhawAAAFx0a2hkAAAAD3wlsIB8JbCAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAIAAAACAAAAAABsW1kaWEAAAAgbWRoZAAAAAB8JbCAfCWwgAAAA+gAAAAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVxtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAEcc3RibAAAALhzdHNkAAAAAAAAAAEAAACobXA0dgAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAIAAgASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAAFJlc2RzAAAAAANEAAEABDwgEQAAAAADDUAAAAAABS0AAAGwAQAAAbWJEwAAAQAAAAEgAMSNiB9FAEQBFGMAAAGyTGF2YzUyLjg3LjQGAQIAAAAYc3R0cwAAAAAAAAABAAAAAQAAAAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAAEwAAAAEAAAAUc3RjbwAAAAAAAAABAAAALAAAAGB1ZHRhAAAAWG1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAAK2lsc3QAAAAjqXRvbwAAABtkYXRhAAAAAQAAAABMYXZmNTIuNzguMw=="},i=function(){return o.iOS?this.noSleepTimer=null:o.Android&&(this.noSleepVideo=document.createElement("video"),this.noSleepVideo.setAttribute("loop",""),e(this.noSleepVideo,"webm",t.WebM),e(this.noSleepVideo,"mp4",t.MP4)),this};i.prototype.enable=function(A){o.iOS?(this.disable(),this.noSleepTimer=window.setInterval(function(){window.location.href='/',window.setTimeout(window.stop,0)},A||15e3)):o.Android&&this.noSleepVideo.play()},i.prototype.disable=function(){o.iOS?this.noSleepTimer&&(window.clearInterval(this.noSleepTimer),this.noSleepTimer=null):o.Android&&this.noSleepVideo.pause()},A.NoSleep=i}(this);