Widget:Ice break-up river graph

<includeonly>
    	<!--Load the AJAX API-->
    	<!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> -->
    	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    	<script type="text/javascript">

            var siteName = '<!--{$page|escape:'urlpathinfo'}-->'; 
            var lang = '<!--{$lang|default:fi|escape:'html'}-->';
  	    var SiteID = '<!--{$SiteID|default:x|escape:'html'}-->';
 
    		google.load('visualization', '1.0', {'packages':['corechart']});
			google.setOnLoadCallback(drawIburChart);

			function drawIburChart() {

	    			var searchStr = "action=ask&query=";
	    			searchStr += "[[Havainto::>0]][[SiteID::" + SiteID + "]]";

	    			searchStr += encodeURI("[[Jäätilanne::4]]");
				searchStr += encodeURI("|?Päivämäärä|?Tiedosto|?Lisätiedot|limit=500");
				searchStr += '&format=json';
				jQuery.ajax({
			   		type: 'GET',
			   		url: queryApi,
			   		data: searchStr,
			   		success: success,
			   		dataType: 'jsonp'
				});

				function success(request) {

				    var dataArr = new Array();
				    var imagesArr = new Array();
				    var firstYear = 3000;
				    var lastYear = 0;
				    var firstMonth = 12;
				    var lastMonth = 1;
				    var minDay = 365;
				    var maxDay = 0;
				    var daysCount = 0;
				    var yearSum = 0;
				    var daysSum = 0;
				    var images=0;
				    var results = 0;

					if (request.query.results != undefined) {

						// analyze data
						zi = -1;						
						for (var i in request.query.results) {
							zi++;
							resultItem = request.query.results[i].printouts;		
						
							obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0]));
	    						if (obsDate.getFullYear() < firstYear) { firstYear = obsDate.getFullYear(); }
		    					if (obsDate.getFullYear() > lastYear) { lastYear = obsDate.getFullYear(); }
		    					if (obsDate.getMonth() < firstMonth) { firstMonth = obsDate.getMonth(); }
		    					if (obsDate.getMonth() > lastMonth) { lastMonth = obsDate.getMonth(); }
	                        			if (obsDate.getDayOfYear() < minDay) { minDay = obsDate.getDayOfYear(); }
	                        			if (obsDate.getDayOfYear() > maxDay) { maxDay = obsDate.getDayOfYear(); }
	                        			yearSum += obsDate.getFullYear();
	                        			daysSum += obsDate.getDayOfYear();

	                        			// If image, get filename
	                        			//console.log(resultItem);
	                        			if (resultItem.Tiedosto.length > 0) {
	                        				images++;
								searchStr2 = "action=query&prop=imageinfo&iiprop=url&format=json&titles=";
								searchStr2 += encodeURIComponent(resultItem.Tiedosto[0]);
								jQuery.ajax({
									type: 'GET',
									url: queryApi,
									data: searchStr2,
									dataType: 'jsonp',
									index: zi,
									success: function(request2) {
										for (var x in request2.query.pages) {
											imagesArr[this.index] = request2.query.pages[x].imageinfo[0].url;
											break;
  										}
										images--;
									},
									error: function() { images--; }
								});
							}
	                    			}
	                    			results = zi+1;
	                    			
			                    	// count linear regression
			                    	//console.log(request.query);
			                    	var yearMean = yearSum / results;
			                    	var daysMean = daysSum / results;
			                    	var sigma1 = 0;
					    	var sigma2 = 0;

						for (var i in request.query.results) {
							resultItem = request.query.results[i].printouts;	
							
							obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0]));
							
	    						sigma1 += (obsDate.getFullYear() - yearMean) * (obsDate.getDayOfYear() - daysMean);
	    						sigma2 += (obsDate.getFullYear() - yearMean) * (obsDate.getFullYear() - yearMean);
	                   			 }
						var m = sigma1/sigma2;
						var b = daysMean - (m * yearMean);

						function imagesLoaded() {

							if (images != 0) { setTimeout(function() {
								imagesLoaded()},500);
							} else {

	                    					// add to data table
	                    					zi = -1;
								for (var i in request.query.results) {
									zi++;
									resultItem = request.query.results[i].printouts;
									obsDate = new Date(toDateFromSecsSince1970(resultItem.Päivämäärä[0]));
			    						dataRow = new Array();
			    						dataRow[0] = obsDate.getFullYear();
			    						dataRow[1] = obsDate.getDayOfYear();
			    						dataRow[2] = '<div style="padding: 8px;">' + obsDate.toLocaleDateString();
			    						if (imagesArr[zi]) {
										dataRow[2] += '<br />' + '<div class="ibuTooltipDiv" id="ibuTooltipDiv_' + i + '" style="width: 144px; height: 144px;"><img class="ibuTooltipImg" id="ibuTooltipImg_' + i + '" style="max-width: 144px; max-height: 144px;" src="' + imagesArr[zi] + '" /></div>';
										jQuery('#ibuTooltipImg_' + zi).load(function() {
											//console.log(jQuery(this).width() + "x" + jQuery(this).height());
										});
									}
									if (resultItem.Lisätiedot.length > 0) {
	    									dataRow[2] += '<br />' + resultItem.Lisätiedot[0];
	    								}
	    								dataRow[2] += '</div>';
									if (maxDay != minDay) {
	    									if (obsDate.getDayOfYear() == maxDay) { dataRow[3] = iburTranslate(3, lang); }
	    									else if (obsDate.getDayOfYear() == minDay) { dataRow[3] = iburTranslate(2, lang); }
			    							else { dataRow[3] = null; }
			    						} else {
			    							dataRow[3] = "";
			    						}
			    						dataRow[4] = m * obsDate.getFullYear() + b;
			    						dataRow[5] = '<div style="padding: 8px;">' + iburTranslate(4, lang);
			    						if (m > 0) { dataRow[5] += ' + '; } else { dataRow[5] += ' - '; }
			    						dataRow[5] += Math.abs(Math.round(10 * (m * 10 + b - b))/10);
			    						dataRow[5] += iburTranslate(5, lang) + '</div>';
			    						dataArr[zi] = dataRow;
			                   			 }
			                   			 //console.log(dataArr);

	                    					// visualization parameters
			               				var yearSpan = lastYear - firstYear;
			                    			if (yearSpan < 3) {
			                    				yearSpan = (++lastYear) - (--firstYear);
			                    				yearStep = 1;
			                    			} else if (yearSpan < 7) {
			                        			yearStep = 1;
			                    			} else if (yearSpan < 20) {

			                    			}

				 				var dataTable = new google.visualization.DataTable();
				  				dataTable.addColumn('number', 'Year');
				  				dataTable.addColumn('number', 'Ice break-up');
				  				dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});
				  				dataTable.addColumn({type: 'string', role: 'annotation'});
				  				dataTable.addColumn('number', 'Trend line');
				  				dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true }});

  								var vAxisTicks = new Array();
				  				var startOfMonth;
  								for (i=firstMonth; i<=lastMonth; i++) {
  									startOfMonth = new Date(2014, i, 15);
			  					    vAxisTicks.push({v: startOfMonth.getDayOfYear(), f: startOfMonth.getMonthName(lang) });
			  					}

  								dataTable.addRows(dataArr);
				  				var options = {
				  					hAxis: {title: iburTranslate(0, lang), format: '####' },
  				    					vAxis: {minValue: new Date(2014, firstMonth, 1).getDayOfYear(), maxValue: new Date(2014, lastMonth+1, 1).getDayOfYear()-1, ticks: vAxisTicks, gridlines: { color: 'transparent' }, minorGridlines: { count: 1, color: '#ccc' } },
				  				   	seriesType: "scatter",
  				    					interpolateNulls: true,
  				    					series: { 0: { targetAxisIndex: 0} },
				  				    	series: { 1: { targetAxisIndex: 0, type: "line" } },
  				    					legend: { position: 'none' },
				  				    	backgroundColor: { fill:'transparent' },
  				    					crosshair: { trigger: 'both' },
				  				    	chartArea: { top: 10, left: 80, width: (jQuery('#ice-break-up-river_chart_div').width() - 80 - 20), height: (jQuery('#ice-break-up-river_chart_div').height() - 50 - 10), backgroundColor: { stroke: '#ccc', strokeWidth: 1, fill: '#daf0fa' } },
  				  					tooltip: { isHtml: true }
				  				};
  								var chart = new google.visualization.ComboChart(document.getElementById('ice-break-up-river_chart_div'));
				  				chart.draw(dataTable, options);

				  				jQuery( window ).resize(function() {
				  					console.log((jQuery('#ice-break-up-river_chart_div').width() - 80 - 10));
				  					options.chartArea.width = (jQuery('#ice-break-up-river_chart_div').width() - 80 - 20);
				  					options.chartArea.height = (jQuery('#ice-break-up-river_chart_div').height() - 50 - 10);
									chart.draw(dataTable, options);
								});

							}
						}
						imagesLoaded();
					}
				}
			}

			function iburTranslate(labelId, lang) {

				var labels = {
						fi: ['Vuosi', 'Jäänlähtö, pvm', 'aikaisin', 'myöhäisin', 'Trendi: ', ' päivää / 10 vuotta'],
						sv: ['År', 'Datum för islossning', 'tidigast', 'senast', 'Trend: ', ' dygn / 10 år'],
						en: ['Year', 'Ice break-up date', 'earliest', 'latest', 'Trend: ', ' days / 10 years']
				};

				lang = lang && (lang in labels) ? lang : 'en';
			    return labels[lang][labelId];
			}


    	</script>
    <!--Div that will hold the pie chart-->
    <div style="Xbackground-color: #c1e7f7; height: 300px;" id="ice-break-up-river_chart_div"></div>
</includeonly>