<%@ include file="/shell/include.jsp" %>

<html>
<head>

<j:initJavascript />
<ajax:initJavascript />

<script type="text/javascript" src="${j:getResourceUrlOfModule('shell', 'js/jquery-1.4.4.min.js')}"></script>
<script type="text/javascript" src="${j:getResourceUrlOfModule('shell', 'js/jquery.json-2.4.min.js')}"></script>

<script type="text/javascript" src="${j:getResourceUrl('js/Chart.min.js')}"></script>
<script type="text/javascript" src="${j:getResourceUrl('js/Chart.bundle.min.js')}"></script>
<script type="text/javascript" src="${j:getResourceUrl('js/chartjs-gauge.js')}"></script>

<link rel="stylesheet" type="text/css" href="${j:getResourceUrlOfModule('shell', 'css/shell.css')}">
<link rel="stylesheet" type="text/css" href="${j:getResourceUrl('js/Chart.min.css')}">

<script type="text/javascript">
	/** 
	 * Inizializzazione componenti
	 */

	var barChartLabels = [];
	var barChartValues = [];

	var pieChartLabels = [];
	var pieChartValues = [];

	var gaugeDataset = {};

	Chart.defaults.global.defaultFontColor = "#2a4d70";
	
	function initUI() {
		/** barChart */
		var barChartCtx = document.getElementById('barChart').getContext('2d');
		window.barChart = new Chart(barChartCtx, {
			type : 'bar',
			data : {
				labels : barChartLabels,
				datasets : [ {
					data : barChartValues,
					backgroundColor : [ 
					        'rgba(34, 73, 122, 0.8)',
							'rgba(130, 167, 209, 0.8)' 
							],
					borderColor : [ 
					        'rgba(34, 73, 122, 1)',
							'rgba(130, 167, 209, 1)' 
							],
					borderWidth : 2
				} ]
			},
			options : {
				legend : {
					display : false
				},
				layout: {
			        padding: {
			            left: 0,
			            right: 0,
			            top: 16,
			            bottom: 0
			        }
			    },
				scales : {
					yAxes : [ {
						ticks : {
							beginAtZero : true,
							callback : function(label, index, labels) {
								return formatAsValuta(label);
							},
							fontSize : 10,
							fontColor : '#2a4d70'
						}
					} ],
					xAxes : [ {
						barPercentage : 0.4,
						ticks : {
							fontSize : 12,
							fontColor : '#2a4d70'
						}
					} ]
				},
				events : [ 'click' ],
				animation : {
					"duration" : 1,
					"onComplete" : function() {
						var chartInstance = this.chart, 
						ctx = chartInstance.ctx;
						ctx.fillStyle =  '#2a4d70';
						ctx.font = Chart.helpers.fontString(
										12,
										Chart.defaults.global.defaultFontStyle,
										Chart.defaults.global.defaultFontFamily);
						ctx.textAlign = 'center';
						ctx.textBaseline = 'bottom';
						this.data.datasets.forEach(function(dataset, i) {
							var meta = chartInstance.controller.getDatasetMeta(i);
							meta.data.forEach(function(bar,	index) {
								var data = formatAsValuta(dataset.data[index]);
								ctx.fillText(data, bar._model.x, bar._model.y - 5);
							});
						});
					}
				}
			}
		});

		document.getElementById("barChart").onclick = function(evt) {
			/** */
			var activePoints = window.barChart.getElementsAtEvent(evt);
			if (activePoints.length > 0) {
				var clickedIdx = activePoints[0]["_index"];
				onClickBarChart(clickedIdx);
			}
		}

		/** pieChart */
		var pieChartCtx = document.getElementById('pieChart').getContext('2d');
		window.pieChart = new Chart(pieChartCtx, {
			type : 'pie',
			data : {
				labels : pieChartLabels,
				datasets : [ {
					data : pieChartValues,
					backgroundColor : [ 'rgba(195, 93, 91, 0.8)',
							'rgba(204, 221, 173, 0.8)',
							'rgba(90, 137, 193, 0.8)',
							'rgba(195, 181, 211, 0.8)',
							'rgba(255, 212, 0, 0.8)' ]
				} ]
			},
			options : {
				responsive : true,
				maintainAspectRatio : false,
				legend : {
					position : 'right',
					labels : {
						fontColor : '#2a4d70',
						fontSize : 12,
						boxWidth : 10,
						padding : 10
					}
				}
			}
		});

		/** gaugeChart */
		var gaugeChartCtx = document.getElementById('gaugeChart').getContext(
				'2d');
		gaugeDataset = {
			backgroundColor : [ 'rgba(220, 220, 220, 0.8)',
					'rgba(220, 220, 220, 0.8)', 'rgba(220, 220, 220, 0.8)' ],
			data : [ 0.9, 1, 1.5 ],
			value : 0,
			borderWidth : 2
		}
		window.gaugeChart = new Chart(gaugeChartCtx, {
			type : 'gauge',
			data : {
				datasets : [ gaugeDataset ]
			},
			legend : {
				display : false
			},
			options : {
				circumference : 1.5 * Math.PI,
				rotation : -1.25 * Math.PI,
				cutoutPercentage : 70,
				responsive : true,
				title : {
					display : false,
				},
				needle : {
					radiusPercentage : 2,
					widthPercentage : 4.2,
					lengthPercentage : 80,
					color : 'rgba(29, 70, 126, 1)'
				},
				valueLabel : {
					display : false
				}
			}
		});
	}

	function formatAsValuta(x) {
		var parts = x.toString().replace('.', ',').split(",");
		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
		return '\u20AC ' + parts.join(",");
	}

	/** 
	 * Caricamento dati
	 */

	var vbDescriptions;
	var vbSummaryLabels;
	var vbSummaryValues;
	var vbDetailLabels;
	var vbDetailValues;
	var vbBudgets;
	var vbIdx;
	var vbType;

	function loadXmlData() {
		jsLoadXMLFromUrl(addParamsToUrl(
				juiceGetEvent('budget.getxmlVociBudget'), 'id=${id}'),
				_jsBudgetHandler, '');
	}

	function _jsBudgetHandler(responseXML, functionName) {
		/** */
		vbDescriptions = [];
		vbSummaryLabels = [];
		vbSummaryValues = [];
		vbDetailLabels = [];
		vbDetailValues = [];
		vbBudgets = [];
		vbIdx = 0;
		vbType = -1;

		/** */
		if (responseXML != null) {
			/** */
			var variableTags = responseXML.documentElement
					.getElementsByTagName('variable');
			if (variableTags.length > 0) {
				for ( var i = 0; i < variableTags.length; i++) {
					var name = variableTags[i].getAttribute('name');
					if (name.startsWith('Riepilogo')) {
						/** Riepilogo */
						var description = getNodeValue(variableTags[i], 0, 0);
						vbDescriptions.push(description);
						var labels = [
								getNodeValue(variableTags[i], 1, 0,
										'Consolidato'),
								getNodeValue(variableTags[i], 2, 0,
										'Previsione') ];
						vbSummaryLabels.push(labels);
						var values = [
								getNodeValue(variableTags[i], 1, 1, '0'),
								getNodeValue(variableTags[i], 2, 1, '0') ];
						vbSummaryValues.push(values);
						if (values[0] != null && values[0] != 0) {
							vbType = 0;
						} else if (values[1] != null && values[1] != 0) {
							vbType = 1;
						}

					} else if (name.startsWith('Dettaglio')) {
						/** Dettaglio */
						var cLabels = getNodeValues(variableTags[i], 0, 5);
						var cValues = getNodeValues(variableTags[i], 1, 5);
						var pLabels = getNodeValues(variableTags[i], 2, 5);
						var pValues = getNodeValues(variableTags[i], 3, 5);
						vbDetailLabels.push([ cLabels, pLabels ]);
						vbDetailValues.push([ cValues, pValues ]);

					} else if (name.startsWith('Budget')) {
						/** Budget */
						var budget = getNodeValue(variableTags[i], 1, 0);
						vbBudgets.push(budget);
					}
				}
			}

			/** */
			document.getElementById("selectVdb").options.length = 0;
			for ( var i = 0; i < vbDescriptions.length; i++) {
				var x = document.getElementById("selectVdb");
				var option = document.createElement("option");
				option.value = i;
				option.text = vbDescriptions[i];
				x.add(option);
			}

			/** */
			updateCharts();
		}
	}

	function getNodeValue(variableTag, row, column, defaultValue) {
		try {
			var childNodes = variableTag.getElementsByTagName('row')[row]
					.getElementsByTagName('column')[column].childNodes;
			return childNodes.length == 0 ? (defaultValue ? defaultValue : null)
					: childNodes[0].nodeValue;
		} catch (error) {
			return defaultValue ? defaultValue : null;
		}
	}

	function getNodeValues(variableTag, row, n) {
		var result = [];
		for ( var i = 0; i < n; i++) {
			var e = getNodeValue(variableTag, row, i);
			if (e) {
				result.push(e);
			}
		}
		return result;
	}

	function updateCharts() {
		/** */
		barChartLabels.length = 0;
		barChartValues.length = 0;
		for ( var i = 0; i < vbSummaryLabels[vbIdx].length; i++) {
			barChartLabels.push(vbSummaryLabels[vbIdx][i]);
		}
		for ( var i = 0; i < vbSummaryValues[vbIdx].length; i++) {
			barChartValues.push(vbSummaryValues[vbIdx][i]);
		}

		/** */
		pieChartLabels.length = 0;
		pieChartValues.length = 0;
		if (vbType != -1) {
			for ( var i = 0; i < vbDetailLabels[vbIdx][vbType].length; i++) {
				pieChartLabels.push(truncateString(
						vbDetailLabels[vbIdx][vbType][i], 60));
			}
			for ( var i = 0; i < vbDetailValues[vbIdx][vbType].length; i++) {
				pieChartValues.push(vbDetailValues[vbIdx][vbType][i]);
			}
		}

		/** */
		var budget = parseFloat(vbBudgets[vbIdx]);
		var currentValue = (parseFloat(vbSummaryValues[vbIdx][0]) + parseFloat(vbSummaryValues[vbIdx][1]));
		currentValue = currentValue.toFixed(2);
		if (budget > 0) {
			gaugeDataset.data = [ budget * 0.9, budget, budget * 1.5 ];
			gaugeDataset.value = Math.min(currentValue, budget * 1.5);
			gaugeDataset.backgroundColor = [ 'rgba(0, 158, 18, 0.8)',
					'rgba(255, 216, 0, 0.8)', 'rgba(255, 0, 0, 0.8)' ];

			document.getElementById("budgetValue").value = formatAsValuta(budget);
			document.getElementById("currentValue").value = formatAsValuta(currentValue);
		} else {
			gaugeDataset.data = [ 1 * 0.9, 1, 1 * 1.5 ];
			gaugeDataset.value = 0;
			gaugeDataset.backgroundColor = [ 'rgba(220, 220, 220, 0.8)',
					'rgba(220, 220, 220, 0.8)', 'rgba(220, 220, 220, 0.8)' ];

			document.getElementById("budgetValue").value = '---';
			document.getElementById("currentValue").value = formatAsValuta(currentValue);
		}

		/** */
		window.barChart.update();
		window.pieChart.update();
		window.gaugeChart.update();
	}

	function truncateString(str, num) {
		if (str.length > num) {
			return str.slice(0, num) + "...";
		} else {
			return str;
		}
	}

	/** 
	 * Gestione eventi
	 */

	function onChangeVoceBudget() {
		var selectInput = document.getElementById("selectVdb");
		vbIdx = selectInput.options[selectInput.selectedIndex].value;
		updateCharts();
	}

	function onClickBarChart(type) {
		vbType = type;
		updateCharts();
	}

	$(document).ready(function() {
		initUI();
		loadXmlData();
	});
