## beteljuice tweaked NOAA Reports for 'new' CuMX 10.3 default templates

basic template - beteljuice May 2021
	
	zip file contents:-
		betel_noaareports.htm
		js/betel_noaarpts.js
		this README.txt

		
Upload betel_noaareports.htm and js/betel_noaarpts.js to your website.

Menu:
	
	Copy and BACK_UP YOUR EXISTING js/ menu(type).js
		edit noaarpts.htm entry to betel_noaarpts.htm in the (new) js/ menu file
		
That's it ...

Easter Egg ...
	You may have noticed on the test page http://www.beteljuice.co.uk/DEMOS/newmx/betel_noaarpts.htm that the footer contains a viewer theme(s) option.
	
	This page has it too ... , but you can't see it ;-)
	If you would like this facilty on your site you will need to replace the footer(s) on any page you want it (suggest at least index)
	
	... but you aren't going to 'see' anything until you modify your js/ menu file.
	
	You did back-up your existing file didn't you ?
	
	At the bottom of your menu file add:
	
// array of 'allowed' themes in css/ folder 
// first (or only) will become site default
theme = ["colours", "Arcadia", "CherryTomato", "ChiliOil", "HarbourMist", "Limelight", "QuietGrey", "RedPear", "RussetOrange", "SpringCrocus", "UltraViolet", "ValiantPoppy"];
   
// this will produce a select dropdown (If place-holder exists)
// look for existing cookie and preset option
// set theme and cookie
if(typeof theme !== 'undefined' && Array.isArray(theme)) {
	bert = getCookie('theme');
	if(typeof bert === 'undefined') bert = theme[0];
	if(document.getElementById('SmartDisplay')) {
		chicken = theme.length;
		if(chicken > 0) {
			(chicken >20 ? chicken_max = 20 : chicken_max = chicken); // make the options box upto 20 deep
			fillit = '<select id = "themeList"  onchange="change(this.value)">\n';
			for(xxxxx = 0; xxxxx < chicken; xxxxx++) {
				fillit += '<option value = "'+theme[xxxxx]+ '"' + (bert == theme[xxxxx] ? " selected" : "") +'>'+theme[xxxxx]+'</option>\n';
			}
			fillit += '</select>\n';
			$("#SmartTheme").html(fillit);
			$("#SmartDisplay").removeClass('w3-hide');
			
		} else { // only one (default) option
			$("#SmartDisplay").addClass('w3-hide'); // belts'n'bracers
		} // end create dropdown
	} // end place-holder check
	change(bert); // Initial page load - set theme and cookie
} // end - theme is NOT defined or an array

// returns the cookie with the given name, (is a string ; delimited)
// or undefined if not found
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function change(theme) {
	$('head').append('<link rel="stylesheet" type="text/css" href="css/'+theme+'.css" />');
	document.cookie = "theme="+theme+"; max-age= 2592000; samesite=lax"; // SET cookie 30 days
console.log('change theme '+theme);
}

	