document.write('<link rel="stylesheet" href="./styles/kh_stamboom_js.css" type="text/css" media="screen" charset="utf-8" />');

//window.onload = startStamboom;
var marginNormal = 10;
var marginhuwelijk = 3;
var marginBranch = 25;

var familyTree = [];
var kortVersion = [];
var longVersion = [];
var container;
var XMLData;

function startStamboom () {
	container = document.getElementById('stamboom');
	defineLines();
//	focusOn('f6'); // koningin Beatrix
	document.getElementById('sluitvenster').onclick = sluitLegenda;
	document.getElementById('overzicht').onclick = sluitFocus;
	document.getElementById('legendaLink').onclick = openLegenda;
	document.getElementById('statischestamboom').onclick = openFocus;
	sendRequest('stamboom.xml',setData); // ZET HIER CORRECT PAD NAAR XML
}

function openLegenda() {
	document.getElementById('legenda').style.visibility = 'visible';
	this.className = 'open';
	this.onclick = sluitLegenda;
	return false;
}

function sluitLegenda() {
	document.getElementById('legenda').style.visibility = 'hidden';
	var link = document.getElementById('legendaLink');
	link.className = '';
	link.onclick = openLegenda;
	return false;
}

function sluitFocus() {
	document.getElementById('statisch').className = '';
	var focus = 'f' + focusPersoon;
	focusOn(focus);
	return false;
}

function focusOn(id) {
	var el = document.getElementById(id);
	if (!el) return;
	el.focus();
	el.blur();
	window.scrollBy(0,300);
}

function setData (req) {
	XMLData = req.responseXML;
	var personen = XMLData.getElementsByTagName('persoon');
	for (var i=0;i<personen.length;i++) {
		var currentPerson = personen[i].cloneNode(true);
		var personObject = {};
		var vader = getpersoonID(currentPerson,'vader');
		var moeder = getpersoonID(currentPerson,'moeder');
		if (vader && moeder)
			personObject.parents = [vader,moeder];
		personObject.name = currentPerson.getElementsByTagName('kort')[0].firstChild.nodeValue;
		var echtgenotesNumber = currentPerson.getElementsByTagName('huwelijk').length;
		personObject.echtgenotes = [];
		for (var j=0;j<echtgenotesNumber;j++) {
			personObject.echtgenotes[j] = getpersoonID(currentPerson,'echtgenote',j);
		}
		var kinderenNumber = currentPerson.getElementsByTagName('kind').length;
		var persoonid = personen[i].getAttribute('id')*1;
		personObject.kinderen = [];
		for (var j=0;j<kinderenNumber;j++) {
			personObject.kinderen[j] = getpersoonID(currentPerson,'kind',j);
		}
		if (familyTree[persoonid]) {
			alert(persoonid + ' dubbel');
		}
		personObject.XMLID = i;
		personObject.idref = persoonid;
		familyTree[persoonid] = personObject;
	}
	document.getElementById('statisch').className = 'statischVerborgen';
	createFocusView(6);
}

function emptyView() {
	while (container.childNodes[0])
		container.removeChild(container.childNodes[0]);
	huwelijkList.length = 0;
}

function newView(e) {
	var evt = e || window.event;
	var tgt = evt.target || evt.srcElement;
	while (tgt.nodeName != 'DIV')
		tgt = tgt.parentNode;
	var id = tgt.idref;
	createFocusView(id);
}

/* GATHER DATA FOR FOCUS VIEW */

var focusPersoon = 0;

