YOOtoppanel = Fx.Base.extend(
{
    initialize : function (element, options)
    {
        this.setOptions({
            offset : 320, duration : 500, transition : Fx.Transitions.linear
        }, options);
        this.element = $E('.panel', element);
        this.wrapper = $E('.panel-wrapper', element);
        this.container = $E('.panel-container', element);
        this.margin = 'top';
        this.layout = 'height';
        this.now = [];
        this.parent(this.options)
    },
    addTriggerEvent : function (tr)
    {
        var trigger = $E(tr);
        if (this.element && trigger) {
            trigger.addEvent('click', function () 
            {
                this.toggle() 
            }
            .bind(this));
        }
    },
    setNow : function ()
    {
        for (var i = 0; i < 2; i++) {
            this.now[i] = this.compute(this.from[i], this.to[i]);
        }
    },
    vertical : function ()
    {
        return [this.element.getStyle('margin-top').toInt(), this.wrapper.getStyle('height').toInt()];
    },
    slideIn : function ()
    {
        this.container.setStyle('z-index', 120);
        return this.start(this.vertical(), [0, this.options.offset]);
    },
    slideOut : function ()
    {
        this.container.setStyle('z-index', 15);
        return this.start(this.vertical(), [ - this.options.offset, 0]);
    },
    toggle : function ()
    {
        if (this.wrapper.offsetHeight == 0) {
            return this.slideIn();
        }
        else {
            return this.slideOut();
        }
    },
    increase : function ()
    {
        this.element.setStyle('margin-' + this.margin, this.now[0] + this.options.unit);
        this.wrapper.setStyle(this.layout, this.now[1] + this.options.unit)
    }
});