/**
*/
Ox.CollapsePanel = function(options, self) {
    var self = self || {},
        that = new Ox.Panel({}, self)
            .defaults({
                collapsed: false,
                extras: [],
                size: 16,
                title: ''
            })
            .options(options)
            .addClass('OxCollapsePanel'),
        // fixme: the following should all be self.foo
        title = self.options.collapsed ?
            [{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
            [{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
        $titlebar = new Ox.Bar({
                orientation: 'horizontal',
                size: self.options.size,
            })
            .dblclick(dblclickTitlebar)
            .appendTo(that),
        $switch = new Ox.Button({
                style: 'symbol',
                title: title,
                type: 'image',
            })
            .click(toggleCollapsed)
            .appendTo($titlebar),
        $title = new Ox.Element()
            .addClass('OxTitle')
            .html(self.options.title/*.toUpperCase()*/)
            .appendTo($titlebar),
        $extras;
    if (self.options.extras.length) {
        $extras = new Ox.Element()
            .addClass('OxExtras')
            .appendTo($titlebar);
        self.options.extras.forEach(function($extra) {
            $extra.appendTo($extras);
        });
    }
    that.$content = new Ox.Element()
        .addClass('OxContent')
        .appendTo(that);
    // fixme: doesn't work, content still empty
    // need to hide it if collapsed
    if (self.options.collapsed) {
        that.$content.css({
            marginTop: -that.$content.height() + 'px'
        });
    }
    function dblclickTitlebar(e) {
        if (!$(e.target).hasClass('OxButton')) {
            $switch.trigger('click');
        }
    }
    function toggleCollapsed() {
        var marginTop;
        self.options.collapsed = !self.options.collapsed;
        marginTop = self.options.collapsed ? -that.$content.height() : 0;
        that.$content.animate({
            marginTop: marginTop + 'px'
        }, 200);
        that.triggerEvent('toggle', {
            collapsed: self.options.collapsed
        });
    }
    self.onChange = function(key, value) {
        if (key == 'collapsed') {

        } else if (key == 'title') {
            $title.html(self.options.title);
        }
    };
    that.update = function() { // fixme: used anywhere?
        self.options.collapsed && that.$content.css({
            marginTop: -that.$content.height()
        });
    };
    return that;
};