(function($) {
    $.widget("ui.accordion1", {
        options: {
            helpDialog: $('<div class="help"></div>'),
            active: 0,
            animated: 'slide',
            clearStyle: false,
            manyOpen: true,
            event: "click",
            fillSpace: false,
            header: "> li > :first-child,> :not(li):even",
            icons: {
                header: "ui-icon-triangle-1-e",
                headerSelected: "ui-icon-triangle-1-s"
            },
            navigation: false,
            navigationFilter: function() {
                return this.href.toLowerCase() == location.href.toLowerCase();
            }

        },

        _create: function() {

            var o = this.options, self = this;
            this.running = 0;

            this._initHelp(o.helpDialog);
            this.element.addClass("ui-accordion ui-widget ui-helper-reset");

            // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
            this.element.children("li").addClass("ui-accordion-li-fix");

            this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
                .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
                .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
                .bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
                .bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });

            this.headers
                .next()
                .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");

            if ( o.navigation ) {
                var current = this.element.find("a").filter(o.navigationFilter);
                if ( current.length ) {
                    var header = current.closest(".ui-accordion-header");
                    if ( header.length ) {
                        // anchor within header
                        this.active = header;
                    } else {
                        // anchor within content
                        this.active = current.closest(".ui-accordion-content").prev();
                    }
                }
            }

            this.active = $(this.headers.get(0));

            //Append icon elements
            //this._createIcons();

            //this.resize();

            //ARIA
            this.element.attr('role','tablist');

            this.headers
                .attr('role','tab')
                .bind('keydown', function(event) { return self._keydown(event); })
                .next()
                .attr('role','tabpanel');

            this.headers
                .attr('aria-expanded','false')
                .attr("tabIndex", "0")
                .next()
                .hide();


            // only need links in taborder for Safari
            if (!$.browser.safari)
                this.headers.find('a').attr('tabIndex','-1');

            if (o.event) {
                this.headers.bind((o.event) + ".accordion", function(event) {
                    self._clickHandler.call(self, event, this);
                    event.preventDefault();
                });
                this.active.trigger(o.event)
            }

            this.active.focus();
        },

        _initHelp: function(target) {
            var self = this;
            $(target).prepend(
                '<table style="margin: auto auto">\n' +
                    '   <thead><tr><th>Key</th><th>Action</th></tr></thead>\n' +
                    '   <tbody><tr><td>Movement:</td><td>Arrow keys, vi keys or wasd</tr>\n' +
                    '         <tr><td><pre>\n' +
                    '           w\n' +
                    '         a s d\n' +
                    '         </pre></td><td><pre>\n' +
                    '           k\n' +
                    '         h j l\n' +
                    '         </pre></td>\n' +
                    '   </tr><tr class="s">\n' +
                    '         <td>Shift+up or down:</td><td>Keep current pane open and switch to appropriate pane</td>\n' +
                    '      </tr><tr>\n' +
                    '         <td>Right, Enter:</td><td>Open current item</td>\n' +
                    '      </tr><tr class="s">\n' +
                    '         <td>Left, Enter:</td><td>Close current item</td>\n' +
                    '      </tr><tr class="s">\n' +
                    '         <td>Space:</td><td>Scroll down if current element not fully visible, otherwise go to next</td>\n' +
                    '      </tr><tr>\n' +
                    "         <td>'?':</td><td>Help</td>\n" +
                    '      </tr>\n' +
                    '   </tbody>\n' +
                    '</table>\n'
            ).dialog({autoOpen: false, modal: true, title: 'Help (\'q\' or Escape to exit)', minWidth: 402, width: 402});

            $('body').bind('keydown', function(event) {
                if (event.shiftKey && event.which == 191) { // 191 == '?'
                    self.help();
                } else if (event.which == 81 && self.options.helpDialog.dialog('isOpen')) { // 81 == 'q'
                    self.help();
                };
            });
            if (this.options.helpTrigger)  {
                $(this.options.helpTrigger).click( function() { self.help(); });
            }



        },

        _keydown: function(event) {

            var o = this.options, keyCode = $.ui.keyCode;

            if (o.disabled || event.altKey || event.ctrlKey)
                return;

            var length = this.headers.length;
            var currentIndex = this.headers.index(event.target);
            var toFocus = false;
            var is_space = false;
            var result = false;

            switch(event.keyCode) {
            case keyCode.SPACE:
                is_space = true;
                toFocus = this.headers[(currentIndex + 1) % length];
                break;
            case 74: // j
            case 83: // s
            case keyCode.DOWN:
                toFocus = this.headers[(currentIndex + 1) % length];
                break;
            case keyCode.UP:
            case 75: // k
            case 87: // w
                toFocus = this.headers[(currentIndex - 1 + length) % length];
                break;
            case keyCode.RIGHT:
            case 76: // l
            case 68: // l
                this.show(event.target);
                break;
            case keyCode.LEFT:
            case 72: // h
            case 65: // h
                this.hide(event.target);
                break;
            case keyCode.ENTER:
                $(event.target).stop();
                this.toggle(event.target);
                event.preventDefault();
            }

            if (toFocus) {
                //console.log(this.active.next().offset().top + this.active.next().outerHeight());
                //console.log($(window).height()+$(window).scrollTop());
                console.log((this.active.next().offset().top + this.active.next().outerHeight()) > ($(window).height() + $(window).scrollTop()));
                console.log(toFocus);
                var windowBottom = $(window).height() + $(window).scrollTop()
                if (is_space && ((this.active.next().offset().top + this.active.next().outerHeight()) > windowBottom)) {
                    result = true;
                    toFocus = this.active;
                } else {
                    result = false;
                    if (!event.shiftKey) this.hide(this.active);
                };
                console.log(toFocus);
                console.log(toFocus == this.active);

                if (toFocus != this.active) {
                    this.active = $(toFocus);
                    toFocus.focus();
                    this.show(this.active);
                }

            } else { result = true; }

            return result;

        },

        show: function(target) {
            var target = $(target);
            target.stop();
            target.removeClass("ui-state-default").addClass("ui-state-active").removeClass("ui-corner-all").addClass("ui-corner-top");
            target.next().show();
        },
        hide: function(target) {
            var target = $(target);
            target.stop();
            target.addClass("ui-state-default").removeClass("ui-state-active").addClass("ui-corner-all").removeClass("ui-corner-top");
            target.next().hide();
        },
        toggle: function(target) {
            var target = $(target);
            target.stop();
            target.toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
            target.next().toggle();
        },

        _clickHandler: function(event, target) {
            console.log(target);
            this.active = $(target);
            this.active.stop()
            this.active.toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
            this.active.next().toggle();
            this.active.focus();

        },

		destroy: function() {
		},

		_setOption: function(option, value) {
			$.Widget.prototype._setOption.apply( this, arguments );
		},

        help: function(target) {
            if (!this.options.helpDialog.dialog('isOpen'))
                this.options.helpDialog.dialog('open');
            else
                this.options.helpDialog.dialog('close');
        }

	});
})(jQuery);