function Slider(id, offset, speed) {
    this.id = id;
    this.element = document.getElementById(id);
    this.offset = offset;
    this.speed = speed;
    this.current = 0;
    this.lowest = 0;
    this.highest = 0;
    this.step = 10; // ms
    this.delta = 0;
    this.direction = "none";

    if (this.element) {
        this.lowest = this.offset;
        this.highest = this.element.offsetHeight;
        this.current = this.lowest;

        this.delta = (this.step * (this.highest - this.lowest)) / (this.speed);

        this.element.style.position = "fixed";
        this.element.style.bottom = "0px";
        this.element.style.height = this.offset + "px";
        this.element.style.right = "0px";

        var self = this;
        this.element.onmouseover = function() { self.direction = "out"; self.slideOut(); };
        this.element.onmouseout = function() { self.direction = "in"; self.slideIn(); };
    }
}

Slider.prototype.slideOut = function() {
    if (this.direction == "out") {
        var self = this;
        if (this.current < this.highest) {
            this.current += this.delta;
            if (this.current > this.highest) {
                this.current = this.highest;
                this.direction = "none";
            }
            else {
                setTimeout(function() { self.slideOut(); }, this.step);
            }
        }
        this.element.style.height = this.current + "px";
    }
};

Slider.prototype.slideIn = function() {
    if (this.direction == "in") {
        var self = this;
        if (this.current > this.lowest) {
            this.current -= this.delta;
            if (this.current < this.lowest) {
                this.current = this.lowest;
                this.direction = "none";
            }
            else {
                setTimeout(function() { self.slideIn(); }, this.step);
            }
        }
        this.element.style.height = this.current + "px";
    }
};