function opacity(id, opacStart, opacEnd, millisec) {
  //speed for each frame
  var speed = Math.round(millisec / 100);
  var timer = 0;
  
  //determine the direction for the blending, if start and end are the same nothing happens
  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) {
  if (document.getElementById(id)) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
  }
} 

var numImages=JS_num_images;

// Initialize back and next buttons for first load
var nextImg = 1;
var backImg = 0;
var curImage = 0;

// Changes the main image  
function imgChange(img_number) {
  // Check that browser will allow image changes
  if (document.images) {
    
    // Check that next image exits and is loaded
    if (slide_image[img_number] && slide_image[img_number].complete) {
      var target=0;
      // Sprecify target (supports old versions too)
      if (document.images.mainImg) {
        target=document.images.mainImg;
      }
      if (document.all && document.getElementById("mainImg")) {
        target=document.getElementById("mainImg");
      }

      // make sure target is valid.
      if (target) { 
      
        // Change the image
        target.src = slide_image[img_number].src;
        changeOpac(0, "mainImg");
        target.width = JS_width[img_number];
        target.height = JS_height[img_number];
        curImage = img_number;

        //fade in
        opacity("mainImg", 0, 100, 1500);
        
        // Control banner image
        if (img_number == 1) {
          var target=0;
          // Sprecify target (supports old versions too)
          if (document.images.banner_image) {
            target=document.images.banner_image;
          }
          if (document.all && document.getElementById("banner_image")) {
            target=document.getElementById("banner_image");
          }
          // Change the banner image
          target.src = 'images/homepage/slideshow/summer_banner.gif';
          changeOpac(0, "banner_image");
          opacity("banner_image", 0, 100, 1500);
        } else if (img_number == 0) {
          var target=0;
          // Sprecify target (supports old versions too)
          if (document.images.banner_image) {
            target=document.images.banner_image;
          }
          if (document.all && document.getElementById("banner_image")) {
            target=document.getElementById("banner_image");
          }
          // Change the banner image
          target.src = 'images/homepage/slideshow/winter_banner.gif';
          changeOpac(0, "banner_image");
          opacity("banner_image", 0, 100, 1500);
        }     
        
      }
      
      // Control display and function of next button
      nextImg = img_number;
      if (img_number == JS_num_images) {
       nextImg=0;
      } else {
       nextImg++;
      }
      
      // Control display and function of back button
      backImg = img_number;
      if (img_number == 0) {
       backImg=JS_num_images;
      } else {
       backImg--;
      }

    }
    else { // If image not loaded, check again in 500ms
      setTimeout("imgChange()", 500);
    }
  }
}

// Initialize timer
var timer;

function play() {
  // clear timeout
  clearTimeout(timer);
  
  // Set the delay for next image (milliseconds)
  timer=setTimeout ("play()", 6000);
  
  //fade out
  opacity("mainImg", 100, 1, 1500);
  
  //fade out banner
  opacity("banner_image", 100, 1, 1500);
  
  // Change image (delay to wait for fade out)
  setTimeout ("imgChange(curImage)", 1500);
   
  if(curImage == numImages) {
    curImage = 0;
  } else {
    curImage++;
  }  
}

function pause() {
  // clear timeout
  clearTimeout(timer);
} 

//start playing as default
play();