<!--
// preload images
var imgs = new Array()  // use an Array so we can use indices effectively
imgs[1] = new Image()
imgs[1].src = "../images/test1.jpg"
imgs[2] = new Image()
imgs[2].src = "../images/test2.jpg"
imgs[3] = new Image()
imgs[3].src = "../images/test3.jpg"
imgs[4] = new Image()
imgs[4].src = "../images/test4.jpg"

/* set_opacity: of main image,
     0: totally opaque, completely blocking out image
   100: totally transparent, completely revealing image
*/
function set_opacity(opacity) 
{
  var main = document.getElementById("main")
  main.style.MozOpacity = opacity/100;
  main.style.filter = 
	 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}

var opacity = 100
var timer = null

/* 
  fade_out/fade_in: 
    fade_out:
      opacity goes 100 -> 0 in 20 steps of 5, 1 step per 50 ms.
      thus 20 * 50 = 1000 ms = 1sec to fade out

    fade_in:
      opacity goes 0 -> 100 in 20 steps of 5, 1 step per 50 ms.
      thus 1sec to fade in
*/
function fade_out() {   // called every 50ms. when active
  opacity = opacity - 5

  set_opacity(opacity)
  
  if (opacity == 0) { // completely faded out
	
    // stop fade_out timer
    clearInterval(timer)

    // change to next image
    var main = document.getElementById("main")
    main.src = imgs[ind].src

    //var num = document.getElementById("num")
    //num.innerHTML = ind		
		
    // start fade_in timer
    timer = setInterval( "fade_in()", 50 ) // every 50 millisec
  }
}

function fade_in() {   // called every 50ms. when active
  opacity = opacity + 5

  set_opacity(opacity)
  
  if (opacity == 100) { // next image faded in completely

    // stop fade_in timer, set up next segment timer
    clearInterval(timer)
    timer = setInterval( "next_img()", 7000 )  
  }
}

var ind = 1;

/* next_img:
     change index to next image. 
     start fade out of current (takes 1 sec.)
     fade_out, when done starts fade in of new image (takes 1 sec.)
*/

function next_img() {
  ind = ind + 1
  if (ind > 4) ind = 1

  // stop segment timer start fade_out/fade_in 
  clearInterval(timer)
  timer = setInterval( "fade_out()", 50 ) // every 50 millisec
}

// set the initial image and start the timer
function init() 
{
  var main = document.getElementById("main")
  main.src = imgs[1].src

  //var num = document.getElementById("num")
  //num.innerHTML = 1

  // set change image to start in 7 sec.
  timer = setInterval( "next_img()", 7000 )
}
// -->