var is_play = true;
var delay = 5000;

var start_frame = 0;
var end_frame   = 0;
var cur_frame   = 0;
var lis;

function init() {
    lis = $('slide-images').getElementsByTagName('li');

    end_frame = lis.length - 1;
    for ( i = 0; i <= end_frame; i++) {
        if (lis[i].style.display == '') { cur_frame = i; i = end_frame + 1; }
    }

    Event.observe($('button_pause'), 'click', pause,    false);
    Event.observe($('button_play'),  'click', play,     false);
    Event.observe($('button_prev'),  'click', previous, false);
    Event.observe($('button_next'),  'click', next,     false);

    setTimeout(_run(), delay);
}

function pause() {
    is_play = false;
    $('button_pause').setStyle({ display: 'none' });
    $('button_play').setStyle({ display: 'inline' });
}

function play() {
    is_play = true;
    $('button_pause').setStyle({ display: 'inline' });
    $('button_play').setStyle({ display: 'none' });
}

function next() {
    pause();
    _show_next();
}

function previous() {
    pause();
    _show_previous();
}

function _run() {
    return (function() {
        if (is_play) { _show_next(); }
        setTimeout(_run(), delay);
    })
}

function _show_next() {
    lis = $('slide-images').getElementsByTagName('li');
    Effect.Fade(lis[cur_frame]);
    if (cur_frame == end_frame) {
        cur_frame = start_frame;
    } else {
        cur_frame++;
    }
    lisAppear = lis[cur_frame];
    Effect.Appear(lisAppear);
}

function _show_previous() {
    lis = $('slide-images').getElementsByTagName('li');
    Effect.Fade(lis[cur_frame]);
    if (cur_frame == start_frame) {
        cur_frame = end_frame;
    } else {
        cur_frame--;
    }
    lisAppear = lis[cur_frame];
    Effect.Appear(lisAppear);
}

Event.observe(window, 'load', init, false);