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

    var self = self || {},
        that = new Ox.Element('tr', self)
            .defaults({
                bind: [], // fixme: what's this?
                checked: null,
                disabled: false,
                group: '',
                icon: '',
                id: '',
                items: [],
                keyboard: '',
                menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
                position: 0,
                title: [],
            })
            .options($.extend(options, {
                keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
                title: Ox.toArray(options.title || self.defaults.title)
            }))
            .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
            /*
            .attr({
                id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
            })
            */
            .data('group', self.options.group); // fixme: why?

    if (self.options.group && self.options.checked === null) {
        self.options.checked = false;
    }

    // construct
    that.append(
            that.$status = $('<td>', {
                'class': 'OxCell OxStatus',
                html: self.options.checked ? Ox.UI.symbols.check : ''
            })
        )
        .append(
            that.$icon = $('<td>', {
                'class': 'OxCell OxIcon'
            })
            .append(self.options.icon ?
                $('<img>', {
                    src: self.options.icon
                }) : null
            )
        )
        .append(
            that.$title = $('<td>', {
                'class': 'OxCell OxTitle',
                html: self.options.title[0]
            })
        )
        .append(
            $('<td>', {
                'class': 'OxCell OxModifiers',
                html: $.map(self.options.keyboard.modifiers, function(modifier) {
                    return Ox.UI.symbols[modifier];
                }).join('')
            })
        )
        .append(
            $('<td>', {
                'class': 'OxCell Ox' + (self.options.items.length ? 'Submenu' : 'Key'),
                html: self.options.items.length ? Ox.UI.symbols.triangle_right :
                        Ox.UI.symbols[self.options.keyboard.key] ||
                        self.options.keyboard.key.toUpperCase()
            })
        );

    function parseKeyboard(str) {
        var modifiers = str.split(' '),
            key = modifiers.pop();
        return {
            modifiers: modifiers,
            key: key
        };
    }

    self.onChange = function(key, value) {
        if (key == 'checked') {
            that.$status.html(value ? Ox.UI.symbols.check : '')
        } else if (key == 'disabled') {
            that.toggleClass('OxDisabled'); // fixme: this will only work if onChange is only invoked on actual change
        } else if (key == 'title') {
            self.options.title = Ox.toArray(value);
            that.$title.html(self.options.title[0]);
        }
    }

    that.toggle = function() {
        // toggle id and title
    };

    that.toggleChecked = function() {
        that.options({
            checked: !self.options.checked
        });
    };

    that.toggleDisabled = function() {

    };

    that.toggleTitle = function() {
        //Ox.print('s.o.t', self.options.title)
        that.options({
            title: self.options.title.reverse()
        });
    };

    return that;

};