function createFocusView(id) {
	emptyView();
	focusPersoon = id;
	var persoon = familyTree[id];
	var dataBlock = {};
	dataBlock.focuspersoon = id;
	dataBlock.presentation = 'centre';
	dataBlock.generations = [];

	/* GENERATION OF FOCUS persoon */

	var focusGen = [];
	var echtgenotesNumber = persoon.echtgenotes.length;
	var echtgenotesLeft = Math.round((echtgenotesNumber/2)-.5);
	for (var i=0;i<echtgenotesLeft;i++) {
		focusGen.push(getLongVersion(persoon.echtgenotes[i]));
		focusGen.push(getNewhuwelijk(id,persoon.echtgenotes[i]));
	}
	var focuspersoon = getLongVersion(id);
	focuspersoon.className += ' focusPersoon';
	focusGen.push(focuspersoon);
	for (var i=echtgenotesLeft;i<echtgenotesNumber;i++) {
		focusGen.push(getNewhuwelijk(id,persoon.echtgenotes[i]));
		focusGen.push(getLongVersion(persoon.echtgenotes[i]));
	}

	var midPoint = floatingMid = Math.round(container.offsetWidth/2);
	var midArray = Math.round((focusGen.length/2)-.5);
	container.appendChild(focusGen[midArray]);
	focusGen[midArray].midpoint = midPoint;
	for (var i=midArray-1;i>-1;i--) {
		var current = focusGen[i];
		container.appendChild(current);
		floatingMid -= getDistance(focusGen[i+1],current) + marginhuwelijk;
		current.midpoint = floatingMid;
	}
	floatingMid = midPoint;
	for (var i=midArray+1;i<focusGen.length;i++) {
		var current = focusGen[i];
		container.appendChild(current);
		floatingMid += getDistance(focusGen[i-1],current) + marginhuwelijk;
		current.midpoint = floatingMid;
	}

	var verschil = midPoint - focuspersoon.midpoint;
	for (var i=0;i<focusGen.length;i++) {
		focusGen[i].midpoint += verschil;
	}

	dataBlock.generations[3] = focusGen;

	/* GENERATION OF FOCUS persoon PARENTS */

	var parent = getImportantParent(id);
	if (parent) {
		var parentGen = [getShortVersion(parent),getNewhuwelijk(familyTree[id].parents[0],familyTree[id].parents[1])];
		parentGen[0].midpoint = parentGen[1].midpoint = focuspersoon.midpoint;
		var grandparent = getImportantParent(parent);
		if (grandparent) {
			var grandParentGen = [getShortVersion(grandparent),getNewhuwelijk(familyTree[parent].parents[0],familyTree[parent].parents[1])];
			grandParentGen[0].midpoint = grandParentGen[1].midpoint = focuspersoon.midpoint;
		}
	}
	dataBlock.generations[2] = parentGen || [];
	dataBlock.generations[1] = grandParentGen || [];

	/* GENERATION OF FOCUS persoon kinderen */

	var kinderen = persoon.kinderen;
	var kindGen = [];
	if (kinderen.length) {
		for (var i=0;i<kinderen.length;i++) {
			var kindHTML = getLongVersion(kinderen[i]);
			if (kinderen.length > 4)
				kindHTML.className  += ' narrow';
			kindGen.push(kindHTML);
			container.appendChild(kindHTML);
		}
		var offset = 0;
		var previousParents;
		for (var i=0;i<kinderen.length;i++) {
			var kindXML = familyTree[kinderen[i]];
			var currentParents = kindXML.parents;
			var margin = marginNormal;
			if (previousParents && ((currentParents[0] != previousParents[0]) || (currentParents[1] != previousParents[1])))
				margin = marginBranch;
			if (i) offset += margin;
			kindGen[i].midpoint = offset;
			if (kindGen[i+1])
				offset += getDistance(kindGen[i],kindGen[i+1]);
			previousParents = currentParents;
		}
		var kindWidth = kindGen[kindGen.length-1].midpoint - kindGen[0].midpoint;
		var blockOffset = Math.round(container.offsetWidth/2 - kindWidth/2);
		for (var i=0;i<kindGen.length;i++) {
			kindGen[i].midpoint += blockOffset;
		}
		dataBlock.generations[4] = kindGen;
	}


	/* CREATE TREE */

	generateView(dataBlock);

}

function getImportantParent(id) {
	var parents = familyTree[id].parents;
	if (!parents) return;
	if (familyTree[parents[0]].parents)
		return parents[0];
	else if (familyTree[parents[1]].parents)
		return parents[1];
	else // speciaal voor Willem I
		return parents[0];
}

function getDistance (p1,p2) {
	return Math.abs(Math.round(p1.offsetWidth/2 + p2.offsetWidth/2));
}

function getEmptyElement() {
	var el = document.createElement('div');
	el.className = 'empty';
	el.name = 'empty';
	return el;
}

/* GENERATE NEW VIEW */

