function updatePage(thisPage) {
    //hide all pages and show only the selected one
    var nwHeight = $("table#tblVacatures").find("tr.header").height();
    $("table#tblVacatures").find("tr.page_" + thisPage).each(function() {
    nwHeight += parseInt($(this).height());
    });
    $("table#tblVacatures").find("tr").hide();
    $("div#loader").show().animate({
            height: nwHeight
            }, 900);
    $(this).oneTime(1000, function() {
        $("div#loader").stop().hide();
        $("#page_" + thisPage).fadeIn(300);

        $("table#tblVacatures").find("tr.header").show();
        $("table#tblVacatures").find("tr.page_" + thisPage).show();
    });
    

    //update html and click events
    updatePaginator(thisPage);

    //update url
    //document.location = "#reacties?page=" + thisPage;
}

function updatePaginator(page) {
    //get nr of pages
    var nrPages = ($(".paginator").size());
    var htmlPages = "";

    //update paginator
    var j = 0;
    var k = $("table#tblVacatures").find("tr").size() - 1;
    var l = 0;
    var m = k;
    for (i = 1; i <= nrPages; i++) {
        if (i == page) {
            j = (i - 1) * 10 + 1;
            m -= ((i-1) * 10);
            if (m < 10) {l = (k - ((i-1) * 10) + (i-1)*10); } else { l = j + 9; }
            htmlPages += "<li class=\"current\" rel=\"" + i + "\">" + j + " - " + l + " van " + k + "</li>";
        }
        else {
            htmlPages += "<li rel=\"" + i + "\"><a href=\"#\" style=\"display:none;\">" + j + " - " + l + " van " + k + "</a></li>"
        }
    }

    //replace html
    $("#jQueryPaginator").find("ul").html(htmlPages);

    //handle previous and next
    var nrOfPages = ($(".paginator").size());
    if (nrOfPages > 1) {
        $("#cntPageLinks").css("width", "445px");
        if (page == 1) {
            $("#jQueryPaginator").find("span.prevPage").html("&nbsp;");
        }
        else {
            $("#jQueryPaginator").find("span.prevPage").html("<a href=\"#\" id=\"previousPage\" class=\"btnVorige\" title=\"vorige\">Vorige</a>");
            $("#previousPage").click(function() {
                updatePage(parseInt($("#jQueryPaginator").find("li.current").attr("rel")) - 1);
                return false;
            });
        }
        if (page == nrOfPages) {
            $("#jQueryPaginator").find("span.nextPage").html("&nbsp;");
        }
        else {
            $("#jQueryPaginator").find("span.nextPage").html("<a href=\"#\" id=\"nextPage\" class=\"btnVolgende\" title=\"volgende\">Volgende</a>");
            $("#nextPage").click(function() {
                updatePage(parseInt($("#jQueryPaginator").find("li.current").attr("rel")) + 1);
                return false;
            });
        }
    }
    else {
        $("#jQueryPaginator").find("span.prevPage").html("");
        $("#jQueryPaginator").find("span.nextPage").html("");
        $("#cntPageLinks").css("width", "609px");
    }

    //add click function for nrs.
    $("#jQueryPaginator").find("li").find("a").click(function() {
        var thisPage = parseInt($(this).parent().attr("rel"));
        updatePage(thisPage);
        return false;
    });
}