Widget:AddToHeaderLakeX

<includeonly><script type="text/javascript">
function <!--{$id|default:AddToHeaderLake|escape:'html'}-->_jQueryTest() {
	if ( typeof window.jQuery == 'undefined' ) {
    		setTimeout( function(){ <!--{$id|default:AddToHeaderLake|escape:'html'}-->_jQueryTest() }, 300);
  	} else {
  		<!--{$id|default:AddToHeaderLake|escape:'html'}-->_func();
  	}
}
setTimeout( function(){ <!--{$id|default:AddToHeaderLake|escape:'html'}-->_jQueryTest() }, 300);

function <!--{$id|default:AddToHeaderLake|escape:'html'}-->_func() {

	var jw, jwr;
	var page = ( '<!--{$page|default:x|escape:'html'}-->' );
	var shownames = ( '<!--{$names|default:false|escape:'html'}-->' == 'true' );
	var now = new Date();
	var aweekago = new Date(); aweekago.setDate( aweekago.getDate() - 7 );
	var twoweeksago = new Date(); twoweeksago.setDate( aweekago.getDate() - 14 );
	var amonthago = new Date(); amonthago.setMonth( amonthago.getMonth() - 1 );

	jQuery.getScript( "//www.jarviwiki.fi/citobsjs/jwapi.js", function() {
		jw = new jwApi(); jwr = new jwApi();
		jw.loadObses( { 'obscode': 'temp||alg||level', 'waterbody': page, 'startdate': aweekago.toISOString() }, function( o ) {
			jw.loadObses( { 'obscode': 'ice', 'waterbody': page, 'startdate': twoweeksago.toISOString() }, function( o ) {
				jw.loadObses( { 'obscode': 'secchi', 'waterbody': page, 'startdate': amonthago.toISOString() }, function( o ) {
					obsesReady();			
				});
			});
		});
		
	});
	
	function obsesReady() {

		jw.wbody = {};
		jw.wbcount = 0;

		jw.obsorder = [];
		for ( var oi in jw.obsList ) {

			var o = jw.obsList[oi];
			var wb = jw.obs[ o ].printouts.Alue[0].fulltext.split( ' (' )[0];
			var ot = jw.obs[o].printouts.ObsCode[0];

			if ( typeof jw.wbody[ wb ] == 'undefined' ) {
				jw.wbody[ wb ] = {};
				jw.wbcount++;
			}

			if ( typeof jw.wbody[ wb ][ ot ] == 'undefined' ) {
				jw.wbody[ wb ][ ot ] = { 
					newest: jw.obs[o].obsdatetime, 
					sum: 0, 
					count: 0, 
					mean: -1, 
					catsum: 0, 
					catcount: 0, 
					catmean: -1, 
					obses: [] 
				};
				jw.obsorder.push( { wbody: wb, obstype: ot } );
			}

			jw.wbody[ wb ][ ot ].obses.push( o );
		}

		for ( var wb in jw.wbody ) {
		
			for ( var ot in jw.wbody[ wb ] ) {

				//use just the most recent from level obses
				if ( ot == 'level' ) { jw.wbody[ wb ][ ot ].obses.splice(1); }
			
				for ( var oi in jw.wbody[ wb ][ ot ].obses ) {			

					o = jw.wbody[ wb ][ ot ].obses[ oi ];
					obs = jw.obs[ o ];
					obsdate = obs.obsdatetime;
					days = ( now.getTime()-obsdate.getTime() ) / ( 1000*60*60*24 );
					datajson = obs.printouts.DataJSON[0];
					try { data = JSON.parse( datajson ); } catch(err) { data = false; };

						if ( data ) {

							if ( typeof data.cat != 'undefined' ) {

							if ( ot == 'ice' ) {

								if ( data.cat == '0' || data.cat == '5' ) { 
									jw.wbody[ wb ][ ot ].catsum += 0;
								} else if ( data.cat == '1' || data.cat == '4' ) {
									jw.wbody[ wb ][ ot ].catsum += 1/days;
								} else { // 2 or 3
									jw.wbody[ wb ][ ot ].catsum += 2/days;
								}

								jw.wbody[ wb ][ ot ].catcount = jw.wbody[ wb ][ ot ].catcount + 1/days;
								jw.wbody[ wb ][ ot ].catmean = jw.wbody[ wb ][ ot ].catsum / jw.wbody[ wb ][ ot ].catcount;

							} else {

								jw.wbody[ wb ][ ot ].catsum += parseInt( data.cat/days );
								jw.wbody[ wb ][ ot ].catcount = jw.wbody[ wb ][ ot ].catcount + 1/days;
								jw.wbody[ wb ][ ot ].catmean = jw.wbody[ wb ][ ot ].catsum / jw.wbody[ wb ][ ot ].catcount;

							}
						}
					
						if ( ot == 'level' ) {
							if ( typeof data.inreltodateavg != 'undefined' ) {
								jw.wbody[ wb ][ot].mean = data.inreltodateavg;
								jw.wbody[ wb ][ot].type = 'inreltodateavg';						
							} else if ( typeof data.inreltomwl != 'undefined' ) {
								jw.wbody[ wb ][ot].mean = data.inreltomwl;
								jw.wbody[ wb ][ot].type = 'inreltomwl';							
							} else{
								jw.wbody[ wb ][ot].mean = null;
								jw.wbody[ wb ][ot].type = 'none';
							}
						
							if ( jw.wbody[ wb ][ot].type != 'none' ) {
								if ( jw.wbody[ wb ][ot].mean < -20 ) {
									jw.wbody[ wb ][ot].cat = 0;
								} else if ( jw.wbody[ wb ][ot].mean < -10 ) {
									jw.wbody[ wb ][ot].cat = 1;
								} else if ( jw.wbody[ wb ][ot].mean < 10 ) {
									jw.wbody[ wb ][ot].cat = 2;
								} else if ( jw.wbody[ wb ][ot].mean < 20 ) {
									jw.wbody[ wb ][ot].cat = 3;
								} else {
									jw.wbody[ wb ][ot].cat = 4;
								}							
							}
						
						} else {
							jw.wbody[ wb ][ ot ].sum += data.val / days;
							jw.wbody[ wb ][ ot ].count = jw.wbody[ wb ][ ot ].count + 1/days;
							jw.wbody[ wb ][ ot ].mean = jw.wbody[ wb ][ ot ].sum / jw.wbody[ wb ][ ot ].count;
						}

					}

				}
			}
		}
  
		out = '<div style="display: none;" class="jwcurobsheader">';
		//out += '<h2 class="h4">Havaintotilanne</h2>';
		
		var otstrings1 = { 'temp': 'pintaveden lämpötilasta', 'alg': 'sinilevätilanteesta', 'ice': 'jäätilanteesta', 'level': 'vedenpinnan korkeudesta', 'secchi': 'näkösyvyydestä' };

		if ( jw.obsorder.length > 0 ) {

			out += '<div class="row">';
			
			for ( var i in jw.obsorder ) {

				wb = jw.obsorder[ i ].wbody;
				ot = jw.obsorder[ i ].obstype;

				//if ( ot != 'level' ) {
				
					out += '<div class="col col-6 col-sm-3 col-md-2 text-center">';				
					out += '<div style="height: 40px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';				
				
					if ( jw.wbody[ wb ][ ot ].obses.length > 1 ) {					
						if ( ot == 'temp' ) {
							tooltip = 'Pintaveden lämpötila on painotettu keskiarvo viimeisen 7 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
						} else if ( ot == 'alg' ) {
							tooltip = 'sinilevätilanne on painotettu keskiarvo viimeisen 7 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
						} else if ( ot == 'ice' ) {
							tooltip = 'Jäätilanne on painotettu keskiarvo viimeisen 14 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
						} else if ( ot == 'level' ) {
							tooltip = 'Vedenpinnan korkeus on painotettu keskiarvo viimeisen 7 vuorokauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
						} else if ( ot == 'secchi' ) {
							tooltip = 'Näkösyvyys on painotettu keskiarvo viimeisen kuukauden aikana järvelle tallennetuista havainnoista. Näitä havaintoja on yhteensä ' + jw.wbody[ wb ][ ot ].obses.length + ' kpl.';
						}					
					
					} else {
						if ( ot == 'temp' ) {
							tooltip = 'Tämä on tuorein havainto pintaveden lämpötilasta viimeisen 7 vuorokauden ajalta.';
						} else if ( ot == 'alg' ) {
							tooltip = 'Tämä on tuorein havainto sinilevätilanteesta viimeisen 7 vuorokauden ajalta.';
						} else if ( ot == 'ice' ) {
							tooltip = 'Tämä on tuorein havainto jäätilanteesta viimeisen 14 vuorokauden ajalta.';
						} else if ( ot == 'level' ) {
							tooltip = 'Tämä on tuorein havainto vedenpinnan korkeudesta viimeisen 7 vuorokauden ajalta.';
							if ( jw.wbody[ wb ][ ot ].type == 'inreltomwl' ) { tooltip += ' Vedenkorkeus on ilmoitettu suhteessa vesistön koko vuoden keskivedenkorkeuteen.'; }
							else { tooltip += ' Vedenkorkeus on ilmoitettu suhteessa ajankohdan keskimääräiseen vedenkorkeuteen vuosina 1991-2020.'; }
						} else if ( ot == 'secchi' ) {
							tooltip = 'Tämä on tuorein havainto näkösyvyydestä viimeisen kuukauden ajalta.';
						}
					}
	
					out += '<button style="padding: 0 0.25em; font-size: 14px; margin-bottom: 3px;" type="button" class="btn btn-secondary btn-info" data-toggle="tooltip" data-placement="top" data-trigger="click" title="' + tooltip + '">';
					if ( shownames ) {
						out += wb + ' ' + jw.wbody[ wb ][ ot ].newest.inRelationToToday().replace( 'päivää', 'vrk' ).toLowerCase();
					} else {
						out += jw.wbody[ wb ][ ot ].newest.inRelationToToday().replace( 'päivää', 'vrk' );
					}
					out += '</button>';
	
					out += '</div>';

					if ( ot == 'temp' ) {

						var tempcolor = [ 'var( --syke-blue)', 'var( --syke-yellow)', 'var( --syke-red)' ];
						var tempval = Math.round( jw.wbody[ wb ][ ot ].mean );
						var tempcat = Math.min( 2, Math.floor( 3 * tempval / 30 ) );
	
						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: none;">';
						out += '<div  style="font-size: 44px; color: ' +  tempcolor[ tempcat ] + '">+' + Math.round( jw.wbody[ wb ][ ot ].mean ) + '&deg;</div>';
						out += '</div>';
				
						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
						out += '<span class="h6" style="margin: 0;">Pintaveden<br />lämpötila</span>';
						out += '</div>';
					
					} else if ( ot == 'alg' ) {

				        var algmean = Math.round( jw.wbody[ wb ][ ot ].mean );
						var algtxt = [ 'Ei&nbsp;sinilevää', 'Hieman<br />sinilevää', 'Runsaasti<br />sinilevää', 'Erit. runsaasti<br />sinilevää' ];
						var algcolor = [ '#308fb3', '#8db335', '#f1cb00', '#ce0000' ];

						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; font-size: 44px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: ' + algcolor[ algmean ] + ';">';
						out += '</div>'; 
					
						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
						out += '<span class="h6" style="margin: 0;">' + algtxt[ algmean ] + '</span>';
						out += '</div>';
					
					} else if ( ot == 'ice' ) {

	                	icecatmean = Math.round( jw.wbody[ wb ][ ot ].catmean );
	                	icetxt = [ 'Ei jäätä', 'Osittain jäässä', 'Yhtenäinen jääpeite' ];
						iceautumnbgcolor = [ '#64c1cb', '#64c1cb', '#fff' ];
						icespringbgcolor = [ '#64c1cb', '#fff', '#fff' ];
						iceautumnbrcolor = [ '#64c1cb', '#fff', '#fff' ];
						icespringbrcolor = [ '#64c1cb', '#64c1cb', '#fff' ];
						if ( now.getMonth() > 2 && now.getMonth() < 7 ) {
							bgcolor = icespringbgcolor[ icecatmean ];
							brcolor = icespringbrcolor[ icecatmean ];
						} else {
							bgcolor = iceautumnbgcolor[ icecatmean ];
							brcolor = iceautumnbrcolor[ icecatmean ];
						}
	
						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 10px solid ' + brcolor + '; background-color: ' + bgcolor + ';">';

						if ( icecatmean == 2 ) {
							out += '<div  style="font-size: 36px;">' + Math.round( jw.wbody[ wb ][ 'ice' ].mean ) + '</div>';
							out += '<div style="font-size: 24px; margin-top: -20px;">cm</div>';
						}
					
						out += '</div>'; 

						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
						out += '<span class="h6" style="margin: 0;">' + icetxt[ icecatmean ] + '</span>';
						out += '</div>';

					} else if ( ot == 'secchi' ) {

						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: none;">';
						out += '<div  style="font-size: 36px;">' + ( Math.round( jw.wbody[ wb ][ ot ].mean * 10 ) / 10 ).toFixed(1).toString().replace( '.', ',' ) + '</div>';
						out += '<div style="font-size: 24px; margin-top: -20px;">m</div>';					
						out += '</div>'; 

						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
						out += '<span class="h6" style="margin: 0;">' + 'Näkösyvyys' + '</span>';
						out += '</div>';

					} else if ( ot == 'level' ) {								

						var leveltxt = { 'inreltomwl': 'Keskiveden-<br />korkeudesta', 'inreltodateavg': 'Ajankohdan<br />keskim.<br />vedenkorkeudesta' };
						var levelcolor = [ '#308fb3', '#8db335', '#f1cb00', '#ce0000' ];

						out += '<div style="width: 84px; height: 84px; margin: auto; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; Xbackground-color: var( --syke-lightblue); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%); ">';
						out += '<div  style="font-size: 36px;">' + jw.wbody[ wb ][ ot ].mean.toLocaleString( 'fi-FI', { signDisplay: 'always' } ) + '</div>';
						out += '<div style="font-size: 24px; margin-top: -20px;">cm</div>';					
						out += '</div>'; 

						out += '<div style="height: 60px; display: flex; justify-content: center; align-items: center; flex-direction: column;">';
						out += '<span class="h6" style="margin: 0;">Veden-<br />korkeus</span>';
						out += '</div>';

					}

					out += '</div>';			
				//}
			}		
	
			out += '</div>';	
		}
		out += '</div>';
	
		jQuery( '#sub-content-header-container' ).append( out );
    		jQuery( '[data-toggle="tooltip"]' ).tooltip( { 'trigger': 'click' } );
    		
    		jQuery( '.jwcurobsheader' ).fadeIn();
    		
    		jQuery( '[data-toggle="tooltip"]' ).on( 'show.bs.tooltip', function() {
		    // Only one tooltip should ever be open at a time
		    jQuery( '[data-toggle="tooltip"]' ).not( this ).tooltip( 'hide' );
		});

	}
}
</script></includeonly>