//vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Checkbox = function(options, self) {

    /**
        options
            disabled        boolean, if true, checkbox is disabled
            id              element id
            group           boolean, if true, checkbox is part of a group
            checked         boolean, if true, checkbox is checked
            title           string, text on label
            width           integer, width in px
        methods:
            toggleChecked   function()
                            toggles checked property
                            returns that
        events:
            change          triggered when checked property changes
                            passes {checked, id, title}
    */

    var self = self || {},
        that = new Ox.Element('div', self)
            .defaults({
                disabled: false,
                id: '',
                group: false,
                checked: false,
                overlap: 'none',
                title: '',
                width: 'auto'
            })
            .options(options || {})
            .addClass('OxCheckbox' + 
                (self.options.overlap == 'none' ? '' : ' OxOverlap' +
                Ox.toTitleCase(self.options.overlap))
            )
            .attr(self.options.disabled ? {
                disabled: 'disabled'
            } : {});

    if (self.options.title) {
        self.options.width != 'auto' && that.css({
                width: self.options.width + 'px'
            });
        self.$title = new Ox.Label({
                disabled: self.options.disabled,
                id: self.options.id + 'Label',
                overlap: 'left',
                title: self.options.title,
                width: self.options.width - 16
            })
            .css({
                float: 'right'
            })
            .click(clickTitle)
            .appendTo(that);
    }

    self.$button = new Ox.Button({
            disabled: self.options.disabled,
            id: self.options.id + 'Button',
            title: [
                {id: 'none', title: 'none', selected: !self.options.checked},
                {id: 'check', title: 'check', selected: self.options.checked}
            ],
            type: 'image'
        })
        .addClass('OxCheckbox')
        .click(clickButton)
        .appendTo(that);

    function clickButton() {
        self.options.checked = !self.options.checked;
        // click will have toggled the button,
        // if it is part of a group, we have to revert that
        self.options.group && that.toggleChecked();
        that.triggerEvent('change', {
            checked: self.options.checked,
            id: self.options.id,
            title: self.options.title
        });
    }

    function clickTitle() {
        !self.options.disabled && self.$button.trigger('click');
    }

    self.onChange = function(key, value) {
        if (key == 'checked') {
            that.toggleChecked();
        }
    };

    that.checked = function() {
        return self.options.checked;
    }

    that.toggleChecked = function() {
        self.$button.toggleTitle();
        return that;
    }

    return that;

};