function ListingDisplay(destinationElement,itemsPerPage)
{
    this.destinationElement = destinationElement;
    this.itemsPerPage = itemsPerPage;
    this.itemHeight = 1;
    this.currentPage = 0;
    this.totalItems = 0;
    this.width = 0;
    this.height = 0;
    this.page = Array();
    this.pageContainer = null;
    this.onUpdatePageComplete = null;
   
    this.onLoad = function(){
        var item = this.destinationElement.getElements("dd");
        if( item.length == 0 )
        {
            this.currentPage = -1;
            this.updatePage();
            return 0;
        }
        
        this.itemHeight =
            parseInt(item[0].getStyle("height")) +
            parseInt(item[0].getStyle("padding-top")) +
            parseInt(item[0].getStyle("padding-bottom")) +
            parseInt(item[0].getStyle("margin-top")) +
            parseInt(item[0].getStyle("margin-bottom"));

        this.width = this.destinationElement.offsetWidth;
        this.height = this.destinationElement.offsetHeight;

        // Pagina's opbouwen
        this.page = Array();

        for( var i = 0; i < item.length; i++ )
        {
            if( i % this.itemsPerPage == 0 )
            {
                this.page[this.page.length] = new Element("div");
                this.page[this.page.length-1].addClass("page");
                this.page[this.page.length-1].setStyle("margin-right",item[i].getStyle("padding-right"));
            }
            item[i].dispose();
            item[i].inject(this.page[this.page.length-1]);
            this.totalItems++;
        }
        this.destinationElement.empty();

        this.pageContainer = new Element("div");
        this.pageContainer.addClass("pagecontainer");
        this.pageContainer.instance = this;
        this.pageContainer.fx = new Fx.Tween(this.pageContainer,{
            wait: false,
            onComplete: function(el){
                if( el.instance.onUpdatePageComplete != null )
                {
                    el.instance.onUpdatePageComplete.delay(10,el.instance,Array(el.instance.currentPage,el.instance.itemsPerPage,el.instance.totalItems));
                }
            }
        });

        var left = 0;
        for( i = 0; i < this.page.length; i++ )
        {
            this.page[i].setStyle("left",left + "px");
            this.page[i].inject(this.pageContainer);
            left += this.width + parseInt(this.page[i].getStyle("margin-right"));
        }

        this.pageContainer.inject(this.destinationElement);

        this.updatePage();

        // Controls maken indien beschikbaar
        if( this.destinationElement.getAttribute("id") != null )
        {
            var nextControl = $$(".listingdisplaynext[rel=" + this.destinationElement.getAttribute("id") + "]");
            for( i = 0; i < nextControl.length; i++ )
            {
                nextControl[i].addEvent("click",function(){
                   $(this.getAttribute("rel")).instance.nextPage();
                   return false;
                });
            }

            var previousControl = $$(".listingdisplayprevious[rel=" + this.destinationElement.getAttribute("id") + "]");
            for( i = 0; i < previousControl.length; i++ )
            {
                previousControl[i].addEvent("click",function(){
                   $(this.getAttribute("rel")).instance.previousPage();
                   return false;
                });
            }
        }

        // Hoogte instellen
        var numVisibleItems = this.itemsPerPage;
        if( numVisibleItems > this.totalItems )
        {
            numVisibleItems = this.totalItems;
        }
        this.destinationElement.setStyle("height",((this.itemHeight*numVisibleItems)-parseInt(item[0].getStyle("margin-bottom"))) + "px");
    }

    this.nextPage = function(){
        this.currentPage++;
        if( this.currentPage >= this.page.length )
        {
            this.currentPage = this.page.length-1;
        }
        this.updatePage();
    }

    this.previousPage = function(){
        this.currentPage--;
        if( this.currentPage < 0 )
        {
            this.currentPage = 0;
        }
        this.updatePage();
    }

    this.updatePage = function(){

        var previousControl = $$(".listingdisplayprevious[rel=" + this.destinationElement.getAttribute("id") + "]");
        var nextControl = $$(".listingdisplaynext[rel=" + this.destinationElement.getAttribute("id") + "]");

        if( this.currentPage == -1 )
        {
            for( var i = 0; i < previousControl.length; i++ )
            {
                previousControl[i].setStyle("visibility","hidden");
            }
            for( i = 0; i < nextControl.length; i++ )
            {
                nextControl[i].setStyle("visibility","hidden");
            }
            return;
        }

        var width = this.page[this.currentPage].offsetWidth;

        var left = -(this.currentPage*width);
        this.pageContainer.fx.start("left",left);
        
        if( this.currentPage <= 0 )
        {
            for( var i = 0; i < previousControl.length; i++ )
            {
                previousControl[i].setStyle("visibility","hidden");
            }
        }
        else
        {
            for( i = 0; i < previousControl.length; i++ )
            {
                previousControl[i].setStyle("visibility","visible");
            }
        }

        if( this.currentPage >= this.page.length-1 )
        {
            for( i = 0; i < nextControl.length; i++ )
            {
                nextControl[i].setStyle("visibility","hidden");
            }
        }
        else
        {
            for( i = 0; i < nextControl.length; i++ )
            {
                nextControl[i].setStyle("visibility","visible");
            }
        }
    }
}