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

<script type="text/javascript">
	var data;
	var chart;
	
	google.setOnLoadCallback(drawVisualization);
	
	/**
 	 * Carica, nella sezione di dettagli del nodo, le informazioni del nodo con l'idNodo passato (idNodo � una stringa)	
	 */
	function loadNodeInfo(idNodo) {
		var params = 'idNodo=' + idNodo;
		jsLoadMap('it.cedaf.icare.liquidazioni.control.action.StrutturaChartDisplayNodeExecutor', params, 'repaintNodeInfoHandler');		
	}
	
	/**
	 * Ridisegna l'albero.
	 * idNodoPartenza:	idNodo del nodo che deve essere messo come radice di visualizzazione ('-1' se voglio visualizzare tutto l'albero)
	 * displayMode:		intero che indica quali informazioni rappresentare in ciascuna chart (per leggerlo utilizzare la funzione 'leggiDisplayMode()')
	 * aggiornaInfo:	<opzionale> settare a <true> se oltre all'albero si vuole visualizzare il dettagli del nodo radice
	 * annoRiferimento: <opzionale> se specificato ricarica l'albero con i dati dell'anno specificato
	 */
	function loadOrganizationChart(idNodoPartenza, displayMode, aggiornaInfo, annoRiferimento) {
		var params = 'idNodo=' + idNodoPartenza + '&displayMode=' + displayMode + '&aggiornaInfo=' + (aggiornaInfo ? 'true' : 'false');
		if (annoRiferimento) {
			params += '&annoRiferimento=' + annoRiferimento;
		}
		jsLoadMap('it.cedaf.icare.liquidazioni.control.action.StrutturaChartDisplayTreeExecutor', params, 'repaintChartHandler');
	}
	
	/** Restituisce l'id del nodo visualizzato nel dettaglio */
	function getSelectedDetailNodeId() {
		return document.getElementById('idSpan_idNodo').innerHTML;
	}
	
	/** Restituisce l'id del nodo selezionato nell'albero */
	function getSelectedTreeNodeId() {
		var sel = chart.getSelection();
		if (sel.length > 0) {
			var nRow = sel[0].row;
			return data.getValue(nRow, 0);
		}
		return null;
	}
		
	/** Legge le informazioni di visualizzazione */	
	function leggiDisplayMode() {
		
		var tot = 0;
		var cnt = 0;
		var chkBox = document.getElementById('displaySel_' + cnt);
		while (chkBox) {
			if (chkBox.checked) {
				tot += parseInt(chkBox.value);
			}
			cnt++;
			chkBox = document.getElementById('displaySel_' + cnt);
		}
		return tot;
	}
	
	function drawVisualization() {
		// Create and populate the data table.
		data = new google.visualization.DataTable();
		data.addColumn('string', 'Name');
		data.addColumn('string', 'Manager');
		data.addColumn('string', 'ToolTip');
		
		//loadOrganizationChart('-1', 0, true);
		loadOrganizationChart('-1', 3, true);				
	}
	
	function selectHandler(e) {		
		var idNodo = getSelectedTreeNodeId();
		if (idNodo) {
			loadNodeInfo(idNodo);
			//showDettaglio();
		} else {
			//hideDettaglio();
		}
	}			
	
	function repaintChartHandler(map) {
		var size = map.get('nrStep');
		for (i=0; i < size; i++)
		{
			var tokens = map.get('step_' + i).split('|');
			if (tokens[0] == 'add') {
				data.addRow([{v:tokens[1], f:tokens[2]}, tokens[3], '']);				
			}
			if (tokens[0] == 'clear') {
				var nrRows = data.getNumberOfRows();
				if (nrRows > 0) data.removeRows(0, nrRows);				
			}
		}
        
        /** */
		chart = new google.visualization.OrgChart(document.getElementById('chartDiv'));
		chart.draw(data, {allowHtml: true, size: 'small', allowCollapse: true});
		google.visualization.events.addListener(chart, 'select', selectHandler);
		
		/** */
		repaintNodeInfoHandler(map);

	}			
	
	function repaintNodeInfoHandler(map) {
		refreshSpan('idSpan_idNodo', map, 'nd_idNodo');	
		refreshSpan('idSpan_titoloNodo', map, 'nd_titoloNodo');
		refreshSpan('idSpan_spesa', map, 'nd_spesa');
		refreshSpan('idSpan_incasso', map, 'nd_incasso');
		refreshSpan('idSpan_spesa_liq', map, 'nd_spesa_liq');
		refreshSpan('idSpan_incasso_liq', map, 'nd_incasso_liq');
	}
	
	function refreshSpan(spanId, map, key) {
		if (map.containsKey(key)) {
			document.getElementById(spanId).innerHTML = map.get(key);			
		} 
	}
	
	function setTreeTo(radice) {
		hideDettaglio();
		//var displayMode = leggiDisplayMode();
		var displayMode = 3;
		if (radice) {
			loadOrganizationChart('-1', displayMode, true);
		} else {
			loadOrganizationChart(getSelectedDetailNodeId(), displayMode, false);
		}
	}	

	function showDettaglio() {
		var els = getElementsByClassName('google-visualization-orgchart-nodesel');
		if (els && els.length == 1) {
			var point = getElementPoint(els[0]);
			var el = $(els[0]);
			var rec = new Rectangle(point.x, point.y, el.width(), el.height());
			point = rec.getPoint(VERTICAL_TOP | HORIZONTAL_RIGHT).moveByOffset(24,0);
			var dettNodeDiv = document.getElementById('dettNode');
			rec = new Rectangle(point.x, point.y, $(dettNodeDiv).width(), $(dettNodeDiv).height());
			rec.moveInside(getClientAreaRectangle(), 10);
			dettNodeDiv.style.display = 'block';
			dettNodeDiv.style.top = rec.y;
			dettNodeDiv.style.left = rec.x;
		}
	}	

	function hideDettaglio() {
		var dettNodeDiv = document.getElementById('dettNode');
		dettNodeDiv.style.display = 'none';
	}		

	var getElementsByClassName = function (className, tag, elm){
		if (document.getElementsByClassName) {
			getElementsByClassName = function (className, tag, elm) {
				elm = elm || document;
				var elements = elm.getElementsByClassName(className),
					nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
					returnElements = [],
					current;
				for(var i=0, il=elements.length; i<il; i+=1){
					current = elements[i];
					if(!nodeName || nodeName.test(current.nodeName)) {
						returnElements.push(current);
					}
				}
				return returnElements;
			};
		}
		else if (document.evaluate) {
			getElementsByClassName = function (className, tag, elm) {
				tag = tag || "*";
				elm = elm || document;
				var classes = className.split(" "),
					classesToCheck = "",
					xhtmlNamespace = "http://www.w3.org/1999/xhtml",
					namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
					returnElements = [],
					elements,
					node;
				for(var j=0, jl=classes.length; j<jl; j+=1){
					classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
				}
				try	{
					elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
				}
				catch (e) {
					elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
				}
				while ((node = elements.iterateNext())) {
					returnElements.push(node);
				}
				return returnElements;
			};
		}
		else {
			getElementsByClassName = function (className, tag, elm) {
				tag = tag || "*";
				elm = elm || document;
				var classes = className.split(" "),
					classesToCheck = [],
					elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
					current,
					returnElements = [],
					match;
				for(var k=0, kl=classes.length; k<kl; k+=1){
					classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
				}
				for(var l=0, ll=elements.length; l<ll; l+=1){
					current = elements[l];
					match = false;
					for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
						match = classesToCheck[m].test(current.className);
						if (!match) {
							break;
						}
					}
					if (match) {
						returnElements.push(current);
					}
				}
				return returnElements;
			};
		}
		return getElementsByClassName(className, tag, elm);
	};
