$.widget('ns.myWidget', $.opesho.block, {
    _create: function() {
        this._super();
    }
});

/**
 * @param {String} name
 */
elems(name)

/**
 * return all nodes with classname b-block--item
 */
var blockElements = $('#mywidget').block('elems', 'item');

/**
 * @param {String} name
 */
hasElems(name)

/**
 * @param {String} [elem="widget block element"] The elem is optional.
 */
mods(elem)

/*
 * Returns array, for example, ["state", "theme"]
 */
var blockElements = $('#mywidget').block('mods');

/**
 * @param {String} key
 * @param {String|Boolean} [value]
 * @param {jQuery} [elem]
 */
setMod(mod, value, elem)

/**
 * Delete mod from element or block
 *
 * @param {String} key
 * @param {String|Boolean} [value]
 * @param {jQuery} [elem]
 */
delMod(mod, value, elem)

/**
 * @param {String} key
 * @param {String|Boolean} [value]
 * @param {jQuery} [elem]
 */
toggleMod(mod, value, elem)

/**
 * @param {String} key
 * @param {jQuery} elem
 */
modVal(mod, elem)

    var $document = $(document);

    $document.on('click', function (event) {
        $document.trigger('custom:click', event.target);
    });

    // provide simple widget communication
    $.widget('custom.clickable', {
        _create: function() {
            var self = this,
                element = this.element;
            this.document.on('custom:click', function (event, origTarget) {
                var sendEvent = !element.is(origTarget) && !element.has(origTarget).length;
                if (sendEvent) {
                    self._trigger('custom:click');
                }
            });
        }
    });

    // extend base block
    $.widget('opesho.block', $.opesho.block, {
        _create: function () {
            this._super();
            this.element.clickable({
               "custom:click": $.proxy(this._onCustomClick, this)
            });
        }
    });

    //make your base panel widget that can be closed on document click or another widget click
    $.widget('custom.panel', $.opesho.block, {
        _create: function () {
            this._isOpen = false;
        },
        _onCustomClick: function () {
            if (this._isOpen) {
                this.close();
            }
        },
        close: function () {
            this.element.hide();
            this._isOpen = false;
        },
        open: function () {
            this.element.show();
            this._isOpen = true;
        },
        toggle: function() {
            var self = this;
            this._isOpen = false;
            setTimeout(function() {
                self.element.toggle();
                if (self.element.is(':hidden') === false) {
                    self._isOpen = true;
                }
            }, 0);
        }
    });

//TODO