/*
 * index.js - Für die Hauptseite.  Dort gibt es ein zentrales Element
 * mit einem Foto und mehreren Reitern darunter, die eine bestimmte
 * Zielgruppe benennen.  Wenn man die Maus auf den Reiter bewegt, wird
 * das jeweilig dazu gehörende Foto aktiviert.  Die Aktivierung
 * erfolgt über den CSS-Klassennamen "active".  Der Mechanismus ist
 * hier generisch implementiert und könnte (sollte) eigentlich nicht
 * der index-Seite sondern in einer JS-Library untergebracht werden.
 *
 */

var option_elements;
var option_selectors;

function activate(which) {
    map(function (selector, element) {
        if (selector == which) {
            addElementClass(selector, 'active');
            addElementClass(element, 'active');
        } else {
            removeElementClass(element, 'active');
            removeElementClass(selector, 'active');
        }
    }, option_selectors, option_elements);
}

function make_mouseover_switched_pane(pane_class_name, selector_class_name) {
    option_elements = getElementsByTagAndClassName('div', pane_class_name);
    option_selectors = getElementsByTagAndClassName('a', selector_class_name);
    map(function (selector) {
        YAHOO.util.Event.addListener(selector, "mouseover", function () { activate(selector) });
    }, option_selectors);
}

$(document).ready(function () {
    make_mouseover_switched_pane('option', 'option-selector');
});