define(function () {

    'use strict';

    var radioButtonsGroup = {};

    // ## RadioButtonsGroup
    //
    // A group of elements where only one can be active at the same
    // time.
    //
    // When an element is clicked, it becomes the active one.  The
    // active element gains the 'active' CSS class.
    //
    // Parameters:
    //
    // * **elems** Array of elements of the group.
    radioButtonsGroup.RadioButtonsGroup = function (elems) {
        this.elems = elems;
        var active;

        for (var i = 0; i < elems.length; i++) {
            var elem = elems[i];
            elem.addEventListener("click", clickHandler);

            // The first element that has 'active' CSS class is made
            // the active of the group on startup.
            if (active === undefined && elem.classList.contains('active')) {
                active = elem;
            }
        }

        // If no element has 'active' CSS class, the first element of
        // the array is made the active.
        if (active === undefined) {
            active = elems[0];
            updateClasses();
        }

        function clickHandler(evt) {
            active = evt.target;
            updateClasses();
        }

        function updateClasses() {
            for (i = 0; i < elems.length; i++) {
                var elem = elems[i];
                elem.classList.remove('active');
            }
            active.classList.add('active');
        }

        // Get the active element.
        this.getActive = function () {
            return active;
        };

    };

    return radioButtonsGroup;

});