var cur_sample = 0;
var fade_pe = null;
var doing_fade = false;

function show_sample(num, no_halt)
{
  if (!no_halt)
    halt_fade();
  if (cur_sample == num || doing_fade)
    return;
  $('srec_' + cur_sample).hide();
  $('srec_' + num).show();
  $('sthu_' + cur_sample).removeClassName('sel');
  $('sthu_' + num).addClassName('sel');
  cur_sample = num;
}

function move_sample(delta)
{
  show_sample(next_sample(delta));
}

function next_sample(delta)
{
  var n = cur_sample + delta;
  if (n > 4)
    n = 0;
  if (n < 0)
    n = 4;
  return n;
}

function highlight()
{
  var num = next_sample(1);
  $('sthu_' + cur_sample).removeClassName('sel');
  $('sthu_' + num).addClassName('sel');
  cur_sample = num;
}

function done_fade()
{
  doing_fade = false;
}

function halt_fade()
{
  if (fade_pe)
    fade_pe.stop();
}

function fade()
{
  var n = next_sample(1);
  if (Prototype.Browser.IE)
  {
    show_sample(n, true);
    return;
  }
  doing_fade = true;
  new Effect.Fade('srec_' + cur_sample,
    { duration: 0.3, queue: {scope: 'fade', position: 'end'}, afterFinish: highlight });
  new Effect.Appear('srec_' + n,
    { duration: 0.3, queue: {scope: 'fade', position: 'end'}, afterFinish: done_fade });
}

Event.observe(window, 'load', function() {
  if ($('srec_0') == null || $('no_anim'))
    return;
	fade_pe = new PeriodicalExecuter(fade, 12);
	Event.observe(window, 'unload', halt_fade);
	Event.observe(window, 'click', halt_fade);
});