Widget:Algaline journey map

<includeonly>
	<script type="text/javascript" src="//www.jarviwiki.fi/api/common/OpenLayers-2.12/OpenLayers.js"></script>
	<script type="text/javascript" src="//www.jarviwiki.fi/api/common/OpenLayers-2.12/lib/OpenLayers/Lang/fi.js"></script>
	<script type="text/javascript" src="//www.jarviwiki.fi/api/common/OpenLayers-2.12/lib/OpenLayers/Lang/sv-SE.js"></script>

	<div class="jwMapContainer"><div id="<!--{$id|default:AlgalineJourneyMap|escape:'html'}-->_container" style="height: <!--{$height|default:500|escape:'html'}-->px;"></div></div>

	<script type="text/javascript">

	var closecallback = function(e) {
		this.hide();
		OpenLayers.Event.stop(e);
		map.selector.unselectAll();
	}

	function <!--{$id|default:AlgalineJourneyMap|escape:'html'}-->_jQueryTest() {
		if ( typeof window.jQuery == 'undefined' ) {
	    		setTimeout( function(){ <!--{$id|default:AlgalineJourneyMap|escape:'html'}-->_jQueryTest() }, 300);
	  	} else {
	  		<!--{$id|default:AlgalineJourneyMap|escape:'html'}-->_func();
	  	}
	}
	setTimeout( function(){ <!--{$id|default:AlgalineJourneyMap|escape:'html'}-->_jQueryTest() }, 300);

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

			var orgHeight = <!--{$height|default:500|escape:'html'}-->;
			var AlgalineJourneyMapId = '<!--{$id|default:AlgalineJourneyMap|escape:'html'}-->';

                        var size = '<!--{$size|default:21x21|escape:'html'}-->';
                        var lang = '<!--{$lang|default:fi|escape:'html'}-->';
			var ship = '<!--{$ship|default:all|escape:'html'}-->';
			var variable =  '<!--{$variable|default:no|escape:'html'}-->';
			if (variable == 'no') { var varArr = new Array(); }
			else { var varArr = variable.split(','); }
			
			var map;

			cLon = <!--{$lon|default:100|escape:'html'}-->;
			cLat = <!--{$lat|default:100|escape:'html'}-->;
			zoom = <!--{$zoom|default:100|escape:'html'}-->;

			map = jwMakeMap(AlgalineJourneyMapId);

			var osm = jwAddBaseMap(map, 'osm', lang);
			map.setBaseLayer(osm);

			//map.setCenter(new OpenLayers.LonLat(lon, lat).transform( epsg4326, projectTo ), zoom);
			jwStyleControls(AlgalineJourneyMapId);
			jwAddControlDragPan(map);
			jwAddControlFullscreen(map);

			var searchStr = '';
			
			if (ship != 'all') { searchStr += 'ship=' + ship; }

			function gotJourneyObs(request) {
			
				if (request.length > 0) {
				
					var resultsArr = new Array();
					var minScales = new Array();
					var maxScales = new Array();
					for (vi in varArr) {
						minScales[varArr[vi]] = 1000;
						maxScales[varArr[vi]] = 0;
					}
						
					
					for (var i in request) {
					
						obs = request[i];

						if (resultsArr[obs.ShipID] == undefined) {
							resultsArr[obs.ShipID] = new Array();
						}
						
						resultsArr[obs.ShipID].push(obs);
					
						for (vi in varArr) {
							v = varArr[vi];
							val = parseFloat(obs[v]);
							
							if (minScales[v] == undefined || minScales[v] > val) { minScales[v] = val; }
							if (maxScales[v] == undefined || maxScales[v] < val) { maxScales[v] = val; }
						}
					}
					
					// Do Ships
					for (var s in resultsArr) {

						route = new OpenLayers.Layer.Vector( IDtoShip(s) , {
							rendererOptions: {
								yOrdering: false, 
								zIndexing: true
							}, 
							eventListeners:{
								'featureselected': function(evt){
									var popup = new OpenLayers.Popup.FramedCloud("popup", evt.feature.geometry.getBounds().getCenterLonLat(), null, evt.feature.data.popupContent, null, true, closecallback );
									evt.feature.popup = popup;
									map.addPopup(popup);
								 },
								 'featureunselected':function(evt){
									map.removePopup(evt.feature.popup);
									evt.feature.popup.destroy();
									evt.feature.popup = null;
								 }
							}						
						});
						map.addLayer(route);
						route.data = new Object();						
						route.addOptions({ popuppable: true, zIndex: 10 }, false);
						
						points = [];
						labels = [];
						circles = [];
						lastday = 0;
						var degs;

						for (i in resultsArr[s]) {
		
							obs = resultsArr[s][i];
							lat = obs.Lat;
							lon = obs.Lon;
							ll = new OpenLayers.LonLat( lon, lat ).transform(epsg4326, projectTo);
							obsDate = new Date(obs.Date + 'T' + obs.Time);
																	
							point = new OpenLayers.Geometry.Point(ll.lon, ll.lat);
							points.push(point);						

							popupContent = "";
							popupContent += '<h3><b><a href="//www.jarviwiki.fi/wiki/Algaline/' + encodeURI(IDtoShip(obs.ShipID)) + '">' + IDtoShip(obs.ShipID) + '</a></b></h3>';
							
							popupContent += '<div style="font-size: 90%;">';
							popupContent += '<p style="font-style: italic; Xfont-weight: bold;">' + obsDate.inRelationToToday2() + '</p>';
							
							popupContent += '<table cellpadding="0" cellspacing="0" border="0">';
							
							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999;">' + IDtoVariable('Soxtemp', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0;">' + toNiceNumber(obs.Soxtemp, 1, lang) + ' &deg;C</td>';
							popupContent += '</tr>';
							
							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999;">' + IDtoVariable('Sosal', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0;">' + toNiceNumber(obs.Sosal, 1, lang) + ' (PSU)</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999;">' + IDtoVariable('Sochlfl', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0;">' + toNiceNumber(obs.Sochlfl, 1, lang) + '</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999;">' + IDtoVariable('Sopcfl', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0;">' + toNiceNumber(obs.Sopcfl, 1, lang) + '</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999;">' + IDtoVariable('Soturb', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0;">' + toNiceNumber(obs.Soturb, 1, lang) + ' (NTU)</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; max-width: 140px;">' + IDtoVariable('Socdom', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0;">' + toNiceNumber(obs.Socdom, 1, lang) + '</td>';
							popupContent += '</tr>';

							popupContent += '</table>';
							popupContent += '</div>';
							
							if (i == 0) {
								//style = { graphicName: 'square', graphicZIndex: 100, pointRadius: 4, fillColor: '#666666', fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333' }; 					
								style = { graphicName: 'circle', XgraphicZIndex: 10, pointRadius: 4, fillColor: '#666666', fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333'  }; 
							} else if (i == resultsArr[s].length-1) {
								
								if (map.calculateBounds(null, 1) == null) { map.zoomTo(10); }
								
								curXY = map.getPixelFromLonLat(ll);
								prevll = new OpenLayers.LonLat( resultsArr[s][i-1].Lon, resultsArr[s][i-1].Lat ).transform(epsg4326, projectTo);
								prevXY = map.getPixelFromLonLat(prevll);
								distX = curXY.x-prevXY.x;
								distY = curXY.y-prevXY.y;
								rads = Math.atan2(distY, distX);
								degs = rads / (Math.PI/180);
								now = new Date();
								if ((now.getTime()-obsDate.getTime()) > (3 * 60 * 60 * 1000)) {
									style = { graphicName: 'square', XgraphicZIndex: 100, pointRadius: 4, fillColor: '#666666', fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333' }; 
								} else {
									style = { graphicName: 'triangle', XgraphicZIndex: 100, rotation: 90+degs, graphicZIndex: 100, pointRadius: 7, fillColor: '#666666', fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333' }; 
								}
							} else {
								style = { graphicName: 'circle', XgraphicZIndex: 10, pointRadius: 4, fillColor: '#666666', fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333'  }; 					
							}
							circleFeature = new OpenLayers.Feature.Vector(point, { zIndex: 10 }, style);
							circleFeature.data.popupContent = popupContent;
							circles.push(circleFeature);
					
							if (obsDate.getDate() != lastday) {
								lastday = obsDate.getDate();
								style = { pointRadius: 4, fillColor: '#333333', strokeWidth: 0, label: obsDate.getDate() + '.' + (obsDate.getMonth()+1) + '.', labelAlign: 'cm', labelXOffset: 16, labelYOffset: -8, fontColor: '#333333', fontSize: '10px', fontFamily: 'Arial', fontWeight: 'bold' }; 						
								label = new OpenLayers.Feature.Vector(point, { zIndex: 5 }, style);
								labels.push(label);
							}						
							
						}
						line = new OpenLayers.Geometry.LineString(points);
						style = { strokeColor: '#ba0000', strokeOpacity: 0.9, strokeWidth: 2, strokeDashstyle: 'dash' };
						lineFeature = new OpenLayers.Feature.Vector(line, { zIndex: 0 }, style);
						lines = [lineFeature];
						
						route.addFeatures(lines);
						route.addFeatures(labels);
						route.addFeatures(circles);
						
						if (zoom == 100 || cLon == 100 || cLat == 100) {
							map.zoomToExtent(route.getDataExtent());
						} else {
							//map.zoomTo(zoom, new OpenLayers.LonLat( cLon, cLat ).transform(epsg4326, projectTo));	
							map.setCenter(new OpenLayers.LonLat(cLon, cLat).transform( epsg4326, projectTo ), zoom);
						}

						//map.zoomToExtent(route.getDataExtent());
					}
					
					// do Variables
					for (vi in varArr) {
					
						v = varArr[vi];
				
						observations = new OpenLayers.Layer.Vector( IDtoVariable(v, lang) , {
							rendererOptions: {
								yOrdering: false, 
								zIndexing: true
							}, 
							eventListeners:{
								'featureselected': function(evt){
									var popup = new OpenLayers.Popup.FramedCloud("popup", evt.feature.geometry.getBounds().getCenterLonLat(), null, evt.feature.data.popupContent, null, true, closecallback );
									evt.feature.popup = popup;
									map.addPopup(popup);
								 },
								 'featureunselected':function(evt){
									map.removePopup(evt.feature.popup);
									evt.feature.popup.destroy();
									evt.feature.popup = null;
								 }
							}						
						});
						map.addLayer(observations);
						observations.data = new Object();						
						observations.addOptions({ popuppable: true, zIndex: 100 }, false);

						points = [];
						labels = [];
						circles = [];
						lastday = 0;

						for (i in request) {

							obs = request[i];
							lat = obs.Lat;
							lon = obs.Lon;
							val = parseFloat(obs[v]);
							ll = new OpenLayers.LonLat( lon, lat ).transform(epsg4326, projectTo);
							obsDate = new Date(obs.Date + 'T' + obs.Time);

							point = new OpenLayers.Geometry.Point(ll.lon, ll.lat);
							points.push(point);
							
							bgs = { Sosal: 'none', Soxtemp: 'none', Sochlfl: 'none', Sopcfl: 'none', Soturb: 'none', Socdom: 'none' };
							bgs[v] = '#dddddd';

							popupContent = "";
							popupContent += '<h3><b><a href="//www.jarviwiki.fi/wiki/Algaline/' + encodeURI(IDtoShip(obs.ShipID)) + '">' + IDtoShip(obs.ShipID) + '</a></b></h3>';
							
							popupContent += '<div style="font-size: 90%;">';
							popupContent += '<p style="font-style: italic; Xfont-weight: bold;">' + obsDate.inRelationToToday2() + '</p>';
							
							popupContent += '<table cellpadding="0" cellspacing="0" border="0">';
							
							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; background-color: ' + bgs['Soxtemp'] +';">' + IDtoVariable('Soxtemp', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0; background-color: ' + bgs['Soxtemp'] +';">' + toNiceNumber(obs.Soxtemp, 1, lang) + ' &deg;C</td>';
							popupContent += '</tr>';
							
							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; background-color: ' + bgs['Sosal'] +';">' + IDtoVariable('Sosal', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0; background-color: ' + bgs['Sosal'] +';">' + toNiceNumber(obs.Sosal, 1, lang) + ' (PSU)</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; background-color: ' + bgs['Sochlfl'] +';">' + IDtoVariable('Sochlfl', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0; background-color: ' + bgs['Sochlfl'] +';">' + toNiceNumber(obs.Sochlfl, 1, lang) + '</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; background-color: ' + bgs['Sopcfl'] +';">' + IDtoVariable('Sopcfl', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0; background-color: ' + bgs['Sopcfl'] +';">' + toNiceNumber(obs.Sopcfl, 1, lang) + '</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; background-color: ' + bgs['Soturb'] +';">' + IDtoVariable('Soturb', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0; background-color: ' + bgs['Soturb'] +';">' + toNiceNumber(obs.Soturb, 1, lang) + ' (NTU)</td>';
							popupContent += '</tr>';

							popupContent += '<tr>';
							popupContent += '<td style="font-weight: bold; padding: 2px 10px 2px 0; border-bottom: 1px dotted #999999; max-width: 140px; background-color: ' + bgs['Socdom'] +';">' + IDtoVariable('Socdom', lang) + '</td>';
							popupContent += '<td style="border-bottom: 1px dotted #999999; padding: 2px 0; background-color: ' + bgs['Socdom'] +';">' + toNiceNumber(obs.Socdom, 1, lang) + '</td>';
							popupContent += '</tr>';

							popupContent += '</table>';
							popupContent += '</div>';

							hue = 0 + 240 * (maxScales[v] - val) / (maxScales[v]-minScales[v]);
							rgb = hslToRgb(hue/360, 0.8, 0.5);
							color =  '#' + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
							
							if (i == 0) {
								style = { graphicName: 'circle', XgraphicZIndex: 10, pointRadius: 5, fillColor: color, fillOpacity: 1, strokeWidth: 0, strokeColor: '#333333'  };
							} else if (i == request.length-1) {								
								now = new Date();
								if ((now.getTime()-obsDate.getTime()) > (3 * 60 * 60 * 1000)) {
									style = { graphicName: 'square', XgraphicZIndex: 100, pointRadius: 5, fillColor: color, fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333' }; 
								} else {
									style = { graphicName: 'triangle', XgraphicZIndex: 100, rotation: 90+degs, graphicZIndex: 100, pointRadius: 7, fillColor: color, fillOpacity: 1, strokeWidth: 1, strokeColor: '#333333' }; 
								}
							} else {
								style = { graphicName: 'circle', XgraphicZIndex: 10, pointRadius: 5, fillColor: color, fillOpacity: 1, strokeWidth: 0, strokeColor: '#333333'  }; 					
							}							
		
							circleFeature = new OpenLayers.Feature.Vector(point, { zIndex: 10 }, style);
							circleFeature.data.popupContent = popupContent;
							circles.push(circleFeature);

						}

						observations.addFeatures(circles);
						
						if (zoom == 100 || cLon == 100 || cLat == 100) {
							map.zoomToExtent(observations.getDataExtent());
						} else {
							map.setCenter(new OpenLayers.LonLat(cLon, cLat).transform( epsg4326, projectTo ), zoom);
						}
					}
				
				}
				doLayers(map);
			}

			jQuery.ajax({
				type: 'GET',
				cache: false,
				url: '//www.jarviwiki.fi/common/algaline/algalineJ.php',
				data: searchStr,
				dataType: 'json',
				success: gotJourneyObs,
			});
		}
		
		function IDtoVariable(id, lang) {
			var vars = {
				fi: { Sosal: 'Suolaisuus', Soxtemp: 'Lämpötila', Sochlfl: 'Klorofyllifluoresenssi', Sopcfl: 'Fykosyaniinifluoresenssi', Soturb: 'Turbiditeetti', Socdom: 'Värillinen liuennut orgaaninen aines (CDOM)'  },
				sv: { Sosal: 'Salthet', Soxtemp: 'Temperatur', Sochlfl: 'Klorofyllfluorescens', Sopcfl: 'Fykosyaninfluorescens', Soturb: 'Turbiditet', Socdom: 'Färgad löst organiskt material (CDOM)' },
				en: { Sosal: 'Salinity', Soxtemp: 'Temperature', Sochlfl: 'Chlorophyll fluoresence', Sopcfl: 'Phycocyanin fluoresence', Soturb: 'Turbidity', Socdom: 'Colored dissolved organic matter (CDOM)' }
			};
			lang = lang && (lang in vars) ? lang : 'fi';
			return vars[lang][id];        
		}
		
		function toNiceNumber(numStr, decimals, lang) {
		
			var number = parseFloat(numStr);
			
			if (number == -9999) {
				return '-';
			} else {
				if (decimals == undefined) { decimals = 2; }
				if (lang == undefined) { lang = 'fi'; }
	
				//var rounded = Math.round(Math.pow(10, decimals)*number)/Math.pow(10, decimals);
						
				numberStr = number.toFixed(decimals);
							
				if (lang!='en') {
					numberStr = numberStr.replace('.', ',');
				}
			
				return numberStr;
			}
		}
		
		function IDtoShip(ID) {
			
			var r;
			if (ID == 'FM') { r = 'M/S Finnmaid'; }
			else if (ID == 'TP') { r = 'M/S TransPaper'; }
			else r = 'Unknown';
			
			return r;
		}
		
		function hslToRgb(h, s, l){
		/**
		 * Converts an HSL color value to RGB. Conversion formula
		 * adapted from //en.wikipedia.org/wiki/HSL_color_space.
		 * Assumes h, s, and l are contained in the set [0, 1] and
		 * returns r, g, and b in the set [0, 255].
		 *
		 * @param   Number  h       The hue
		 * @param   Number  s       The saturation
		 * @param   Number  l       The lightness
		 * @return  Array           The RGB representation
 		*/
		    var r, g, b;
		
		    if(s == 0){
		        r = g = b = l; // achromatic
		    }else{
		        function hue2rgb(p, q, t){
		            if(t < 0) t += 1;
		            if(t > 1) t -= 1;
		            if(t < 1/6) return p + (q - p) * 6 * t;
		            if(t < 1/2) return q;
		            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
		            return p;
		        }
		
		        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
		        var p = 2 * l - q;
		        r = hue2rgb(p, q, h + 1/3);
		        g = hue2rgb(p, q, h);
		        b = hue2rgb(p, q, h - 1/3);
		    }
		
		    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
		}
		
		
		Date.prototype.inRelationToToday2 = function(lang) {
			var today = new Date();
			var days = today.getDaysSinceZero() - this.getDaysSinceZero();
			hour = this.getHours();
			hourStr = hour.toString();
			min = this.getMinutes();
			minStr = min.toString();
			if (hour < 10) { hourStr = '0' + hourStr; }
			if (min < 10) { minStr = '0' + minStr; }
			var returnStr = '';
			if (days == 0) { 
				returnStr = labels( 'today', lang);
			} else if (days == 1) {
				returnStr = labels( 'yesterday', lang);
			} else if (days < 11) {
				returnStr = days + ' ' + labels( 'daysAgo', lang);
			} else {
				returnStr = this.toLocaleDateString();
			}
			returnStr += ' klo ' + hourStr + ':' + minStr;
			return returnStr;
		        function labels(id, lang) {
				var labs = {
					fi: { today: 'Tänään', yesterday: 'Eilen', daysAgo: 'päivää sitten' },
					sv: { today: 'Idag', yesterday: 'Igår', daysAgo: 'dagar sedan' },
					en: { today: 'Today', yesterday: 'Yesterday', daysAgo: 'days ago' }
				};
				lang = lang && (lang in labs) ? lang : 'fi';
				return labs[lang][id];        
		        }
		};

	</script>
</includeonly>