</script>
</head>

<body>

<table border="0">
	<tr>
		<td class="form-values" style="padding-top: 12px; font-size: 12px">
			<center>Voce di budget</center>
		</td>
		<td class="form-values" style="padding-top: 12px; font-size: 12px">
			<center>Budget</center>
		</td>
	</tr>
	<tr>
		<td>
			<center><select id="selectVdb" name="selectVdb" class="form-input" style="font-weight: bold; font-size: 13px" onchange="onChangeVoceBudget();" /></center>
		</td>
		<td class="form-values">
			<center><input type="text" style="font-weight: bold; font-size: 13px; text-align: center; color: #2a4d70;" id="budgetValue" value="" readonly></center>
		</td>
	</tr>
	<tr>
		<td rowspan="2"  style="padding: 20px 20px 20px 20px">
			<div class="chart-container" style="position: relative; height:220px; width:400px">
				<canvas id="barChart"></canvas>
			</div>
		</td>
		<td>
			<div class="chart-container" id="canvas-holder" style="position: relative; height:200px; width:300px">
		    	<canvas id="gaugeChart"></canvas>
		  	</div>
		</td>
	</tr>
	<tr>
		<td class="form-values">
			<center><input type="text" style="position: relative; bottom:55px; font-weight: bold; font-size: 13px; text-align: center; color: #2a4d70;" id="currentValue" value="" readonly></center>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<div class="chart-container" style="position: relative; height:240px; width:600px; padding: 20px 20px 20px 20px">
			    <canvas id="pieChart"></canvas>
			</div>
		</td>
	</tr>
</table>

</body>
</html>