window.onload = function () {
    var header = document.getElementById('rcol');
    var pictures = new Array('fileadmin/assets/images/lzi_foto_01.jpg','fileadmin/assets/images/lzi_foto_02.jpg','fileadmin/assets/images/lzi_foto_03.jpg','fileadmin/assets/images/lzi_foto_04.jpg','fileadmin/assets/images/lzi_foto_05.jpg','fileadmin/assets/images/lzi_foto_06.jpg','fileadmin/assets/images/lzi_foto_07.jpg','fileadmin/assets/images/lzi_foto_08.jpg','fileadmin/assets/images/lzi_foto_09.jpg','fileadmin/assets/images/lzi_foto_10.jpg','fileadmin/assets/images/lzi_foto_11.jpg','fileadmin/assets/images/lzi_foto_12.jpg','fileadmin/assets/images/lzi_foto_13.jpg','fileadmin/assets/images/lzi_foto_14.jpg','fileadmin/assets/images/lzi_foto_15.jpg','fileadmin/assets/images/lzi_foto_16.jpg','fileadmin/assets/images/lzi_foto_17.jpg','fileadmin/assets/images/lzi_foto_18.jpg','fileadmin/assets/images/lzi_foto_19.jpg','fileadmin/assets/images/lzi_foto_20.jpg','fileadmin/assets/images/lzi_foto_21.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.background = 'url(' + pictures[chosenPic] + ')';
    }
}

function change_group_picture(offset) {

    var i = 0;
    var last_index = 0;
    var current_index;
    var element;
    var display = "";
    var prefix = "";
    var suffix = "";

    while (element = document.getElementById('group_picture_' + i)) {

        display = element.style.display;

        if (display != 'none') {
            current_index = i;
        }
        
        last_index = i;
        i++;
        
    }

    if (current_index + offset < last_index) {
        suffix = '<a href="javascript: change_group_picture(1)">&nbsp;></a>'
    }
    if (current_index + offset > 0) {
        prefix = '<a href="javascript: change_group_picture(-1)"><&nbsp;</a>'
    }

    document.getElementById('group_picture_' + current_index).style.display = 'none';
    document.getElementById('group_picture_' + (current_index + offset)).style.display = '';

    document.getElementById('group_picture_subtitle').innerHTML = prefix + (current_index + offset + 1) + ' / ' + (last_index + 1) + suffix;

}