1 files changed, 59 insertions, 0 deletions
diff --git a/lib/sugar-web/graphics/radiobuttonsgroup.js b/lib/sugar-web/graphics/radiobuttonsgroup.js
new file mode 100644
index 0000000..712681b
--- /dev/null
+++ b/lib/sugar-web/graphics/radiobuttonsgroup.js
@@ -0,0 +1,59 @@
+define(function () {
+    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 (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;
+
+});