// Example usage:
//
// if (window.DGN && DGN.DropDown) {
// DGN.Dropdown.init([{
//   button:   document.getElementById('sort-button'),
//   dropdown: document.getElementById('sort-dropdown')
//   }]);
//
//
// HTML:
//
//
// CSS:
//

if (!DGN) { var DGN = { }; }

DGN.DropDown = {
    pairs: {},             // Button/dropdown storage
    timer: null,           // Timer reference
    currentSelected: null, // Store currently open dropdown

    delay: 500,            // Dropdown hide delay (ms)
    //of_boundrealign: null,

    init: function(elements) {
        if (elements.length) {
            for (var i = 0; i < elements.length; i++) {
                var el = elements[i];
                if (el.button && el.dropdown) {
                    // Assign dropdown event handlers
                    Event.observe(el.dropdown, 'mouseover', this.onMouseOver.bindAsEventListener(this));
                    Event.observe(el.dropdown, 'mouseout',  this.onMouseOut.bindAsEventListener(this));

                    // Assign button event handlers
                    Event.observe(el.button, 'mouseover', this.onMouseOver.bindAsEventListener(this));
                    Event.observe(el.button, 'mouseout',  this.onMouseOut.bindAsEventListener(this));

                    // Store objects for future reference
                    this.pairs[el.button] = el;

                    // Add click event handler
                    el.button.onClick = function() { return false; };
                    Event.observe(el.button, 'click', this.onClick.bindAsEventListener(this));
                }
            }

            //if (!this.of_boundrealign) {
                //this.of_boundrealign = this.realign.bindAsEventListener(this);
            //}
        }
    },

    onClick: function(e) {
        var
            e = e || event,
            elem = Event.findElement(e, 'a');

        // Close any open dropdowns if needed
        if (this.currentSelected && this.currentSelected !== this) {
            this.onClick.call(this);
        }

        elem.blur();
        this.toggle(elem);
        e.stop();

        return false;
    },

    toggle: function(button) {
        var pair = this.pairs[button];
        if (pair) {
            var dropdown = pair.dropdown;
            if (!dropdown.visible()) {
                // Show dropdown and select button
                dropdown.show();
                button.addClassName('selected');

                this.align(button);

                // Assign dropdown alignment on resize
                //Event.observe(window, 'resize', this.of_boundrealign);

                this.currentSelected = button;
            } else {
                // Hide dropdown and deselect button
                dropdown.hide();
                button.removeClassName('selected');

                // Remove resize handler
                //Event.stopObserving(window, 'resize', this.of_boundrealign);

                this.currentSelected = null;
            }
        }
    },

    onMouseOver: function(e) {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    },

    onMouseOut: function(e) {
        var
            elem    = Event.element(e)
            thisobj = this;

        if (elem.visible()) {
            this.timer = setTimeout(function() {
                thisobj.toggle(thisobj.currentSelected);
            }, this.delay);
        }
    },

    align: function(button) {
        var dropdown = this.pairs[button].dropdown;

        // Temporarily render but hide
        dropdown.style.visibility = 'hidden';
        dropdown.show();

        var top = button.offsetHeight + button.positionedOffset()[1];

        // Align and show dropdown
        dropdown.style.top        = (top - 1) + 'px'; // minus 1 because it needs to overlap the button by 1 pixel
        dropdown.style.visibility = 'visible';
    }

    //realign: function() {
        //this.align(this.currentSelected);
    //}

};