// global image variables
    var pic1 = 1;
    

    // preload images
    var image1 = new Image()
    image1.src= "images/slide1.jpg"
    var image2 = new Image()
    image2.src= "images/slide2.jpg"
    var image3 = new Image()
    image3.src= "images/slide3.jpg"

// fades image to white
function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 
   if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        }
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i++) 
            { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
}

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 90); 
    object.MozOpacity = (opacity / 90); 
    object.KhtmlOpacity = (opacity / 90); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
} 

// initial function called by page
// calls the shiftOpacity method for each instance of an image
function beginSlideShow() {
   shiftOpacity('imageOne', 1000);
}

function shiftOpacity(id, millisec) { 
    // fades image out then immediately fades it back
   opacity(id, 0, 100, millisec); 
   // change image
   var name;
   pic1 = pic1 + 1;
   if (pic1 > 3) {
      pic1 = 1;
   }
   // set name to each of the preloaded images
   if (pic1 == 1) {
      name = image1.src;
   }
   else if (pic1 == 2) {
      name = image2.src;
   }
   else {
      name = image3.src;
   }
   var t;
   t = setTimeout("opacity('imageOne', 100, 0, 1000)", 10000);
   document.imageOne.src = name;
   var m;
   m = setTimeout("shiftOpacity('imageOne', 1000)", 10000);
}