function generateView(dataBlock) {
	for (var i=1;i<dataBlock.generations.length;i++) {
		var generation = dataBlock.generations[i];
		for (var j=0;j<generation.length;j++) {
			var persoon = generation[j];
			if (persoon.parentNode != container)
				container.appendChild(persoon);
			persoon.setMidPoint = setMidPoint;
			persoon.setMidPoint();
			persoon.className += ' generation' + i;
		}
	}

	var testElement = dataBlock.generations[dataBlock.generations.length-1][0];
	var stretch = testElement.offsetTop + testElement.offsetHeight;
	container.style.height = stretch + 50 + 'px';

	for (var i=0;i<huwelijkList.length;i++) {
		var coors = [];
		coors.push(huwelijkList[i].midpoint);
		var kinderen = huwelijkList[i].issue;
		if (!kinderen.length) continue;
		for (var j=0;j<kinderen.length;j++) {
			var kind = document.getElementById(kinderen[j]);
			if (kind) {
				coors.push(kind.midpoint);
			}
		}

		var min = max = coors[0];
		for (var j=1;j<coors.length;j++) {
			if (coors[j] < min)
				min = coors[j];
			if (coors[j] > max)
				max = coors[j];
		}
		var lines = lineDiv.cloneNode(true);
		lines.style.left = min + 'px';
		lines.style.width = (max-min) + 'px';
		var measure = document.getElementById('p'+huwelijkList[i].parent1) || document.getElementById('p'+huwelijkList[i].parent2);
		var marBottom = huwelijkList[i].offsetTop + huwelijkList[i].offsetHeight;
		var barCoor =  measure.offsetTop + measure.offsetHeight + 15;
		lines.style.top = barCoor + 'px';
		container.appendChild(lines);

		var marToBar = lineDiv.cloneNode(true);
		marToBar.style.top = marBottom +'px';
		marToBar.style.height = barCoor - marBottom + 1 + 'px';
		marToBar.style.left = huwelijkList[i].midpoint + 'px';
		container.appendChild(marToBar);
		for (var j=0;j<kinderen.length;j++) {
			var kind = document.getElementById(kinderen[j]);
			if (!kind) continue;
			var barTokind = lineDiv.cloneNode(true);
			barTokind.style.top = barCoor + 'px';
			barTokind.style.left = kind.midpoint + 'px';
			var height = kind.offsetTop - barCoor;
			if (height < 1)
				height = 1;
			barTokind.style.height = height + 'px';
			container.appendChild(barTokind);
		}
	}

	var lastGen = dataBlock.generations[dataBlock.generations.length-1];
	for (var i=0;i<lastGen.length;i++) {
		var personID = familyTree[lastGen[i].idref];
		if (!personID) continue;
		var test = XMLData.getElementsByTagName('persoon')[personID.XMLID];
		if (test.getElementsByTagName('kind').length) {
			var barContinue = lineDiv.cloneNode(true);
			barContinue.className += ' verder';
			barContinue.style.top = lastGen[i].offsetTop + lastGen[i].offsetHeight + 'px';
			barContinue.style.left = lastGen[i].midpoint + 'px';
			container.appendChild(barContinue);
		}
	}
}

var lineDiv = document.createElement('div');
lineDiv.className = 'lineContainer';

function calculateMidPoint(obj) {
	var objWidth = obj.offsetWidth;
	return parseInt(objWidth/2);
}

function setMidPoint() {
	if (!this.midpoint) return;
	this.style.left = this.midpoint - (Math.round(this.offsetWidth/2)) + 'px';
}

/* huwelijk */

var huwelijkContainer = document.createElement('div');
huwelijkContainer.className = 'huwelijk';
// huwelijkContainer.innerHTML = 'X';
var huwelijkList = [];

function getNewhuwelijk (persoon1,persoon2) {
	var newhuwelijk = huwelijkContainer.cloneNode(true);
	newhuwelijk.huwelijk = true;
	newhuwelijk.name = 'huwelijk';
	if (persoon2 == 'empty') {
		newhuwelijk.className += ' empty';
		return newhuwelijk;
	}
	newhuwelijk.parent1 = persoon1;
	newhuwelijk.parent2 = persoon2;
	var kinderen1 = familyTree[persoon1].kinderen;
	var kinderen2 = familyTree[persoon2].kinderen;
	newhuwelijk.issue = [];
	for (var i=0;i<kinderen1.length;i++) {
		for (var j=0;j<kinderen2.length;j++) {
			if (kinderen1[i] == kinderen2[j])
				newhuwelijk.issue.push('p' + kinderen1[i]);
		}
	}
	huwelijkList.push(newhuwelijk);
	return newhuwelijk;
}

/* CREATE OR GET CONTENT BLOCKS */

function getShortVersion(id) {
	if (!kortVersion[id]) {
		var data = XMLData.getElementsByTagName('persoon')[familyTree[id].XMLID];
		var container = document.createElement('div');
		container.idref = container.persTitle = id;
		container.id = 'p' + id;
		container.name = getText(data,'full') || getText(data,'kort');
		container.persTitle = getText(data,'titel');
		var header = document.createElement('h3');
		header.innerHTML = container.persTitle + '<br>' + container.name;
		container.appendChild(header);
		container.onclick = newView;
		kortVersion[id] = container;
//		container.appendChild(document.createTextNode('id is ' + id));
	}
	kortVersion[id].className = 'short';
	return kortVersion[id];
}

