function AttachPagerButtons(id) {

    //Koppelt de click-events aan de pagerbuttons
    $("#" + id + " .vorige_knop").click(function() {
    ScrollTools(id, getCurrentPage(id) - 1);
    });
    
    
    $("#" + id + " .volgende_knop").click(function() {
    ScrollTools(id, getCurrentPage(id) + 1);
    });


    $("#testtekst").click(function() {
        alert("tekstclick");
    });

    $("#testtekst2").click(function() {
    ScrollTools(id, getCurrentPage(id) + 1);
});


$("#testtekst3").click(function() {
alert("tekstclick3");
});
    
/*
    $("#" + id + " .vorige_knop").click(function() {
        alert("vorige");
    });


    $("#" + id + " .volgende_knop").click(function() {
    alert("volgende");
    });
    */
}




function ScrollTools(id, pageid) {
    //Initieert de horizontale scrollbeweging

    var pagesize = CalculatePageSize($(window).height());
    if (pageid > getCurrentPage(id) && getIsBusy(id) == 0) {
        //We gaan naar rechts (volgende)

        //Busy bit op 1 zetten, voorkomt dubbele animatie e.d.
        setIsBusy(id, 1);
        
        //Nieuwe div toevoegen
        $("#" + id + " #containercontent_" + id).after('<div id="containercontentnew_' + id + '" class="tools" style="position: absolute; left: ' + GetContentWidth(id) + 'px;"></div>');

        //Data ophalen en mergen met template naar nieuwe div
        MergeJSONtoTemplate('/InfoContainerSmallData.axd?infocontainer=' + getInfoContainerType(id) + '&infotype=' + getInfoType(id) + '&page=' + pageid + '&pagesize=' + pagesize, '#contenttemplate_' + id, '#containercontentnew_' + id, function(data) {
            //Huidige paginanummer +1
            setCurrentPage(id, getCurrentPage(id) + 1);

            //Animaties e.d.
            ScrollToolsCallback(id);

            //Pager updaten met nieuwe paginanr (en pijlen hiden if nodig). Pagerdata komt uit de JSON response.
            UpdatePager(id, data.PageCount, data.CurrentPage); 
        });

    }
        
    if (pageid < getCurrentPage(id) && getCurrentPage(id) != 1 && getIsBusy(id) == 0) {
        //We gaan naar links (vorige), rechts pagina invoegen

        //Busy bit op 1 zetten, voorkomt dubbele animatie e.d.
        setIsBusy(id, 1);
        
        //Nieuwe div toevoegen
        $("#" + id + " #containercontent_" + id).before('<div id="containercontentnew_' + id + '" class="tools" style="position: absolute; left: -' + GetContentWidth(id) + 'px;"></div>');

        //Data ophalen en mergen met template naar nieuwe div
        MergeJSONtoTemplate('/InfoContainerSmallData.axd?infocontainer=' + getInfoContainerType(id) + '&infotype=' + getInfoType(id) + '&page=' + pageid + '&pagesize=' + pagesize, '#contenttemplate_' + id, '#containercontentnew_' + id, function(data) 
        {
            //Huidige paginanummer -1
            setCurrentPage(id, getCurrentPage(id) - 1);

            //Animaties e.d.
            ScrollToolsCallback(id);

            //Pager updaten met nieuwe paginanr (en pijlen hiden if nodig)
            UpdatePager(id, data.PageCount, data.CurrentPage); 
        });
    }

}

function UpdatePager(id, pagecount, currentpage) {
    //Update de pager naar de actuele status

    //alert('UpdatePager, pagecount: ' + pagecount + ', currentpage: ' + currentpage);

    //Pagecount showen
    $("#" + id + " .pagecount").text(pagecount);

    //Huidige paginanr updaten
    $("#" + id + " .currentpage").text(currentpage);
    
    //Showen/hiden van de arrows (first, lastpage)
    if (currentpage == 1) {
        $("#" + id + " .vorige_knop").css("display", "none");
    }
    else {
        $("#" + id + " .vorige_knop").css("display", "inline");
    }

    if (currentpage == pagecount) {
        $("#" + id + " .volgende_knop").css("display", "none");
        $("#" + id + " .pagecount").css("padding-right", "12px");
    }
    else {
        $("#" + id + " .volgende_knop").css("display", "inline");
        $("#" + id + " .pagecount").css("padding-right", "0px");
    }

}


function ScrollToolsCallback(id) {
    
    //IE6 fix voor vline
    if ($.browser.msie && $.browser.version == "6.0") {
        DrawVlineIe();
    }
    
    //Eind-stuk van de scroll, na het ophalen van de JSON content

    //alert("ScrollToolsCallback");

    //Hoogte parent container aanpassen op hoogte nieuwe contentcontainer
    FixContainerHeight(id, 'containercontentnew_' + id);
    if ($("#" + id + " #containercontentnew_" + id).position().left > 0) {
        if (AllowHeavyAnimations == 1){
            //We gaan naar rechts
            $("#" + id + " #containercontent_" + id).animate({
            left: "-" + GetContentWidth(id) + "px"
            }, 500);        
        }
        else{
            $("#" + id + " #containercontent_" + id).css("left", "-" + GetContentWidth(id) + "px");
        }
    }
    else {
        if (AllowHeavyAnimations == 1){
            //We gaan naar links
            $("#" + id + " #containercontent_" + id).animate({
                left: GetContentWidth(id) + "px"
            }, 500);
        }               
        else{
           $("#" + id + " #containercontent_" + id).css("left", GetContentWidth(id) + "px");
        }
    }
    
    if (AllowHeavyAnimations == 1){
    //Nieuwe container de juiste positie geven, met animatie
    $("#" + id + " #containercontentnew_" + id).animate({
        left: "0px"
    }, 500, function() {


    //Oude container verwijderen uit DOM
    $("#" + id + " #containercontent_" + id).attr("id", "containercontentold_" + id);
    $("#" + id + " #containercontentnew_" + id).attr("id", "containercontent_" + id);
    $("#" + id + " #containercontentold_" + id).remove();

    setIsBusy(id, 0);

    });
    }
    else{
        $("#" + id + " #containercontentnew_" + id).css("left", "0px");
        //Oude container verwijderen uit DOM
        $("#" + id + " #containercontent_" + id).attr("id", "containercontentold_" + id);
        $("#" + id + " #containercontentnew_" + id).attr("id", "containercontent_" + id);
        $("#" + id + " #containercontentold_" + id).remove();

        setIsBusy(id, 0);
    }

}

function FixContainerHeight(id, container) {
    //Animeert de hoogte van de opgegeven container naar z'n outerheight
    
    var ToolsHeight = $("#" + id + " #" + container).outerHeight();

    $("#" + id + " .content").animate({
        height: ToolsHeight
    }, 500);

    //alert("end heightfix for: " + id + ", " + container);

}


function FixContainerHeightQuick(id, container) {
    //Animeert de hoogte van de opgegeven container naar z'n outerheight

    var ToolsHeight = $("#" + id + " #" + container).outerHeight();

    $("#" + id + " .content").css("height", ToolsHeight);

/*
    $("#" + id + " .content").animate({
        height: ToolsHeight
    }, 500);
*/
    //alert("end heightfix for: " + id + ", " + container);

}