// Assumes there is a "src" called "banner_img"
// inside a div called "banner_div".  Uses the
// same logic as index.html to smoothly rotate
// through the banner images.

// two overlapping images, prev and next
// fade in next, push next to prev, make next invisible, then load next, repeat
// (alternatively, start by pushing next to prev. advantage is only one
// procedure, but have to preload next picture into a dummy object.)
// Ideally, I could use javascript and cookies to start with the one they
// left from (simulating a frame), but in case javascript is disabled I
// need to specify the first picture, which is going to get loaded first,
// so that wouldn't work.  (I tried using document.write to overlay the second
// picture over the first, but because it's in a div I couldn't get them to align
// properly.)
// Note: Can't use background image because it doesn't scale :-(
// Some code from http://www.brainerror.net/scripts_js_blendtrans.php

var banner = {
  init : function() {
    // abort if elements not found
    if(!document.getElementById('prev') || !document.getElementById('next'))
      return;

    // initialize variables
    bnext = document.getElementById('next');
    bprev = document.getElementById('prev');
    preload = new Image();
    displayTime = 2000; // display time in milliseconds
    transitionTime = 2000; // transition in milliseconds
    speed = Math.round(transitionTime/20);
    pic = 0;
    picsrc = [ 'images/banner_dormer.jpg',
      'images/banner_bills_room.jpg',
      'images/banner_boys_room.jpg',
      'images/banner_boys_room2.jpg',
      'images/banner_dining.jpg',
      'images/banner_dining2.jpg',
      'images/banner_bath.jpg',
      'images/banner_kathryns_room1.jpg',
      'images/banner_kathryns_room2.jpg',
      'images/banner_parlor1.jpg',
      'images/banner_parlor2.jpg',
      'images/banner_parlor3.jpg',
      'images/banner_parlor4.jpg'
    ];

    // Start the cycle
    setTimeout("banner.fade_in()",displayTime);
    // preload all pics
    for (var i in picsrc) {
      preload.src = picsrc[i];
    }
  },

  fade_in : function() {
    // set new foreground image
    (pic < picsrc.length-1) ? pic++ : pic=0;
    bnext.src = picsrc[pic];
    // set events to fade in.  Since it is already 0, and it
    // will become 100 when we post it to the background, we
    // only step through 1-19 (5% to 95%)
    for(i = 1; i <= 19; i++)
      setTimeout("banner.changeOpac("+i*5+")",(i * speed));
    setTimeout("banner.change()",transitionTime);
  },

// Note: To prevent flicker in Firefox, need a break
// (even 1ms) between setting opacity to 0 and loading the
// next pic
  change : function() {
    // set the current image as background
    bprev.src = bnext.src; // could also use picsrc[pic]
    // make foreground image transparent
    this.changeOpac(0);
    // wait a specified time, and start again
    setTimeout("banner.fade_in()",displayTime);
  },

//document.getElementById("error").innerHTML = bnext.src;

  //change the opacity for different browsers
  changeOpac : function(opacity) {
    bnext.style.filter = "alpha(opacity=" + opacity + ")";
    bnext.style.KhtmlOpacity = (opacity / 100);
    //bug in Firefox: pictures flicker if you set opacity
    //to 1, so always keep it slightly below 1.
    if (opacity > 99) opacity=99;
    bnext.style.opacity = (opacity / 100);
    bnext.style.MozOpacity = (opacity / 100);
  }
}