var slideIndex = 0; // which slide are we viewing?
var fadeTimer = 500; // time, in seconds, it takes to swap images
var swapTimer = 5; // time, in seconds, between image swaps
var fadeBox = '';
var anchor = '';
var popupDiv = '';
var timerSwap = '';
var timerPop = '';
var popupTop = 400;
var slidesimg = new Array();
 
var jsSlideShow = {
  addEvent: function(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent) {
      var r = elm.attachEvent('on' + evType, fn);
      return r;
    } else {
     elm['on' + evType] = fn;
    }
  },

  initSwap: function() {
    fadeBox = document.getElementById('fadeBox');
    anchor = document.createElement('a'); // a new link
    anchor.href = slides[slideIndex][3];
    fadeBox.appendChild(anchor);
    popupDiv = document.createElement('div'); // popup box
    popupDiv.className = 'popuphome';
    var h2 = document.createElement('h2');
    h2.setAttribute('id', 'popuph2');
    popupDiv.appendChild(h2);
    var p = document.createElement('p');
    p.setAttribute('id', 'popupp');
    popupDiv.appendChild(p);
    anchor.appendChild(popupDiv);
    jsSlideShow.addEvent(fadeBox, 'mouseover', jsSlideShow.stopTimer, false);
    jsSlideShow.addEvent(fadeBox, 'mouseout', jsSlideShow.restartTimer, false);
    // set up the actual images
    for(var i=0; i<slides.length; i++) {
        // hooray for the DOM
        var slide = document.createElement('img'); // a new image
        slide.src = "images/banners/" + slides[i][2]; // should show this image
        slide.style.position = 'absolute'; // important so images stay on top of each other
        slide.style.left = '0';
        slide.style.opacity = '0'; // init to transparent (CSS2)
        slide.style.filter = 'alpha(opacity:0)'; // init to transparent (MSIE)
        anchor.appendChild(slide); // put the image in the box
        slidesimg[i] = slide; // reassign to slide image array
        // if it's the first image, let's show it now to avoid waiting
        if (i==0) { 
            jsSlideShow.fade(i,1); // fade it in!
            timerSwap = setTimeout(jsSlideShow.doSwap, swapTimer*1000); // start the swap timer!
        }
        // repeat for each slide
    }
  },
 
  doSwap: function() {
    var s1 = slideIndex; // where *are* we?
    var s2 = s1+1==slides.length?0:s1+1; // either the next or the first
    // we just wrapped to the beginning if we hit the end of the array, so...
    slideIndex = s2; // update slide index
    jsSlideShow.fade(s1,0); // fade the old slide out!
    jsSlideShow.fade(s2,1); // fade the new slide in!
    anchor.href = slides[s2][3]; // update the link
    jsSlideShow.hidePopup(slideIndex); // hide any popups
    timerSwap = setTimeout(jsSlideShow.doSwap, swapTimer*1000); // do it again in swapTimer seconds!
  },
 
  fade: function(whoid,dir) {
    var slide = slidesimg[whoid]; // get the slide element at index whoid
    var completed; // so we know when the fade is done
    var opac = parseFloat(slide.style.opacity,10); // get a reference value
    // increment if fading in, decrement if fading out
    if(dir > 0) { 
        opac += .1; // more opaque
        if(opac >= 1) {
            // fade is at max! fade done!
            completed = true;
        }
    } else {
        opac -= .1; // less opaque
        if(opac <= 0) {
            // fade is at min! fade done!
            completed = true;
        }
    }
    slide.style.opacity = opac; // set opacity (CSS2)
    slide.style.filter = 'alpha(opacity:'+(opac*100)+')'; // set opacity (MSIE)
    if(!completed) {
        // as long as the fade is not complete, keep doing this in 1/10 increments within fadeTimer seconds
        setTimeout("jsSlideShow.fade("+whoid+","+dir+")", parseInt(fadeTimer/10,10));
    }
  },
  
  stopTimer: function() {
    clearTimeout(timerSwap);
    jsSlideShow.showPopup(slideIndex);
  },
  
  restartTimer: function(e) {
    if (!e) var e = window.event; 
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg.tagName != 'BODY') {
      if (reltg.id == 'fadeBox') { return; } 
      reltg = reltg.parentNode; 
    } 
    jsSlideShow.hidePopup(slideIndex);
    timerSwap = setTimeout(jsSlideShow.doSwap, swapTimer*1000); // Start again
  },
  
  scrollPop: function() {
    if (popupTop == 300) {
      clearTimeout(timerPop);
    } else {
      popupTop -= 4;
      popupDiv.style.top = popupTop + 'px';
      timerPop = setTimeout(jsSlideShow.scrollPop, 10);
    }
  },
  
  showPopup: function(id) {
    var h2 = document.getElementById('popuph2');
    h2.innerHTML = slides[slideIndex][0];    
    var p = document.getElementById('popupp');
    p.innerHTML = slides[slideIndex][1];
    timerPop = setTimeout(jsSlideShow.scrollPop, 10);
  },
  
  hidePopup: function(id) {
    popupTop = 400;
    popupDiv.style.top = popupTop + 'px';
    clearTimeout(timerPop);
  },

  destroy: function() {
  }
}
 
jsSlideShow.addEvent(window, 'load', jsSlideShow.initSwap);
jsSlideShow.addEvent(window, 'unload', jsSlideShow.destroy);