// jm3.scriptaculous fader:

var pics = new Array();

// grab the images to crossfade from the dom and array-ify them
function init_fader() {
  if (document.images) {
    var w = 832, h = 510; // width and height
    var fadeables = $('fadeables').getElementsByTagName('img');
    var nodes = $A(fadeables);
    nodes.each(function(node){
      // stuff the path to each image into pics:
      img_buf = new Image(w, h);
      img_buf.src = node.getAttribute("src");
      pics.push( img_buf );
    });
		Appear(0, 1);
  }
}

function onAppear(first_image, second_image){   
  // swap the images so that the one that has been faded in is in the outer div
  // and the next one to be faded in is waiting in the invisible inner div...
  document.getElementById("outer_fade").style.background = 'url('+first_image+')';
  document.getElementById("inner_fade").style.display = 'none';
  document.getElementById("inner_fade").style.background = 'url('+second_image+')';
}

function Appear(pic_one_id, pic_two_id){
  var one_id, two_id;

  // initial fade-in
  new Effect.Appear('inner_fade');

  // pic one becomes pic two, the one that has been morphed to...
  one_id = pic_two_id;

  // if we have come to end of pics[], restart from the beginning...
  if(pic_two_id == pics.length-1)
    two_id = 0;
  else
    two_id = pic_two_id+1;

  // get the pics to pass to onAppear...
  pic_one = pics[one_id];
  pic_two = pics[two_id];

  setTimeout("onAppear('"+pic_one.src+"', '"+pic_two.src+"')", 3000);
  setTimeout("Appear("+one_id+", "+two_id+")", 4000);   
}

// adds unobtrusive onload to auto-run the fader
Event.observe(window, 'load', function() {
  init_fader(); }
);