// When document has loaded, initialize pagination and form 

$(document).ready(function(){
	$('select[multiple="multiple"]').each(function() {
		// get options from selectbox
		var strName = $(this).attr('name');
		var options = $(this).attr('size');
		var width   = $(this).width() + 40;
		if(width > 200) width = 200;
		strName = strName.replace("[]", "");
		// add div with a table after selectbox
		if(options)
			 $(this).after('<div class="selector" style="height:'+ options * 20 +'px;width:'+ width +'px;overflow:auto;border:1px solid #4A1C70;margin-right:10px;" id="check_'+ strName +'"><table cellpadding=0 cellspacing=0></table></div>');
		else $(this).after('<div class="selector" style="width:'+ width +'px;" id="check_'+ strName +'"><table cellpadding=0 cellspacing=0></table></div>');
		// insert options as checkboxes inside the div
		$('#check_'+ strName + ' table').append('<tr><td class="checker"><input type="checkbox" class="checkall" value="yes" id="checkall_'+ strName +'" rel="' + strName + '"></td><td class="labeler"><label for="checkall_'+ strName +'">Selecteer alles</label></td></tr>');
		$(this).contents('option').each(function() {
			checked = '';
			if($(this).attr('selected'))
				checked = ' CHECKED="true"';
			$('#check_'+ strName + ' table').append('<tr><td class="checker"><input type="checkbox" class="check_'+ strName +'" id="'+ strName +'_'+ $(this).val() +'" name="'+ strName +'[]" value="'+ $(this).val() +'"'+ checked +'></td><td class="labeler"><label for="'+ strName +'_'+ $(this).val() +'" style="display:block;">'+ $(this).html() +'</label></td></tr>');
			});
		// remove the selectbox
		$(this).remove();
		});
	// setup the paging form
	strHtml = '<form>';
	strHtml += '<img src="../hodex/images/tablesorter/first.png" class="first">';
	strHtml += '<img src="../hodex/images/tablesorter/prev.png" class="prev">';
	strHtml += '<input type="text" class="pagedisplay" readonly style="background-color:#FFF;width:50px;">';
	strHtml += '<img src="../hodex/images/tablesorter/next.png" class="next">';
	strHtml += '<img src="../hodex/images/tablesorter/last.png" class="last"><select class="pagesize"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option selected="selected" value="40">40</option></select></form>';
	$('#pager').html(strHtml);
	
	
	$('.checkall').change(function() {
		if($(this).is(':checked')) 
			 $('.check_'+ $(this).attr('rel')).attr('checked', true);
		else $('.check_'+ $(this).attr('rel')).attr('checked', false);
		})	
	
	// setup the tabs
	$('li.tab a').each(function(){
		$(this).click(function () {
			// show tabcontent
			str = $(this).attr('href');
			str = str.substr(1, str.length);
			$('.tabcontent').hide();
			$('.tabcontent#'+ str).show();
			// set selected tab
			$('#tabnav li').removeClass('selected');
			$(this).parent().addClass('selected');
			return false;
			});
		});
	// set table  sorting
	if($("#result tbody tr").size() > 0) {
		$("#result").tablesorter({ 
			// sort on the first column and third column, order asc 
			widgets: ['zebra'],
			sortList: [[6,1]] 
			}).tablesorterPager({container: $("#pager")}); 
		}
	// Alle instituten met meer dan 5 opleidingen, alleen eerste 5 laten zien.
    $(".metal_inner ul").each(function(index) {
		num = $(this).children().size();
		if(num > 8) {
			// deze brochure is 'te groot'
			$(this).children().slice(5).hide();
			$(this).children(':last').after("<li class='link'><a onclick='slide(this); return false;' class='up' >Klik voor de overige "+ (num-5) +" opleiding(en)</a></li>");
			}
		});
	});
function slide(target) {
	// nu het rijtje togglen.
	if($(target).hasClass("up")) {
		$(target).removeClass("up");
		$(target).addClass("down");
		$(target).text("Klik om in te klappen.");
		}
	else {
		$(target).removeClass("down");
		$(target).addClass("up");
		num = $(target).parent().parent().children().size() - 6;
		$(target).text("Klik voor de overige "+ (num) +" opleiding(en)");
		}
	$(target).parent().parent().children(":not(.link)").slice(5).slideToggle();
	}
function check_all(strId) {
	/*
	if($('#checkall_'+ strId + ':checked').val()) 
		 $('input[name='+ strId +'[]]').attr('checked', true);
	else $('input[name='+ strId +'[]]').attr('checked', false);
	*/
	if($('#checkall_'+ strId + ':checked').val()) 
		 $('.check_'+ strId).attr('checked', true);
	else $('.check_'+ strId).attr('checked', false);
	}