// Uitvoeren wanneer document gereed is.
$(document).ready(function() {
	// Als de DIV met functies niet aanwezig is, doe dan niets
	var divs = $('.purca-functies');
	if ( divs.length == 0 )
		return;
	
	// Voeg een klasse aan de pagina toe, zodat CSS-stijlen alleen worden
	// toegepast wanneer het om de functiepagina gaat.
	$('body').addClass('functie-pagina');
	
	// Voer OnHashChange uit wanneer de hash in de adresbalk verandert
	$(window).hashchange(OnHashChange);
	
	// Maak in een tabel een div-element ernaast waarin de uitgebreide tekst komt
	$('.purca-functies').wrap('<table id="purca-functies-tabel"><tr>'
			+ '<td id="purca-functies-container"></td></tr></table>');
	$('#purca-functies-container').after('<td id="purca-functiedetails"></td>');

	// Maak de detail-div even hoog als de functielijst-div
	var height = $('.purca-functies').height();
	//$('#purca-functiedetails').css('height', height + 'px');
	
	// Koppel klik-event
	$('.purca-functies li').click(OnFunctieLinkClick);
	
	// Verzamel een lijst van paginanamen met functies
	pagina_namen = [];
	$('.purca-functies a').each(function() {
		pagina_namen.push($(this).attr('href'));
	});
	
	// Als er een hash in de adresbalk staat: toon de betreffende functie
	toonFunctie();
	
	// Simuleer hover-klasse voor IE
	$('.purca-functies li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	});
});

// Wordt aangeroepen wanneer er op een link wordt geklikt
function OnFunctieLinkClick(event) {
	event.preventDefault();
	event.stopPropagation();
	
	// Zoek het a-element op waarin de te tonen pagina staat
	var li = $(event.target).closest('li');
	var a = $(li).find('a');
	
	// Verander de hash in de adresbalk; toonFunctie handelt via OnHashChange 
	// het tonen van de details af, zodat de browsergeschiedenis wordt bijgewerkt 
	location.hash = a.attr('href');
}

// Zorgt ervoor dat het detailvak met een animatie de aandacht trekt.
function markeerDetails() {
    $('#purca-functiedetails').effect('highlight', {
    	color: '#9FAE9F'
    }, 700);
}

// Zorgt ervoor dat de in de URL-hash genoemde functie getoond wordt. 
// Als er geen hash is, wordt de eerste functie in de lijst getoond.
function toonFunctie() {
	var pagina_naam = location.hash;
	if ( !pagina_naam ) {
		// Zoek de eerste link als er geen hash is
		pagina_naam = $('.purca-functies a:first').attr('href');
	}
	
	// Verwijder de # aan het begin
	if ( pagina_naam.charAt(0) == '#' )
		pagina_naam = pagina_naam.slice(1);
	
	// Laad de betreffende pagina via AJAX
	$.get(pagina_naam, {}, function(data, textStatus, jqXHR) {
		// Plaats de pagina in het div-element
		$('#purca-functiedetails').html(data);
		
		// Scroll de pagina naar boven als de top van het detailvak buiten beeld is
		// Markeer daarna het detailvak zodat het de aandacht trekt.
    	var doc_scroll_top = $(document).scrollTop();
    	if ( $('#purca-functiedetails').offset().top < doc_scroll_top ) {
        	$('body').animate({
        		scrollTop: $('#purca-functiedetails').offset().top
        	}, {
        		duration: 300,
        		complete: markeerDetails
        	});
    	} else {
    		markeerDetails();
    	}
		
		// Verwijder alle actief-klasses
		$('.purca-functies li').removeClass('actief');
		
		// Zoek het li-element dat de link link met deze paginanaam bevat
		// en markeer het
		$('.purca-functies a').each(function() {
			var href = $(this).attr('href');
			if ( href.indexOf(pagina_naam) >= 0 ) {
				$(this).closest('li').addClass('actief');
				return false;
			}
		});
		
		// Zoek alle links in zojuist geplaatste tekst: als een link verwijst
		// naar een functiepagina: vervang dan het klikgedrag zodat die
		// pagina netjes getoond wordt
		$('#purca-functiedetails a').each(function() {
			var href = $(this).attr('href');
			if ( $.inArray(href, pagina_namen) != -1 ) {
				$(this).click(OnLinkClick);
			}
		});
	});
}

// Wordt aangeroepen wanneer de hash verandert
function OnHashChange() {
	toonFunctie();
}

// Wordt aangeroepen wanneer in de uitgebreide tekst wordt geklikt op een link 
// die verwijst naar een andere functie.
function OnLinkClick(event) {
	event.preventDefault();
	event.stopPropagation();
	
	var href = $(event.target).attr('href');
	
	// Pak alleen de laatste component van de URL (het stuk na de /), om 
	// het ook in IE te laten werken
	var comps = href.split('/');
	location.hash = comps[comps.length - 1];
}