(function($) {
    $.widget("qusion.toolbox", {
        options: {
            tabClass: 'q-toolbox-tab',
            panelClass: 'q-toolbox-panel',
            pinClass: 'q-toolbox-pin',
            openFade: 200,
            closeFade: 200,
            pinned: false,
            selected: null
        },
        _create: function() {
            var self = this, options = self.options, element = this.element;

            // initially set current visible panel to null
            self.active = null;
            self.pinned = options.pinned;

            element
                .uniqueId()
                .addClass("q-toolbox")
                .attr({
                    role: "toolbox",
                    tabIndex: 0
                });

            // hide all panels initially
            element.find("." + options.tabClass).each(function() {
                $(this).uniqueId()
                    .next()
                    .addClass(options.panelClass)
                    .hide();
            });

            this._on(element, {
                "click .q-toolbox-tab": function(e) {
                    var target = $(e.currentTarget).closest('.' + options.tabClass);
                    e.stopPropagation();
                    (self.active == null || self.active.attr('id') != target.attr('id'))
                        ? self.open(target, e)
                        : (self.pinned === false ? self.close(target, e) : function() {
                        });
                },
                "click": function(e) {
                    if (self.pinned === false)
                        e.stopPropagation();
                }
            });

            // selected
            //console.log(element.find('[data-key="' + options.selected + '"]').prev());
            if (options.selected)
                element.find('[data-key="' + options.selected + '"]').prev().click();

            // pin
            element.find("." + options.pinClass).click(function(e) {
                e.stopPropagation();
                self.pin(!self.pinned);
            });

            if (options.pinned === true)
                self.pin(options.pinned);
        },
        panel: function (key) {
            return this.element.find('[data-key="' + key + '"]');
        },
        open: function(item, e) {
            var self = this, options = self.options, element = this.element;

            element.find('.active').removeClass('active');
            item.addClass('active');

            element
                .addClass('q-toolbox-on', 500)
                .find("." + options.panelClass)
                .hide();

            var panel = item.next().show();

            self.active = item;

            $(document).on("click", function() {
                console.log(self.pinned);
                if (self.pinned === false)
                    self.closeAll();
            });

            self._trigger('open', e, { item: item, key: panel.data('key') });
        },
        close: function(item, e) {
            var self = this, options = self.options, element = this.element;

            element.removeClass('q-toolbox-on');
            element.find('.active').removeClass('active');
            var panel = item.next().hide();
            self.active = null;

            self._trigger('close', e, { item: item, key: panel.data('key') });
        },
        closeAll: function() {
            var self = this, options = self.options, element = this.element;
            element.find("." + options.tabClass).each(function() {
                self.close($(this));
            });
        },
        pin: function(flag, e) {

            var self = this;
            if (flag !== true)
                flag = false;
            
            self.pinned = flag;
            //console.log(self.pinned);
            if (self.pinned === true) {
                self.element
                    .addClass('q-toolbox-pinned');
            } else
                self.element
                    .removeClass('q-toolbox-pinned');

            self._trigger('onpin', e, self.pinned);
        }
    });
})(jQuery);