window.addEvent('domready', function() {
    $$('div.slideshow').each(function(ss) {
        var slides = ss.getElements('div.slide');
        var tweens = new Array();
        var slide_selects = new Array();
        var index = 0;

        slides.each(function(s) {
            tweens.push(new Fx.Tween(s, {link: 'chain'}));
        });

        var flipper = function(to) {
            tweens[to].start('display', 'block');
            tweens[to].start('opacity', 1.0);

            tweens[index].start('opacity', 0.0);
            tweens[index].start('display', 'none');

            slide_selects[index].setStyle('color', 'inherit');
            slide_selects[to].setStyle('color', '#41C9FF');

            index = to;
        };

        var autoflip = function() {
            flipper((index + 1) % slides.length);
        }

        var timer = autoflip.periodical(10000);

        var controls = new Element('span[style=position: absolute; bottom: 20px; left: 20px; box-shadow: 1px 1px 1px #000 inset; background-color: #fff;]');
        ss.grab(controls);

        var pause = new Element('span[style=margin: 0px 4px; cursor: pointer;]');
        pause.set('html', '❚ ❚');
        controls.grab(pause);

        pause.addEvent('click', function() {
            clearInterval(timer);
        });

        for(var i = 0; i < slides.length; i++) {
            var control = new Element('span[style=margin: 0px 4px; cursor: pointer;]');
            if(i == index) {
                control.setStyle('color', '#41C9FF');
            }
            control.set('text', '' + (i + 1));
            controls.grab(control);
            slide_selects.push(control);

            control.addEvent('click', function(i) { return function() {
                clearInterval(timer);
                flipper(i);
            }}(i));
        }
    });
});