var image_id = "slide_image";

var image_display_time = 3000;





var images = [

"img/top_image1.jpg",

"img/top_image2.jpg",

"img/top_image3.jpg",

"img/top_image4.jpg"


];





document.write("<img src='"+images[0]+"' id='slide_image'>");



//image preload ...

var tmp = [];

for(i in images)

{

  tmp[i] = new Image();

  tmp[i].src = images[i];

}





function set_alpha(id, a)

{

  var img = document.getElementById(id);

  img.style.filter="alpha(Opacity="+a+")";

}



function set_img_src(id, src)

{

  var img = document.getElementById(id);

  img.src=src;

}



var fade_in_alpha = 0;

var fade_out_alpha = 100;

var current_image = 0;

function replace_image()

{

  set_alpha(image_id, fade_out_alpha);

  if(fade_out_alpha > 0)

  {

    fade_out_alpha-=5;

  }else

  {

    fade_out_alpha = 100;

    current_image = (current_image == (images.length-1))?0:current_image+1;

    set_img_src(image_id, images[current_image]);

    fade_in();

    return;

  }

  setTimeout("replace_image()", 100);

}



function fade_in()

{ 

  set_alpha(image_id, fade_in_alpha);

  if(fade_in_alpha < 100)

  {

    fade_in_alpha+=5;

  }else

  {

    fade_in_alpha = 0;

    setTimeout("replace_image()", image_display_time);

    return;

  }

  setTimeout("fade_in()", 100);

}





setTimeout("replace_image()", image_display_time);