//images to be used in the animation
var homeImages = [ 'img/home-pool.jpg',
                   'img/home-4445.jpg',
                   'img/home-barn.jpg',
                   'img/home-tidy.jpg' ] ; //last image should always match original holding image

//setup variables (do not modify below here)
var currHomeImage = 0 ;
var numHomeImages = homeImages.length ;
var availStrips = [ false, true, true, true, true, true, true, true ] ;
var stripsLeft = 7 ;
var fadeOutMS = 1500 ; //fade-out in milliseconds
var fadeInMS = 1000 ; //fade-in in milliseconds
var switchStripMS = 2550 ; //time between strips getting switched in milliseconds
var initialDelayMS = 5000 ; //time to wait before starting the animation (ie, how long to hold originally loaded image).

function changeStrip() {
  var thisStripNum = Math.ceil( Math.random() * 7 ) ; //generate a random number between 1-7 inclusive
  //has that strip already been displayed for this image?
  while( availStrips[thisStripNum] == false ) {
    //it has, so generate another number (hopefully available)
    thisStripNum = Math.ceil( Math.random() * 7 ) ;
  }

  var thisStripTdId = '#home-td-s' + thisStripNum ;
  var thisStripImgId = '#home-img-s' + thisStripNum ;
  var fadeToImg = homeImages[currHomeImage] ; //store image path so that it doesn't get changed by the time the image would get called
  $(thisStripImgId).hide().attr( "src", "img/white-strip.gif" ).fadeIn( fadeInMS, function () {
    xPos = ( ( thisStripNum - 1 ) * 87 ) + ( ( thisStripNum - 1 ) * 15 ) ;
    $(thisStripTdId).css( "background-image", ( "url(" + fadeToImg + ")" ) ).css( "background-position", ( "-" + xPos + "px 0px" ) ) ;
    $(thisStripImgId).fadeOut( fadeOutMS );
  });

  //mark the current strip as done
  availStrips[thisStripNum] = false ;
  stripsLeft-- ;
  if( stripsLeft < 1 ) {
//alert ( 'out of strips. pick the next image and reset arrays!' ) ;
    currHomeImage++ ;
    //check if we have now used all the images
    if( currHomeImage >= numHomeImages ) {
      currHomeImage = 0 ; //reset used image to start of loop
    }
    availStrips = [ false, true, true, true, true, true, true, true ] ;
    stripsLeft = 7 ;
  }

  setTimeout('changeStrip()', switchStripMS ) ;
}

$(document).ready(function(){

  //transfer foreground images to the background
  $("#home-td-s1").css( "background-image", ( "url(img/home-strip-1-nologo.jpg)" ) ) ;
  $("#home-td-s2").css( "background-image", ( "url(img/home-strip-2.jpg)" ) ) ;
  $("#home-td-s3").css( "background-image", ( "url(img/home-strip-3.jpg)" ) ) ;
  $("#home-td-s4").css( "background-image", ( "url(img/home-strip-4.jpg)" ) ) ;
  $("#home-td-s5").css( "background-image", ( "url(img/home-strip-5.jpg)" ) ) ;
  $("#home-td-s6").css( "background-image", ( "url(img/home-strip-6.jpg)" ) ) ;
  $("#home-td-s7").css( "background-image", ( "url(img/home-strip-7.jpg)" ) ) ;

  //switch the foreground images to transparent images
  $(".home-strip-img").attr("src", "img/trans-strip.gif");

  //start the animation
  setTimeout('changeStrip()', initialDelayMS ) ;
});