// MUST define these globally
var imageArrayIndex = 0; // set initially to zero

var PICS = new Array() // don't edit this

// define images below
PICS[0] = 'slideshow_images/sms_silver_anniversary_2010.jpg';
PICS[1] = 'slideshow_images/march2million_webads.jpg';
PICS[2] = 'slideshow_images/websites_webads.jpg';
PICS[3] = 'slideshow_images/sms_congregation.jpg';
PICS[4] = 'slideshow_images/facfi_foundation.jpg';
PICS[5] = 'slideshow_images/brothers_congregation.jpg';
PICS[6] = 'slideshow_images/retreat_house_banner.jpg';
PICS[7] = 'slideshow_images/sharing_christ_home.jpg';
PICS[8] = 'slideshow_images/worldvillages_banner.jpg';
PICS[9] = 'slideshow_images/sms_biga_campus.jpg';
PICS[10] = 'slideshow_images/sms_adlas_campus.jpg';
PICS[11] = 'slideshow_images/sms_talisay_campus.jpg';
PICS[12] = 'slideshow_images/sms_minglanilla_campus.jpg';
PICS[13] = 'slideshow_images/father_al_banner.jpg';
PICS[14] = 'slideshow_images/mother_michaela_banner.jpg';

// will preload the images
var PICS_PRELOADED = new Array()
for (i=0; i<PICS.length; i++)
{
  PICS_PRELOADED[i] = new Image(610,290);
  PICS_PRELOADED[i].src = PICS[i];
}

var MAX_IMAGES = 15; // how many pics are there in the PICS array

var SLIDESHOW_SPEED = 9000; // image-to-image delay

var TRANSITION_DELAY = 700; // fading delay

var timeoutID = null;

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) {
  var object = document.getElementById(id).style; 
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
  //if an element is invisible, make it visible, else make it ivisible
  if(document.getElementById(id).style.opacity == 0) {
    opacity(id, 0, 100, millisec);
  } else {
    opacity(id, 100, 0, millisec);
  }
}

function blendimage(divid, imageid, imagefile, millisec) {
  var speed = Math.round(millisec / 100);
  var timer = 0;
  
  //set the current image as background
  document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
  
  //make image transparent
  changeOpac(0, imageid);
  
  //make new image
  document.getElementById(imageid).src = imagefile;

  //fade in image
  for(i = 0; i <= 100; i++) {
    setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
    timer++;
  }
}

function currentOpac(id, opacEnd, millisec) {
  //standard opacity is 100
  var currentOpac = 100;
  
  //if the element has an opacity set, get it
  if(document.getElementById(id).style.opacity < 100) {
    currentOpac = document.getElementById(id).style.opacity * 100;
  }

  //call for the function that changes the opacity
  opacity(id, currentOpac, opacEnd, millisec)
}

function runSlideShow()
{
  //blendimage('slideshow_images_div','slideshow_images_img', PICS[imageArrayIndex],TRANSITION_DELAY)
  blendimage('slideshow_images_div','slideshow_images_img', PICS_PRELOADED[imageArrayIndex].src,TRANSITION_DELAY)
  imageArrayIndex++;
  if (imageArrayIndex == MAX_IMAGES)
  {
    imageArrayIndex = 0;
  }
  timeoutID = setTimeout("runSlideShow()",SLIDESHOW_SPEED);
}

function pauseSlideShow()
{
  if (timeoutID != null)
  {
      clearTimeout(timeoutID);
  }
  timeoutID = null;
}

function restartSlideShow()
{
  setTimeout("runSlideShow()",SLIDESHOW_SPEED);
}