/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * MSS Slideshow (with headlines and captions) - 02/01/10
 * -----------------------------
 * THE SCRIPT LOOKS FOR THESE GLOBAL VARIABLES:
 * formalSlideCount (# of slides. Heretoforward referred to as N) 
 * mssFormalSlideDelay (ms to delay between slides)
 * mssFormalSlide[N] (image src for slide N)
 * mssFormalTitle[N] (title for slide N)
 * mssFormalText[N] (caption for slide N)
 * mssFormalLink[N] (link for slide N)
 * 
 * THE SCRIPT LOOKS FOR THESE ELEMENTS BY ID:
 * 'slide-back' (button which is for going back one slide)
 * 'slide-next' (button which is for advancing one slide)
 * 'slide-box-N' (box to jump directly to slide N)
 * 'slide-holder' (area where mouseover will pause the slideshow)
 * 'slide-image' (<IMG> tag showing the slide
 * 'slide-title' (Container for the title, using innerHTML)
 * 'slide-text' (Container for the caption, using innerHTML)
 * 'slide-link' (<A> tag for clicking on the current slide)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 

/* Preload images for the slides */                    
var formalSlides = new Array();
for (var i=0; i<formalSlideCount; i++) {
  formalSlides[i] = new Image();
  formalSlides[i].src = mssFormalSlide[i];
}

function initiateFormalSlide() {
  /* Grab the DOM elements, activate the boxes */
  var back = document.getElementById('slide-back');
  var next = document.getElementById('slide-next');
  var holder = document.getElementById('slide-holder');
  var box = [];
  for (var i=0; i<formalSlideCount; i++) {
    box[i] = document.getElementById('slide-box-'+i);
    if (!box[i]) {continue;}
    box[i].onclick=function() {
      goToSlide(parseInt(this.id.substr(this.id.lastIndexOf('-')+1)));
    }
  }

  /* Give functionality to buttons next/prev */
  if (back) {back.onclick=function() {goToSlide(currentSlide - 1)}}
  if (next) {next.onclick=function() {goToSlide(currentSlide + 1)}}
  
  /* Pause slideshow on mouseover */
  if (holder) {
    holder.onmouseover = function() {formalHaltSlideshow = true;}
    holder.onmouseout = function() {formalHaltSlideshow = false;}
  }
}

function goToSlide(nextSlide) {
  while (nextSlide<0) {nextSlide+=formalSlideCount;}
  nextSlide = nextSlide % formalSlideCount;
  /* Grab the DOM elements */
  var img = document.getElementById('slide-image');
  var title = document.getElementById('slide-title');
  var text = document.getElementById('slide-text');
  var link = document.getElementById('slide-link');
  var box = [];
  for (var k=0; k<formalSlideCount; k++) {
    box[k] = document.getElementById('slide-box-'+k);
  }

  // update slide image
  img.src = formalSlides[nextSlide].src;
  // update title, text, link, and box colors, if they exist
  if (title && mssFormalTitle[nextSlide]) {title.innerHTML = mssFormalTitle[nextSlide];};
  if (text && mssFormalText[nextSlide]) {text.innerHTML = mssFormalText[nextSlide];};
  if (link && mssFormalLink[nextSlide]) {link.href = mssFormalLink[nextSlide];};
  for (j=0; j<formalSlideCount; j++) {
    if (!box[j]) {continue;}
    if (j==nextSlide) box[j].style.backgroundColor='#ffffff'; /*<-- BG-COLOR OF SELECTED BOX*/
    else box[j].style.backgroundColor='transparent';
  }
  
  // update the global variable for the current slide
  currentSlide = nextSlide;  
}

/* Start the slides rotating automatically */
function formalSlideRotate() {
  if (!formalHaltSlideshow) goToSlide(currentSlide + 1);
}

var currentSlide = 0;
var formalHaltSlideshow = false;
initiateFormalSlide();
setInterval(formalSlideRotate, mssFormalSlideDelay || 5000);