var listXmlHttp;

function loadList(listname, wrapper) {

	listXmlHttp = createRequestObject();
	listXmlHttp.open("get", "/v_bodc_vocab/GetVocabRelations.aspx?list=" + listname + "&term=all");
	listXmlHttp.onreadystatechange = function() { handleLoadListResponse(wrapper) };
	listXmlHttp.send(null);
}

function handleLoadListResponse(wrapper) {

    if(listXmlHttp.readyState == 4 && listXmlHttp.status == 200){

		var listHtml = createListHtml(listXmlHttp.responseText, 'narrow');
		wrapper.innerHTML = listHtml;
	}
}

function onClickTerm(element, button, list, entrykey, relationtype) {

	var existing = findExisting(element, relationtype);

	if (existing != null && existing.innerHTML != "") {
		//Exists; remove ("close")
		existing.innerHTML = "";
		existing.className = "browse_data_multibox_hide";
		button.className = "btn-plus";
	}
	else {
		//Get relations using Ajax ("open")
		listXmlHttp = createRequestObject();
		listXmlHttp.open("get", "/v_bodc_vocab/GetVocabRelations.aspx?list=" + list + "&term=" + entrykey + "&relation=" + relationtype);
		listXmlHttp.onreadystatechange = function() { handleOnClickTermResponse(existing, button, relationtype) };
		listXmlHttp.send(null);
	}
}

function handleOnClickTermResponse(element, button, relationtype) {

    if(listXmlHttp.readyState == 4 && listXmlHttp.status == 200){

		if (isIE()) {
			//Hack nodig voor IE, want daar werkt setAttribute niet voor "name" (en "class").
			//Maak in plaats daarvan een nieuw element en vervang de oude door de nieuwe.
			//Zie http://webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html
			var newelement = document.createElement("<div name='" + relationtype + "' />");
			element.parentNode.replaceChild(newelement, element);
			element = newelement;
		}
		else {
			//Other browsers
			element.setAttribute("name", relationtype);
			element.setAttribute("class", "browse_data_multibox_show");
		}
		//Gebruik property className ipv setAttribute("class", ...). Zie http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html en http://webbugtrack.blogspot.com/2008/03/bug-240-setattribute-name-is-half.html
		element.className = "browse_data_multibox_show";
		button.className = "btn-min";

		var listHtml = createListHtml(listXmlHttp.responseText, relationtype);
		element.innerHTML = listHtml;
	}
}

function onClickDetails(element) {

	var details = findExisting(element, "details");

	if (details.className == "browse_details_multibox_hide") {
		details.className = "browse_details_multibox_show";
	}
	else {
		details.className = "browse_details_multibox_hide";
	}
}

// Zoek de DIV in de children van het gegeven element met name == relationtype
function findExisting(element, relationtype) {

	var existing = null;

	for (var i = 0; i < element.childNodes.length; i++) {
		if (element.childNodes[i].nodeName == "DIV" && element.childNodes[i].getAttribute("name") != null) {  // NB: hasAttribute("name") werkt NIET in IE! Daarom dus getAttribute("name") != null
			var attrib = element.childNodes[i].getAttribute("name");
			if (attrib == relationtype) {
				existing = element.childNodes[i];
			}
		}
	}

	return existing;
}

function createListHtml(jsonText, relationtype) {

		var listHtml = "";
		var list = eval("(" + jsonText + ")");

		if (list.values !== undefined) {
			listHtml += "<table class='browse_table' border=0 cellpadding=0 cellspacing=0><tr class='browse_subject'> ";

			if (list.values.length == 0) {
				listHtml += "<td class=browse_desc0-0 colspan=3>No underlying terms found.";
			}
			else {
				listHtml += "<td class=browse_desc0-0>" + list.name + "</td><td class=browse_desc0-1>Entrykey</td><td class=browse_desc0-2>Entryterm";
			}
			listHtml += "</td></tr>";

			for (var i = 0; i < list.values.length; i++) {

				var linenum = i % 2;

				if (relationtype == "narrow" && list.narrow !== undefined) {
					listHtml += createHtmlRow(list.name, list.values[i], relationtype, linenum, true);
				}
				else
				{
					listHtml += createHtmlRow(list.name, list.values[i], relationtype, linenum, false);
				}

				if (list.broad !== undefined) {
					//TODO: show parent
//					listHtml += " <a href=\"#\" onclick=\"onClickTerm(this.parentNode, '" + list.name + "', '" + list.values[i].entrykey + "', 'broad');\">Show parent</a> ";
				}
			}

			listHtml += "</table>";
		}

		return listHtml;
}

function createHtmlRow(listname, values, relationtype, linenum, showExpand) {

	rowHtml = "<tr class='browse_line" + linenum + "'>";
		rowHtml += "<td class='browse_data'>";
		if (showExpand) {
			rowHtml += "<div class='plusbuttons'><div class='btn-plus' onclick=\"onClickTerm(this.parentNode.parentNode.parentNode.nextSibling.childNodes[1], this, '" + listname + "', '" + values.entrykey + "', 'narrow');\"></div></div>"
		}
		rowHtml += "</td>";
		rowHtml += "<td class='browse_data'>" + values.entrykey + "</td>";
		//Gebruik javascript:void(0) voor "link die niets doet", zie http://www.quackit.com/javascript/tutorial/javascript_void_0.cfm
		rowHtml += "<td class='browse_data'>" + values.entryterm + " <a class='info' href='javascript:void(0);' onclick=\"onClickDetails(this.parentNode.parentNode.nextSibling.childNodes[1]);\"><img src='/grfx/bodc-vocab/btn-info.gif' alt='' border='0' /><p>Click here for details</p></a></td>";
	rowHtml += "</tr>";

	rowHtml += "<tr class='browse_line" + linenum + "'>";
		rowHtml += "<td class='browse_data'></td>";
		rowHtml += "<td colspan=5 class='browse_data'>";

			rowHtml += "<div name='details' class='browse_details_multibox_hide'>";
				rowHtml += "<table class='browse_details_table' border=0 cellpadding=0 cellspacing=0>";
					rowHtml += "<tr><td class='browse_details_title' colspan='2'>Details</td></tr>";
					rowHtml += "<tr><td class='browse_details_desc'>List key</td><td class='browse_details_data'>" + listname + "</td></tr>";
					rowHtml += "<tr><td class='browse_details_desc'>Entrytermabbr</td><td class='browse_details_data'>" + values.entrytermabbr + "</td></tr>";
					rowHtml += "<tr><td class='browse_details_desc'>Entrytermdef</td><td class='browse_details_data'>" + values.entrytermdef + "</td></tr>";
					rowHtml += "<tr><td class='browse_details_desc'>Entrytermlastmod</td><td class='browse_details_data'>" + values.entrytermlastmod + "</td></tr>";
				rowHtml += "</table>";
			rowHtml += "</div>";

			if (showExpand) {
				rowHtml += "<div name='" + relationtype + "' class='browse_data_multibox_hide'></div>";
			}
		rowHtml += "</td>";
	rowHtml += "</tr>";

	return rowHtml;
}

function createRequestObject() {
    var requestObject;
    if (isIE()) {
        requestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        requestObject = new XMLHttpRequest();
    }
    return requestObject;
}

function isIE() {
	if (navigator.userAgent.indexOf('MSIE') > 0) {
		return true;
	}
	else {
		return false;
	}
}