</script>


<div id="dettNode" style="margin: 0px; position: absolute; top: 0; left:0; z-index: 100000; background-color: red; display: none;">
<table border="0" cellspacing="3" cellpadding="0">
	<tr>
		<td>
			<shell:fieldset title="Informazioni nodo selezionato">
			<table border="0" cellspacing="3" cellpadding="0" >
				<tr style="display:none;">
					<td class="form-label">
						<shell:label prop="idNodoBudget" />
					</td>
					<td class="form-values">
						<span id="idSpan_idNodo">	
					</td>
		 		</tr>
				<tr>
					<td class="form-label">
						<shell:label prop="nodoBudget" />
					</td>
					<td class="form-values">
						<span id="idSpan_titoloNodo">	
					</td>
		 		</tr>
		 		<tr>
					<td class="form-label">
						<shell:label prop="spesa" />
					</td>
					<td class="form-values">
						<span id="idSpan_spesa">	
					</td>
		 		</tr>
		 		<tr>
					<td class="form-label">
						<shell:label prop="incasso" />
					</td>
					<td class="form-values">
						<span id="idSpan_incasso">	
					</td>
		 		</tr>
		 		<tr>
					<td class="form-label">
						<shell:label prop="spesaLiq" />
					</td>
					<td class="form-values">
						<span id="idSpan_spesa_liq">	
					</td>
		 		</tr>
		 		<tr>
					<td class="form-label">
						<shell:label prop="incassoLiq" />
					</td>
					<td class="form-values">
						<span id="idSpan_incasso_liq">	
					</td>
		 		</tr>
		 	</table>
		 	</shell:fieldset>
		</td>

	</tr>
</table>
</div>

<div id="chartDiv" style="border-width:2px; border-color:red; border-style:none; width: 0px; height: 0px; overflow: auto;"></div>
<script type="text/javascript">
	var charDiv = document.getElementById('chartDiv');
	var pos = getElementPoint(charDiv);
	var rec = getDocumentRectangle();
	var width = rec.w - 30;
	var height = rec.h - pos.y - 40;
	charDiv.style.height = height+'px';
	charDiv.style.width = width+'px';
</script>