var imageList = new Array();
    pic0 = new Image(605,160);
    pic0.src = "img/image_teaser.jpg";
    imageList[0] = pic0;

    pic1 = new Image(605,160);
    pic1.src = "img/image_teaser_2.jpg";
    imageList[1] = pic1;

    pic2 = new Image(605,160);
    pic2.src = "img/image_teaser_3.jpg";
    imageList[2] = pic2;

    pic3 = new Image(605,160);
    pic3.src = "img/image_teaser_5.jpg";
    imageList[3] = pic3;

    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("outerImageHolder").style.background = 'url('+first_image+')';
        document.getElementById("imageHolder").style.display = 'none';
        document.getElementById("imageHolder").style.background = 'url('+second_image+')';
	}

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

		//fade in the first time..
		new Effect.Appear('imageHolder');

		//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 == imageList.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 onAppear...
		pic_one = imageList[one_id];
		pic_two = imageList[two_id];

		//document.getElementById('output').innerHTML += pic_one.src +' '+ pic_two.src +'<br>';

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

	}