define(function () {
    var util = require("sugar-html-graphics/util");

    var radioButtonsGroup = {};

    radioButtonsGroup.RadioButtonsGroup = function (elems) {
        this.elems = elems;
        var active;

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

            if (active === undefined && util.hasClass(elem, 'active')) {
                active = elem;
            }
        }

        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];
                util.removeClass(elem, 'active');
            }
            util.addClass(active, 'active');
        }

        this.getActive = function () {
            return active;
        };

    };

    return radioButtonsGroup;

});

@@ -96,24 +96,350 @@
 roup = %7B%7D;%0A%0A
+    // ## RadioButtonsGroup%0A    //%0A    // A group of elements where only one can be active at the same%0A    // time.%0A    //%0A    // When an element is clicked, it becomes the active one.  The%0A    // active element gains the 'active' CSS class.%0A    //%0A    // Parameters:%0A    //%0A    // * **elems** Array of elements of the group.%0A
     radioBut
@@ -483,24 +483,24 @@
 n (elems) %7B%0A
-
         this
@@ -669,24 +669,144 @@
 kHandler);%0A%0A
+            // The first element that has 'active' CSS class is made%0A            // the active of the group on startup.%0A
             
@@ -914,32 +914,143 @@
    %7D%0A        %7D%0A%0A
+        // If no element has 'active' CSS class, the first element of%0A        // the array is made the active.%0A
         if (acti
@@ -1483,32 +1483,67 @@
 e');%0A        %7D%0A%0A
+        // Get the active element.%0A
         this.get

Document radiobuttonsgroup.js