//preload the images...
var pics_array = new Array();

function change_images(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...
  $('outer').setStyle({'background': 'url('+first_image+')'});
  $('inner').hide().setStyle({'background': 'url('+second_image+')'});
}

function appear(pic_one_id, pic_two_id) {
  // id of img in array - pic_one_id, pic_two_id
  var one_id, two_id;
  //fade in the first time..
  $('inner').appear();
  //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 array, start from start again...
  if(pic_two_id == pics_array.length-1)
  	two_id = 0;
  else
  	two_id = pic_two_id+1;
  //document.getElementById('output').innerHTML += one_id +' '+ two_id +'<br>';
  //get the pics to pass to change_images...
  pic_one = pics_array[one_id];
  pic_two = pics_array[two_id];
  //document.getElementById('output').innerHTML += pic_one.src +' '+ pic_two.src +'<br>';
  setTimeout(function(){ change_images(pic_one.src, pic_two.src) }, 3000);
  setTimeout(function(){ appear(one_id, two_id) }, 4000);		

}

function front_images_load() {
  $('outer').setStyle({'background': 'url('+pic0.src+')'}).show(); 
  $('inner').hide().setStyle({'background': 'url('+pic1.src+')'}); 
  setTimeout(function(){ appear(0, 1); }, 2000);
}