// Rollout script
categoryWater = new Button('categoryWater')
categoryLandbouw = new Button('categoryLandbouw')
categoryKinderen = new Button('categoryKinderen')
categoryGezondheid = new Button('categoryGezondheid')
categoryScholing = new Button('categoryScholing')
categoryAlles = new Button('categoryAlles')

function Button(id)
{
    this.id = id
    this.Moving = false
    this.steps = 14
    this.step = 0

    this.Open = function()
    {
        this.Direction = 1
        if (this.Moving) return
        this.Moving = true
        this.Loop()
    }

    this.Close = function()
    {
        this.Direction = -1
        if (this.Moving) return
        this.Loop()
    }

    this.Loop = function()
    {
        this.step += this.Direction
        if (this.step > this.steps) this.step = this.steps
        if (this.step < 0) this.step = 0
        this.SetDiv(this.step/this.steps)
        if (this.step > 0 && this.step < this.steps)
        {
            setTimeout(this.id + ".Loop()", 10)
        }
        else
        {
            this.Moving = false
        }
    }

    this.SetDiv = function(factor)
    {
        factor = (.5 - Math.cos(factor * Math.PI) * .5);
        var hoogte = 0 + factor * 82;
        //var mytop = .3 - factor * .3;
        //var mywidth = factor * 15;
        document.getElementById(id+'Image').style.height = hoogte + 'px';
    }
}