function getLongVersion(id) {
	if (!longVersion[id]) {
		var data = XMLData.getElementsByTagName('persoon')[familyTree[id].XMLID];
		var container = document.createElement('div');
		container.id = 'p' + id;
		container.idref = id;
		var portret = data.getElementsByTagName('portret')[0];
		var portretContainer = document.createElement('p');
		portretContainer.className = 'portretContainer';
		if (portret) {
			var imgSrc = portret.getAttribute('src');
			var plaatje = document.createElement('img');
			plaatje.src = imgSrc;
			plaatje.onerror = function () {
				this.parentNode.className += ' leeg';
				this.parentNode.removeChild(this);
			}
			portretContainer.appendChild(plaatje);
		}
		else
			portretContainer.className += ' leeg';
		container.appendChild(portretContainer);
		container.onclick = newView;
		var header = document.createElement('h3');
		container.name = getText(data,'full') || getText(data,'kort');
		container.persTitle = getText(data,'titel') || '';
		header.appendChild(document.createTextNode(container.persTitle + ' ' + container.name));
		container.appendChild(header);
		var life = document.createElement('p');
		life.className = 'life';
		var lifeText = getText(data,'geboortejaar') + '-' + (getText(data,'sterfjaar') || '');
		life.appendChild(document.createTextNode(lifeText));
		container.appendChild(life);
		var extra = data.getElementsByTagName('extratitel')[0];
		if (extra) {
			var p = document.createElement('p');
			p.className = 'life';
			p.innerHTML = extra.firstChild.nodeValue;
			container.appendChild(p);
		}

		var ambt = data.getElementsByTagName('ambt')[0];
		if (ambt) {
			var tekst = ambt.getElementsByTagName('titel')[0].firstChild.nodeValue;
			if (tekst.indexOf('Koning') != -1 || tekst.indexOf('Koningin') != -1) {
				var regering = document.createElement('p');
				regering.className = 'regering';
				var regeringBegin = getText(ambt,'begin');
				var regeringEind = getText(ambt,'eind') || '';
				regering.innerHTML = regeringBegin + '-' + regeringEind;
				container.appendChild(regering);
			}
		}

		longVersion[id] = container;
		var CV = data.getElementsByTagName('cv')[0];
		if (CV) {
			var CVLink = document.createElement('a');
			CVLink.className = 'CV';
			CVLink.href = CV.getAttribute('href');
			CVLink.innerHTML = 'CV';
			container.appendChild(CVLink);
		}
	}
	longVersion[id].className = 'long';
	return longVersion[id];
}

function setClasses(container,firstValue) {
	container.className = firstValue;
/*	if (container.persTitle && container.persTitle.indexOf('King') != -1|| container.persTitle.indexOf('Queen') != -1)
		container.className += ' king'; */
}


function getpersoonID(data,name,index) {
	var nodes = data.getElementsByTagName(name);
	if (!nodes.length) return;
	if (!index) index = 0;
	return nodes[index].getAttribute('idref');
}

function getText(data,name) {
	if (!data) return;
	var nodes = data.getElementsByTagName(name);
	if (!nodes.length) return false;
	return nodes[0].firstChild.nodeValue;
}


function openFocus(e) {
	var evt = e || window.event;
	var tgt = evt.target || evt.srcElement;
	if (tgt.nodeName != 'A') return false;
	if (tgt.id) {
		if (tgt.id.length > 3) return false;
		document.getElementById('statisch').className = 'statischVerborgen';
		window.scroll(0,0);
		var focus = tgt.id.substring(1);
		setTimeout(function () {createFocusView(focus)},20);
	}
	return false;
}

// timeout zodat eerst statische stamboom verdwijnt, en dynamische dan pas wordt opgebouwd

/* LIJNEN STATISCHE STAMBOOM */


var standaardLijnHoogte = 20;

var coordinatenLijst = [];

