window.addEvent('domready', function() {
    initBoxy();
});

var interval1 = 10000;
var interval2 = 20000;

var group1    = null;
var group2    = null;

var active1   = null;
var active2   = null;

function initBoxy() {
    group1 = $$('.group1');
    group2 = $$('.group2');
    group1Toggle();
    group2Toggle();
    window.setInterval('group1Toggle()', interval1);
    window.setInterval('group2Toggle()', interval2);
}

function showBox(box, group) {
    box.setStyle('display', 'block');
    box.setStyle('opacity', 0);
    var myFx = new Fx.Tween(box, {transition: 'linear', duration: '2000'});
    myFx.start('opacity', 1);
    return box;
}

function group1Toggle() {
    hideBox(active1);
    if (active1 == null) {active1 = showBox(group1[$random(1, group1.length)-1], group1);return;}
    active1 = showBox(getNext(group1, active1), group1);
}
function group2Toggle() {
    hideBox(active2);
    if (active2 == null) {active2 = showBox(group2[$random(1, group2.length)-1], group2);return;}
    active2 = showBox(getNext(group2, active2), group2);
}

function hideBox(box) {
    if (box == null) return;
    var myFx = new Fx.Tween(box, {transition: 'linear', duration: '2000'});
    myFx.start('opacity', 0);
    box.setStyle('display', 'none');
}

function getNext(group, active) {
    if (group[group.length-1] == active) return group[0];
    for (var i=0; i<group.length; i++) {
        if (group[i] == active) {
            return group[i+1];
        }
    }
    return null;
}