//These global variables will be used to iterate over the images array from 
//within the control functions. 
var currentBannerImage = -1; 
//Starts at -1 to display first image for three seconds.
var currentSlideShowImage = 0;

/**  This method will act as the controller for the program, and make the 
 *   appropriate method calls that are necessary for the webpage to function
 *   properly.  
 */
function mainMethod() {
  rollOverInitialization();
}
  
/** This function will iterate through the pictures in the slide show in 
 *  reverse order.  When the link is clicked that calls this method, it will
 *  find the previous image in the image array, and swap it with the current
 *  image.  
 */
function previousImageInSlideShow() {
  var slideShowFolder = "slideShowImages/";
  var image01 = slideShowFolder + "houseFront01.jpg";
  var image02 = slideShowFolder + "houseFront02.jpg";
  var image03 = slideShowFolder + "houseSide01.jpg";
  var image04 = slideShowFolder + "housePool01.jpg";
  var image05 = slideShowFolder + "housePool02.jpg";
  var image06 = slideShowFolder + "housePool03.jpg";
  var image07 = slideShowFolder + "kitchenArea.jpg";
  var image08 = slideShowFolder + "diningArea.jpg";
  var image09 = slideShowFolder + "livingRoom.jpg";
  var image10 = slideShowFolder + "masterBedroom.jpg"; 
  var image11 = slideShowFolder + "secondBedroom01.jpg"; 
  var image12 = slideShowFolder + "secondBedroom02.jpg";
  var image13 = slideShowFolder + "bathroom.jpg";
  var image14 = slideShowFolder + "washerDryer.jpg";                  
  var imageArray = new Array(image01, image02, image03, image04, image05, 
                             image06, image07, image08, image09, image10,
                             image11, image12, image13, image14);
  var imageCount = imageArray.length;
  
  if(document.images) {
    if(currentSlideShowImage == 0) {
      //This reverts to the last image in the array if the current image is
      //the first image.  
      currentSlideShowImage = imageCount - 1;
    }
    else {
      currentSlideShowImage--;
    }
    //Now that the proper index of the array is known, the src of the image
    //can be changed.  
    var slideShowImage = document.getElementById("slideShowImage");
    slideShowImage.src = imageArray[currentSlideShowImage];
  }
}

/** This function will iterate through the pictures in the slide show in 
 *  forward order.  When the link is clicked that calls this method, it will
 *  find the next image in the image array, and swap it with the current
 *  image.  
 */
function nextImageInSlideShow() {
  var slideShowFolder = "slideShowImages/";
  var image01 = slideShowFolder + "houseFront01.jpg";
  var image02 = slideShowFolder + "houseFront02.jpg";
  var image03 = slideShowFolder + "houseSide01.jpg";
  var image04 = slideShowFolder + "housePool01.jpg";
  var image05 = slideShowFolder + "housePool02.jpg";
  var image06 = slideShowFolder + "housePool03.jpg";
  var image07 = slideShowFolder + "kitchenArea.jpg";
  var image08 = slideShowFolder + "diningArea.jpg";
  var image09 = slideShowFolder + "livingRoom.jpg";
  var image10 = slideShowFolder + "masterBedroom.jpg"; 
  var image11 = slideShowFolder + "secondBedroom01.jpg"; 
  var image12 = slideShowFolder + "secondBedroom02.jpg";
  var image13 = slideShowFolder + "bathroom.jpg";
  var image14 = slideShowFolder + "washerDryer.jpg";                  
  var imageArray = new Array(image01, image02, image03, image04, image05, 
                             image06, image07, image08, image09, image10,
                             image11, image12, image13, image14);
  var imageCount = imageArray.length;
  if(document.images) {
    if(currentSlideShowImage == (imageCount - 1) ) {
      //This reverts to the first image in the array if the current image is
      //the last image.  
      currentSlideShowImage = 0;
    }
    else {
      currentSlideShowImage++;
    }
    //Now that the proper index of the array is known, the src of the image
    //can be changed.  
    var slideShowImage = document.getElementById("slideShowImage");
    slideShowImage.src = imageArray[currentSlideShowImage];
  }
}

/** This method initializes the roll over buttons.  It iterates over the images
 *  array, and locates all of the images whose parent tags are links.  If
 *  the Id of the Image contains "navigationImage" then it is assumed that 
 *  these images will have roll over buttons.  This allows other image links 
 *  to exist on the page without having roll overs.  Prof. Odeh said that I 
 *  should receive extra credit for doing it this way.  
 */
function rollOverInitialization() {
  var numberOfImages = document.images.length;
  for(var i = 0; i < numberOfImages; i++) {
    var currentImage = document.images[i];
    var parentTagIsALink = currentImage.parentNode.tagName == 'A';  
    var isNavigationImage = false;
    
    //If navigationImage is found in the string, its value will be different 
    //from -1.  
    if(currentImage.id.indexOf("navigationImage") != -1) {
      isNavigationImage = true;
    }
 
    if(parentTagIsALink && isNavigationImage) {
      setupRollOver(currentImage);
    }
  }
}

/** This method will set up the roll over events, by adding properties to the 
 *  current image object that will store the src of images when these events 
 *  occur.  For the mouse out, these images happen to be the same as the 
 *  existing images, but for the mouse over, a little bit of work has to be
 *  done to change the src.  
 */
function setupRollOver(currentImage) {
  //We want to keep the current src when a mouse out event occurs.  
  currentImage.mouseOutImage = new Image();  
  currentImage.mouseOutImage.src = currentImage.src;
  currentImage.onmouseout = mouseOutEvent;
  
  //We want to change the src of the image when a mouse over event occurs. 
  currentImage.mouseOverImage = new Image();
  //Following values will allow us to extract the relative path of the image,
  //so that the suffix _MouseOverOn.jpg can be added to the src.  
  var rolloverPathIndex = currentImage.src.indexOf("rolloverImages/");
  var underscoreIndex = currentImage.src.indexOf("_");
  var lengthOfRootName = underscoreIndex - rolloverPathIndex;
  var rootNameOfImage = currentImage.src.substr(rolloverPathIndex, 
                            lengthOfRootName);
  currentImage.mouseOverImage.src = rootNameOfImage + "_mouseOverOn.jpg";
  currentImage.onmouseover = mouseOverEvent;
}

/** This method will simply change the src of the mouse over image to the one
 *  that is stored in the mouseOverImage.src property of the given image. 
 */
function mouseOverEvent() {
  this.src = this.mouseOverImage.src;
}

/** This method will simply change the src of the mouse over image to the one
 *  that is stored in the mouseOutImage.src property of the given image. 
 */
function mouseOutEvent() {
  this.src = this.mouseOutImage.src;
}