function defineLines() {
	return;
	drawLines({par: "1",children: "2,3"});
	drawLines({par: "2",children: "4,5"});
	drawLines({par: "3",children: "6,7"});
	drawLines({par: "5",children: "8,9"});
	drawLines({par: "7",children: "10,11"});
	drawLines({par: "8",children: "12"});
	drawLines({par: "9",children: "13",lineOverrule:"-2"});
	drawLines({par: "11",children: "13",lineOverrule:"-2"});
	drawLines({par: "13",children: "14",lineOverrule: "5"});
	drawLines({par: "14",children: "15"});
	drawLines({par: "15",children: "16"});
	drawLines({par: "16",children: "17"});
	drawLines({par: "17",children: "18"});
	drawLines({par: "19",children: "23,24,25,26"});
	drawLines({par: "22",children: "29,32,33,34,35"});
	drawLines({par: "28",children: "36,37,38",lineOverrule:"15"});
	drawLines({par: "30",children: "39"});
	drawLines({par: "40",children: "42"});
	drawLines({par: "43",children: "47,48,49,50"});
	drawLines({par: "49",children: "51,52,53,54"});
	drawLines({par: "46",children: "57,58,61"});
	drawLines({par: "56",children: "64,65,66"});
	// showCoordinates();
}

function showCoordinates() {
	var temp = window.open();
	temp.document.open();
	for (var i=0;i<coordinatenLijst.length;i++) {
		temp.document.write('<p>div#statischestamboom div#lijn' + i + ' {top: ' + coordinatenLijst[i][0] + 'px;' + 'left: ' + coordinatenLijst[i][1] + 'px;' + 'width: ' + coordinatenLijst[i][2] + 'px;' + 'height: ' + coordinatenLijst[i][3] + 'px;}</p>');
	}
	temp.document.close();
}
	// top,left,width,height

function getMidPoint(obj) {
	obj.midpoint = Math.round(obj.offsetWidth/2) + obj.offsetLeft;
	return obj.midpoint;
}

function drawLines(dataObj) {
	var container = document.getElementById('statischestamboom');
	var parent = document.getElementById('per'+dataObj.par);
	var lineFromChildren = dataObj.lineOverrule || standaardLijnHoogte;
	var kinderen = [];
	var kind = dataObj.children.split(',');
	for (var i=0;i<kind.length;i++) {
		kinderen.push(document.getElementById('per'+kind[i]));
	}
	var coors = [];
	coors.push(getMidPoint(parent));
	for (var j=0;j<kinderen.length;j++) {
		coors.push(getMidPoint(kinderen[j]));
	}

	var min = max = coors[0];
	for (var j=0;j<coors.length;j++) {
		if (coors[j] < min)
			min = coors[j];
		if (coors[j] > max)
			max = coors[j];
	}

	var lines = lineDiv.cloneNode(true);
	lines.style.left = min + 'px';
	lines.style.width = (max-min+1) + 'px';

	var barCoor =  kinderen[0].offsetTop - lineFromChildren;

	lines.style.top = barCoor + 'px';
	container.appendChild(lines);

	coordinatenLijst.push([barCoor,min,(max-min+1),1]);

	var marToBar = lineDiv.cloneNode(true);
	var top = parent.offsetHeight + parent.offsetTop;
	marToBar.style.top = top +'px';
	marToBar.style.height = barCoor - top + 'px';
	marToBar.style.left = coors[0] + 'px';

	coordinatenLijst.push([top,coors[0],1,(barCoor-top)]);

	container.appendChild(marToBar);
	for (var j=0;j<kinderen.length;j++) {
		var kind = kinderen[j];
		var barTokind = lineDiv.cloneNode(true);
		barTokind.style.top = barCoor + 'px';
		barTokind.style.left = kind.midpoint + 'px';
		var height = kind.offsetTop - barCoor;
		if (height < 1)
			height = 1;
		barTokind.style.height = height + 'px';

		coordinatenLijst.push([barCoor,kind.midpoint,1,height]);

		container.appendChild(barTokind);
	}
}


/* XMLHTTP */

function sendRequest(url,callback,postData) {
	var req = createXMLHTTPObject();
	if (!req) return;
	var method = (postData) ? "POST" : "GET";
	req.open(method,url,true);
	req.setRequestHeader('User-Agent','XMLHTTP/1.0');
	if (postData)
		req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	req.onreadystatechange = function () {
		if (req.readyState != 4) return;
		callback(req);
	}
	if (req.readyState == 4) return;
	req.send(postData);
}

var XMLHttpFactories = [
	function () {return new XMLHttpRequest()},
	function () {return new ActiveXObject("Msxml2.XMLHTTP")},
	function () {return new ActiveXObject("Msxml3.XMLHTTP")},
	function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
	var xmlhttp = false;
	for (var i=0;i<XMLHttpFactories.length;i++) {
		try {
			xmlhttp = XMLHttpFactories[i]();
		}
		catch (e) {
			continue;
		}
		break;
	}
	return xmlhttp;
}