window.addEvent('domready', function() {
    new WhitepaperForm();
    new ElementFolder('ul#features', 'li', 'a.button', 'sel', false);
});

/**
 * WhitepaperForm Class
 */
WhitepaperForm = new Class({
    /**
     * Constructor
     */
    initialize: function() {
        this.select = $(document.body).getElement('form#contact select#field_referrer_id');
        this.input = $(document.body).getElement('form#contact input#field_referrer_other');

        // guard
        if (! this.select || ! this.input) {
            return;
        }

        var parent_container = this.select.getParent('div');

        this.input.setStyle('display', 'none');
        this.input.inject(parent_container, 'bottom');
        var thisObject = this;
        this.select.addEvent('change', function(e) {
            thisObject.change();
        });
    },

    /**
     * @return void
     */
    change: function() {
        var selected_option_text = this.select.getSelected().get('text');
        var other_re = /^\s*other:\s*$/i;

        if (other_re.test(selected_option_text)) {
            this.input.setStyle('display', 'block');
        } else {
            this.input.setStyle('display', 'none');
        }
    }
});

/**
 * ElementFolder Class
 */
ElementFolder = new Class({
    /**
     * Constructor
     *
     * @param string, CSS selector for the root element
     * @param string, CSS selector for the children
     * @param string, CSS selector for the anchor to add the collapse/expand events on
     * @param string, the classname for the active state
     * @param boolean, allow multiple colapsed children
     */
    initialize: function(root_selector, child_selector, anchor_selector, active_state_classname, allow_multiple_colapsed) {
        var root = $(document.body).getElement(root_selector);

        // guard: stop if the root element is not found
        if (! root) {
            return;
        }

        this.active = null;
        this.foldable_element_arr = [];
        this.allow_multiple_colapsed = allow_multiple_colapsed;

        // get the child elements
        var child_arr = root.getElements(child_selector);
        for (var i = 0; i < child_arr.length; i++) {
            var element = new FoldableElement(this, child_arr[i], anchor_selector, active_state_classname);

            if (element.isActive()) {
                this.active = element;
            }

            this.foldable_element_arr.push(element);
        }
    },

    /**
     * Handle the click on a foldable element
     *
     * @param FoldableElement
     * @return void
     */
    handleClick: function(foldable_element) {
        if (this.allow_multiple_colapsed) {
            if (foldable_element.isActive()) {
                foldable_element.setInActive();
            } else {
                foldable_element.setActive();
            }
        } else {
            if (this.active == foldable_element) {
                this.active.setInActive();
                this.active = null;
            } else {
                if (this.active) {
                    this.active.setInActive();
                }

                this.active = foldable_element;
                this.active.setActive();
            }
        }
    }
});

/**
 * FoldableElement
 */
FoldableElement = new Class({
    /**
     * Constructor
     *
     * @param ElementFolder
     * @param Element, the container
     * @param string, CSS selector for the anchor to add the collapse/expand events on
     * @param string, the classname for the active state
     */
    initialize: function(element_folder, container, anchor_selector, active_state_classname) {
        this.container = container;
        this.active_state_classname = active_state_classname;

        var anchor = this.container.getElement(anchor_selector);

        // guard: stop no actor found
        if (! anchor) {
            return;
        }

        var thisObject = this;
        anchor.addEvents({
            'click': function(e) {
                new Event(e).stop();

                element_folder.handleClick(thisObject);
            },
            'focus': function(e) {
                this.blur();
            }
        });
    },

    /**
     * @return boolean
     */
    isActive: function() {
        return this.container.hasClass(this.active_state_classname);
    },

    /**
     * @return void
     */
    setActive: function() {
        this.container.addClass(this.active_state_classname);
    },

    /**
     * @return void
     */
    setInActive: function() {
        this.container.removeClass(this.active_state_classname);
    }
});