// Add thumbnail rollover and blowup preloading functionaltity. To implement, add a call to this javascript file to the page head, 
// place thumbnails within a div with class 'realEstateDetailThumbs', and wrap the thumbnails in anchors with the blow up source as the href:
// <img id="fullImage" src="blowup.jpg" />
// <div id="detailThumbs"> <a href="blowup.jpg"><img src="thumb.jpg"></a> </div>

var preloaded = [];

function initRollovers() {
 var container = document.getElementById('detailThumbs');
 if (!container) {
  return;
 }
 
 var anchors = container.getElementsByTagName('a');
 for (var a = 0; a < anchors.length; a++) {
  var anchor = anchors[a];
  
  // Preload image
  var src = anchor.href;
  var image = new Image();
  image.src = src;
  preloaded[a] = image;
  
  // Set active class if first thumbnail
  if (a == 0) {
   anchor.className = 'activeThumb';
  }
  
  // Reset href and mouseover to perform rollover
  var rollover = 'swapMainImage(\'' + src + '\', this)';
  anchor.href = 'javascript: ' + rollover;
  anchor.onmouseover = new Function(rollover);
 }
}

// Swap out main image on rollover
function swapMainImage(src, activeAnchor) {
 var mainImage = document.getElementById('fullImage');
 mainImage.src = src; 
 
 var container = document.getElementById('detailThumbs');
 if (!container) {
  return;
 } 
 
 var anchors = container.getElementsByTagName('a');
 for (var a = 0; a < anchors.length; a++) {
  var anchor = anchors[a];
  if (anchor.className = 'activeThumb' && anchor != activeAnchor) {
   anchor.className = '';
  }
  activeAnchor.className = 'activeThumb';
 }
}

// Initialize rollovers and image preload on page load
if (window.addEventListener){
  window.addEventListener("load", initRollovers, false);
} else if (window.attachEvent){
  window.attachEvent("onload", initRollovers);
}

// Slide show to fade photos out in a series
/* HTML should look something like this, where bannerx and bannerxHidden are absolutely positioned within a relatively positioned div. Hidden image should always appear before the visible one. Id for 
    image on top is configurable - the hidden image will be visibleId + "Hidden"

<div class="bannerPhoto"><img src="image_1.jpg" id="banner0Hidden"><img src="image_1.jpg" id="banner0"></div>
<div class="bannerPhoto"><img src="image_2.jpg" id="banner1Hidden"><img src="image_2.jpg" id="banner1"></div>

...

<script type="text/javascript">
  setImages(new Array("image_L8Z7685.jpg","image_L8Z7689.jpg","image_L8Z7660.jpg","image_L8Z7721.jpg","image_L8Z7672.jpg"));
</script>

<style>
.bannerPhoto {
 position: relative;
 width: 139px;
 height: 174px; 
}

.bannerPhoto img {
 position: absolute; 
}
</style>
 */
var fadeOrder = ["banner0","banner1","banner2","banner3","banner4"]; // These should match your bannerIds - place as many in the series as you wish
var fadeSpeed = 1750; // Time it takes for an image to fade out    
var fadeSetTimeout = 3500; // Time between fade sets  
var fadePhotoTimeout = 0; // Time between each photo fade
var shouldShuffleFadeOrder = true; // Randomize order of photo fadeouts

// Add shuffle function to arrays
Array.prototype.shuffle = function() {
  for (var i = 0; i < this.length; i++) {
    // Random item in this array.
    var r = parseInt(Math.random() * this.length);
    var obj = this[r];

    // Swap.
    this[r] = this[i];
    this[i] = obj;
  }
}

var images = [];  
var fadeIndex = 0;
var imageIndex = 0;
var id = "";
var hiddenId = "";
var preload = [];
var shouldShuffle = true;

// If we have enough images for 2 distinct sets, we can shuffle images
var isFullSet = false; 

// Call set
function setImages(slideShowImages) {  
  images = slideShowImages;
  //if (images.length >= (fadeOrder.length * 2)) {
    //isFullSet = true;  
  //}
  imageIndex = fadeOrder.length;
  
  // Preload images
  for (var a = 0; a < images.length; a++) {
   var img = new Image();
   img.src = images[a];
   preload[a] = img;
  }

  setFade();
}

