//Event.observe(window, 'load', function() { start_slideshow(5000) });
document.observe("dom:loaded", function() { start_slideshow(5000) });
var sliderTimer;
function start_slideshow(delay) {
  n = $$('#slider-wrapper .slide').length;
  links = $('slider-wrapper').appendChild(new Element('div', {'id': 'slider-links'}));
  for (i = 1; i<=n; i++){
    a = new Element('a', { 'id': 'slider-link-'+i, href: '#' }).addClassName('slider-link').update(i);
    Event.observe(a, 'click', slidelink_clicked(i));
    links.appendChild(a);
  }
  $('slider-link-1').addClassName('active');
  sliderTimer = setTimeout(switch_slides(1, 1, n, delay), delay);
}

function switch_slides(frame, start_frame, end_frame, delay) {
  return (function() {
    Effect.Fade('slideshow' + frame);
    $('slideshow'+frame).fade().removeClassName('active');
    $('slider-link-'+frame).removeClassName('active');
    if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
    $('slideshow'+frame).appear().addClassName('active');
    $('slider-link-'+frame).addClassName('active');
    sliderTimer = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
  })
}

function slidelink_clicked(frame){
  return (function(e) {
    clearTimeout(sliderTimer);
    Effect.Queues.get('global').each(function(e) { e.cancel() })
    $$('#slider-wrapper .slide:not(#slideshow'+frame+')').invoke('fade');
    $$('#slider-wrapper .slider-link.active').invoke('removeClassName', 'active');
    $$('#slider-wrapper #slideshow' + frame + '.slide').invoke('appear');
    $('slider-link-'+frame).addClassName('active');

    e.stop();
  });
}