function replace_rec(node, search, replace) {

    // Replace the value (attr value of text node)
    if (node.nodeValue != null) {
        try { // for IE who doesn't like when we set some attributes
            node.nodeValue = node.nodeValue.replace(search, replace);
        } catch(e) {}
    }

    // Loop on all child nodes 
    var nodes = node.childNodes;
    if (nodes) for(var i = 0; i < nodes.length; i++) {
        replace_rec(nodes[i], search, replace);
    }
    
    // For elements, look for attributes also
    if (node.nodeType == 1) {
        var nodes = node.attributes;
        if (nodes) for(var i = 0; i < nodes.length; i++) {
            replace_rec(nodes[i], search, replace);
        }
    }
}

// Instrument jQuery for a new method : replace
replace_str = function(node, search, replace) {
    return $(node).each(function() {
        replace_rec(this, search, replace);
    });
}

// Associative array to remember which button controls what
gLangButtons = new Array;
gLangButtonId = 0; // IUD for each lang button

function install_switch(
    placeholder, // DOM Node or jQuery object : Where to put buttons 
    targets,     // jQuery object : Which tree will change on clic on button 
    template)    // HTML template of a single button : "$lang" will be replaced by actual lang
{
    // Search all elements with a "lang" attribute
    var nodes = $("[lang]", targets);

    // Get all the possible 'lang' values
    var list = $.map(nodes, function (node) {return $(node).attr('lang')})

    // Remove duplicates
    uniques = new Object;
    for(var i=0; i < list.length; i++) {
        uniques[list[i]] = list[i];
    }
    list = new Array;
    for(var val in uniques) {
        list.push(val);
    }

    // No need for a switch if we have only one language
    if (list.length <= 1) return;
    
    var buttons = new Array;

    // Create button to switch on langages
    $.map(list, function(lang) {

        // Prepare a button for this language (from template)
        var button = replace_str($(template).clone(), '$lang', lang);
        
        // Set the id of the lang (to get associated targets later)
        button.attr("id", "lang-" + gLangButtonId + "-" + lang);

        // On click
        $(button).click(function() {
            var ids = $(this).attr('id').split('-');
            var lang_id = ids[1];
            var lang = ids[2];
            switch_to(
                lang_id,
                lang);

            return false;
        })

        // Add to the list
        buttons.push(button);
    })
        
    // Append the buttons at the beginning of the placeholder
    $(buttons).each(function(){$(placeholder).prepend(this)});

    // Remember the association id => (targets, buttons)
    gLangButtons[gLangButtonId] =
    {
        buttons: buttons,
        targets: targets
    };

    // Switch by default to the first language found
    switch_to(gLangButtonId, list[0]);
    
    // Next UID for other langages
    gLangButtonId++;
}


// Switch to a particular language under a given node
function switch_to(id, lang) {
    
    // Get the targets/buttons for this id
    var targets = gLangButtons[id].targets;
    var buttons = gLangButtons[id].buttons;

    // Show/Hide localized part of the DOM
    $("[lang]", targets).each(function() {
        if (lang == $(this).attr("lang")) {
            $(this).show();
        } else {
            $(this).hide();
        }
    }) 

    // Higlight the button of the selected language
    $(buttons).each(function() {
       
        var baseClass = $(this).attr("class");

        if (baseClass) {
            var className = baseClass.split(" ")[0];
            var butLang   = $(this).attr("id").split("-")[2];

            if (lang == butLang) {
                $(this).
                attr('class', className + ' on');
            } else {
                $(this).
                attr('class', className + ' off');
            }
        }
    });
}