function setFade() {
  if (shouldShuffleFadeOrder) {
    // Shuffle photo fade order
    fadeOrder.shuffle();
  }

  if (isFullSet && shouldShuffle) {   
    // Shuffle images if we have enough to make 2 distinct photo fade sets
    images.shuffle();
    shouldShuffle = false;
  }

  // Load up our new set of images to fade to
  var newImages = [];
  while (newImages.length < fadeOrder.length) {
    var newSrc = images[imageIndex];
    if (isFullSet) {
     // If this is a full set of images, check to make sure our image didn't appear in the last set.
     if (!isAlreadyShowing(newSrc)) {
      newImages[newImages.length] = newSrc;
     }
    } else {
     // If not a full set, just check to make sure our fade image isn't the same as our visible image.
     if (!matchesVisibleImage(newSrc, newImages.length)) {
      newImages[newImages.length] = newSrc;
     }
    }

    imageIndex++;
    
    if (imageIndex >= images.length) {
     imageIndex = 0;
     // If this is a full set of images, flag images for shuffling on the next fade through
     if (isFullSet) {    
      shouldShuffle = true;
     }
    }
  } 

  // Reset the hidden images behind the visible ones that we will fade to
  for (var a = 0; a < fadeOrder.length; a++) {
    var bannerId = fadeOrder[a];
    var hiddenImage = document.getElementById(bannerId + "Hidden");
     
    // Set hidden image source to new image.
    hiddenImage.src = newImages[a];
  }

  id = "";
  hiddenId = "";
  fadeIndex = 0;
  setTimeout(fadeNext, fadeSetTimeout);
}  

function fadeNext() {   
  if (fadeIndex >= fadeOrder.length) {
    // This set of fades is comlete - set up the next set
    setFade();
    return;
  }

  // Set the id and hidden id of this photo so that we can complete the photo fade
  id = fadeOrder[fadeIndex];  
  hiddenId = id + "Hidden";

  // Increment fade index to move on to next photo to fade
  fadeIndex++;
    
  // Fade out the photo on top
  $("#" + id).fadeOut(fadeSpeed, fadeNextTimeOut);
}  

function fadeNextTimeOut() {
  // Set last faded out image source to the new visible image so that we'll be ready for the next round of fades
  var fadedImage = document.getElementById(id);
  var newImage = document.getElementById(hiddenId);
  fadedImage.src = newImage.src;  
  $("#" + id).show();

  // if photo fade timeout is greater than zero, set a timeout, otherwise just move straight to the next photo to fade
  if (fadePhotoTimeout > 0) {
    setTimeout(fadeNext, fadePhotoTimeout);
  } else {
    fadeNext();
  }
}

function isAlreadyShowing(src) {
  for (var b = 0; b < fadeOrder.length; b++) {
    var bannerId = fadeOrder[b];
    var visibleImage = document.getElementById(bannerId);
    if (visibleImage.src = "file:///E:/clients/delaware/slide-show/" + src) {
      return true;
    }
  }
  return false;
}

function matchesVisibleImage(newSrc, index) {
  var bannerId = fadeOrder[index];
  var visibleImage = document.getElementById(bannerId);   
  if (visibleImage.src == "file:///E:/clients/delaware/slide-show/" + newSrc) {
    return true;
  } else {
    return false;
  }
}

// Calendar functions
function resetArrivalFields(date) {
 resetDateFields(date, "a");
}

function resetDepartureFields(date) {
 resetDateFields(date, "d");
}

function resetDateFields(date, prefix) {
 var values = date.split("/");
 document.getElementById(prefix + "m").value = values[0];
 document.getElementById(prefix + "d").value = values[1];
 document.getElementById(prefix + "y").value = values[2]; 
}

function setUpCalendars() {
 setUpCalendarIds('f_date_b', 'f_date_c');
}

function setUpCalendarIds(date1, date2) {

    Calendar.setup({
        weekNumbers : false,
        inputField     :    date1,      // id of the input field
        ifFormat       :    "%m/%d/%Y",       // format of the input field
        showsTime      :    false,            // will display a time selector
        button         :    "f_trigger_b",   // trigger for the calendar (button ID)
        singleClick    :    true,           // single-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });

    Calendar.setup({
        inputField     :    date2,      // id of the input field
        ifFormat       :    "%m/%d/%Y",       // format of the input field
        showsTime      :    false,            // will display a time selector
        button         :    "f_trigger_c",   // trigger for the calendar (button ID)
        singleClick    :    true,           // single-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
}