var imageList = new Array();
    pic0 = new Image(907,202);
    pic0.src = "/biogroei/images/banner_1.jpg";
    imageList[0] = pic0;

    pic1 = new Image(907,202);
    pic1.src = "/biogroei/images/banner_2.jpg";
    imageList[1] = pic1;

    pic2 = new Image(907,202);
    pic2.src = "/biogroei/images/banner_3.jpg";
    imageList[2] = pic2;

    pic3 = new Image(907,202);
    pic3.src = "/biogroei/images/banner_4.jpg";
    imageList[3] = pic3;

    pic4 = new Image(907,202);
    pic4.src = "/biogroei/images/banner_5.jpg";
    imageList[4] = pic4;

    pic5 = new Image(907,202);
    pic5.src = "/biogroei/images/banner_6.jpg";
    imageList[5] = pic5;

    pic6 = new Image(907,202);
    pic6.src = "/biogroei/images/banner_7.jpg";
    imageList[6] = pic6;

    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;

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

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

	}